:root {
    --bg: #081226;
    --bg-2: #0d1b34;
    --card: #0f1f3d;
    --border: #1f325a;
    --text: #e6eefc;
    --muted: #98acd1;
    --primary: #4f8cff;
    --danger: #ff6b6b;
    --good: #22c55e;
    --mid: #f59e0b;
    --shadow: 0 16px 32px rgba(2, 9, 23, 0.45);
}

* { box-sizing: border-box; }

body.site-body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(1000px 450px at 5% -10%, #1a2e57 0%, transparent 60%),
        radial-gradient(1200px 500px at 95% -20%, #123068 0%, transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

.public-header {
    position: relative;
    z-index: 120;
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid var(--border);
    background: rgba(8, 18, 38, 0.82);
    backdrop-filter: blur(8px);
}

.public-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.public-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.public-brand-text {
    min-width: 0;
}

.public-brand-logo-link,
.public-brand-title-link {
    text-decoration: none;
    color: inherit;
}

.public-brand-logo-link {
    flex-shrink: 0;
    line-height: 0;
    border-radius: 0;
}

.public-brand-logo-link:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.95);
    outline-offset: 3px;
}

.public-brand-title-link:focus-visible .public-brand {
    outline: 2px solid rgba(147, 197, 253, 0.95);
    outline-offset: 4px;
    border-radius: 4px;
}

.public-brand-title-link:hover .public-brand {
    opacity: 0.92;
}

.public-brand-text .public-brand {
    margin: 0;
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.12;
    text-wrap: balance;
}

.public-brand-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 100px;
    border-radius: 0;
    object-fit: contain;
    border: none;
    box-shadow: none;
}

.public-brand-tagline {
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
    line-height: 1.35;
}

.public-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 0;
    row-gap: 10px;
}

/* Hairline dividers between items (not after the last) */
.public-nav > *:not(:last-child) {
    padding-right: 14px;
    margin-right: 14px;
    border-right: 1px solid rgba(86, 132, 206, 0.28);
}

/* Flat header links — no pill / glass bubble */
.public-nav a,
.public-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 2px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.3;
    color: var(--muted);
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.public-nav a:hover,
.public-nav-dropdown-trigger:hover {
    color: var(--text);
    border-bottom-color: rgba(125, 211, 252, 0.5);
}

.public-nav a:focus-visible,
.public-nav-dropdown-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 75%, #7dd3fc);
    outline-offset: 4px;
    border-radius: 2px;
}

.public-nav-item-icon {
    font-size: 13px;
    width: 1.1em;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.55;
    color: rgba(125, 211, 252, 0.95);
    transition: opacity 0.18s ease, color 0.18s ease;
}

.public-nav a:hover .public-nav-item-icon,
.public-nav-dropdown-trigger:hover .public-nav-item-icon,
.public-nav-teams-wrap.is-open .public-nav-dropdown-trigger .public-nav-item-icon {
    opacity: 0.95;
    color: rgba(186, 230, 253, 1);
}

.public-nav a.public-nav-signin {
    color: #dbeafe;
    font-weight: 700;
}

.public-nav a.public-nav-signin:hover {
    color: #f0f9ff;
    border-bottom-color: rgba(56, 189, 248, 0.65);
}

.public-nav-teams-wrap {
    position: relative;
}

.public-nav-dropdown-trigger {
    gap: 8px;
    padding: 6px 2px;
    font-family: inherit;
    cursor: pointer;
}

.public-nav-dropdown-chevron {
    font-size: 8px;
    opacity: 0.55;
    margin-top: 1px;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}

.public-nav-teams-wrap.is-open .public-nav-dropdown-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

.public-nav-dropdown-trigger:hover .public-nav-dropdown-chevron,
.public-nav-teams-wrap.is-open .public-nav-dropdown-trigger .public-nav-dropdown-chevron {
    opacity: 0.9;
}

.public-nav-teams-wrap.is-open .public-nav-dropdown-trigger {
    color: var(--text);
    border-bottom-color: rgba(125, 211, 252, 0.72);
}

.public-teams-panel {
    z-index: 220;
    width: 100%;
    margin: -6px 0 0;
    padding: 0 16px;
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.public-teams-panel.is-open {
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 12px;
    pointer-events: auto;
}

.public-teams-shell {
    position: relative;
}

.public-teams-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 44px;
    border-radius: 12px;
    border: 1px solid rgba(66, 96, 148, 0.85);
    background: linear-gradient(180deg, rgba(12, 26, 50, 0.98), rgba(8, 18, 40, 0.98));
    box-shadow: 0 14px 30px rgba(3, 10, 28, 0.5);
    scrollbar-width: thin;
}

.public-teams-scroll {
    position: absolute;
    top: 50%;
    left: auto;
    right: auto;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(102, 145, 214, 0.75);
    background: linear-gradient(180deg, rgba(20, 40, 74, 0.98), rgba(12, 26, 50, 0.98));
    color: #d7ebff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.public-teams-scroll:hover {
    border-color: rgba(125, 211, 252, 0.95);
    color: #ffffff;
}

.public-teams-scroll-left {
    left: 8px;
}

.public-teams-scroll-right {
    right: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .public-teams-panel {
        transition: none;
    }

    .public-nav-dropdown-chevron {
        transition: none;
    }

    .public-header-user-menu-chev {
        transition: none;
    }

    .public-nav a,
    .public-nav-dropdown-trigger {
        transition: color 0.15s ease, border-color 0.15s ease;
    }
}

.public-nav-team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: #d8e8ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.public-nav-team-link:hover {
    background: rgba(56, 189, 248, 0.12);
    color: #f4f9ff;
}

.public-nav-team-crest {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
}

.public-nav-team-crest-placeholder {
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(125, 211, 252, 0.45), rgba(96, 165, 250, 0.28));
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) inset;
}

.public-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.futuristic-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(10, 24, 52, 0.95) 0%, rgba(8, 20, 43, 0.92) 55%, rgba(12, 33, 68, 0.95) 100%);
    min-height: 240px;
}

.futuristic-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 16px 34px;
}

.futuristic-kicker {
    margin: 0 0 8px;
    color: #8eb4ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.futuristic-title {
    margin: 0;
    max-width: 760px;
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.12;
}

.futuristic-copy {
    margin: 12px 0 0;
    max-width: 700px;
    color: #b1c3e6;
    font-size: 15px;
    line-height: 1.5;
}

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

/* Signed-in account control (header) */
.public-header-user-menu {
    position: relative;
    flex-shrink: 0;
    z-index: 200;
}

.public-header-user-menu-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(100, 140, 210, 0.5);
    background: linear-gradient(180deg, rgba(18, 36, 72, 0.95), rgba(12, 28, 58, 0.92));
    box-shadow: 0 4px 16px rgba(2, 8, 24, 0.35);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    max-width: min(280px, 52vw);
    user-select: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.public-header-user-menu-summary::-webkit-details-marker {
    display: none;
}

.public-header-user-menu-summary::marker {
    content: '';
}

.public-header-user-menu-summary:hover {
    border-color: rgba(125, 211, 252, 0.55);
    box-shadow: 0 6px 20px rgba(2, 12, 32, 0.45);
}

.public-header-user-menu-summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 75%, #7dd3fc);
    outline-offset: 3px;
}

.public-header-user-menu[open] > .public-header-user-menu-summary {
    border-color: rgba(125, 211, 252, 0.65);
}

.public-header-user-menu-avatar {
    display: inline-flex;
    font-size: 18px;
    color: #7dd3fc;
    opacity: 0.95;
    flex-shrink: 0;
}

.public-header-user-menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8f0ff;
}

.public-header-user-menu-chev {
    font-size: 10px;
    opacity: 0.65;
    margin-left: 2px;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.public-header-user-menu[open] .public-header-user-menu-chev {
    transform: rotate(180deg);
    opacity: 0.9;
}

.public-header-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 248px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 10px 0;
    border-radius: 14px;
    border: 1px solid rgba(86, 132, 206, 0.55);
    background: linear-gradient(165deg, rgba(14, 30, 58, 0.98), rgba(8, 18, 42, 0.98));
    box-shadow: 0 20px 44px rgba(2, 8, 24, 0.55);
    z-index: 350;
}

.public-header-user-menu-sep {
    height: 1px;
    margin: 8px 12px;
    background: rgba(100, 140, 210, 0.35);
}

.public-header-user-menu-group {
    padding: 0 6px;
}

.public-header-user-menu-heading {
    display: block;
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b8ab8;
}

.public-header-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    margin: 2px 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #e2ebff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.public-header-user-menu-item i {
    width: 1.1em;
    text-align: center;
    color: #7dd3fc;
    opacity: 0.85;
}

.public-header-user-menu-item:hover {
    background: rgba(56, 189, 248, 0.12);
    color: #fff;
}

.public-header-user-menu-item:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.85);
    outline-offset: -2px;
}

.public-header-user-menu-item--btn {
    color: #fecaca;
}

.public-header-user-menu-item--btn:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fff;
}

.public-header-user-menu-form {
    margin: 0;
    padding: 0;
}

.public-header-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid rgba(100, 140, 210, 0.45);
    background: rgba(10, 22, 48, 0.65);
    font-size: 12px;
}

.public-header-account-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e0edff;
    font-weight: 700;
    text-decoration: none;
}

.public-header-account-link:hover {
    color: #fff;
    text-decoration: underline;
}

.public-header-account-email {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9ab7e1;
}

.public-header-account-out-form {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

.public-header-account-out {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: #93c5fd;
    font-weight: 600;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.public-header-account-out:hover {
    color: #fff;
    text-decoration: underline;
}

.public-header-admin-btn {
    flex-shrink: 0;
}

.public-home-auth {
    margin-top: 22px;
    max-width: 920px;
}

.public-home-auth-flash {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.public-home-auth-flash--success {
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.45);
    color: #bbf7d0;
}

.public-home-auth-flash--error {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.public-home-auth-signed {
    margin-top: 4px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(86, 132, 206, 0.45);
    background:
        linear-gradient(155deg, rgba(14, 30, 58, 0.82), rgba(8, 18, 40, 0.78)),
        radial-gradient(100% 80% at 0% 0%, rgba(56, 189, 248, 0.1), transparent 55%);
    box-shadow: 0 12px 32px rgba(2, 8, 24, 0.35);
}

.public-home-auth-signed-lead {
    margin: 0 0 6px;
    color: #dbe8ff;
    font-size: 14px;
    line-height: 1.45;
}

.public-home-auth-signed-lead strong {
    color: #f4f8ff;
    font-weight: 800;
}

.public-home-auth-signed-team {
    margin: 0;
    font-size: 14px;
    color: #9ab7e1;
}

.public-home-auth-signed-team a {
    color: #7dd3fc;
    font-weight: 700;
    text-decoration: none;
}

.public-home-auth-signed-team a:hover {
    text-decoration: underline;
}

.public-home-auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
}

.public-home-auth-grid--single {
    grid-template-columns: minmax(260px, 420px);
}

.public-home-auth-card {
    padding: 16px 16px 14px;
    border-radius: 14px;
    border: 1px solid rgba(86, 132, 206, 0.45);
    background:
        linear-gradient(155deg, rgba(14, 30, 58, 0.88), rgba(8, 18, 40, 0.86)),
        radial-gradient(100% 80% at 0% 0%, rgba(56, 189, 248, 0.12), transparent 55%);
    box-shadow: 0 12px 32px rgba(2, 8, 24, 0.35);
}

.public-home-auth-card-title {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #f1f5ff;
    letter-spacing: -0.02em;
}

.public-home-auth-card-title .fa-solid {
    color: #38bdf8;
    font-size: 16px;
}

.public-home-auth-card-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.4;
}

.public-home-auth-unavailable {
    margin: 0;
    font-size: 13px;
}

.public-home-auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.public-home-auth-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ab7e1;
}

.public-home-auth-field input,
.public-home-auth-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(100, 140, 210, 0.55);
    background: rgba(6, 14, 32, 0.85);
    color: #f1f5ff;
    font-size: 14px;
}

.public-home-auth-field select {
    cursor: pointer;
}

.public-home-auth-field input:focus,
.public-home-auth-field select:focus {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

.public-home-auth-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.public-home-auth-submit {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
}

/* Auth forms live in main column below the hero, not inside the header band */
.public-auth-main-host {
    width: 100%;
    min-width: 0;
    margin-bottom: 4px;
}

/* Hide slot when unsigned / no flash so grid row-gap does not sit above Latest Team News */
.public-home-auth-main-slot:not(:has(.public-home-auth)) {
    display: none;
}

.public-home-auth-main-slot .public-home-auth {
    margin-top: 0;
    margin-bottom: 0;
}

.public-auth-page {
    max-width: 960px;
}

.public-auth-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 8px;
}

@media (min-width: 840px) {
    .public-auth-layout {
        grid-template-columns: minmax(200px, 280px) minmax(280px, 400px);
        gap: 28px 36px;
        align-items: center;
    }

    .public-auth-layout--wide-form {
        grid-template-columns: minmax(200px, 260px) minmax(300px, 460px);
    }
}

/* Single centred column (e.g. forgot password) */
.public-auth-layout--solo {
    display: block;
    max-width: 460px;
    margin: 8px auto 0;
}

.public-auth-aside {
    padding: 4px 0 0;
}

.public-auth-aside-kicker {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.public-auth-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.public-auth-perks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #c8d9f5;
}

.public-auth-perk-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(6, 18, 42, 0.65);
    color: #38bdf8;
    font-size: 15px;
}

.public-auth-perk-text strong {
    color: #f1f5ff;
    font-weight: 700;
}

.public-auth-form-col {
    width: 100%;
}

.public-auth-card {
    padding: 20px 20px 18px;
    border-radius: 16px;
}

.public-auth-breadcrumb {
    margin: 0 0 14px;
}

.public-auth-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    color: #8aa8d4;
}

.public-auth-breadcrumb-list a {
    color: #7dd3fc;
    text-decoration: none;
}

.public-auth-breadcrumb-list a:hover {
    text-decoration: underline;
}

.public-auth-breadcrumb-list [aria-current='page'] {
    color: #dbe8ff;
}

.public-auth-card-heading {
    font-size: 17px;
}

.public-auth-lead {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
}

.public-auth-form .public-home-auth-field input::placeholder {
    color: rgba(154, 183, 225, 0.45);
}

.public-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 14px;
    font-weight: 700;
}

.public-auth-submit .fa-arrow-right,
.public-auth-submit .fa-user-plus {
    font-size: 12px;
    opacity: 0.9;
}

.public-auth-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(86, 132, 206, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.public-auth-footer-primary {
    font-size: 14px;
    font-weight: 600;
    color: #9ab7e1;
    text-decoration: none;
}

.public-auth-footer-primary span {
    color: #7dd3fc;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.public-auth-footer-primary:hover span {
    color: #bae6fd;
}

.public-auth-footer-links {
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}

.public-auth-footer-links a {
    color: #94a8cc;
    font-weight: 600;
    text-decoration: none;
}

.public-auth-footer-links a:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.public-auth-signed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
}

.public-auth-notice {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: linear-gradient(145deg, rgba(120, 80, 20, 0.2), rgba(40, 28, 10, 0.35));
    font-size: 14px;
    line-height: 1.55;
    color: #fde68a;
}

.public-auth-notice-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fcd34d;
}

.public-auth-notice-body {
    margin: 0;
}

.public-auth-forgot-list {
    margin: 0;
    padding-left: 1.15em;
    color: #fef3c7;
    font-size: 14px;
    line-height: 1.55;
}

.public-auth-forgot-list li {
    margin: 0 0 8px;
}

.public-auth-forgot-list li:last-child {
    margin-bottom: 0;
}

.public-auth-footer--compact {
    margin-top: 0;
    border-top: none;
    padding-top: 4px;
}

.homepage-ticker-bar {
    position: relative;
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    background: linear-gradient(90deg, rgba(7, 18, 36, 0.98), rgba(10, 24, 48, 0.98));
    box-shadow: 0 8px 22px rgba(3, 10, 28, 0.35) inset;
}

.homepage-ticker-window {
    width: 100%;
    overflow: hidden;
}

.homepage-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    width: max-content;
    padding: 10px 0;
    animation: homepageTickerScroll 95s linear infinite;
}

.homepage-ticker-bar--scores .homepage-ticker-track {
    animation-duration: 155s;
}

.homepage-ticker-chunk {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.homepage-ticker-match {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.homepage-ticker-match-home,
.homepage-ticker-match-away {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.homepage-ticker-crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(15, 30, 58, 0.5);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.homepage-ticker-score {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f0f7ff;
    padding: 0 2px;
}

.homepage-ticker-vs-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 44px;
}

.homepage-ticker-vs {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7dd3fc;
    opacity: 0.92;
}

.homepage-ticker-ko {
    font-size: 10px;
    font-weight: 700;
    color: #98acd1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.homepage-ticker-bar--matchday .homepage-ticker-vs {
    color: #a5f3fc;
}

.homepage-ticker-item {
    color: #d7ecff;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.homepage-ticker-bar--scores .homepage-ticker-team {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 13px;
    color: #d7ecff;
}

.homepage-ticker-sep {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18);
}

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

@media (prefers-reduced-motion: reduce) {
    .homepage-ticker-track {
        animation: none;
        transform: none;
    }

    .homepage-ticker-window {
        overflow: visible;
    }

    .futuristic-hero-grid,
    .futuristic-hero-glow-a,
    .futuristic-hero-glow-b,
    .futuristic-hero-ring-a,
    .futuristic-hero-ring-b,
    .futuristic-scan-line {
        animation: none !important;
    }
}

.futuristic-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 158, 230, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 158, 230, 0.14) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 100%);
    animation: hero-grid-drift 16s linear infinite;
}

.futuristic-hero-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    filter: blur(32px);
    opacity: 0.32;
}

.futuristic-hero-glow-a {
    top: -180px;
    right: -80px;
    background: #2f7cff;
    animation: hero-glow-float-a 9s ease-in-out infinite;
}

.futuristic-hero-glow-b {
    bottom: -210px;
    left: 15%;
    background: #7f4dff;
    animation: hero-glow-float-b 12s ease-in-out infinite;
}

.futuristic-hero-ring {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(124, 170, 255, 0.25);
    pointer-events: none;
}

.futuristic-hero-ring-a {
    width: 360px;
    height: 360px;
    right: 8%;
    top: -120px;
    animation: hero-ring-spin 18s linear infinite;
}

.futuristic-hero-ring-b {
    width: 220px;
    height: 220px;
    right: 16%;
    top: -48px;
    border-color: rgba(147, 197, 253, 0.34);
    animation: hero-ring-spin-reverse 14s linear infinite;
}

.futuristic-scan-line {
    position: absolute;
    left: -20%;
    right: -20%;
    height: 2px;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.85), transparent);
    box-shadow: 0 0 16px rgba(125, 211, 252, 0.8);
    animation: hero-scan 5s ease-in-out infinite;
}

.site-button {
    display: inline-block;
    text-decoration: none;
    border: 1px solid rgba(79, 140, 255, 0.5);
    background: var(--primary);
    color: #fff;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.site-button.secondary {
    background: rgba(8, 20, 44, 0.65);
    color: #e2ecff;
    border-color: rgba(125, 211, 252, 0.4);
}

.site-button.secondary:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(125, 211, 252, 0.55);
    color: #fff;
}

.public-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 16px 36px;
}

.public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
    overflow-x: hidden;
}

.public-main-column {
    display: grid;
    gap: 16px;
    align-content: start;
}

.public-league-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-card {
    background: linear-gradient(180deg, rgba(15, 31, 61, 0.95), rgba(13, 27, 52, 0.95));
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
}

.public-section-header {
    margin-bottom: 12px;
}

.public-section-title {
    margin: 0;
    font-size: 18px;
}

.public-league-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-league-title-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.site-alert {
    border: 1px solid rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: #ffd7d7;
    font-size: 13px;
}

.public-tips-list {
    display: grid;
    gap: 10px;
}

.public-news-list {
    display: grid;
    gap: 10px;
}

/* One hero card on top, then full-width rows (thumb | text) */
.public-news-list--magazine {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 3-up grid just below the featured lead story */
.public-news-triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 8px 0;
}

.public-news-triptych .public-news-item-triptych {
    flex-direction: column;
    min-height: 100%;
}

.public-news-triptych .public-news-item-triptych .public-news-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 88px;
    border-radius: 13px 13px 0 0;
}

.public-news-triptych .public-news-item-triptych .public-news-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 10px 10px;
    gap: 5px;
    min-height: 0;
}

.public-news-triptych .public-news-item-triptych .public-news-body::before {
    top: 8px;
    bottom: 8px;
}

.public-news-triptych .public-news-item-triptych .public-news-team,
.public-news-triptych .public-news-item-triptych .public-news-date,
.public-news-triptych .public-news-item-triptych .public-news-title,
.public-news-triptych .public-news-item-triptych .public-news-blurb {
    padding-left: 8px;
}

.public-news-triptych .public-news-item-triptych .public-news-team {
    font-size: 9px;
}

.public-news-triptych .public-news-item-triptych .public-news-title {
    font-size: 12px;
    line-height: 1.34;
    -webkit-line-clamp: 2;
}

.public-news-triptych .public-news-item-triptych .public-news-blurb {
    font-size: 11px;
    line-height: 1.36;
    -webkit-line-clamp: 2;
}

.public-news-triptych .public-news-item-triptych .public-news-comment-count {
    margin-left: 8px;
}

.public-news-triptych .public-news-item-triptych .public-news-link {
    margin-top: 6px;
    margin-left: 8px;
}

.public-news-item {
    --news-accent: #38bdf8;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid color-mix(in srgb, var(--news-accent) 48%, rgba(66, 96, 148, 0.72));
    border-radius: 14px;
    background:
        linear-gradient(165deg, rgba(14, 30, 58, 0.98), rgba(8, 18, 38, 0.98)),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--news-accent) 28%, transparent), transparent 55%);
    padding: 0;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.public-news-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 2;
}

.public-news-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--news-accent) 72%, rgba(110, 170, 255, 0.95));
    box-shadow:
        0 16px 36px rgba(2, 10, 26, 0.5),
        0 0 0 1px color-mix(in srgb, var(--news-accent) 22%, transparent) inset,
        0 0 40px color-mix(in srgb, var(--news-accent) 28%, transparent);
}

.public-news-list--magazine .public-news-item:nth-child(2n):not(.public-news-item-featured) {
    --news-accent: #67e8f9;
}

.public-news-list--magazine .public-news-item:nth-child(3n):not(.public-news-item-featured) {
    --news-accent: #c084fc;
}

.public-news-list--magazine .public-news-item:nth-child(4n):not(.public-news-item-featured) {
    --news-accent: #4ade80;
}

.public-news-item-featured {
    --news-accent: #22d3ee;
    border-color: color-mix(in srgb, var(--news-accent) 62%, rgba(86, 134, 220, 0.9));
}

/* Top story: full-width, image band then copy */
.public-news-list--magazine .public-news-item-featured {
    flex-direction: column;
}

.public-news-list--magazine .public-news-item-featured .public-news-media {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 21 / 9;
    min-height: 96px;
    max-height: min(30vw, 168px);
    border-radius: 13px 13px 0 0;
}

.public-news-list--magazine .public-news-item-featured .public-news-body {
    padding: 8px 12px 10px;
    gap: 5px;
}

.public-news-list--magazine .public-news-item-featured .public-news-body-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.public-news-list--magazine .public-news-item-featured .public-news-title {
    font-size: clamp(13px, 1.9vw, 15px);
    line-height: 1.28;
    -webkit-line-clamp: 3;
}

.public-news-list--magazine .public-news-item-featured .public-news-date {
    padding-left: 10px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.92);
}

.public-news-blurb {
    margin: 0;
    padding-left: 10px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
    color: color-mix(in srgb, var(--news-accent) 18%, #cbd5e1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-news-list--magazine .public-news-item-featured .public-news-blurb {
    padding-left: 10px;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(203, 213, 225, 0.88);
    -webkit-line-clamp: 2;
}

/* Rows below: thumbnail left, text fills the rest */
.public-news-list--magazine .public-news-item:not(.public-news-item-featured) {
    flex-direction: row;
    align-items: center;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-media {
    flex: 0 0 clamp(88px, 18vw, 126px);
    width: clamp(88px, 18vw, 126px);
    min-width: 88px;
    height: 72px;
    align-self: center;
    min-height: 0;
    aspect-ratio: unset;
    border-radius: 10px 0 0 10px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 9px;
    gap: 10px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-body-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 4px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-body::before {
    top: 7px;
    bottom: 7px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-team {
    font-size: 10px;
    padding-left: 7px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-date {
    padding-left: 7px;
    font-size: 9px;
    font-weight: 600;
    color: color-mix(in srgb, var(--news-accent) 18%, rgba(148, 163, 184, 0.95));
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-title {
    font-size: 13px;
    line-height: 1.36;
    padding-left: 7px;
    -webkit-line-clamp: 2;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-link {
    margin-top: 0;
    font-size: 10px;
    padding: 6px 12px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured):hover .public-news-link {
    border-color: color-mix(in srgb, var(--news-accent) 72%, rgba(255, 255, 255, 0.5));
    background: color-mix(in srgb, var(--news-accent) 32%, rgba(10, 22, 44, 0.98));
    color: #fff;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-placeholder-label {
    left: 6px;
    bottom: 6px;
    padding: 3px 6px;
    font-size: 8px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-fallback-badge {
    width: 26px;
    height: 26px;
    right: 3px;
    bottom: 3px;
    padding: 2px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-fallback-crest {
    max-width: 20px;
    max-height: 20px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-team-crest,
.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-team-crest-placeholder {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.team-news-more-wrap {
    margin-top: 8px;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(10, 24, 46, 0.7), rgba(8, 18, 36, 0.72)),
        radial-gradient(120% 130% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 60%);
}

.team-news-load-more-btn.site-button {
    gap: 8px;
    min-width: min(100%, 280px);
    border-radius: 999px;
    border-color: rgba(56, 189, 248, 0.55);
    background:
        linear-gradient(160deg, rgba(10, 24, 46, 0.95), rgba(8, 18, 36, 0.96)),
        radial-gradient(115% 125% at 100% 0%, rgba(34, 211, 238, 0.2), transparent 65%);
    color: #e0f7ff;
    box-shadow: 0 8px 18px rgba(2, 8, 24, 0.32);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-news-load-more-btn.site-button:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.86);
    box-shadow:
        0 12px 24px rgba(2, 8, 24, 0.4),
        0 0 18px rgba(34, 211, 238, 0.16);
}

.team-news-load-more-btn[disabled] {
    opacity: 0.65;
    cursor: wait;
}

.team-news-load-status {
    margin: 0;
    font-size: 13px;
    color: color-mix(in srgb, var(--muted, #8ba4c7) 92%, transparent);
    text-align: center;
}

.public-news-item.is-news-fresh {
    animation: news-item-enter 360ms ease;
}

@keyframes news-item-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 640px) {
    .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-title {
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 1024px) {
    .public-news-triptych {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .public-news-triptych {
        grid-template-columns: 1fr;
    }
}

.public-news-item.is-placeholder {
    opacity: 0.82;
    border-style: dashed;
    pointer-events: none;
}

/* Image area */
.public-news-media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(145deg, rgba(30, 58, 95, 0.95), rgba(12, 26, 52, 0.98)),
        radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--news-accent) 35%, transparent), transparent 70%);
    overflow: hidden;
}

.public-news-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    transition: transform 0.35s ease;
}

.public-news-item:hover .public-news-image {
    transform: scale(1.04);
}

.public-news-media-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: inherit;
}

.public-news-item:not(.public-news-item--no-image) .public-news-media-fallback {
    z-index: 0;
}

.public-news-item--no-image .public-news-media-fallback,
.public-news-media.is-image-broken .public-news-media-fallback {
    z-index: 1;
}

/* Centered club crest when there is no story image (replaces external stock photos) */
.public-news-placeholder-crest-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.public-news-placeholder-crest-center img {
    width: min(44%, 112px);
    height: min(44%, 112px);
    max-width: 112px;
    max-height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.public-news-list--magazine .public-news-item-featured.public-news-item--no-image .public-news-placeholder-crest-center img {
    width: min(36%, 132px);
    height: min(36%, 132px);
    max-width: 132px;
    max-height: 132px;
}

.public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-placeholder-crest-center img {
    width: min(78%, 40px);
    height: min(78%, 40px);
    max-width: 40px;
    max-height: 40px;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35));
}

/* Avoid double crest when the large center mark is shown */
.public-news-media-fallback:has(.public-news-placeholder-crest-center) .public-news-fallback-badge {
    display: none;
}

/* Generic “news thumbnail” when there is no RSS image */
.public-news-placeholder-thumb {
    position: absolute;
    inset: 0;
    display: block;
}

.public-news-placeholder-svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.public-news-placeholder-label {
    position: absolute;
    left: 12px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.88);
    background: rgba(8, 16, 32, 0.72);
    border: 1px solid color-mix(in srgb, var(--news-accent) 40%, rgba(148, 163, 184, 0.35));
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.public-news-placeholder-label .fa-image {
    font-size: 11px;
    opacity: 0.85;
    color: color-mix(in srgb, var(--news-accent) 70%, #e2e8f0);
}

/* Team crest sits on the placeholder like a channel badge */
.public-news-fallback-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(15, 23, 42, 0.12);
    padding: 4px;
    pointer-events: none;
}

.public-news-fallback-crest {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.public-news-fallback-crest-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(125, 211, 252, 0.5), rgba(96, 165, 250, 0.3));
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.4) inset;
}

/* Text block */
.public-news-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 15px 16px;
    flex: 1;
    min-width: 0;
}

/* Team + title wrapper; magazine rows use a real box, default keeps flat layout */
.public-news-body-text {
    display: contents;
}

.public-news-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--news-accent) 90%, #fff), var(--news-accent));
    opacity: 0.95;
}

.public-news-team {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--news-accent) 48%, #dbeafe);
    white-space: nowrap;
    padding-left: 10px;
}

.public-news-team-crest {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 18px;
}

.public-news-team-crest-placeholder {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(125, 211, 252, 0.45), rgba(96, 165, 250, 0.28));
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) inset;
}

.public-news-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-left: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--news-accent) 22%, #94a3b8);
}

.public-news-date-sep {
    opacity: 0.72;
}

.public-news-date-relative {
    color: color-mix(in srgb, var(--news-accent) 40%, #cbd5e1);
}

.public-news-comment-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    margin-left: 10px;
    padding: 3px 8px;
    width: fit-content;
    max-width: calc(100% - 20px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--news-accent) 38%, #cbd5e1);
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid color-mix(in srgb, var(--news-accent) 25%, rgba(51, 65, 85, 0.6));
    border-radius: 999px;
}

.public-news-comment-count i {
    font-size: 11px;
    opacity: 0.9;
}

.public-news-title {
    min-width: 0;
    color: #f5fbff;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 700;
    padding-left: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-news-item-featured .public-news-title {
    -webkit-line-clamp: 4;
}

.public-news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: color-mix(in srgb, var(--news-accent) 22%, #f0f9ff);
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--news-accent) 50%, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--news-accent) 16%, rgba(10, 22, 44, 0.94));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    margin-top: auto;
    margin-left: 10px;
    width: fit-content;
}

.public-news-item:hover .public-news-link {
    border-color: color-mix(in srgb, var(--news-accent) 72%, rgba(255, 255, 255, 0.5));
    background: color-mix(in srgb, var(--news-accent) 32%, rgba(10, 22, 44, 0.98));
    color: #fff;
}

.public-news-trending {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--news-accent) 62%, rgba(255, 255, 255, 0.42));
    background: color-mix(in srgb, var(--news-accent) 18%, rgba(8, 18, 40, 0.88));
    color: color-mix(in srgb, var(--news-accent) 54%, #e0f2fe);
    font-size: 9px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.homepage-news-bar-advert {
    --news-bar-ad-accent: #22d3ee;
    --news-bar-ad-text: #eaf6ff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin: -4px 0 2px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--news-bar-ad-accent) 56%, rgba(78, 112, 170, 0.75));
    background:
        linear-gradient(90deg, rgba(10, 24, 46, 0.98), rgba(8, 18, 35, 0.98)),
        radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--news-bar-ad-accent) 34%, transparent), transparent 58%);
    color: var(--news-bar-ad-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.homepage-news-bar-advert:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--news-bar-ad-accent) 82%, #fff);
    box-shadow:
        0 8px 18px rgba(3, 10, 28, 0.38),
        0 0 18px color-mix(in srgb, var(--news-bar-ad-accent) 26%, transparent);
}

.homepage-news-bar-advert-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #052638;
    background: linear-gradient(90deg, color-mix(in srgb, var(--news-bar-ad-accent) 90%, #fff), var(--news-bar-ad-accent));
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}

.homepage-news-bar-advert-text {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--news-bar-ad-text);
}

.homepage-news-bar-advert-cta {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    color: color-mix(in srgb, var(--news-bar-ad-accent) 68%, #dbeafe);
}

@media (max-width: 520px) {
    .public-news-list--magazine .public-news-item:not(.public-news-item-featured) {
        flex-direction: column;
    }

    .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-media {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        height: auto;
        aspect-ratio: 21 / 9;
        max-height: 112px;
        border-radius: 12px 12px 0 0;
    }

    .public-news-item-featured .public-news-title {
        font-size: 14px;
    }

    .homepage-news-bar-advert {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* News index + article (respun RSS) — same animated backdrop as homepage .futuristic-hero */
.public-news-route-hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(10, 24, 52, 0.95) 0%, rgba(8, 20, 43, 0.92) 55%, rgba(12, 33, 68, 0.95) 100%);
}

.public-news-route-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 16px 34px;
}

.public-news-route-hero-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.public-news-route-hero-row--crest {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
}

.public-news-route-crest-wrap {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(15, 30, 58, 0.65);
    border: 1px solid rgba(96, 165, 250, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.public-news-route-crest {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
}

.public-news-route-hero-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 560px) {
    .public-news-route-hero-row--crest {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .public-news-route-hero-row--crest .public-news-route-hero-main {
        text-align: center;
    }
}

.public-news-route-kicker {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.public-news-route-title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    color: #f0f7ff;
}

.public-news-route-meta {
    margin: 0 0 16px;
    font-size: 14px;
    color: #9fb8df;
    line-height: 1.45;
}

.public-breadcrumbs-nav {
    margin: 0;
}

.public-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px 4px;
    font-size: 14px;
    line-height: 1.35;
}

.public-breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.public-breadcrumbs-item:not(:last-child)::after {
    content: "›";
    margin: 0 4px 0 8px;
    color: #5b7ab8;
    font-weight: 500;
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Chip-style segment: bg + border */
.public-breadcrumbs-item > a,
.public-breadcrumbs-item > .public-breadcrumbs-text,
.public-breadcrumbs-item > .public-breadcrumbs-current {
    display: inline-block;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 9px;
    font-weight: 600;
    border: 1px solid rgba(91, 122, 184, 0.55);
    background: linear-gradient(165deg, rgba(18, 34, 62, 0.92), rgba(10, 22, 44, 0.88));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 4px 12px rgba(3, 10, 24, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.public-breadcrumbs-item > a {
    color: #7dd3fc;
    text-decoration: none;
    white-space: nowrap;
}

.public-breadcrumbs-item > a:hover {
    text-decoration: none;
    border-color: rgba(125, 211, 252, 0.45);
    background: linear-gradient(165deg, rgba(24, 44, 78, 0.95), rgba(14, 28, 52, 0.92));
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.12) inset,
        0 6px 16px rgba(3, 14, 32, 0.45);
}

.public-breadcrumbs-item > a:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.65);
    outline-offset: 2px;
}

.public-breadcrumbs-item > .public-breadcrumbs-text {
    color: #aac7ee;
    white-space: nowrap;
}

.public-breadcrumbs-item > .public-breadcrumbs-current {
    color: #e8f1ff;
    white-space: normal;
    border-color: rgba(125, 160, 220, 0.48);
    background: linear-gradient(165deg, rgba(22, 42, 74, 0.95), rgba(12, 26, 48, 0.92));
    box-shadow:
        0 0 0 1px rgba(200, 220, 255, 0.07) inset,
        0 4px 14px rgba(3, 10, 24, 0.4);
}

/* Deprecated: old news route links (replaced by .public-breadcrumbs) */
.public-news-route-links {
    margin: 0;
    font-size: 14px;
}

.public-news-route-links a {
    color: #7dd3fc;
    font-weight: 600;
    text-decoration: none;
}

.public-news-route-links a:hover {
    text-decoration: underline;
}

.public-news-route-sep {
    margin: 0 8px;
    color: #5b7ab8;
}

.public-news-article-panel {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.public-news-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #c5d8ff;
}

.public-news-article-team-crest {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.public-news-article-date {
    font-weight: 500;
    color: #7b93bd;
}

.public-news-article-comment-link {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--primary) 72%, #e2e8f0);
    text-decoration: none;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.4);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.public-news-article-comment-link:hover {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.5);
}

.public-news-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
}

.public-news-share-row--list {
    margin: 2px 0 16px;
}

.public-news-share-label {
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8fb7e9;
    font-weight: 650;
}

.public-news-share-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.public-news-share-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: rgba(15, 23, 42, 0.5);
    color: #dbeafe;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.public-news-share-links a span {
    display: none;
}

.public-news-share-links a:nth-child(1) {
    color: #e2e8f0;
}

.public-news-share-links a:nth-child(2) {
    color: #93c5fd;
}

.public-news-share-links a:nth-child(3) {
    color: #86efac;
}

.public-news-share-links a:nth-child(4) {
    color: #bfdbfe;
}

.public-news-share-links a:hover {
    border-color: rgba(34, 211, 238, 0.78);
    color: #f8fdff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2) inset, 0 8px 20px rgba(2, 8, 24, 0.3);
}

.public-news-article-hero-img-wrap {
    margin: 0 0 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.public-news-article-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

.public-news-article-lead {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.55;
    color: #dbeafe;
}

.public-news-article-body {
    font-size: 16px;
    line-height: 1.65;
    color: #e2e8f0;
}

.public-news-article-body p {
    margin: 0 0 1em;
}

.public-news-article-body h2,
.public-news-article-body h3,
.public-news-article-body h4 {
    margin: 1.25em 0 0.5em;
    font-size: 1.15em;
    color: #f0f7ff;
}

.public-news-article-body a {
    color: #7dd3fc;
}

.public-news-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.public-news-article-body blockquote {
    margin: 1em 0;
    padding-left: 14px;
    border-left: 3px solid rgba(125, 211, 252, 0.45);
    color: #b8cce8;
}

.public-news-article-team-context {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(96, 165, 250, 0.12);
}

.public-news-article-team-context-head {
    margin-bottom: 16px;
}

.public-news-article-team-context-title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f0f7ff;
}

.public-news-article-team-context-sub {
    margin: 0;
}

.public-news-article-team-context-more {
    display: inline-block;
    margin-left: 8px;
    font-weight: 600;
    color: #7dd3fc;
    text-decoration: none;
}

.public-news-article-team-context-more:hover {
    text-decoration: underline;
}

.public-news-article-team-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    margin-bottom: 22px;
}

@media (max-width: 960px) {
    .public-news-article-team-context-grid {
        grid-template-columns: 1fr;
    }
}

.public-news-article-team-context-h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 650;
    color: #bae6fd;
    letter-spacing: 0.02em;
}

.public-news-article-team-context-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
}

/* Meta was beside .fixture-row-main, squeezing minmax(0,1fr) team columns to 0 in narrow widths */
.public-news-article-team-context-fixtures .fixture-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
}

.public-news-article-team-context-fixtures .fixture-row:last-child {
    margin-bottom: 0;
}

.public-news-article-team-context-fixtures .fixture-row-main {
    flex: none;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.public-news-article-team-context-fixtures .fixture-row-meta {
    width: 100%;
    justify-content: flex-start;
}

.public-news-article-team-context-fixtures .fixture-team-line-home,
.public-news-article-team-context-fixtures .fixture-team-line-away {
    gap: 6px;
}

.public-news-article-team-context-fixtures .fixture-team-crest {
    width: 22px;
    height: 22px;
}

.public-news-article-team-context-fixtures .fixture-team-crest-placeholder {
    width: 22px;
    height: 22px;
    min-width: 22px;
}

.public-news-article-team-context-fixtures .fixture-team {
    font-size: 13px;
    font-weight: 600;
    color: #e8f0ff;
}

.public-news-article-team-context-ai {
    padding-top: 6px;
    border-top: 1px solid rgba(96, 165, 250, 0.08);
}

.public-news-article-team-context-tip-list {
    gap: 12px;
}

.public-news-article-source {
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(96, 165, 250, 0.12);
}

.public-news-related-below {
    margin-top: 14px;
}

.public-news-related-all-link {
    margin: 20px 0 0;
    text-align: center;
}

.public-news-related-all-link .site-button {
    gap: 8px;
}

.public-home-news-all-link {
    margin-top: 14px;
}

.public-home-news-all-link .site-button.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.58);
    background:
        linear-gradient(160deg, rgba(10, 24, 46, 0.92), rgba(8, 18, 36, 0.95)),
        radial-gradient(120% 120% at 100% 0%, rgba(34, 211, 238, 0.2), transparent 60%);
    color: #dff6ff;
    box-shadow:
        0 10px 24px rgba(2, 8, 24, 0.35),
        0 0 0 1px rgba(56, 189, 248, 0.1) inset;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.public-home-news-all-link .site-button.secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.88);
    box-shadow:
        0 14px 28px rgba(2, 8, 24, 0.42),
        0 0 20px rgba(34, 211, 238, 0.2);
}

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

.today-game-card {
    border: 1px solid rgba(68, 100, 154, 0.8);
    border-radius: 12px;
    background: linear-gradient(170deg, rgba(14, 28, 54, 0.88), rgba(10, 21, 43, 0.9));
    padding: 10px 11px;
    display: grid;
    gap: 8px;
}

.today-game-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.today-game-time {
    font-size: 12px;
    font-weight: 700;
    color: #c5d8ff;
}

.today-game-status {
    font-size: 10px;
    border-radius: 999px;
    border: 1px solid rgba(147, 197, 253, 0.35);
    background: rgba(59, 130, 246, 0.14);
    color: #dbeafe;
    padding: 2px 7px;
}

.today-game-teams {
    display: grid;
    gap: 3px;
    font-size: 13px;
    line-height: 1.25;
}

.today-game-vs {
    color: var(--muted);
    font-size: 11px;
}

.today-game-bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.today-game-score {
    font-size: 16px;
    font-weight: 700;
}

.today-game-odds {
    font-size: 11px;
    color: var(--muted);
}

/* BBC-like fixtures list presentation */
.fixtures-day-tabs {
    display: inline-flex;
    gap: 8px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid rgba(63, 93, 146, 0.8);
    border-radius: 999px;
    background: rgba(10, 21, 43, 0.8);
}

.fixtures-day-tab {
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: #9fb5de;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fixtures-day-tab:hover {
    background: rgba(47, 80, 136, 0.32);
    color: #e6f0ff;
}

.fixtures-day-tab.is-active {
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.28), rgba(99, 102, 241, 0.3));
    color: #eef7ff;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35) inset;
}

.fixtures-board {
    border: 1px solid rgba(61, 87, 135, 0.8);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(9, 20, 42, 0.72);
    margin-bottom: 12px;
}

.fixtures-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(61, 87, 135, 0.8);
    background: rgba(20, 38, 72, 0.7);
}

.fixtures-board-league {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

.fixtures-board-league-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.fixtures-board-date {
    font-size: 11px;
    color: var(--muted);
}

.fixtures-board-list {
    display: grid;
}

.fixture-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(57, 80, 123, 0.6);
}

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

.fixture-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.fixture-team {
    font-size: 13px;
    line-height: 1.2;
    min-width: 0;
}

.fixture-team-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

/* Name only (crest placeholder is also a span — don’t flex it) */
.fixture-team-line-home > span:first-child,
.fixture-team-line-away > span:last-child {
    min-width: 0;
    flex: 1 1 0;
    overflow-wrap: break-word;
    text-align: left;
}

.fixture-team-line-home {
    justify-content: flex-end;
}

.fixture-team-line-away {
    justify-content: flex-start;
}

.fixture-team-crest {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    padding: 1px;
}

.fixture-team-crest-placeholder {
    opacity: 0;
}

.fixture-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 64px;
    justify-content: center;
    font-size: 14px;
}

.fixture-score-sep,
.fixture-vs {
    color: var(--muted);
    font-size: 11px;
}

.fixture-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fixture-time {
    font-size: 12px;
    font-weight: 700;
    color: #c5d8ff;
}

.fixture-row-broadcasts {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(57, 80, 123, 0.35);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(125, 211, 252, 0.35) transparent;
}

.fixture-row-broadcasts::-webkit-scrollbar {
    height: 4px;
}

.fixture-row-broadcasts::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.35);
    border-radius: 999px;
}

.fixture-row-broadcasts-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    flex: 0 0 auto;
    min-width: min-content;
}

.fixture-broadcast-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px 4px;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    border: 1px solid rgba(125, 211, 252, 0.22);
    background: rgba(15, 31, 61, 0.55);
    color: #dbeafe;
    white-space: nowrap;
}

.fixture-broadcast-chip--skysports-tv {
    padding: 2px 6px 2px 5px;
    gap: 0;
    border: none;
    background: #fff;
    color: #0f172a;
    border-radius: 6px;
    box-shadow: none;
}

/* Medium is already on chip title — keeps one tight row */
.fixture-broadcast-chip--skysports-tv .fixture-broadcast-chip-type,
.fixture-broadcast-chip--talksport .fixture-broadcast-chip-type,
.fixture-broadcast-chip--bbc-radio-5-live .fixture-broadcast-chip-type {
    display: none;
}

.fixture-broadcast-chip--talksport {
    padding: 2px 6px 2px 5px;
    gap: 0;
    border: none;
    background: #fff;
    color: #0f172a;
    border-radius: 6px;
    box-shadow: none;
}

.fixture-broadcast-chip--bbc-radio-5-live {
    padding: 2px 6px 2px 5px;
    gap: 0;
    border: none;
    background: #fff;
    color: #0f172a;
    border-radius: 6px;
    box-shadow: none;
}

.fixture-broadcast-chip-logo--skysports {
    display: block;
    height: 12px;
    width: auto;
    max-width: min(72px, 100%);
    object-fit: contain;
    object-position: left center;
}

.fixture-broadcast-chip-logo--talksport {
    display: block;
    height: 13px;
    width: auto;
    max-width: min(84px, 100%);
    object-fit: contain;
    object-position: left center;
}

.fixture-broadcast-chip-logo--bbc-radio-5-live {
    display: block;
    height: 14px;
    width: auto;
    max-width: min(110px, 100%);
    object-fit: contain;
    object-position: left center;
}

.fixture-broadcast-chip-name {
    font-weight: 650;
}

.fixture-broadcast-empty {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.fixture-row-broadcasts--empty {
    overflow-x: visible;
}

.fixture-broadcast-chip-type {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}

.fixture-bet-link {
    --affiliate-color: #16a34a;
    --affiliate-badge-color: #0f3d20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--affiliate-color) 68%, #223044);
    background: linear-gradient(135deg, color-mix(in srgb, var(--affiliate-color) 70%, #132019), color-mix(in srgb, var(--affiliate-color) 35%, transparent));
    color: #ebfff0;
    border-radius: 999px;
    padding: 3px 8px 3px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.fixture-bet-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--affiliate-color) 45%, transparent);
    filter: brightness(1.05);
}

.fixture-bet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: color-mix(in srgb, var(--affiliate-badge-color) 80%, #070b12);
    color: #d8ffe2;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: lowercase;
}

/* Today’s Games (and same markup): one horizontal row on large viewports */
@media (min-width: 1024px) {
    .fixture-row {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .fixture-row-main {
        flex: 1 1 0;
        min-width: 0;
    }

    .fixture-row-meta {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .fixture-row-broadcasts {
        flex: 0 0 165px;
        width: 165px;
        min-width: 0;
        max-width: 165px;
        margin-top: 0;
        padding-top: 0;
        padding-left: 10px;
        margin-left: 2px;
        border-top: none;
        border-left: 1px solid rgba(57, 80, 123, 0.35);
    }

    .fixture-row .fixture-bet-link {
        padding: 2px 6px 2px 4px;
        font-size: 10px;
        gap: 4px;
    }

    .fixture-row .fixture-bet-badge {
        min-width: 40px;
        font-size: 9px;
        padding: 1px 5px;
    }

    .fixture-row .fixture-time {
        font-size: 11px;
    }
}

.public-tip-card {
    border: 1px solid rgba(66, 96, 149, 0.7);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(13, 28, 56, 0.9), rgba(9, 20, 42, 0.86));
    padding: 12px 13px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(3, 9, 24, 0.34);
}

.public-tip-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(99, 102, 241, 0.8));
}

.public-tip-glow {
    position: absolute;
    right: -58px;
    top: -58px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 65%);
    pointer-events: none;
}

.public-tip-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.public-tip-kicker {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9ec7ff;
    font-weight: 700;
}

.public-tip-confidence {
    margin-top: -2px;
}

.public-tip-status-row {
    margin: 6px 0 6px;
    position: relative;
    z-index: 1;
}

.featured-tip-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 5px 10px;
    text-transform: uppercase;
    backdrop-filter: blur(3px);
}

.featured-tip-status-correct {
    position: relative;
    color: #dfffea;
    border-color: rgba(34, 197, 94, 0.55);
    background: linear-gradient(120deg, rgba(16, 185, 129, 0.28), rgba(34, 197, 94, 0.2));
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.28) inset, 0 0 18px rgba(34, 197, 94, 0.28);
    overflow: hidden;
}

.featured-tip-status-correct::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36%;
    left: -38%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(220, 252, 231, 0.5), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: featuredCorrectSweep 2.2s ease-in-out infinite;
}

.featured-tip-status-missed {
    color: #ffd7d7;
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(120deg, rgba(220, 38, 38, 0.24), rgba(127, 29, 29, 0.2));
}

.featured-tip-status-pending {
    color: #d9e7ff;
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(71, 85, 105, 0.28);
}

.featured-tip-scoreline {
    margin-left: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(5, 12, 25, 0.4);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.public-tip-fixture {
    margin: 5px 0 8px;
    font-size: 15px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.public-tip-vs {
    color: var(--muted);
    font-size: 11px;
    margin: 0 2px;
}

.public-tip-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.public-tip-team > span {
    min-width: 0;
}

.public-tip-team-crest {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    padding: 1px;
}

.public-tip-team-crest-placeholder {
    opacity: 0;
}

.public-tip-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}

.public-tip-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #cfe2ff;
    border: 1px solid rgba(81, 112, 165, 0.72);
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(17, 32, 61, 0.78);
}

.public-tip-meta {
    margin: 4px 0 6px;
    color: var(--muted);
    font-size: 11px;
}

.public-tip-pick {
    margin: 0 0 6px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.public-tip-reasoning {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Homepage featured tips — hero cards (dark panel, status badge, bold pick + odds) */
.featured-tip-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.featured-tip-tile {
    margin: 0;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, #1e3a5f);
    background: linear-gradient(165deg, rgba(15, 28, 52, 0.98) 0%, rgba(8, 16, 34, 0.99) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 12px 36px rgba(0, 0, 0, 0.35);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.featured-tip-tile:hover {
    border-color: color-mix(in srgb, #60a5fa 42%, var(--border));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 16px 44px rgba(15, 23, 42, 0.55);
    transform: translateY(-1px);
}

.featured-tip-tile--spotlight {
    border-color: rgba(52, 211, 153, 0.45);
    background: linear-gradient(165deg, rgba(6, 40, 28, 0.95) 0%, rgba(8, 22, 38, 0.98) 55%, rgba(8, 16, 34, 0.99) 100%);
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.12) inset,
        0 14px 40px rgba(0, 0, 0, 0.4);
}

.featured-tip-tile--spotlight:hover {
    border-color: rgba(74, 222, 128, 0.55);
}

.featured-tip-tile__link {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    outline: none;
}

.featured-tip-tile__link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 70%, #fff);
    outline-offset: 2px;
}

.featured-tip-tile__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-tip-tile__eyebrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.featured-tip-tile__eyebrow-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.featured-tip-tile__result-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 12px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.15;
}

.featured-tip-tile__result-badge--success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.35), rgba(5, 46, 22, 0.55));
    border-color: rgba(74, 222, 128, 0.42);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.12);
}

.featured-tip-tile__result-badge--danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.28), rgba(60, 10, 10, 0.45));
    border-color: rgba(248, 113, 113, 0.38);
}

.featured-tip-tile__result-badge-kicker {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bbf7d0;
    white-space: nowrap;
}

.featured-tip-tile__result-badge-score {
    font-size: 12px;
    font-weight: 800;
    color: #ecfdf5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.featured-tip-tile__result-badge--danger .featured-tip-tile__result-badge-score {
    color: #fff1f2;
}

.featured-tip-tile__pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 30% 30%, #fde047, #ca8a04 55%, #854d0e);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.featured-tip-tile__state {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}

.featured-tip-tile__state--hit {
    color: #86efac;
}

.featured-tip-tile__state--miss {
    color: #fca5a5;
}

.featured-tip-tile__state--live {
    color: #e2e8f0;
}

.featured-tip-tile__conf {
    flex-shrink: 0;
    margin: 0;
    padding: 5px 11px;
    min-width: 48px;
    justify-content: center;
    background: rgba(15, 23, 42, 0.65);
    border-width: 1px;
    border-style: solid;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.featured-tip-tile__fixture {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: #f8fafc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.featured-tip-tile__side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.featured-tip-tile__crest {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    padding: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.featured-tip-tile__team-name {
    min-width: 0;
}

/* One chip for team + “win” — border/gradient live on the wrapper */
.featured-tip-tile__pick-phrase {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 0.22em;
    padding: 4px 11px 5px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.42);
    background: linear-gradient(
        165deg,
        rgba(56, 189, 248, 0.28) 0%,
        rgba(14, 116, 144, 0.2) 45%,
        rgba(8, 47, 73, 0.32) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 14px rgba(56, 189, 248, 0.12);
    vertical-align: baseline;
}

.featured-tip-tile__pick-phrase .featured-tip-tile__team-name--pick {
    display: inline;
    max-width: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #f0f9ff;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.featured-tip-tile__pick-phrase .featured-tip-tile__pick-win-word {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.88em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: #bae6fd;
    opacity: 0.96;
}

.featured-tip-tile__fixture-draw-pick {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fef9c3;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(113, 63, 18, 0.45);
    border: 1px solid rgba(250, 204, 21, 0.35);
}

.featured-tip-tile--spotlight .featured-tip-tile__pick-phrase {
    border-color: rgba(52, 211, 153, 0.48);
    background: linear-gradient(
        165deg,
        rgba(52, 211, 153, 0.3) 0%,
        rgba(6, 78, 59, 0.32) 50%,
        rgba(6, 40, 28, 0.42) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 4px 14px rgba(34, 197, 94, 0.14);
}

.featured-tip-tile--spotlight .featured-tip-tile__pick-phrase .featured-tip-tile__team-name--pick {
    color: #ecfdf5;
}

.featured-tip-tile--spotlight .featured-tip-tile__pick-phrase .featured-tip-tile__pick-win-word {
    color: #d1fae5;
}

.featured-tip-tile__vs {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #94a3b8;
}

.featured-tip-tile__kickoff {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 7px;
}

.featured-tip-tile__kickoff i {
    opacity: 0.9;
    color: #64748b;
}

.featured-tip-tile__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
}

.featured-tip-tile__pick-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.featured-tip-tile__broadcasts {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 2px;
    min-width: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(51, 65, 85, 0.45);
}

.featured-tip-tile__broadcasts-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.featured-tip-tile__broadcasts-icon {
    font-size: 11px;
    color: #94a3b8;
    opacity: 0.95;
    flex-shrink: 0;
}

.featured-tip-tile__broadcasts .fixture-row-broadcasts--featured-tip {
    /* Override .fixture-row-broadcasts flex: 1 1 100% so label + chips stay on one row */
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex-wrap: wrap;
    overflow-x: auto;
}

.featured-tip-tile__broadcasts .fixture-row-broadcasts--featured-tip .fixture-row-broadcasts-chips {
    flex-wrap: wrap;
    row-gap: 4px;
}

.featured-tip-tile__broadcasts .fixture-broadcast-chip {
    font-size: 9px;
    padding: 3px 6px;
}

.featured-tip-tile__broadcasts .fixture-broadcast-chip-logo--skysports {
    height: 10px;
}

.featured-tip-tile__broadcasts .fixture-broadcast-chip-logo--talksport {
    height: 11px;
}

.featured-tip-tile__broadcasts .fixture-broadcast-chip-logo--bbc-radio-5-live {
    height: 12px;
    max-width: min(92px, 100%);
}

.featured-tip-tile__broadcasts .fixture-broadcast-empty {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(100, 116, 139, 0.35);
}

.featured-tip-tile__pick {
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
    line-height: 1.12;
}

.featured-tip-tile__chev {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 13px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(71, 85, 105, 0.55);
    transition:
        color 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.featured-tip-tile:hover .featured-tip-tile__chev {
    color: #e2e8f0;
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(30, 58, 95, 0.55);
    transform: translateX(3px);
}

.public-home-featured-tips-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.public-home-featured-view-more {
    text-decoration: none;
    min-width: 200px;
    text-align: center;
}

.public-home-featured-tips .public-subtitle a {
    color: color-mix(in srgb, var(--primary) 75%, #fff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-pick-anchor-target {
    scroll-margin-top: 88px;
}

@media (max-width: 520px) {
    .featured-tip-tile__link {
        padding: 14px 14px;
        gap: 10px;
    }

    .featured-tip-tile__fixture {
        font-size: 15px;
    }

    .featured-tip-tile__pick {
        font-size: 16px;
    }

    .featured-tip-tile__bottom {
        flex-wrap: wrap;
        align-items: flex-end;
    }
}

.public-accuracy-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(81, 112, 165, 0.72);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(16, 33, 64, 0.9), rgba(10, 22, 44, 0.86));
    padding: 10px 12px;
    margin-bottom: 12px;
}

.public-accuracy-value {
    font-size: 24px;
    font-weight: 800;
    color: #d8ebff;
    line-height: 1;
}

.public-accuracy-value.accuracy-pct--low,
.accuracy-widget-value.accuracy-pct--low {
    color: #f87171;
    text-shadow: 0 0 14px rgba(248, 113, 113, 0.4);
}

.public-accuracy-value.accuracy-pct--mid,
.accuracy-widget-value.accuracy-pct--mid {
    color: #facc15;
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
}

.public-accuracy-value.accuracy-pct--na,
.accuracy-widget-value.accuracy-pct--na {
    color: #e6f3ff;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.32);
}

.public-accuracy-meta {
    font-size: 12px;
    color: #aac7ee;
}

.public-tip-history-list {
    display: grid;
    gap: 12px;
}

.public-tip-history-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.public-tip-history-card-link:focus-visible {
    outline: 2px solid color-mix(in srgb, #38bdf8 75%, #fff);
    outline-offset: 3px;
}

.public-tip-history-card-link:hover {
    transform: translateY(-2px);
}

.public-tip-history-card-link:hover .public-tip-history-card {
    border-color: color-mix(in srgb, #38bdf8 42%, rgba(66, 96, 149, 0.75));
    box-shadow: 0 12px 32px rgba(4, 12, 32, 0.42);
    background: linear-gradient(165deg, rgba(14, 32, 62, 0.88), rgba(10, 22, 46, 0.72));
}

.public-tip-history-top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.public-tip-history-conf {
    font-size: 10px;
    min-width: 38px;
    padding: 2px 7px;
}

.public-tip-history-more {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8eb4e8;
}

.public-tip-history-card-link:hover .public-tip-history-more {
    color: #c5daf8;
}

.public-tip-history-more .fa-solid {
    font-size: 10px;
    opacity: 0.88;
}

.public-picks-filters {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(78, 110, 165, 0.72);
    background: rgba(9, 20, 42, 0.72);
    display: grid;
    gap: 12px;
}

.public-picks-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.public-picks-filter-label {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8aa8d8;
}

.public-picks-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
}

.public-picks-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #a8c3ea;
    border: 1px solid rgba(88, 120, 179, 0.55);
    background: rgba(12, 26, 52, 0.65);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.public-picks-filter-chip:hover {
    color: #f0f7ff;
    border-color: color-mix(in srgb, #38bdf8 45%, rgba(88, 120, 179, 0.55));
    background: color-mix(in srgb, #38bdf8 18%, rgba(12, 26, 52, 0.75));
}

.public-picks-filter-chip.is-active {
    color: #f0f9ff;
    border-color: color-mix(in srgb, #38bdf8 55%, transparent);
    background: linear-gradient(125deg, color-mix(in srgb, #38bdf8 32%, rgba(47, 80, 136, 0.4)), color-mix(in srgb, #34d399 22%, rgba(56, 189, 248, 0.18)));
    box-shadow: 0 2px 12px rgba(56, 189, 248, 0.12);
}

.public-picks-list-meta {
    margin: 0 0 10px;
    font-size: 12px;
    color: #9cb9e1;
}

.public-picks-pager {
    margin-top: 16px;
    padding: 12px 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(66, 96, 149, 0.55);
    background: rgba(10, 22, 44, 0.55);
}

.public-picks-pager-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.public-picks-pager-status {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #8aa8d8;
}

.public-picks-pager-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #7dd3fc;
    transition: color 0.2s ease;
    flex: 0 0 auto;
}

.public-picks-pager-link:hover {
    color: #e0f2fe;
}

.public-picks-pager-link.is-disabled {
    color: #5a6d8c;
    cursor: not-allowed;
    pointer-events: none;
}

.public-picks-pager-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    min-width: min(100%, 200px);
}

.public-picks-pager-li {
    margin: 0;
    padding: 0;
}

.public-picks-pager-li--ellip {
    pointer-events: none;
}

.public-picks-pager-ellip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    font-size: 12px;
    font-weight: 800;
    color: #6b7f9e;
}

.public-picks-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #b8d4f8;
    border: 1px solid rgba(88, 120, 179, 0.45);
    background: rgba(12, 26, 52, 0.55);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

a.public-picks-pager-num:hover {
    color: #f0f7ff;
    border-color: color-mix(in srgb, #38bdf8 45%, rgba(88, 120, 179, 0.45));
    background: color-mix(in srgb, #38bdf8 16%, rgba(12, 26, 52, 0.65));
}

.public-picks-pager-num.is-current {
    color: #f0f9ff;
    border-color: color-mix(in srgb, #38bdf8 50%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, #38bdf8 28%, rgba(12, 26, 52, 0.8)), rgba(10, 22, 44, 0.75));
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.12);
    cursor: default;
}

@media (max-width: 520px) {
    .public-picks-pager-row {
        flex-direction: column;
    }

    .public-picks-pager-pages {
        order: -1;
        width: 100%;
    }
}

/* /picks/{id} — single pick breakdown */
.public-pick-detail-page {
    --picks-tab-accent: #38bdf8;
    --picks-tab-accent-soft: color-mix(in srgb, #38bdf8 38%, rgba(99, 102, 241, 0.35));
}

.public-pick-detail-back {
    margin: 0 0 16px;
}

.public-pick-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #9dbae8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.public-pick-detail-back-link:hover {
    color: #e8f2ff;
}

.public-pick-detail-back-link .fa-solid {
    font-size: 11px;
    opacity: 0.9;
}

.public-pick-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.public-pick-detail-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c9fd4;
}

.public-pick-detail-title {
    margin-bottom: 4px;
}

.public-pick-detail-header-sub {
    max-width: 42rem;
}

.public-pick-detail-news-hub-link {
    font-weight: 600;
    color: #93c5fd;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.public-pick-detail-news-hub-link:hover {
    color: #e0f2fe;
}

.public-pick-detail-hero {
    margin-top: 14px;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--picks-tab-accent) 32%, rgba(66, 96, 149, 0.65));
    background: linear-gradient(155deg, rgba(12, 28, 56, 0.92), rgba(8, 18, 40, 0.88));
    box-shadow: 0 10px 28px rgba(4, 10, 26, 0.28);
}

.public-pick-detail-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.public-pick-detail-fixture {
    margin-bottom: 6px;
}

.public-pick-detail-score {
    margin: 0 0 8px;
    font-size: 13px;
    color: #b8cff1;
}

.public-pick-detail-team.public-pick-detail-team--picked,
.public-pick-detail-team.public-pick-detail-team--picked-draw {
    padding: 8px 12px;
    margin: -4px -6px;
    border-radius: 12px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pick-team-ring, #38bdf8) 22%, rgba(8, 20, 44, 0.5)),
        color-mix(in srgb, var(--pick-team-ring, #38bdf8) 10%, rgba(6, 14, 32, 0.35))
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pick-team-ring, #38bdf8) 55%, transparent),
        0 0 24px color-mix(in srgb, var(--pick-team-ring, #38bdf8) 25%, transparent);
}

.public-pick-detail-team.public-pick-detail-team--picked-draw {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pick-team-ring, #c4b5fd) 45%, transparent),
        0 0 20px color-mix(in srgb, var(--pick-team-ring, #c4b5fd) 18%, transparent);
}

.public-pick-detail-selection-callout {
    margin: 14px 0 12px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 42%, rgba(66, 96, 149, 0.55));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 24%, rgba(10, 24, 52, 0.94)),
        color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 8%, rgba(6, 14, 34, 0.88))
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 18%, transparent) inset,
        0 12px 32px color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 14%, rgba(2, 6, 18, 0.65));
}

.public-pick-detail-selection-callout-inner {
    padding: 14px 16px 13px;
}

.public-pick-detail-selection-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 55%, #e8f2ff);
}

.public-pick-detail-selection-kicker .fa-solid {
    font-size: 11px;
    opacity: 0.95;
    color: var(--pick-selection-accent, #38bdf8);
}

.public-pick-detail-selection-main {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #f8fafc;
    text-shadow: 0 1px 18px color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 35%, transparent);
}

.public-pick-detail-selection-code {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #a8c6ef;
}

.public-pick-detail-selection-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(4, 12, 28, 0.55);
    border: 1px solid color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 28%, rgba(78, 110, 165, 0.5));
    color: #dbe8ff;
}

@media (max-width: 520px) {
    .public-pick-detail-selection-main {
        font-size: 1.2rem;
    }
}

.public-pick-detail-stats {
    margin-top: 4px;
}

.public-pick-detail-body {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

.public-pick-detail-block {
    border-radius: 12px;
    border: 1px solid rgba(78, 110, 165, 0.72);
    background: rgba(10, 22, 44, 0.72);
    padding: 12px 14px;
}

.public-pick-detail-block--risk {
    border-color: color-mix(in srgb, #f59e0b 38%, rgba(78, 110, 165, 0.72));
    background: linear-gradient(160deg, rgba(40, 28, 10, 0.35), rgba(10, 22, 44, 0.72));
}

.public-pick-detail-block-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #dbe8ff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-pick-detail-block-title .fa-solid {
    font-size: 12px;
    opacity: 0.88;
    color: var(--picks-tab-accent);
}

.public-pick-detail-block--risk .public-pick-detail-block-title .fa-solid {
    color: #fbbf24;
}

.public-pick-detail-prose {
    margin: 0;
    font-size: 13px;
    line-height: 1.58;
    color: #c5daf8;
}

.public-pick-detail-empty {
    margin: 0;
    font-size: 12px;
    color: #8aa3cc;
    font-style: italic;
}

/* Pick detail: league table snapshot + UK broadcasts */
.public-pick-detail-season-panel {
    margin-top: 14px;
}

.public-pick-detail-compare {
    margin-top: 4px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(78, 110, 165, 0.55);
    background: rgba(6, 14, 32, 0.65);
    box-shadow: 0 8px 26px rgba(2, 8, 22, 0.35);
}

.public-pick-detail-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.public-pick-detail-compare-th {
    padding: 12px 14px 10px;
    text-align: center;
    vertical-align: bottom;
    font-weight: 700;
    color: #dbe8ff;
    background: rgba(8, 20, 44, 0.92);
    border-bottom: 1px solid rgba(78, 110, 165, 0.45);
}

.public-pick-detail-compare-th--corner {
    text-align: left;
    vertical-align: middle;
    width: 28%;
    min-width: 7.5rem;
    color: #8aa3cc;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-pick-detail-compare-corner-label {
    opacity: 0.85;
}

.public-pick-detail-compare-th--home {
    width: 36%;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--compare-home-accent, #2563eb) 18%, rgba(8, 20, 44, 0.95)),
        rgba(8, 20, 44, 0.88)
    );
    border-left: 1px solid rgba(78, 110, 165, 0.35);
}

.public-pick-detail-compare-th--away {
    width: 36%;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--compare-away-accent, #2563eb) 18%, rgba(8, 20, 44, 0.95)),
        rgba(8, 20, 44, 0.88)
    );
    border-left: 1px solid rgba(78, 110, 165, 0.35);
}

.public-pick-detail-compare-th.is-picked {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 65%, transparent);
}

.public-pick-detail-compare-th--home.is-picked {
    --pick-selection-accent: var(--compare-home-accent, #2563eb);
}

.public-pick-detail-compare-th--away.is-picked {
    --pick-selection-accent: var(--compare-away-accent, #2563eb);
}

.public-pick-detail-compare-th-role {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9dbae8;
    margin-bottom: 4px;
}

.public-pick-detail-compare-th-name {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #f1f5f9;
}

.public-pick-detail-compare-rowhead {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #a8c6ef;
    background: rgba(5, 12, 28, 0.55);
    border-bottom: 1px solid rgba(62, 90, 140, 0.35);
    white-space: nowrap;
}

.public-pick-detail-compare-td {
    padding: 10px 14px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e8f2ff;
    background: rgba(4, 12, 28, 0.35);
    border-bottom: 1px solid rgba(62, 90, 140, 0.28);
    border-left: 1px solid rgba(62, 90, 140, 0.22);
}

.public-pick-detail-compare-td.is-picked {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 12%, rgba(4, 12, 28, 0.5)),
        rgba(4, 12, 28, 0.38)
    );
}

.public-pick-detail-compare-tr--points .public-pick-detail-compare-rowhead,
.public-pick-detail-compare-tr--points .public-pick-detail-compare-td {
    border-bottom: none;
}

.public-pick-detail-compare-tr--points .public-pick-detail-compare-td--emph {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: rgba(6, 18, 42, 0.55);
}

.public-pick-detail-compare-tr--points .public-pick-detail-compare-td--emph.is-picked {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 22%, rgba(6, 18, 42, 0.75)),
        color-mix(in srgb, var(--pick-selection-accent, #38bdf8) 8%, rgba(6, 18, 42, 0.55))
    );
}

/* Home/away columns: tie picked accent to team colours */
.public-pick-detail-compare-th--home.is-picked,
.public-pick-detail-compare-td:nth-child(2).is-picked {
    --pick-selection-accent: var(--compare-home-accent, #2563eb);
}

.public-pick-detail-compare-th--away.is-picked,
.public-pick-detail-compare-td:nth-child(3).is-picked {
    --pick-selection-accent: var(--compare-away-accent, #2563eb);
}

@media (max-width: 520px) {
    .public-pick-detail-compare-th,
    .public-pick-detail-compare-rowhead,
    .public-pick-detail-compare-td {
        padding: 8px 10px;
    }

    .public-pick-detail-compare-th-name {
        font-size: 13px;
    }
}

.public-pick-detail-broadcast-wrap {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(78, 110, 165, 0.45);
}

.public-pick-detail-broadcast-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #dbe8ff;
}

/* Pick detail: match news — own section; each club card sets --team-accent (Admin → Team branding) */
.public-pick-detail-news-wrap {
    margin-top: 14px;
}

.public-pick-detail-news-wrap-header {
    margin-bottom: 12px;
}

.public-pick-detail-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .public-pick-detail-news-grid {
        grid-template-columns: 1fr;
    }
}

.public-pick-detail-news-club-card.public-team-accent-panel {
    margin: 0;
    min-width: 0;
}

.public-pick-detail-news-club-header.public-section-header {
    margin-bottom: 12px;
}

.public-pick-detail-news-club-card .public-pick-detail-news-role {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--team-accent) 42%, #f8fafc);
    border: 1px solid color-mix(in srgb, var(--team-accent) 48%, rgba(88, 120, 179, 0.5));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--team-accent) 32%, rgba(12, 28, 56, 0.96)),
        color-mix(in srgb, var(--team-accent) 14%, rgba(10, 22, 44, 0.9))
    );
    box-shadow: 0 2px 12px color-mix(in srgb, var(--team-accent) 18%, transparent);
}

.public-pick-detail-news-club-card .public-pick-detail-news-team-line {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--team-accent) 22%, #f0f7ff);
    border-left: 4px solid var(--team-accent);
    padding: 2px 0 2px 12px;
}

.public-pick-detail-news-club-card .public-pick-detail-news-team-link:link,
.public-pick-detail-news-club-card .public-pick-detail-news-team-link:visited {
    color: color-mix(in srgb, var(--team-accent) 52%, #dbeafe);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--team-accent) 35%, transparent);
    padding-bottom: 1px;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.public-pick-detail-news-club-card .public-pick-detail-news-team-link:hover {
    color: color-mix(in srgb, var(--team-accent) 28%, #ffffff);
    border-bottom-color: color-mix(in srgb, var(--team-accent) 55%, transparent);
}

.public-pick-detail-news-club-card .public-pick-detail-news-team-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--team-accent) 65%, #fff);
    outline-offset: 3px;
    border-radius: 4px;
}

.public-pick-detail-news-empty {
    margin: 0;
    font-size: 12px;
    padding: 10px 8px;
}

.public-pick-detail-news-list.public-news-list--magazine {
    gap: 10px;
}

/* Match centre: club headlines — calmer nested cards + breathing room */
.public-match-news-wrap.public-pick-detail-news-wrap {
    margin-top: 10px;
}

.public-match-news-wrap .public-pick-detail-news-grid {
    gap: 16px;
}

.public-match-news-wrap .public-pick-detail-news-club-card.site-card.public-main-panel {
    padding: 12px 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 38%, rgba(66, 96, 148, 0.55));
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--team-accent) 12%, rgba(10, 22, 44, 0.92)), rgba(8, 18, 36, 0.94)),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--team-accent) 22%, transparent), transparent 58%);
    box-shadow:
        0 14px 34px rgba(2, 10, 26, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.public-match-news-wrap .public-pick-detail-news-club-card .public-section-header.public-pick-detail-news-club-header {
    margin-bottom: 10px;
}

.public-match-news-wrap .public-pick-detail-news-list.public-news-list--magazine {
    gap: 12px;
}

/*
 * Match centre club columns are ~half the main column wide — the default magazine *row*
 * layout (thumb left + meta/title cramped beside a pill CTA) collapses readability.
 * Force a stacked card: image band on top, then meta → title → blurb → CTA.
 */
.public-match-news-wrap .public-news-list--magazine .public-news-item {
    flex-direction: column;
    align-items: stretch;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item-featured .public-news-media {
    width: 100%;
    max-height: 152px;
    aspect-ratio: 16 / 9;
    border-radius: 12px 12px 0 0;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item-featured .public-news-body {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    padding: 10px 12px 12px;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item-featured .public-news-title {
    font-size: 14px;
    line-height: 1.35;
    -webkit-line-clamp: 4;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item-featured .public-news-blurb {
    -webkit-line-clamp: 3;
    font-size: 12px;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-media {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    align-self: stretch;
    border-radius: 11px 11px 0 0;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-body {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 10px 11px 12px;
    gap: 8px;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-body-text {
    flex: 1;
    min-width: 0;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-title {
    font-size: 13px;
    line-height: 1.42;
    -webkit-line-clamp: 4;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-blurb {
    -webkit-line-clamp: 4;
    font-size: 12px;
}

.public-match-news-wrap .public-news-list--magazine .public-news-item:not(.public-news-item-featured) .public-news-link {
    align-self: flex-start;
    margin-top: 2px;
    margin-left: 0;
}

.public-match-news-wrap .public-news-list--magazine .public-news-team {
    flex-wrap: wrap;
    white-space: normal;
}

.public-match-news-wrap .public-news-list--magazine .public-news-date {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .public-match-news-wrap .public-pick-detail-news-club-card.site-card.public-main-panel {
        padding: 11px 11px 13px;
    }
}

.public-profit-banner {
    border: 1px solid rgba(88, 120, 179, 0.8);
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(12, 30, 58, 0.95), rgba(9, 19, 40, 0.9));
    padding: 11px 12px;
    margin: 0 0 12px;
    box-shadow: 0 10px 24px rgba(4, 10, 26, 0.3);
}

.public-profit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.public-profit-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.profit-positive {
    color: #a7f3d0;
    text-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.profit-negative {
    color: #fecaca;
    text-shadow: 0 0 16px rgba(239, 68, 68, 0.28);
}

.public-profit-meta {
    font-size: 12px;
    color: #a8c3ea;
}

.public-profit-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.public-method-note {
    margin: 0 0 12px;
    border: 1px solid rgba(78, 110, 165, 0.72);
    border-radius: 12px;
    background: rgba(12, 24, 49, 0.75);
    padding: 9px 11px;
    font-size: 12px;
    color: #bcd3f4;
    line-height: 1.45;
}

.public-method-note code {
    font-size: 11px;
    color: #d7e8ff;
}

/* /picks — single 1X2 vs accumulator (tabbed main card) */
.public-picks-hub {
    --picks-tab-accent: #38bdf8;
    --picks-tab-accent-soft: color-mix(in srgb, #38bdf8 38%, rgba(99, 102, 241, 0.35));
}

.public-picks-mode-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 5px;
    border: 1px solid rgba(88, 120, 179, 0.78);
    border-radius: 999px;
    background: rgba(10, 21, 43, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.public-picks-hub .public-picks-mode-tab {
    font: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 7px 16px;
    border-radius: 999px;
    color: #9fb5de;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.public-picks-hub .public-picks-mode-tab .fa-solid {
    font-size: 11px;
    opacity: 0.88;
}

.public-picks-hub .public-picks-mode-tab:hover {
    background: color-mix(in srgb, var(--picks-tab-accent) 22%, rgba(47, 80, 136, 0.38));
    color: #e8f2ff;
}

.public-picks-hub .public-picks-mode-tab.is-active {
    background: linear-gradient(125deg, var(--picks-tab-accent-soft), color-mix(in srgb, #34d399 28%, rgba(56, 189, 248, 0.22)));
    color: #f0f9ff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--picks-tab-accent) 50%, transparent) inset,
        0 4px 14px rgba(56, 189, 248, 0.12);
}

.public-picks-mode-panel[hidden] {
    display: none !important;
}

.public-picks-acca-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--picks-tab-accent) 35%, rgba(78, 110, 165, 0.65));
    background: linear-gradient(145deg, rgba(12, 28, 58, 0.95), rgba(8, 18, 42, 0.98));
    padding: 18px 18px 16px;
    margin-bottom: 14px;
}

.public-picks-acca-hero-glow {
    position: absolute;
    inset: -40% -20% auto auto;
    width: 55%;
    height: 120%;
    background: radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.22), transparent 62%);
    pointer-events: none;
}

.public-picks-acca-kicker {
    position: relative;
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--picks-tab-accent) 55%, #c4d4f0);
}

.public-picks-acca-title {
    position: relative;
    margin: 0 0 8px;
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 800;
    color: #f4f9ff;
    letter-spacing: -0.02em;
}

.public-picks-acca-status-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 10px;
    font-size: 12px;
}

.public-picks-acca-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
}

.public-picks-acca-status--pending {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.public-picks-acca-status--won {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(52, 211, 153, 0.4);
}

.public-picks-acca-status--lost {
    color: #fecaca;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.public-picks-acca-id {
    font-weight: 700;
    color: #a8c3ea;
}

.public-picks-acca-settled {
    font-weight: 600;
    color: color-mix(in srgb, var(--picks-tab-accent) 22%, #94a3b8);
}

.public-picks-acca-lede {
    position: relative;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #b6cce8;
    max-width: 42em;
}

.public-picks-acca-preview {
    border-radius: 12px;
    border: 1px dashed rgba(121, 150, 196, 0.5);
    background: rgba(8, 18, 38, 0.55);
    padding: 12px 12px 10px;
    margin-bottom: 12px;
}

.public-picks-acca-leg {
    display: grid;
    grid-template-columns: 22px 4px 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 8px 8px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: rgba(15, 30, 58, 0.72);
    border: 1px solid rgba(70, 99, 151, 0.45);
}

.public-picks-acca-leg:last-of-type {
    margin-bottom: 8px;
}

.public-picks-acca-leg-num {
    font-size: 11px;
    font-weight: 800;
    color: #7dd3fc;
    text-align: center;
}

.public-picks-acca-leg-bar {
    width: 4px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #60a5fa, #a78bfa);
    opacity: 0.9;
}

.public-picks-acca-leg-text {
    font-size: 12px;
    font-weight: 600;
    color: #dbe8ff;
    min-width: 0;
}

.public-picks-acca-preview--live {
    border-style: solid;
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.35);
}

.public-picks-acca-preview--live .public-picks-acca-leg {
    align-items: flex-start;
}

.public-picks-acca-preview--live .public-picks-acca-leg.is-correct {
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12) inset;
}

.public-picks-acca-preview--live .public-picks-acca-leg.is-incorrect {
    border-color: rgba(248, 113, 113, 0.42);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.1) inset;
}

.public-picks-acca-preview--live .public-picks-acca-leg-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.32;
}

.public-picks-acca-fixture-line {
    font-size: 12px;
    font-weight: 700;
    color: #e8f1ff;
}

.public-picks-acca-vs {
    opacity: 0.62;
    font-weight: 800;
    margin: 0 0.25em;
}

.public-picks-acca-pick {
    font-size: 12px;
    font-weight: 800;
    color: #a7f3d0;
}

.public-picks-acca-meta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--picks-tab-accent) 28%, #94a3b8);
}

.public-picks-acca-score {
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    letter-spacing: 0.04em;
}

.public-picks-acca-leg-result {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-picks-acca-leg-result--correct {
    color: #022c22;
    background: linear-gradient(135deg, #6ee7b7, #34d399);
    border: 1px solid rgba(52, 211, 153, 0.65);
}

.public-picks-acca-leg-result--wrong {
    color: #fff7ed;
    background: linear-gradient(135deg, #fb7185, #ef4444);
    border: 1px solid rgba(248, 113, 113, 0.55);
}

.public-picks-acca-leg-result--pending {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.public-picks-acca-alert {
    margin-bottom: 14px;
}

.public-picks-acca-leg-odds {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #86efac;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.28);
}

.public-picks-acca-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 10px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(167, 139, 250, 0.12));
    border: 1px solid rgba(96, 165, 250, 0.35);
    font-size: 11px;
    color: #a8c3ea;
}

.public-picks-acca-total strong {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f0fdf4;
    letter-spacing: -0.02em;
}

.public-picks-acca-footnote {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #8ba4c7;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.public-picks-acca-footnote .fa-solid {
    margin-top: 2px;
    color: color-mix(in srgb, var(--picks-tab-accent) 70%, #94a3b8);
}

.public-picks-acca-footnote .fa-circle-info {
    margin-top: 2px;
    color: color-mix(in srgb, var(--picks-tab-accent) 70%, #94a3b8);
}

.public-profit-chart-card {
    border: 1px solid rgba(88, 120, 179, 0.78);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(12, 28, 55, 0.92), rgba(8, 18, 39, 0.9));
    padding: 10px 11px;
    margin: 0 0 12px;
}

.public-profit-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.public-profit-chart-head h3 {
    margin: 0;
    font-size: 13px;
    color: #d9ebff;
}

.public-profit-chart-head span {
    font-size: 11px;
    color: #a8c3ea;
}

.public-profit-chart-wrap {
    border: 1px solid rgba(70, 99, 151, 0.7);
    border-radius: 10px;
    background:
        linear-gradient(to top, rgba(20, 40, 75, 0.45), rgba(20, 40, 75, 0.12)),
        repeating-linear-gradient(
            to right,
            rgba(125, 163, 229, 0.08) 0px,
            rgba(125, 163, 229, 0.08) 1px,
            transparent 1px,
            transparent 16px
        );
    overflow: hidden;
}

.public-profit-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.public-profit-axis {
    stroke: rgba(156, 186, 236, 0.55);
    stroke-width: 1;
}

.public-profit-grid {
    stroke: rgba(156, 186, 236, 0.2);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.public-profit-line {
    fill: none;
    stroke: url(#profitLineGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 7px rgba(52, 211, 153, 0.35));
}

.public-profit-last-point {
    fill: #34d399;
    stroke: #d1fae5;
    stroke-width: 1.3;
}

.public-profit-chart-meta {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #abc7ef;
}

.public-profit-chart-empty {
    border: 1px dashed rgba(121, 150, 196, 0.55);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: #9cb9e1;
}

.public-team-points-chart-empty {
    margin-top: 4px;
}

.public-team-points-chart-card {
    margin-top: 4px;
}

.public-team-points-chart-wrap {
    background:
        linear-gradient(to top, rgba(20, 40, 75, 0.45), rgba(20, 40, 75, 0.12)),
        repeating-linear-gradient(
            to right,
            color-mix(in srgb, var(--team-accent) 12%, transparent) 0px,
            color-mix(in srgb, var(--team-accent) 12%, transparent) 1px,
            transparent 1px,
            transparent 16px
        );
}

.public-team-points-line {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--team-accent) 45%, transparent));
}

.public-team-points-axis-y {
    fill: #9cb9e1;
    font-size: 11px;
    font-weight: 700;
}

.public-team-points-axis-x {
    fill: #a8c6ef;
    font-size: 10px;
    font-weight: 600;
}

.public-team-points-axis-x--dense {
    font-size: 7px;
    font-weight: 700;
}

.public-team-points-hit {
    cursor: default;
    pointer-events: all;
}

/* Appended to document.body by team-points-chart-tooltip.js */
.public-team-points-chart-tooltip {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    margin: 0;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    max-width: min(280px, calc(100vw - 24px));
    white-space: normal;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.public-team-points-chart-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
}

.public-team-points-vertex-dot {
    pointer-events: none;
}

.public-team-points-axis-x-title {
    fill: #8aa3cc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fixture-row-odds--team-hub {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(57, 80, 123, 0.35);
}

.fixture-row-odds-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 2px;
}

.fixture-odds-chip {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #dbe8ff;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 28%, rgba(78, 110, 165, 0.55));
    background: color-mix(in srgb, var(--team-accent) 10%, rgba(6, 14, 32, 0.55));
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub {
    flex-wrap: wrap;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-row-broadcasts-chips {
    flex-wrap: wrap;
    gap: 3px;
    row-gap: 3px;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-broadcast-chip {
    font-size: 9px;
    padding: 2px 5px;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-broadcast-chip-logo--skysports {
    height: 10px;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-broadcast-chip-logo--talksport {
    height: 11px;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-broadcast-chip-logo--bbc-radio-5-live {
    height: 12px;
    max-width: min(92px, 100%);
}

.public-tip-history-card {
    border: 1px solid rgba(66, 96, 149, 0.7);
    border-radius: 12px;
    background: rgba(11, 24, 48, 0.62);
    padding: 12px 14px;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.public-tip-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.public-tip-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
}

.public-tip-history-stats {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.result-correct {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.45);
    color: #c9f7db;
}

.result-incorrect {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
    color: #ffd0d0;
}

.result-pending {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.45);
    color: #dbe2ee;
}

.public-team-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-team-crest {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px;
}

.accuracy-widget {
    position: relative;
    margin: 0 0 12px;
    border: 1px solid rgba(71, 103, 156, 0.76);
    border-radius: 14px;
    padding: 12px 10px 10px;
    background: linear-gradient(165deg, rgba(13, 27, 54, 0.9), rgba(9, 20, 41, 0.86));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.accuracy-widget::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.24), rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0));
    animation: accuracySpin 5.8s linear infinite;
}

.accuracy-widget::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(56, 189, 248, 0.14), transparent 55%);
    pointer-events: none;
}

.accuracy-widget-orbit {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 1px solid rgba(89, 124, 184, 0.65);
    background: radial-gradient(circle, rgba(14, 29, 58, 0.95) 58%, rgba(9, 20, 42, 0.95) 100%);
    box-shadow: 0 0 0 5px rgba(63, 93, 146, 0.15), 0 0 24px rgba(56, 189, 248, 0.12);
    position: relative;
    z-index: 1;
    animation: accuracyPulse 2.6s ease-in-out infinite;
}

.accuracy-widget-center {
    position: absolute;
    top: 42px;
    z-index: 2;
    display: grid;
    place-items: center;
}

.accuracy-widget-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #e6f3ff;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.32);
}

.accuracy-widget-label {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #9cbbe5;
    font-weight: 700;
}

.accuracy-widget-meta {
    margin-top: 10px;
    z-index: 2;
}

.accuracy-widget-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(81, 112, 165, 0.72);
    border-radius: 999px;
    background: rgba(17, 32, 61, 0.78);
    color: #cfe2ff;
    font-size: 11px;
    padding: 4px 9px;
}

.sidebar-pulse-widget {
    margin: 0 0 12px;
    border: 1px solid rgba(76, 106, 161, 0.74);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(13, 27, 54, 0.9), rgba(8, 18, 39, 0.88));
    padding: 10px 10px 9px;
}

.sidebar-pulse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sidebar-pulse-head h3 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #d3e7ff;
}

.sidebar-pulse-head span {
    font-size: 10px;
    color: #a8c3ea;
}

.sidebar-pulse-chart {
    min-height: 58px;
    border-radius: 10px;
    border: 1px solid rgba(70, 99, 151, 0.7);
    background:
        linear-gradient(to top, rgba(22, 41, 76, 0.55), rgba(22, 41, 76, 0.1)),
        repeating-linear-gradient(
            to right,
            rgba(125, 163, 229, 0.08) 0px,
            rgba(125, 163, 229, 0.08) 1px,
            transparent 1px,
            transparent 8px
        );
    display: flex;
    align-items: end;
    gap: 4px;
    padding: 7px 6px 6px;
    overflow: hidden;
}

.sidebar-pulse-bar {
    width: 8px;
    border-radius: 3px 3px 2px 2px;
    display: inline-block;
    box-shadow: 0 0 8px rgba(15, 23, 42, 0.45);
}

.sidebar-pulse-bar.is-win {
    background: linear-gradient(180deg, #4ade80, #16a34a);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.32);
}

.sidebar-pulse-bar.is-loss {
    background: linear-gradient(180deg, #fb7185, #dc2626);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.28);
}

.sidebar-pulse-empty {
    width: 100%;
    text-align: center;
    color: #9ab7e1;
    font-size: 11px;
    align-self: center;
}

.sidebar-pulse-meta {
    margin: 7px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #a8c3ea;
}

.public-team-comments-widget {
    --tc-accent: #60a5fa;
    position: relative;
    margin: 0 0 12px;
    padding: 12px 11px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--tc-accent) 45%, rgba(76, 106, 161, 0.7));
    background:
        linear-gradient(152deg, rgba(11, 24, 52, 0.96) 0%, rgba(8, 17, 38, 0.94) 58%, rgba(15, 31, 58, 0.95) 100%),
        radial-gradient(ellipse 130% 95% at 100% 0%, color-mix(in srgb, var(--tc-accent) 22%, transparent), transparent 58%);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 12px 28px rgba(2, 8, 24, 0.35);
}

.public-team-comments-widget__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--tc-accent) 42%, transparent), transparent 68%);
    pointer-events: none;
}

.public-team-comments-widget__head,
.public-team-comments-widget__list,
.public-team-comments-widget__empty {
    position: relative;
    z-index: 1;
}

.public-team-comments-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.public-team-comments-widget__head h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #e5edff;
}

.public-team-comments-widget__sort {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(113, 152, 210, 0.32);
    background: rgba(9, 20, 43, 0.72);
}

.public-team-comments-widget__sort-btn {
    font-size: 10px;
    font-weight: 700;
    color: #aac2e6;
    text-decoration: none;
    padding: 4px 7px;
    border-radius: 999px;
}

.public-team-comments-widget__sort-btn:hover {
    color: #e5edff;
    background: rgba(148, 163, 184, 0.13);
}

.public-team-comments-widget__sort-btn.is-active {
    color: #f8fafc;
    background: color-mix(in srgb, var(--tc-accent) 38%, rgba(30, 58, 138, 0.75));
}

.public-team-comments-widget__list {
    display: grid;
    gap: 8px;
}

.public-team-comments-widget__item {
    display: block;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid rgba(87, 116, 170, 0.55);
    background: linear-gradient(165deg, rgba(13, 26, 52, 0.92), rgba(8, 16, 36, 0.92));
    padding: 8px 9px 9px;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.public-team-comments-widget__item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tc-accent) 60%, rgba(120, 159, 217, 0.78));
    background: linear-gradient(165deg, rgba(16, 32, 64, 0.96), rgba(9, 19, 41, 0.94));
}

.public-team-comments-widget__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.public-team-comments-widget__author {
    font-size: 11px;
    font-weight: 700;
    color: #dbe7ff;
}

.public-team-comments-widget__votes {
    font-size: 10px;
    color: #97b3df;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.public-team-comments-widget__body {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #c9d9f2;
}

.public-team-comments-widget__article {
    font-size: 10px;
    color: #8fb0df;
}

.public-team-comments-widget__empty {
    margin: 0;
    font-size: 12px;
    color: #9cb8df;
}

/* Sidebar: league season snapshot (finished fixtures) */
.sidebar-season-stats {
    --season-stats-accent: #a78bfa;
    --season-stats-accent2: #38bdf8;
    position: relative;
    margin: 0 0 12px;
    padding: 12px 11px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--season-stats-accent) 42%, rgba(76, 106, 161, 0.65));
    background:
        linear-gradient(148deg, rgba(11, 24, 52, 0.94) 0%, rgba(8, 16, 38, 0.92) 55%, rgba(14, 26, 58, 0.95) 100%),
        radial-gradient(ellipse 100% 80% at 0% 0%, color-mix(in srgb, var(--season-stats-accent) 18%, transparent), transparent 58%);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 12px 28px rgba(2, 8, 24, 0.35);
}

.sidebar-season-stats__aurora {
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 210deg,
        transparent,
        color-mix(in srgb, var(--season-stats-accent2) 22%, transparent),
        transparent 40%,
        color-mix(in srgb, var(--season-stats-accent) 18%, transparent),
        transparent 70%
    );
    opacity: 0.45;
    animation: sidebarSeasonStatsAurora 10s linear infinite;
    pointer-events: none;
}

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

.sidebar-season-stats__head,
.sidebar-season-stats__hero,
.sidebar-season-stats__outcomes,
.sidebar-season-stats__tiles,
.sidebar-season-stats__foot {
    position: relative;
    z-index: 1;
}

.sidebar-season-stats__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sidebar-season-stats__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #e8f0ff;
}

.sidebar-season-stats__title .fa-chart-simple {
    font-size: 12px;
    color: color-mix(in srgb, var(--season-stats-accent2) 75%, #e2e8f0);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--season-stats-accent2) 40%, transparent));
}

.sidebar-season-stats__season {
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in srgb, var(--season-stats-accent) 55%, #b8cce8);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(129, 161, 214, 0.35);
    background: rgba(8, 18, 42, 0.65);
}

.sidebar-season-stats__hero {
    text-align: center;
    padding: 8px 6px 10px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid rgba(100, 132, 196, 0.4);
    background:
        linear-gradient(165deg, rgba(18, 36, 72, 0.75), rgba(10, 22, 48, 0.55)),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--season-stats-accent2) 25%, transparent), transparent 62%);
}

.sidebar-season-stats__hero-value {
    display: block;
    font-size: clamp(28px, 6vw, 34px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, #f8fafc 0%, color-mix(in srgb, var(--season-stats-accent2) 55%, #e0e7ff) 45%, color-mix(in srgb, var(--season-stats-accent) 50%, #f5f3ff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px color-mix(in srgb, var(--season-stats-accent2) 35%, transparent);
}

.sidebar-season-stats__hero-label {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #9cb7e3;
}

.sidebar-season-stats__hero-meta {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #8aa6d4;
    font-weight: 600;
}

.sidebar-season-stats__outcomes {
    margin-bottom: 10px;
}

.sidebar-season-stats__outcome-bar {
    display: flex;
    width: 100%;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(6, 14, 32, 0.85);
    box-shadow: 0 0 0 1px rgba(88, 120, 180, 0.35) inset;
}

.sidebar-season-stats__outcome-seg {
    height: 100%;
    min-width: 0;
    transition: filter 0.2s ease;
}

.sidebar-season-stats__outcome-seg--home {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.sidebar-season-stats__outcome-seg--draw {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.2);
}

.sidebar-season-stats__outcome-seg--away {
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.28);
}

.sidebar-season-stats__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ab7e1;
}

.sidebar-season-stats__legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sidebar-season-stats__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.sidebar-season-stats__dot--home {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.sidebar-season-stats__dot--draw {
    background: #cbd5e1;
}

.sidebar-season-stats__dot--away {
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.45);
}

.sidebar-season-stats__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-season-stats__tiles li {
    padding: 7px 5px 6px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(86, 118, 176, 0.45);
    background: linear-gradient(160deg, rgba(14, 30, 60, 0.88), rgba(8, 18, 40, 0.82));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.sidebar-season-stats__tile-value {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.15;
}

.sidebar-season-stats__tile-label {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: #8aa6d4;
    line-height: 1.25;
}

.sidebar-season-stats__foot {
    margin: 9px 0 0;
    font-size: 9px;
    color: #7c9aca;
    text-align: center;
    font-weight: 600;
    opacity: 0.92;
}

/* Sidebar: free bet advert */
.sidebar-advert-freebet {
    --sidebar-ad-accent: #22c55e;
    --sidebar-ad-badge-start: #fde68a;
    --sidebar-ad-badge-end: #fbbf24;
    --sidebar-ad-kicker-color: color-mix(in srgb, var(--sidebar-ad-accent) 85%, #bae6fd);
    --sidebar-ad-title-color: #f0f7ff;
    --sidebar-ad-copy-color: #9fb8df;
    --sidebar-ad-cta-text: #052e16;
    --sidebar-ad-cta-bg-start: color-mix(in srgb, var(--sidebar-ad-accent) 92%, #fff);
    --sidebar-ad-cta-bg-end: var(--sidebar-ad-accent);
    --sidebar-ad-legal-color: #6b8ab8;
    position: relative;
    display: block;
    margin: 0 0 14px;
    padding: 14px 14px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: #e8f4ff;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sidebar-ad-accent) 55%, rgba(100, 140, 200, 0.5));
    background:
        linear-gradient(155deg, rgba(12, 28, 58, 0.96) 0%, rgba(8, 18, 42, 0.94) 100%),
        radial-gradient(ellipse 120% 80% at 100% 0%, color-mix(in srgb, var(--sidebar-ad-accent) 22%, transparent), transparent 55%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 12px 28px rgba(3, 10, 28, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.public-mid-advert-panel {
    padding: 10px;
}

.homepage-mid-advert {
    margin: 0;
    min-height: 152px;
}

.public-news-article-advert-slot {
    margin-top: 1.25rem;
}

.public-news-article-advert--static {
    cursor: default;
    text-decoration: none;
}

.public-news-article-advert--static:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--sidebar-ad-accent) 55%, rgba(100, 140, 200, 0.5));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 12px 28px rgba(3, 10, 28, 0.45);
}

.homepage-mid-advert-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.homepage-mid-advert-main {
    min-width: 0;
}

.homepage-mid-advert-main .sidebar-advert-copy {
    margin-bottom: 0;
}

.homepage-mid-advert-side {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
    max-width: 220px;
}

.homepage-mid-advert-side .sidebar-advert-legal {
    margin-top: 0;
}

@media (max-width: 720px) {
    .homepage-mid-advert-grid {
        grid-template-columns: 1fr;
    }

    .homepage-mid-advert-side {
        align-items: flex-start;
        text-align: left;
        max-width: 100%;
    }
}

.sidebar-advert-freebet:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sidebar-ad-accent) 75%, #7dd3fc);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sidebar-ad-accent) 35%, transparent) inset,
        0 16px 36px rgba(3, 10, 28, 0.55),
        0 0 24px color-mix(in srgb, var(--sidebar-ad-accent) 25%, transparent);
}

.sidebar-advert-glow {
    position: absolute;
    inset: -40%;
    background: conic-gradient(
        from 200deg,
        transparent,
        color-mix(in srgb, var(--sidebar-ad-accent) 18%, transparent),
        transparent 40%
    );
    animation: sidebarAdvertSpin 8s linear infinite;
    pointer-events: none;
    opacity: 0.85;
}

.sidebar-advert-freebet > *:not(.sidebar-advert-glow) {
    position: relative;
    z-index: 1;
}

.sidebar-advert-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a1628;
    background: linear-gradient(90deg, var(--sidebar-ad-badge-start), var(--sidebar-ad-badge-end));
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--sidebar-ad-badge-end) 45%, transparent);
}

.sidebar-advert-kicker {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--sidebar-ad-kicker-color);
    font-weight: 700;
    margin-bottom: 4px;
}

.sidebar-advert-title {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--sidebar-ad-title-color);
    text-shadow: 0 0 20px color-mix(in srgb, var(--sidebar-ad-accent) 35%, transparent);
    margin-bottom: 6px;
}

.sidebar-advert-copy {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--sidebar-ad-copy-color);
}

.sidebar-advert-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--sidebar-ad-cta-text);
    background: linear-gradient(135deg, var(--sidebar-ad-cta-bg-start), var(--sidebar-ad-cta-bg-end));
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sidebar-ad-accent) 40%, transparent);
}

.sidebar-advert-cta i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.sidebar-advert-freebet:hover .sidebar-advert-cta i {
    transform: translateX(3px);
}

.sidebar-advert-legal {
    margin: 10px 0 0;
    font-size: 9px;
    line-height: 1.35;
    color: var(--sidebar-ad-legal-color);
}

@keyframes sidebarAdvertSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes accuracySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes accuracyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(63, 93, 146, 0.15), 0 0 24px rgba(56, 189, 248, 0.12); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(63, 93, 146, 0.12), 0 0 30px rgba(56, 189, 248, 0.22); }
}

@keyframes featuredCorrectSweep {
    0% { left: -42%; }
    55% { left: 112%; }
    100% { left: 112%; }
}

.public-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(61, 87, 135, 0.8);
    border-radius: 12px;
}

.public-standings-table {
    /* Auto layout: Team column grows with content and pushes P/GD/Pts; wrapper scrolls if wider than sidebar */
    width: max(100%, max-content);
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.public-standings-table th,
.public-standings-table td {
    padding: 8px 9px;
    border-bottom: 1px solid rgba(57, 80, 123, 0.7);
    text-align: left;
    font-size: 12px;
}

.public-standings-table th {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Tight numeric columns; extra width goes to Team */
.public-standings-table th:not(:first-child),
.public-standings-table td:not(:first-child) {
    white-space: nowrap;
    width: 1%;
}

/*
 * Sidebar league table: cap team column width so P/GD/Pts stay visible, without a fixed % that
 * leaves a huge empty band when team names are short (fixed 54% + table-layout:fixed caused that).
 */
.public-league-side .public-standings-table {
    table-layout: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.public-league-side .public-standings-table th:first-child,
.public-league-side .public-standings-table td:first-child {
    width: auto;
    max-width: 58%;
}

.public-league-side .public-standings-table .public-team-cell {
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.public-league-side .public-standings-table .public-team-cell > .public-sidebar-standings-team {
    flex: 1 1 auto;
    min-width: 0;
}

.public-league-side .public-standings-table .public-sidebar-standings-team-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* P, GD, Pts — align stat columns */
.public-league-side .public-standings-table th:nth-child(n + 2),
.public-league-side .public-standings-table td:nth-child(n + 2) {
    text-align: right;
}

/* Sidebar table: zone rows (1st, 2–5 chase, 6th, bottom three relegation) */
.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--first {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.22), rgba(234, 179, 8, 0.06));
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--chase {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.06));
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--sixth {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.07));
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--releg {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.16), rgba(185, 28, 28, 0.09));
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--first .public-sidebar-standings-pos {
    color: #fde68a;
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--chase .public-sidebar-standings-pos {
    color: #93c5fd;
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--sixth .public-sidebar-standings-pos {
    color: #c4b5fd;
}

.public-league-side .public-standings-table tbody tr.public-sidebar-standings-row--releg .public-sidebar-standings-pos {
    color: #fecaca;
}

.confidence-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
}

.confidence-low {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
    color: #ffd0d0;
}

.confidence-mid {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
    color: #ffe3ae;
}

.confidence-high {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.45);
    color: #c9f7db;
}

/* Desktop: bottom tab bar hidden */
.public-mobile-tabbar {
    display: none;
}

@media (max-width: 960px) {
    body.site-body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    .public-layout {
        grid-template-columns: 1fr;
    }

    .public-brand-logo {
        height: 44px;
        max-width: 88px;
    }

    .futuristic-hero-ring-a,
    .futuristic-hero-ring-b {
        display: none;
    }

    .public-header-inner {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 12px;
    }

    .public-header-end {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
        order: 3;
    }

    .public-nav {
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 0;
        row-gap: 0;
        padding: 4px 0 2px;
        mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    }

    .public-nav > *:not(:last-child) {
        flex-shrink: 0;
    }

    .public-nav a,
    .public-nav-dropdown-trigger {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .public-nav-teams-wrap {
        flex-shrink: 0;
    }

    .public-mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        margin: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 2px;
        align-items: stretch;
        justify-content: space-around;
        border-top: 1px solid var(--border);
        background: rgba(8, 18, 38, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -8px 28px rgba(2, 8, 22, 0.4);
    }

    .public-mobile-tabbar__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        transition:
            color 0.15s ease,
            background 0.15s ease;
    }

    .public-mobile-tabbar__item i {
        font-size: 17px;
        opacity: 0.88;
    }

    .public-mobile-tabbar__item:hover,
    .public-mobile-tabbar__item:focus-visible {
        color: var(--text);
        background: rgba(56, 189, 248, 0.1);
        outline: none;
    }

    .public-mobile-tabbar__item:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--primary) 65%, #7dd3fc);
        outline-offset: 1px;
    }
}

@keyframes hero-grid-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(36px); }
}

@keyframes hero-glow-float-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-24px, 12px, 0); }
}

@keyframes hero-glow-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(22px, -16px, 0); }
}

@keyframes hero-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hero-ring-spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes hero-scan {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(245px); opacity: 0; }
}

.public-footer {
    border-top: 1px solid var(--border);
    margin-top: 20px;
    background: rgba(8, 18, 38, 0.78);
}

.public-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 16px 14px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 18px;
}

.public-footer-col h3,
.public-footer-col h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.public-footer-col p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.public-footer-col a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 6px;
}

.public-footer-col a:hover {
    color: var(--text);
}

.public-socials {
    display: flex;
    gap: 8px;
}

.public-socials a {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.public-footer-bottom {
    border-top: 1px solid rgba(53, 79, 122, 0.7);
    padding: 10px 16px 14px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 960px) {
    .public-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------------------- */
/* Team hub (/team/slug) — uses --team-accent on body.public-team-page       */
/* ------------------------------------------------------------------------- */

.public-team-page {
    --team-accent: #2563eb;
}

/* Team hub + news article: tint header and news hero with --team-accent */
.public-team-page .public-header {
    border-bottom-color: color-mix(in srgb, var(--team-accent) 48%, var(--border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--team-accent) 14%, rgba(8, 18, 38, 0.9)) 0%,
        rgba(8, 18, 38, 0.82) 100%
    );
}

.public-team-page .public-nav-item-icon {
    color: color-mix(in srgb, var(--team-accent) 32%, rgba(125, 211, 252, 0.92));
}

.public-team-page .public-nav a:hover,
.public-team-page .public-nav-dropdown-trigger:hover {
    color: color-mix(in srgb, var(--team-accent) 22%, #f8fafc);
    border-bottom-color: color-mix(in srgb, var(--team-accent) 48%, rgba(125, 211, 252, 0.55));
}

.public-team-page .public-nav-teams-wrap.is-open .public-nav-dropdown-trigger {
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--team-accent) 55%, rgba(125, 211, 252, 0.7));
}

.public-team-page .public-news-route-hero {
    border-bottom-color: color-mix(in srgb, var(--team-accent) 42%, rgba(96, 165, 250, 0.12));
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--team-accent) 32%, #0a1428) 0%,
        rgba(8, 18, 38, 0.94) 55%
    );
}

.public-team-page .public-news-route-kicker {
    color: color-mix(in srgb, var(--team-accent) 68%, #e0f2fe);
}

.public-team-page .public-news-route-links a {
    color: color-mix(in srgb, var(--team-accent) 72%, #dbeafe);
}

.public-team-page .public-news-route-links a:hover {
    color: #fff;
}

.public-team-page .public-breadcrumbs-item > a {
    color: color-mix(in srgb, var(--team-accent) 72%, #dbeafe);
    border-color: color-mix(in srgb, var(--team-accent) 38%, rgba(91, 122, 184, 0.55));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--team-accent) 22%, rgba(18, 34, 62, 0.92)),
        color-mix(in srgb, var(--team-accent) 12%, rgba(10, 22, 44, 0.9))
    );
}

.public-team-page .public-breadcrumbs-item > a:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--team-accent) 55%, rgba(125, 211, 252, 0.5));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--team-accent) 28%, rgba(24, 44, 78, 0.96)),
        color-mix(in srgb, var(--team-accent) 16%, rgba(14, 28, 52, 0.94))
    );
}

.public-team-page .public-breadcrumbs-item:not(:last-child)::after {
    color: color-mix(in srgb, var(--team-accent) 45%, #5b7ab8);
}

.public-team-page .public-breadcrumbs-item > .public-breadcrumbs-text {
    color: color-mix(in srgb, var(--team-accent) 35%, #aac7ee);
    border-color: color-mix(in srgb, var(--team-accent) 32%, rgba(91, 122, 184, 0.55));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--team-accent) 18%, rgba(18, 34, 62, 0.92)),
        color-mix(in srgb, var(--team-accent) 10%, rgba(10, 22, 44, 0.88))
    );
}

.public-team-page .public-breadcrumbs-item > .public-breadcrumbs-current {
    color: color-mix(in srgb, var(--team-accent) 18%, #f0f7ff);
    border-color: color-mix(in srgb, var(--team-accent) 42%, rgba(125, 160, 220, 0.5));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--team-accent) 26%, rgba(22, 42, 74, 0.96)),
        color-mix(in srgb, var(--team-accent) 14%, rgba(12, 26, 48, 0.92))
    );
}

.public-team-hero {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--team-accent) 32%, #0a1428) 0%,
        #0a1428 55%
    );
}

/* Same animated backdrop layers as .public-news-route-hero / .futuristic-hero */
.public-team-hero .futuristic-hero-grid,
.public-team-hero .futuristic-hero-glow,
.public-team-hero .futuristic-hero-ring,
.public-team-hero .futuristic-scan-line {
    z-index: 0;
    pointer-events: none;
}

.public-team-hero .futuristic-hero-glow-a {
    background: color-mix(in srgb, var(--team-accent) 50%, #2f7cff);
}

.public-team-hero .futuristic-hero-glow-b {
    background: color-mix(in srgb, var(--team-accent) 40%, #7f4dff);
}

.public-team-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(520px 220px at 12% 40%, color-mix(in srgb, var(--team-accent) 42%, transparent), transparent 72%),
        radial-gradient(380px 200px at 88% 10%, color-mix(in srgb, var(--team-accent) 22%, transparent), transparent);
    pointer-events: none;
}

.public-team-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.public-team-hero-crest {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

.public-team-hero-crest-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid color-mix(in srgb, var(--team-accent) 35%, transparent);
}

.public-team-hero-kicker {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--team-accent) 72%, #f8fafc);
}

.public-team-hero-title {
    margin: 0;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
}

.public-team-hero-sub {
    margin: 10px 0 0;
    max-width: 520px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.public-team-hero-breadcrumbs {
    margin: 10px 0 0;
    max-width: 640px;
}

.public-team-page .public-team-hub-section {
    scroll-margin-top: 1.25rem;
}

/* Sponsored offer inside AI picks card (team hub) */
.public-team-ai-picks-offer {
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 38%, rgba(81, 112, 165, 0.7));
    background: rgba(4, 12, 28, 0.45);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 12%, transparent) inset,
        0 8px 22px rgba(3, 10, 24, 0.35);
}

.public-team-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #f4f9ff;
    text-decoration: none;
}

.public-team-hero-back:hover {
    text-decoration: underline;
    color: color-mix(in srgb, var(--team-accent) 55%, #fff);
}

.public-team-accent-panel {
    border-color: color-mix(in srgb, var(--team-accent) 38%, var(--border)) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 18%, transparent),
        var(--shadow);
}

.public-team-accent-panel .public-section-title {
    border-left: 4px solid var(--team-accent);
    padding-left: 12px;
    margin-left: -4px;
}

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

@media (max-width: 900px) {
    .public-team-youtube-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .public-team-youtube-grid {
        grid-template-columns: 1fr;
    }
}

.public-team-youtube-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid color-mix(in srgb, var(--team-accent) 20%, var(--border));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.public-team-youtube-card:hover {
    border-color: color-mix(in srgb, var(--team-accent) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--team-accent) 22%, transparent);
}

.public-team-youtube-thumb-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
}

.public-team-youtube-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.public-team-youtube-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
    pointer-events: none;
}

.public-team-youtube-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: color-mix(in srgb, var(--team-accent) 28%, var(--text));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 961px) {
    .public-team-youtube--main-mobile {
        display: none !important;
    }
}

.public-team-youtube-sidebar-panel {
    margin: 0 0 12px;
    border: 1px solid rgba(76, 106, 161, 0.74);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(13, 27, 54, 0.9), rgba(8, 18, 39, 0.88));
    padding: 10px 10px 9px;
}

.public-team-page .public-team-youtube-sidebar-panel {
    border-color: color-mix(in srgb, var(--team-accent) 38%, rgba(76, 106, 161, 0.74));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 12%, transparent);
}

.public-team-youtube-sidebar-header {
    margin-bottom: 8px;
}

.public-team-youtube-sidebar-header .public-section-title {
    font-size: 13px;
    border-left: 3px solid var(--team-accent);
    padding-left: 8px;
    margin-left: -2px;
}

.public-team-youtube-sidebar-header .public-subtitle {
    font-size: 11px;
    margin-top: 2px;
}

.public-team-youtube-grid--sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.public-team-youtube-grid--sidebar .public-team-youtube-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.public-team-youtube-grid--sidebar .public-team-youtube-thumb-wrap {
    width: 112px;
    min-width: 112px;
    flex-shrink: 0;
}

.public-team-youtube-grid--sidebar .public-team-youtube-title {
    font-size: 12px;
    -webkit-line-clamp: 3;
}

.public-team-youtube-grid--sidebar .public-team-youtube-play {
    font-size: 1.25rem;
}

.public-team-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1024px) {
    .public-team-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .public-team-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-team-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

.public-team-stat-card {
    padding: 14px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid color-mix(in srgb, var(--team-accent) 22%, var(--border));
}

.public-team-stat-card-highlight {
    border-color: color-mix(in srgb, var(--team-accent) 55%, var(--border));
    background: color-mix(in srgb, var(--team-accent) 14%, rgba(0, 0, 0, 0.2));
}

.public-team-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 6px;
}

.public-team-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: color-mix(in srgb, var(--team-accent) 35%, var(--text));
}

.public-team-stat-card-highlight .public-team-stat-value {
    color: color-mix(in srgb, var(--team-accent) 58%, #fff);
}

.public-team-stat-sub {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--muted) 88%, var(--team-accent) 12%);
    line-height: 1.3;
}

/* —— Season overview + form breakdown (team hub): compact glass tiles —— */
.public-team-form-stats .public-team-form-stats-shelf {
    position: relative;
    margin-top: 4px;
    padding: 10px 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 28%, rgba(70, 99, 151, 0.65));
    background:
        linear-gradient(165deg, rgba(8, 20, 44, 0.55), rgba(5, 12, 28, 0.35)),
        repeating-linear-gradient(
            -18deg,
            transparent 0,
            transparent 10px,
            color-mix(in srgb, var(--team-accent) 5%, transparent) 10px,
            color-mix(in srgb, var(--team-accent) 5%, transparent) 11px
        );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 10%, transparent) inset,
        0 10px 28px rgba(2, 8, 22, 0.32);
    overflow: hidden;
}

.public-team-form-stats-glow {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 65%;
    background: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        color-mix(in srgb, var(--team-accent) 18%, transparent),
        transparent 68%
    );
    pointer-events: none;
    opacity: 0.75;
}

.public-team-form-shelf-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 88%, var(--team-accent) 12%);
}

.public-team-form-shelf-kicker--split {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--team-accent) 16%, rgba(63, 93, 146, 0.45));
}

.public-team-form-shelf-kicker-meta {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--muted) 70%, var(--team-accent) 30%);
}

.public-team-form-snapshot-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 640px) {
    .public-team-form-snapshot-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 400px) {
    .public-team-form-snapshot-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.public-team-form-snap-card {
    min-width: 0;
    padding: 8px 8px 9px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 26%, rgba(63, 93, 146, 0.5));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--team-accent) 10%, rgba(8, 18, 40, 0.94)),
        rgba(4, 12, 28, 0.9)
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 6%, transparent) inset,
        0 4px 12px rgba(2, 8, 18, 0.22);
    text-align: center;
}

.public-team-form-snap-card--points {
    border-color: color-mix(in srgb, var(--team-accent) 48%, rgba(99, 132, 196, 0.65));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--team-accent) 18%, rgba(8, 18, 40, 0.95)),
        color-mix(in srgb, var(--team-accent) 8%, rgba(4, 12, 28, 0.92))
    );
}

.public-team-form-snap-label {
    display: block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    line-height: 1.2;
}

.public-team-form-snap-value {
    display: block;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: color-mix(in srgb, var(--team-accent) 28%, var(--text));
}

.public-team-form-snap-card--points .public-team-form-snap-value {
    color: color-mix(in srgb, var(--team-accent) 52%, #f8fafc);
}

.public-team-form-stat-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1024px) {
    .public-team-form-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .public-team-form-stat-grid {
        grid-template-columns: 1fr;
    }
}

.public-team-form-stat-card {
    --form-card-tint: var(--team-accent);
    position: relative;
    min-width: 0;
    padding: 9px 9px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--form-card-tint) 28%, rgba(63, 93, 146, 0.5));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--form-card-tint) 10%, rgba(10, 22, 48, 0.92)),
        rgba(5, 14, 32, 0.88) 48%,
        rgba(4, 10, 24, 0.94)
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--form-card-tint) 6%, transparent) inset,
        0 4px 14px rgba(2, 8, 20, 0.24);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    overflow: hidden;
}

.public-team-form-stat-card::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--form-card-tint) 70%, #fff),
        color-mix(in srgb, var(--form-card-tint) 40%, #94a3b8),
        transparent
    );
    opacity: 0.88;
    pointer-events: none;
}

.public-team-form-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--form-card-tint) 45%, rgba(129, 161, 220, 0.7));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--form-card-tint) 14%, transparent) inset,
        0 10px 24px rgba(2, 8, 22, 0.36),
        0 0 20px color-mix(in srgb, var(--form-card-tint) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .public-team-form-stat-card {
        transition: none;
    }

    .public-team-form-stat-card:hover {
        transform: none;
    }
}

.public-team-form-stat-card--scored {
    --form-card-tint: #34d399;
}

.public-team-form-stat-card--blank {
    --form-card-tint: #fb7185;
}

.public-team-form-stat-card--clean {
    --form-card-tint: #38bdf8;
}

.public-team-form-stat-card--leaky {
    --form-card-tint: #fb923c;
}

.public-team-form-stat-card--btts {
    --form-card-tint: #a78bfa;
}

.public-team-form-stat-card--record {
    --form-card-tint: var(--team-accent);
}

.public-team-form-stat-card--gpg {
    --form-card-tint: #4ade80;
}

.public-team-form-stat-card--cpg {
    --form-card-tint: #fbbf24;
}

.public-team-form-stat-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 11px;
    color: color-mix(in srgb, var(--form-card-tint) 88%, #e2e8f0);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--form-card-tint) 18%, rgba(15, 30, 58, 0.9)),
        rgba(6, 14, 32, 0.75)
    );
    border: 1px solid color-mix(in srgb, var(--form-card-tint) 30%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.public-team-form-stat-label {
    display: block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 82%, var(--form-card-tint) 18%);
    margin: 0 32px 6px 0;
    line-height: 1.2;
}

.public-team-form-stat-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
    min-width: 0;
}

.public-team-form-stat-metric--wdl {
    margin-bottom: 6px;
}

.public-team-form-stat-value {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    max-width: 100%;
    text-shadow:
        0 0 14px color-mix(in srgb, var(--form-card-tint) 28%, transparent),
        0 1px 0 rgba(0, 0, 0, 0.3);
}

.public-team-form-stat-value--wdl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
    font-size: 0.95rem;
    max-width: 100%;
}

.public-team-form-stat-wdl {
    min-width: 0;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.public-team-form-stat-wdl--w {
    color: #bbf7d0;
    background: color-mix(in srgb, #22c55e 22%, rgba(6, 18, 40, 0.85));
    border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
}

.public-team-form-stat-wdl--d {
    color: #e2e8f0;
    background: color-mix(in srgb, var(--muted) 18%, rgba(6, 18, 40, 0.85));
    border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.public-team-form-stat-wdl--l {
    color: #fecdd3;
    background: color-mix(in srgb, #f43f5e 20%, rgba(6, 18, 40, 0.85));
    border: 1px solid color-mix(in srgb, #f43f5e 38%, transparent);
}

.public-team-form-stat-wdl-sep {
    color: var(--muted);
    font-weight: 600;
    opacity: 0.65;
    user-select: none;
}

.public-team-form-stat-wdl-pcts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

.public-team-form-stat-wdl-pill {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.public-team-form-stat-wdl-pill--w {
    color: #bbf7d0;
    background: color-mix(in srgb, #22c55e 18%, rgba(8, 20, 44, 0.9));
    border: 1px solid color-mix(in srgb, #22c55e 40%, transparent);
}

.public-team-form-stat-wdl-pill--d {
    color: #cbd5e1;
    background: color-mix(in srgb, var(--muted) 15%, rgba(8, 20, 44, 0.9));
    border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}

.public-team-form-stat-wdl-pill--l {
    color: #fecdd3;
    background: color-mix(in srgb, #f43f5e 16%, rgba(8, 20, 44, 0.9));
    border: 1px solid color-mix(in srgb, #f43f5e 35%, transparent);
}

.public-team-form-stat-pct {
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--form-card-tint) 55%, #f8fafc);
    background: color-mix(in srgb, var(--form-card-tint) 12%, rgba(6, 16, 38, 0.92));
    border: 1px solid color-mix(in srgb, var(--form-card-tint) 32%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--form-card-tint) 10%, transparent);
    flex-shrink: 0;
}

.public-team-form-stat-card .public-team-form-stat-sub {
    margin-top: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, var(--muted) 75%, var(--form-card-tint) 25%);
}

.public-team-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
 * Team hub: stack layout (not Today’s Games single-row desktop).
 * Compact card + details strip — tight vertical rhythm.
 */
.public-team-fixtures-list .fixture-row.public-team-fixture-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 11px 0;
    margin: 0;
    border: none;
    border-radius: 11px;
    border-bottom: none !important;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--team-accent) 9%, rgba(12, 26, 52, 0.92)),
        rgba(7, 16, 36, 0.88)
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 22%, rgba(63, 93, 146, 0.55)) inset,
        0 5px 16px rgba(2, 8, 22, 0.22);
    transition:
        box-shadow 0.22s ease,
        transform 0.22s ease,
        border-color 0.22s ease;
}

.public-team-fixtures-list .fixture-row.public-team-fixture-row:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-accent) 38%, rgba(99, 132, 196, 0.65)) inset,
        0 8px 22px rgba(2, 8, 22, 0.32);
}

.public-team-fixtures-list .fixture-row-main {
    flex: none;
    width: 100%;
    min-width: 0;
    padding-bottom: 7px;
    gap: 6px;
}

.public-team-fixtures-list .fixture-score {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f1f5f9;
    min-width: 56px;
}

.public-team-fixtures-list .fixture-team {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
}

/* Full-bleed footer band: time, bet, league, odds, broadcasts */
.public-team-fixtures-list .fixture-row > .fixture-row-meta {
    width: auto;
    flex: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin: 0 -11px;
    padding: 6px 11px 5px;
    border-radius: 8px 8px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--team-accent) 28%, rgba(57, 80, 123, 0.5));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--team-accent) 12%, rgba(5, 12, 28, 0.75)),
        rgba(4, 10, 24, 0.55)
    );
}

.public-team-fixtures-list .fixture-row > .fixture-row-odds--team-hub {
    flex: none;
    width: auto;
    box-sizing: border-box;
    margin: 0 -11px;
    padding: 5px 11px 6px;
    margin-top: 0;
    border-top: none;
    border-radius: 0;
    background: rgba(4, 10, 24, 0.55);
    gap: 5px;
}

.public-team-fixtures-list .fixture-row > .fixture-row-broadcasts,
.public-team-fixtures-list .fixture-row > .fixture-row-broadcasts--team-hub {
    margin: 0 -11px !important;
    padding: 6px 11px 8px !important;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid rgba(57, 80, 123, 0.32) !important;
    border-left: none !important;
    background: rgba(3, 9, 22, 0.5);
}

.public-team-fixtures-list .fixture-row > .fixture-row-broadcasts:last-child,
.public-team-fixtures-list .fixture-row > .fixture-row-broadcasts--team-hub:last-child {
    padding-bottom: 8px !important;
}

.public-team-fixtures-list .fixture-time {
    font-size: 11px;
    font-weight: 800;
    color: color-mix(in srgb, var(--team-accent) 35%, #c5d8ff);
    letter-spacing: 0.02em;
}

.public-team-fixtures-list .fixture-bet-link {
    padding: 2px 6px 2px 4px;
    font-size: 10px;
    gap: 4px;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--affiliate-color) 18%, transparent);
}

.public-team-fixtures-list .fixture-bet-badge {
    min-width: 38px;
    font-size: 8px;
    padding: 1px 4px;
}

.public-team-fixtures-list .fixture-league-pill {
    padding: 3px 8px;
    font-size: 10px;
}

.public-team-fixtures-list .fixture-row-odds-label {
    font-size: 9px;
    margin-right: 0;
}

.public-team-fixtures-list .fixture-odds-chip {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 6px;
}

.public-team-fixtures-list .fixture-team-crest {
    width: 14px;
    height: 14px;
}

/* Keep home name + crest grouped toward the score (avoid flex-grow gap between text and badge) */
.public-team-fixtures-list .fixture-team-line-home > span:first-child {
    flex: 0 1 auto;
    max-width: 100%;
    text-align: right;
}

.public-team-fixtures-list .fixture-team-line-away > span:last-child {
    flex: 0 1 auto;
    max-width: 100%;
    text-align: left;
}

.public-team-fixtures-list .fixture-row-broadcasts--team-hub .fixture-broadcast-empty {
    color: #8aa3cc;
}

@media (min-width: 1024px) {
    .public-team-fixtures-list .fixture-row.public-team-fixture-row {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .public-team-fixtures-list .fixture-row-main {
        flex: none !important;
        min-width: 0;
    }

    .public-team-fixtures-list .fixture-row-meta {
        flex: none;
        flex-wrap: wrap;
    }

    .public-team-fixtures-list .fixture-row-broadcasts,
    .public-team-fixtures-list .fixture-row-broadcasts--team-hub {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

.public-team-fixture-row {
    border-color: transparent;
}

.fixture-league-pill {
    font-size: 11px;
    color: var(--muted);
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--team-accent) 12%, rgba(0, 0, 0, 0.25));
    border: 1px solid color-mix(in srgb, var(--team-accent) 22%, transparent);
}

.public-team-fixtures-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--team-accent) 32%, rgba(63, 93, 146, 0.85));
    border-radius: 999px;
    background: rgba(10, 21, 43, 0.85);
}

.public-team-page .public-team-fixtures-tab {
    font: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    color: #9fb5de;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.public-team-page .public-team-fixtures-tab:hover {
    background: color-mix(in srgb, var(--team-accent) 22%, rgba(47, 80, 136, 0.35));
    color: #e6f0ff;
}

.public-team-page .public-team-fixtures-tab.is-active {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--team-accent) 42%, rgba(56, 189, 248, 0.2)),
        color-mix(in srgb, var(--team-accent) 28%, rgba(99, 102, 241, 0.22))
    );
    color: #eef7ff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--team-accent) 55%, transparent) inset;
}

.public-team-fixtures-panel[hidden] {
    display: none !important;
}

.public-standings-row-active {
    background: color-mix(in srgb, var(--team-accent) 12%, transparent) !important;
}

/* Team column: width follows name + crest (no fixed %); pushes stat columns when longer */
.public-standings-table td:first-child {
    width: auto;
    max-width: none;
    min-width: 0;
    vertical-align: middle;
}

.public-standings-table .public-team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: none;
    min-width: 0;
}

.public-standings-table .public-sidebar-standings-pos {
    flex-shrink: 0;
    min-width: 1.5em;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    line-height: 1;
}

.public-standings-row-active .public-sidebar-standings-pos {
    color: color-mix(in srgb, var(--team-accent) 55%, var(--muted));
}

.public-standings-table .public-team-crest {
    flex-shrink: 0;
}

.public-standings-table .public-team-cell > .public-sidebar-standings-team {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    align-self: center;
}

/* Single line so column width matches PHP-limited name; truncation is only via PHP */
.public-standings-table .public-sidebar-standings-team-text {
    display: block;
    overflow: visible;
    white-space: nowrap;
    line-height: 1.3;
}

.public-standings-table .public-team-cell a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
}

.public-standings-table .public-team-cell a:hover {
    color: #f4f9ff;
    border-bottom-color: var(--primary);
}

.public-team-page .public-standings-table .public-team-cell a {
    border-bottom-color: color-mix(in srgb, var(--team-accent) 45%, transparent);
}

.public-team-page .public-standings-table .public-team-cell a:hover {
    color: color-mix(in srgb, var(--team-accent) 70%, #fff);
    border-bottom-color: var(--team-accent);
}

/* Homepage fixtures: full-row link to match centre; affiliate bet link stays clickable */
.fixture-row--clickable {
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.fixture-row--clickable:hover {
    background: rgba(59, 130, 246, 0.07);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12) inset;
}

.fixture-row-match-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 4px;
}

.fixture-row--clickable .fixture-bet-link {
    position: relative;
    z-index: 2;
}

.fixture-row--clickable.public-team-fixture-row .fixture-row-odds--team-hub,
.fixture-row--clickable.public-team-fixture-row .fixture-row-broadcasts--team-hub {
    position: relative;
    z-index: 2;
}

/* Match centre (public) — same stacking + backdrop shell as news / .futuristic-hero */
.public-match-hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(10, 24, 52, 0.95) 0%, rgba(8, 20, 43, 0.92) 55%, rgba(12, 33, 68, 0.95) 100%);
}

.public-match-hero .futuristic-hero-grid,
.public-match-hero .futuristic-hero-glow,
.public-match-hero .futuristic-hero-ring,
.public-match-hero .futuristic-scan-line {
    z-index: 0;
    pointer-events: none;
}

.public-match-hero-inner {
    /* Shares .futuristic-hero-inner layout; keep above animated layers */
    position: relative;
    z-index: 2;
}

.public-match-page-header {
    margin-bottom: 0.5rem;
}

.public-match-flash {
    margin-bottom: 1rem;
}

.public-match-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    padding: 1.25rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        rgba(15, 29, 51, 0.95),
        rgba(30, 58, 95, 0.35)
    );
    border: 1px solid rgba(96, 165, 250, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.public-match-scoreboard-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    min-width: 0;
}

.public-match-scoreboard-team--home {
    border-left: 3px solid var(--team-accent, #38bdf8);
    padding-left: 12px;
    border-radius: 8px 0 0 8px;
}

.public-match-scoreboard-team--away {
    border-right: 3px solid var(--team-accent, #38bdf8);
    padding-right: 12px;
    border-radius: 0 8px 8px 0;
}

.public-match-scoreboard-crest-link {
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.public-match-scoreboard-crest-link:hover {
    transform: scale(1.05);
}

.public-match-scoreboard-crest-link:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.95);
    outline-offset: 3px;
}

.public-match-scoreboard-crest {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.public-match-scoreboard-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #e8f1ff;
}

.public-match-scoreboard-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f8fafc;
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}

.public-match-scoreboard-sep {
    opacity: 0.5;
    font-weight: 600;
}

.public-match-scoreboard-vs {
    font-size: 1.1rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.public-match-soccerdata-preview {
    margin: 1rem 0 1.25rem;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(52, 211, 153, 0.22);
    background: linear-gradient(145deg, rgba(6, 24, 18, 0.88), rgba(8, 18, 38, 0.72));
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08);
}

.public-match-soccerdata-preview-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #a7f3d0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-match-soccerdata-preview-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #e2e8f0;
}

.public-match-soccerdata-preview-h {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1rem 0 0.4rem;
    color: #fef08a;
}

.public-match-soccerdata-preview-h:first-child {
    margin-top: 0;
}

.public-match-soccerdata-preview-p {
    margin: 0 0 0.65rem;
}

.public-match-odds-strip,
.public-match-ai-strip {
    padding: 14px 16px;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(8, 18, 38, 0.65);
}

.public-match-odds-kicker,
.public-match-ai-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7dd3fc;
    margin-bottom: 10px;
}

.public-match-odds-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-match-odds-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 11px;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.public-match-odds-pill strong {
    font-size: 1rem;
    color: #f1f5f9;
}

.public-match-odds-pill--home {
    border-color: color-mix(in srgb, #22c55e 45%, transparent);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.12);
}

.public-match-odds-pill--draw {
    border-color: color-mix(in srgb, #eab308 45%, transparent);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
}

.public-match-odds-pill--away {
    border-color: color-mix(in srgb, #3b82f6 45%, transparent);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.12);
}

.public-match-ai-main {
    margin: 0 0 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2e8f0;
}

.public-match-ai-picks-link {
    display: inline-flex;
}

.public-match-fan-vote {
    margin-top: 0.5rem;
    padding: 1.25rem 1.1rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(
        160deg,
        rgba(79, 70, 229, 0.12),
        rgba(14, 23, 42, 0.9)
    );
    border: 1px solid rgba(129, 140, 248, 0.28);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.08) inset;
}

.public-match-fan-vote-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #eef2ff;
}

.public-match-fan-vote-title i {
    color: #f97316;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.45));
}

.public-match-fan-vote-hint {
    margin: 0 0 14px;
    font-size: 0.88rem;
}

.public-match-fan-vote-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15) inset;
}

.public-match-fan-vote-bar-seg {
    display: block;
    height: 100%;
    min-width: 0;
    transition: width 0.35s ease;
}

.public-match-fan-vote-bar-seg--home {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.public-match-fan-vote-bar-seg--draw {
    background: linear-gradient(90deg, #eab308, #facc15);
}

.public-match-fan-vote-bar-seg--away {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.public-match-fan-vote-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.public-match-fan-vote-counts strong {
    color: #f8fafc;
}

.public-match-fan-vote-signin {
    margin: 0;
    font-size: 0.9rem;
}

.public-match-fan-vote-form {
    margin: 0;
}

.public-match-fan-vote-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 520px) {
    .public-match-fan-vote-buttons {
        grid-template-columns: 1fr;
    }
}

.public-match-fan-vote-btn {
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 12px 10px;
    border-radius: 12px;
    border: 2px solid rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.75);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.public-match-fan-vote-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(226, 232, 240, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.public-match-fan-vote-btn--home:hover,
.public-match-fan-vote-btn--home.is-selected {
    border-color: #4ade80;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.25), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.25);
    color: #f0fdf4;
}

.public-match-fan-vote-btn--draw:hover,
.public-match-fan-vote-btn--draw.is-selected {
    border-color: #facc15;
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.22), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 24px rgba(234, 179, 8, 0.2);
    color: #fefce8;
}

.public-match-fan-vote-btn--away:hover,
.public-match-fan-vote-btn--away.is-selected {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.25), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.25);
    color: #eff6ff;
}

.public-match-fan-vote-btn.is-selected {
    transform: scale(1.02);
}

/* Last Man Standing (LMS) */
/* LMS lobby list: snapshot-style hero (aligned with sidebar season snapshot) */
.lms-lobby-snapshot {
    --lms-lobby-accent: #38bdf8;
    --lms-lobby-accent2: #c084fc;
    position: relative;
    margin: 0 0 18px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--lms-lobby-accent) 42%, rgba(76, 106, 161, 0.65));
    background:
        linear-gradient(148deg, rgba(11, 24, 52, 0.94) 0%, rgba(8, 16, 38, 0.92) 55%, rgba(14, 26, 58, 0.95) 100%),
        radial-gradient(ellipse 100% 80% at 0% 0%, color-mix(in srgb, var(--lms-lobby-accent2) 18%, transparent), transparent 58%);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 14px 32px rgba(2, 8, 24, 0.38);
}

.lms-lobby-snapshot__aurora {
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 210deg,
        transparent,
        color-mix(in srgb, var(--lms-lobby-accent) 22%, transparent),
        transparent 40%,
        color-mix(in srgb, var(--lms-lobby-accent2) 18%, transparent),
        transparent 70%
    );
    opacity: 0.42;
    animation: lmsLobbySnapshotAurora 12s linear infinite;
    pointer-events: none;
}

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

.lms-lobby-snapshot__head,
.lms-lobby-snapshot__tagline,
.lms-lobby-snapshot__join,
.lms-lobby-snapshot__quota,
.lms-lobby-snapshot__guest-hint {
    position: relative;
    z-index: 1;
}

.lms-lobby-snapshot__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.lms-lobby-snapshot__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

.lms-lobby-snapshot__title .fa-trophy {
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--lms-lobby-accent) 75%, #e2e8f0);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--lms-lobby-accent) 40%, transparent));
}

.lms-lobby-snapshot__badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(129, 161, 214, 0.35);
    background: rgba(8, 18, 42, 0.65);
    color: #c7d2fe;
}

.lms-lobby-snapshot__tagline {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #94a3b8;
}

.lms-lobby-snapshot__site-stats-wrap {
    margin: 0 0 16px;
}

.lms-lobby-snapshot__site-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(100, 132, 196, 0.25);
    background: rgba(8, 18, 42, 0.45);
}

.lms-lobby-snapshot__stat {
    flex: 1 1 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
    padding: 4px 6px;
}

.lms-lobby-snapshot__stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    line-height: 1.1;
}

.lms-lobby-snapshot__stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.lms-lobby-snapshot__stat--live .lms-lobby-snapshot__stat-value {
    color: #6ee7b7;
}

.lms-lobby-snapshot__stat--lobby .lms-lobby-snapshot__stat-value {
    color: #7dd3fc;
}

.lms-lobby-snapshot__stat-sep {
    width: 1px;
    align-self: stretch;
    min-height: 38px;
    background: rgba(148, 163, 184, 0.22);
    margin: 2px 0;
}

.lms-lobby-snapshot__site-stats-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.lms-lobby-snapshot__join {
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(100, 132, 196, 0.4);
    background:
        linear-gradient(165deg, rgba(18, 36, 72, 0.75), rgba(10, 22, 48, 0.55)),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--lms-lobby-accent) 22%, transparent), transparent 62%);
    margin-bottom: 12px;
}

.lms-lobby-snapshot__join-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.lms-lobby-snapshot__join-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(6, 14, 32, 0.65);
    color: #7dd3fc;
    font-size: 1.05rem;
}

.lms-lobby-snapshot__join-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lms-lobby-snapshot__join-kicker {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c4d4f0;
}

.lms-lobby-snapshot__join-hint {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #94a3b8;
}

.lms-lobby-snapshot__join-actions .lms-lobby-actions {
    margin: 0;
}

.lms-lobby-snapshot__fineprint {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: #7dd3fc;
    opacity: 0.9;
}

.lms-lobby-snapshot__quota {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0.22);
    background: linear-gradient(135deg, rgba(6, 36, 32, 0.45), rgba(8, 22, 44, 0.88));
}

.lms-lobby-snapshot__quota-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    justify-content: space-between;
}

.lms-lobby-snapshot__quota-label {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a7f3d0;
}

.lms-lobby-snapshot__quota-numbers {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 900;
}

.lms-lobby-snapshot__quota-num {
    font-size: clamp(1.8rem, 5vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, #f8fafc, color-mix(in srgb, var(--lms-lobby-accent) 55%, #e0e7ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lms-lobby-snapshot__quota-div {
    font-size: 1.25rem;
    color: #64748b;
    font-weight: 800;
}

.lms-lobby-snapshot__quota-max {
    font-size: 1.35rem;
    color: #cbd5e1;
}

.lms-lobby-snapshot__quota-warn {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.lms-lobby-snapshot__quota-msg {
    margin: 10px 0 0;
    font-size: 0.82rem;
}

.lms-lobby-snapshot__guest-hint {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    padding: 0 2px;
}

@media (max-width: 520px) {
    .lms-lobby-snapshot__join-head {
        flex-direction: column;
    }
}

.public-lms-page .public-section-header.lms-pool-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.public-lms-page .public-section-header {
    align-items: flex-start;
    gap: 14px;
}

.lms-pool-hero-text {
    flex: 1;
    min-width: min(100%, 280px);
}

.lms-pool-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    max-width: 760px;
}

.lms-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: linear-gradient(135deg, rgba(8, 22, 44, 0.88), rgba(6, 14, 32, 0.78));
    color: #cbd5e1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(56, 189, 248, 0.06) inset;
}

.lms-meta-chip i {
    font-size: 0.75rem;
    opacity: 0.95;
    color: #7dd3fc;
}

.lms-meta-chip--accent {
    border-color: rgba(52, 211, 153, 0.38);
    background: linear-gradient(135deg, rgba(6, 36, 32, 0.6), rgba(8, 22, 44, 0.9));
    color: #d1fae5;
}

.lms-meta-chip--accent i {
    color: #6ee7b7;
}

.public-lms-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.lms-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.lms-lives {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, 0.28);
    background: rgba(67, 56, 202, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.lms-lives-label {
    font-size: 11px;
    font-weight: 800;
    color: #c7d2fe;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.lms-lives-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: #eef2ff;
    margin-top: 4px;
}

.lms-status {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
}

.lms-in {
    color: #a7f3d0;
    font-weight: 900;
}

.lms-out {
    color: #fca5a5;
    font-weight: 900;
}

.lms-pool-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
    align-items: start;
}

.lms-pick-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* LMS tabs */
.lms-tabs-bar-wrap {
    margin: 0 0 14px;
}

.lms-pending-users-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 14px;
}

.lms-pending-users-alert__body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.lms-pending-users-alert__body > .fa-solid {
    margin-top: 2px;
    color: #fecaca;
    flex-shrink: 0;
}

.lms-pending-users-alert__body strong {
    display: block;
    margin-bottom: 2px;
}

.lms-tabs-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(7, 18, 36, 0.55), rgba(10, 24, 48, 0.55));
    border: 1px solid rgba(56, 189, 248, 0.16);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.18);
}

.lms-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: rgba(6, 14, 32, 0.4);
    color: #c4d4f0;
    padding: 10px 12px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lms-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.5);
}

.lms-tab.is-active {
    background: linear-gradient(125deg, rgba(56, 189, 248, 0.18), rgba(52, 211, 153, 0.18));
    color: #e6fbff;
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2) inset, 0 18px 60px rgba(56, 189, 248, 0.08);
}

.lms-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 4px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    background: linear-gradient(180deg, #fb923c, #ea580c);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    animation: lms-pending-badge-pulse 2.2s ease-in-out infinite;
}

@keyframes lms-pending-badge-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 16px rgba(251, 146, 60, 0.55);
    }
}

.lms-pending-intro {
    margin: 0 0 14px;
    font-size: 0.9rem;
}

.lms-pending-empty {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    color: #94a3b8 !important;
}

.lms-tab-panels {
    width: 100%;
}

.lms-tab-panel {
    display: none;
}

.lms-tab-panel.is-active {
    display: block;
}

/* Matchday pick lock + countdown */
.lms-panel-header-pick .panel-title {
    margin-bottom: 8px;
}

.lms-lock-strip {
    margin-top: 4px;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: linear-gradient(135deg, rgba(8, 22, 44, 0.85), rgba(6, 14, 32, 0.75));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(56, 189, 248, 0.08) inset;
    overflow: hidden;
}

.lms-lock-strip--open {
    border-color: rgba(52, 211, 153, 0.28);
    background: linear-gradient(135deg, rgba(6, 36, 32, 0.55), rgba(8, 22, 44, 0.88));
}

.lms-lock-strip--locked {
    border-color: rgba(248, 113, 113, 0.35);
    background: linear-gradient(135deg, rgba(40, 12, 20, 0.45), rgba(8, 14, 28, 0.9));
}

.lms-lock-strip-main {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.lms-lock-md-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 12px 14px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e0f2fe;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.5));
    border-right: 1px solid rgba(148, 163, 184, 0.2);
}

.lms-lock-strip--open .lms-lock-md-badge {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.2), rgba(15, 23, 42, 0.45));
}

.lms-lock-strip--locked .lms-lock-md-badge {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(15, 23, 42, 0.5));
}

.lms-lock-strip-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.lms-lock-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #7dd3fc;
    font-size: 1rem;
}

.lms-lock-strip--open .lms-lock-icon {
    color: #6ee7b7;
}

.lms-lock-strip--locked .lms-lock-icon {
    color: #fca5a5;
}

.lms-lock-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lms-lock-title {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.lms-lock-strip--open .lms-lock-title {
    color: #a7f3d0;
}

.lms-lock-sub {
    font-size: 0.82rem;
    line-height: 1.35;
}

.lms-lock-text--countdown .lms-lock-sub {
    margin-top: 2px;
}

.lms-lock-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.lms-lock-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.lms-lock-strip--open .lms-lock-unit {
    border-color: rgba(52, 211, 153, 0.28);
}

.lms-lock-unit-val {
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #f1f5f9;
    line-height: 1.1;
}

.lms-lock-unit-lbl {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
    margin-top: 2px;
}

.lms-lock-unit--days .lms-lock-unit-val {
    font-size: 1.05rem;
}

@media (max-width: 520px) {
    .lms-lock-strip-main {
        flex-direction: column;
    }

    .lms-lock-md-badge {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        justify-content: flex-start;
    }
}

.lms-users-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.72), rgba(5, 14, 30, 0.72));
}

.lms-users-table thead th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a5d8ff;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(7, 22, 42, 0.92);
}

.lms-users-table tbody td {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    vertical-align: middle;
}

.lms-users-table tbody tr:nth-child(even) td {
    background: rgba(10, 24, 47, 0.48);
}

.lms-users-table tbody tr:hover td {
    background: rgba(56, 189, 248, 0.08);
}

.lms-user-picks-open {
    appearance: none;
    border: 1px solid rgba(56, 189, 248, 0.34);
    background: rgba(10, 25, 46, 0.7);
    color: #dff5ff;
    border-radius: 999px;
    padding: 0.32rem 0.68rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lms-user-picks-open:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.66);
    background: rgba(12, 31, 58, 0.92);
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.16);
}

.lms-user-picks-dialog {
    max-width: 760px;
}

.lms-user-picks-table td:nth-child(1) {
    white-space: nowrap;
    width: 120px;
}

.lms-join-code-panel .lms-join-code-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lms-join-code-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.lms-join-code-row input[type="text"] {
    flex: 1;
    min-width: 220px;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(100, 140, 210, 0.55);
    background: rgba(6, 14, 32, 0.85);
    color: #f1f5ff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lms-join-code-row input[type="text"]:focus {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

.lms-invite-code-banner {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(52, 211, 153, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12) inset;
}

/* Create pool modal: ensure inputs aren't unstyled */
.fixture-modal .lms-create-form .form-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ab7e1;
}

.fixture-modal .lms-create-form .form-field input:not(.lms-switch-input),
.fixture-modal .lms-create-form .form-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(100, 140, 210, 0.55);
    background: rgba(6, 14, 32, 0.85);
    color: #f1f5ff;
    font-size: 14px;
}

.fixture-modal .lms-create-form input:focus,
.fixture-modal .lms-create-form select:focus {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

.fixture-modal .lms-create-form input[type="checkbox"]:not(.lms-switch-input) {
    width: auto;
    transform: translateY(1px) scale(1.05);
}

.fixture-modal .lms-create-form .lms-switch-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 800;
    color: #dbeafe;
}

.fixture-modal .lms-create-form .lms-switch-input {
    appearance: none;
    -webkit-appearance: none;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(100, 140, 210, 0.55);
    background: rgba(30, 41, 59, 0.9);
    position: relative;
    outline: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fixture-modal .lms-create-form .lms-switch-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e2e8f0;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.45);
    transition: transform 0.2s ease, background 0.2s ease;
}

.fixture-modal .lms-create-form .lms-switch-input:checked {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.95), rgba(59, 130, 246, 0.95));
    border-color: rgba(56, 189, 248, 0.75);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.fixture-modal .lms-create-form .lms-switch-input:checked::after {
    transform: translateX(18px);
    background: #f8fafc;
}

.fixture-modal .lms-create-form .lms-switch-input:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

.fixture-modal .lms-create-form .lms-max-players-wrap {
    margin-top: 10px;
}

/* Join by code modal */
.fixture-modal .lms-join-code-form .form-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ab7e1;
}

.fixture-modal .lms-join-code-form .form-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(100, 140, 210, 0.55);
    background: rgba(6, 14, 32, 0.85);
    color: #f1f5ff;
    font-size: 14px;
}

.fixture-modal .lms-join-code-form .form-field input[type="text"]:focus {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

/* LMS pool page now renders a single full-width panel */
.public-lms-page .lms-pool-grid {
    grid-template-columns: 1fr;
    min-width: 0;
    overflow-x: hidden;
}

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

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

@media (max-width: 680px) {
    .lms-rounds-list {
        grid-template-columns: 1fr;
    }
}

.lms-round-card {
    border-radius: 14px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: rgba(10, 21, 43, 0.55);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.06) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lms-round-card.is-selected {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) inset, 0 18px 60px rgba(56, 189, 248, 0.08);
    transform: translateY(-1px);
}

.lms-round-card.is-out {
    opacity: 0.72;
}

.lms-round-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.lms-round-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lms-round-lock {
    font-size: 12px;
    font-weight: 900;
    color: rgba(148, 163, 184, 0.95);
}

.lms-round-no-pick {
    font-size: 0.95rem;
    font-weight: 900;
}

.lms-round-waiting {
    font-size: 0.95rem;
    font-weight: 900;
    color: rgba(148, 163, 184, 0.95);
}

.lms-round-your-team {
    font-weight: 900;
    color: #eef2ff;
}

.lms-my-picks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lms-round-md {
    font-weight: 900;
    color: #e5e7eb;
}

.lms-round-result {
    font-size: 0.9rem;
    font-weight: 900;
    margin-top: 6px;
}

.lms-round-result.is-correct {
    color: #86efac;
}

.lms-round-result.is-wrong {
    color: #fca5a5;
}

.lms-round-your-pick .lms-round-your-team {
    font-weight: 800;
    color: #eef2ff;
}

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

@media (min-width: 1100px) {
    .lms-team-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .lms-team-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lms-team-tile {
    width: 100%;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    padding: 12px 12px;
    color: #e5e7eb;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.lms-team-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.35);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.25);
}

.lms-team-tile.is-selected {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2) inset;
}

.lms-team-tile.is-disabled,
.lms-team-tile:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.lms-team-tile-crest-wrap {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    flex-shrink: 0;
}

.lms-team-tile-crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
}

.lms-team-tile-name {
    font-weight: 900;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Matchday lobby (fixtures "game lobby" cards) */
.lms-lobby-fixtures-grid {
    display: flex;
    gap: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    padding: 0 2px 6px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
}

.lms-lobby-fixture-card {
    flex: 0 0 auto;
    width: 100%;
    flex-basis: auto;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(15, 23, 42, 0.45);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lms-lobby-fixture-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.lms-lobby-fixture-card:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.35);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.25);
}

.lms-lobby-fixture-score {
    font-weight: 900;
    color: rgba(229, 231, 235, 0.95);
    font-size: 12px;
    line-height: 1.15;
}

.lms-lobby-fixture-date {
    font-weight: 800;
    color: rgba(148, 163, 184, 0.95);
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
}

.lms-team-hover-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
}

.lms-team-pickers-tooltip {
    position: fixed;
    z-index: 10050;
    left: 0;
    top: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: linear-gradient(145deg, rgba(8, 22, 44, 0.98), rgba(6, 14, 32, 0.98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.12) inset;
    color: #e2e8f0;
    font-size: 0.82rem;
    line-height: 1.35;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
    max-height: min(240px, 50vh);
    overflow-y: auto;
}

.lms-team-pickers-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lms-team-pickers-tooltip-title {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7dd3fc;
    margin-bottom: 8px;
}

.lms-team-pickers-tooltip-empty {
    color: rgba(148, 163, 184, 0.95);
    font-style: italic;
}

.lms-team-pickers-tooltip-list {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
}

.lms-team-pickers-tooltip-list li {
    margin: 0.2em 0;
    word-break: break-word;
}

.lms-team-pickers-tooltip-more {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(125, 211, 252, 0.95);
    letter-spacing: 0.02em;
}

.lms-user-picks-hidden {
    font-weight: 700;
    color: rgba(203, 213, 225, 0.95);
}

.lms-lobby-team {
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.25);
    appearance: none;
    color: inherit;
}

.lms-lobby-team.is-your-pick {
    border-color: rgba(56, 189, 248, 0.95) !important;
    background: rgba(56, 189, 248, 0.12) !important;
    outline: 2px solid rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18) inset, 0 18px 60px rgba(56, 189, 248, 0.10);
}

.lms-lobby-team.lms-pick-choice-btn {
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lms-lobby-team.lms-pick-choice-btn:hover:not(:disabled):not(.is-your-pick) {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.lms-lobby-team.lms-pick-choice-btn.is-disabled,
.lms-lobby-team.lms-pick-choice-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lms-picked-alert {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.10);
    margin-bottom: 12px;
}

.lms-your-pick-row {
    margin-bottom: 12px;
}

#lms-open-teams-modal {
    padding: 10px 14px;
    border-radius: 14px;
}

.lms-out-alert {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
}

.lms-host-creds {
    margin: 0 0 12px;
}

.lms-host-creds {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lms-host-password-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lms-host-password-field {
    width: 160px;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(100, 140, 210, 0.45);
    background: rgba(6, 14, 32, 0.85);
    color: #f1f5ff;
}

.lms-pool-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.lms-lobby-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lms-lobby-pagination-meta {
    font-size: 0.9rem;
    color: #cbd5e1;
    font-weight: 800;
}

.lms-lobby-pagination .site-button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.lms-lobby-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 18px;
    padding: 0;
    list-style: none;
}

.lms-lobby-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid rgba(100, 132, 196, 0.45);
    color: #cbd5e1;
    background: rgba(8, 18, 42, 0.45);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lms-lobby-tab:hover {
    border-color: rgba(56, 189, 248, 0.55);
    color: #e2e8f0;
}

.lms-lobby-tab.is-active {
    border-color: rgba(56, 189, 248, 0.85);
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(8, 18, 42, 0.75));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.lms-tab-pagination {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.lms-tab-pagination-meta {
    font-size: 0.82rem;
    color: #94a3b8;
}

.lms-tab-pagination .site-button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.lms-lobby-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 680px) {
    .lms-pool-list {
        grid-template-columns: 1fr;
    }
}

.lms-pool-card {
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: linear-gradient(180deg, rgba(14, 30, 58, 0.9), rgba(10, 21, 43, 0.55));
    padding: 12px 12px;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.04) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.lms-card-corner-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(125, 211, 252, 0.55);
    background: radial-gradient(circle at 35% 25%, rgba(56, 189, 248, 0.35), rgba(15, 23, 42, 0.88));
    color: #dbeafe;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35);
}

.lms-pool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at 20% 0%, rgba(56, 189, 248, 0.18), transparent 45%),
                radial-gradient(420px circle at 90% 20%, rgba(52, 211, 153, 0.12), transparent 45%),
                linear-gradient(120deg, transparent 35%, rgba(56, 189, 248, 0.12) 50%, transparent 65%);
    opacity: 0.65;
    pointer-events: none;
    transform: translate3d(0,0,0);
    animation: lms-pool-breathe 8s ease-in-out infinite;
}

.lms-pool-card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 80%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: rotate(25deg);
    opacity: 0;
    pointer-events: none;
}

.lms-pool-card:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18) inset, 0 18px 60px rgba(0, 0, 0, 0.25);
}

.lms-delete-pool-form {
    display: inline-block;
    margin-left: 8px;
}

.lms-delete-pool-btn {
    border-color: rgba(248, 113, 113, 0.55);
    background: linear-gradient(120deg, rgba(127, 29, 29, 0.85), rgba(153, 27, 27, 0.75));
    color: #fee2e2;
    font-size: 0.8rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(127, 29, 29, 0.32);
}

.lms-delete-pool-btn:hover {
    border-color: rgba(248, 113, 113, 0.8);
    box-shadow: 0 10px 28px rgba(127, 29, 29, 0.42);
    transform: translateY(-1px);
}

.lms-pool-card:hover::after {
    opacity: 1;
    animation: lms-pool-shimmer 0.9s ease both;
}

@keyframes lms-pool-shimmer {
    0% {
        transform: translateX(-20%) rotate(25deg);
    }
    100% {
        transform: translateX(140%) rotate(25deg);
    }
}

.lms-pool-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.lms-player-limit {
    margin-top: 10px;
}

.lms-player-limit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.lms-player-progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.lms-player-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.98), rgba(59, 130, 246, 0.98));
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.25);
    border-radius: 999px;
    position: relative;
}

.lms-player-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-60%);
    opacity: 0;
    pointer-events: none;
}

.lms-pool-card:hover .lms-player-progress-bar::after {
    opacity: 1;
    animation: lms-progress-sweep 1.05s ease both;
}

@keyframes lms-progress-sweep {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

@keyframes lms-pool-breathe {
    0% {
        opacity: 0.60;
        transform: scale(1.00);
    }
    50% {
        opacity: 0.78;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.60;
        transform: scale(1.00);
    }
}

.lms-meta-chip--phase {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.08);
}

.lms-pool-players-fill {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.lms-pool-players-fill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.lms-pool-players-fill-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
}

.lms-pool-players-fill-count {
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}

.lms-player-progress--pool {
    margin-top: 0;
}

.lms-player-progress-bar--unlimited {
    width: 100% !important;
    opacity: 0.22;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.5), rgba(148, 163, 184, 0.15));
}

.lms-start-game-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.lms-start-game-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 520px;
}

.lms-start-game-form {
    margin: 0;
}

.lms-pre-start-wrap {
    margin-bottom: 18px;
}

.lms-pre-start-card {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.35);
}

.lms-pre-start-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.lms-pre-start-in {
    margin: 0;
    color: #a7f3d0;
    font-weight: 600;
}

.lms-lobby-panel .panel-subtitle {
    margin-top: 8px;
    line-height: 1.45;
}

.lms-pool-title {
    font-weight: 950;
    color: #e5e7eb;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: 0 0 26px rgba(56, 189, 248, 0.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lms-pool-sub {
    margin-top: 6px;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lms-pool-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.45);
    color: #dbeafe;
    padding: 4px 9px;
    font-size: 0.78rem;
    font-weight: 700;
}

.lms-pool-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.lms-pool-status-pill.is-live {
    border-color: rgba(52, 211, 153, 0.55);
    background: rgba(16, 185, 129, 0.14);
    color: #bbf7d0;
}

.lms-pool-status-pill.is-waiting {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.12);
    color: #bae6fd;
}

.lms-pool-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lms-pool-prize-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 5px 10px;
    border: 1px solid rgba(250, 204, 21, 0.6);
    background: linear-gradient(130deg, rgba(234, 179, 8, 0.24), rgba(30, 41, 59, 0.45));
    color: #fde68a;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(161, 98, 7, 0.24);
}

.lms-pool-type {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.lms-pool-pending-note {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
    font-size: 0.8rem;
    font-weight: 700;
}

.lms-locked-view {
    max-width: 460px;
    margin: 8px auto 2px;
    padding: 14px 14px 10px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    background: linear-gradient(165deg, rgba(14, 30, 58, 0.88), rgba(10, 21, 43, 0.62));
}

.lms-unlock-form {
    margin-top: 10px;
}

#lms-open-create-modal.lms-create-modal,
.lms-open-create-modal-btn {
    background: linear-gradient(125deg, rgba(56, 189, 248, 0.22), rgba(52, 211, 153, 0.16));
    border: 1px solid rgba(56, 189, 248, 0.55);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
}

#lms-open-create-modal.lms-create-modal:hover,
.lms-open-create-modal-btn:hover {
    border-color: rgba(56, 189, 248, 0.85);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.lms-join-code-btn {
    background: linear-gradient(125deg, rgba(59, 130, 246, 0.2), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(59, 130, 246, 0.6);
    box-shadow: 0 14px 36px rgba(2, 132, 199, 0.24);
}

.lms-join-code-btn:hover {
    border-color: rgba(56, 189, 248, 0.9);
    box-shadow: 0 18px 48px rgba(2, 132, 199, 0.34);
    transform: translateY(-1px);
}

.lms-open-game-btn {
    background: linear-gradient(120deg, rgba(30, 64, 175, 0.78), rgba(56, 189, 248, 0.42));
    border: 1px solid rgba(147, 197, 253, 0.5);
    color: #eaf4ff;
    box-shadow: 0 10px 28px rgba(30, 64, 175, 0.28);
}

.lms-open-game-btn:hover {
    border-color: rgba(186, 230, 253, 0.9);
    box-shadow: 0 14px 34px rgba(30, 64, 175, 0.38);
    transform: translateY(-1px);
}

.lms-join-form .lms-join-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.lms-join-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    padding: 13px 22px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid rgba(147, 197, 253, 0.55);
    color: #f0f9ff;
    background: linear-gradient(125deg, rgba(56, 189, 248, 0.45), rgba(37, 99, 235, 0.92));
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.15) inset,
        0 14px 36px rgba(30, 64, 175, 0.4);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.lms-join-submit:hover {
    border-color: rgba(186, 230, 253, 0.9);
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.28) inset,
        0 18px 44px rgba(30, 64, 175, 0.48);
    transform: translateY(-1px);
}

.lms-join-submit:active {
    transform: translateY(0);
}

.lms-join-submit .fa-solid {
    font-size: 1.05em;
    opacity: 0.95;
}

@media (max-width: 520px) {
    .lms-join-submit {
        max-width: none;
    }
}

/* Generic modal (used by LMS popups) */
.fixture-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
}

.fixture-modal.is-open {
    display: block;
}

.fixture-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.fixture-modal-dialog {
    position: relative;
    width: min(640px, calc(100% - 24px));
    margin: 8vh auto 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    max-height: 82vh;
    overflow: auto;
}

.fixture-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.fixture-modal-title {
    margin: 0;
    font-size: 15px;
}

.fixture-modal-close {
    padding: 6px 10px;
}

.fixture-modal-body {
    padding: 12px 14px 14px;
    color: var(--text);
    font-size: 13px;
}

.fixture-modal-body p {
    margin: 0 0 10px;
}

.fixture-modal-note {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 10px;
    white-space: pre-wrap;
}

/* Jackpot/kitty modal styling */
.lms-kitty-dialog {
    border: 1px solid rgba(250, 204, 21, 0.38);
    background:
        radial-gradient(900px circle at 0% -30%, rgba(250, 204, 21, 0.20), transparent 45%),
        radial-gradient(560px circle at 100% 0%, rgba(56, 189, 248, 0.14), transparent 45%),
        rgba(15, 23, 42, 0.985);
    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.14) inset,
        0 34px 90px rgba(0, 0, 0, 0.68);
}

.lms-kitty-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fde68a;
    text-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}

.lms-kitty-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lms-kitty-badge {
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fde68a;
    border: 1px solid rgba(250, 204, 21, 0.45);
    background: rgba(250, 204, 21, 0.12);
}

.lms-kitty-amount-wrap {
    border: 1px solid rgba(250, 204, 21, 0.35);
    border-radius: 14px;
    padding: 12px;
    background: linear-gradient(130deg, rgba(250, 204, 21, 0.12), rgba(2, 6, 23, 0.15));
}

.lms-kitty-amount-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fef3c7;
    margin-bottom: 2px;
}

.lms-kitty-amount {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    line-height: 1;
    font-weight: 1000;
    color: #facc15;
    text-shadow: 0 0 22px rgba(250, 204, 21, 0.35);
}

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

.lms-kitty-stat {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 10px;
    background: rgba(2, 6, 23, 0.28);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lms-kitty-stat strong {
    color: #e2e8f0;
    font-size: 1.02rem;
}

.lms-teams-modal {
    z-index: 79;
}

/* Static marketing / legal pages (/about, /terms, …) */
.public-static-page .public-static-prose {
    padding: 4px 0 8px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text);
}

.public-static-lead {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.02rem;
    color: var(--muted);
}

.public-static-h3 {
    margin: 1.5rem 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #dbeafe;
}

.public-static-page .public-static-list {
    margin: 0.5rem 0 1rem 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--muted);
}

.public-static-page .public-static-list strong {
    color: var(--text);
}

.public-static-steps {
    margin: 0.75rem 0 1.25rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--muted);
}

.public-static-steps li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.public-static-steps strong {
    color: #dbeafe;
    font-size: 0.95rem;
}

.public-static-faq {
    margin: 0.75rem 0 0;
}

.public-static-faq dt {
    margin-top: 1.1rem;
    font-weight: 800;
    color: var(--text);
}

.public-static-faq dt:first-child {
    margin-top: 0.25rem;
}

.public-static-faq dd {
    margin: 0.4rem 0 0;
    color: var(--muted);
}

.public-static-link-grid {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.public-static-link-grid .site-button {
    justify-content: center;
    width: fit-content;
    max-width: 100%;
}

.public-static-muted {
    margin-top: 1.25rem;
    font-size: 0.92rem;
    color: var(--muted);
}

.public-static-muted a {
    color: #93c5fd;
}

.public-static-updated {
    font-size: 0.88rem;
    color: var(--muted);
    margin: -0.25rem 0 1rem;
}

.public-static-alert {
    margin: 1rem 0 1.25rem;
}

/* --- Public comments (news; entity-ready) --- */
.public-comments-panel.public-main-panel {
    margin-top: 1.25rem;
    position: relative;
    overflow: hidden;
}

.public-comments-panel.public-main-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 197, 253, 0.2), transparent);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}

.public-comments-panel .public-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.public-comments-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 20px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.55);
}

@media (max-width: 560px) {
    .public-comments-header {
        grid-template-columns: 1fr;
    }

    .public-comments-sort {
        justify-self: start;
    }
}

.public-comments-header-main {
    min-width: 0;
}

.public-comments-subtitle {
    margin: 0.4rem 0 0;
    line-height: 1.5;
}

.public-comments-subtitle a {
    color: color-mix(in srgb, var(--primary) 75%, #fff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-comments-subtitle a:hover {
    color: #e2e8f0;
}

.public-comments-staff-note {
    font-weight: 500;
    color: var(--muted);
}

.public-comments-staff-compose-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.public-comments-sort {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

.public-comments-sort-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 2px 0 8px;
    opacity: 0.85;
}

.public-comments-sort-btn.site-button.secondary {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
}

.public-comments-sort-btn.site-button.secondary:hover {
    background: rgba(30, 58, 138, 0.35);
}

.public-comments-sort-btn.site-button.secondary.is-active {
    border-color: rgba(147, 197, 253, 0.55);
    color: #f8fafc;
    background: rgba(30, 58, 138, 0.5);
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.15);
}

.public-comments-signin-callout {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(30, 58, 138, 0.22);
}

.public-comments-signin-callout-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.public-comments-signin-line {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.55);
    background: rgba(15, 23, 42, 0.35);
    font-size: 0.9rem;
    line-height: 1.5;
}

.public-comments-signin-line a {
    color: color-mix(in srgb, var(--primary) 78%, #fff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-comments-compose {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: linear-gradient(165deg, rgba(30, 58, 138, 0.22) 0%, rgba(15, 23, 42, 0.5) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.public-comments-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #e2e8f0;
}

.public-comments-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(61, 87, 135, 0.65);
    background: rgba(8, 18, 38, 0.55);
    color: #f1f5f9;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.public-comments-textarea:hover {
    border-color: rgba(96, 165, 250, 0.35);
}

.public-comments-textarea:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.public-comments-textarea::placeholder {
    color: rgba(148, 163, 184, 0.75);
}

.public-comments-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.public-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.public-comments-item {
    position: relative;
    padding: 14px 14px 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.45);
    background: linear-gradient(160deg, rgba(17, 34, 64, 0.55) 0%, rgba(15, 23, 42, 0.35) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.public-comments-item:hover {
    border-color: rgba(71, 85, 105, 0.55);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.public-comments-item--depth-0 {
    margin-left: 0;
}

.public-comments-item--depth-1 {
    margin-left: 10px;
}

.public-comments-item--depth-2 {
    margin-left: 20px;
}

.public-comments-item--depth-3 {
    margin-left: 30px;
}

.public-comments-item--depth-4 {
    margin-left: 40px;
}

.public-comments-item--depth-5 {
    margin-left: 50px;
}

.public-comments-item--depth-1,
.public-comments-item--depth-2,
.public-comments-item--depth-3,
.public-comments-item--depth-4,
.public-comments-item--depth-5 {
    border-left: 3px solid rgba(96, 165, 250, 0.45);
    padding-left: 14px;
}

.public-comments-item--depth-2 {
    border-left-color: rgba(96, 165, 250, 0.35);
}

.public-comments-item--depth-3 {
    border-left-color: rgba(96, 165, 250, 0.28);
}

.public-comments-item--depth-4,
.public-comments-item--depth-5 {
    border-left-color: rgba(96, 165, 250, 0.22);
}

@media (max-width: 480px) {
    .public-comments-item--depth-1 { margin-left: 6px; }
    .public-comments-item--depth-2 { margin-left: 12px; }
    .public-comments-item--depth-3 { margin-left: 18px; }
    .public-comments-item--depth-4 { margin-left: 24px; }
    .public-comments-item--depth-5 { margin-left: 28px; }
}

.public-comments-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.public-comments-author {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f1f5f9;
}

.public-comments-time {
    font-size: 0.8rem;
    opacity: 0.9;
}

.public-comments-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.18);
    color: #fde047;
    border: 1px solid rgba(234, 179, 8, 0.28);
}

.public-comments-body {
    font-size: 0.95rem;
    line-height: 1.58;
    color: #e2e8f0;
}

.public-comments-body br + br {
    line-height: 1.6;
}

.public-comments-item-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(51, 65, 85, 0.4);
}

.public-comments-inline-form {
    display: inline;
    margin: 0;
}

.public-comments-like,
.public-comments-like-readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--muted);
}

.public-comments-like {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(61, 87, 135, 0.55);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    color: #cbd5e1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.public-comments-like:hover {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 58, 138, 0.25);
    color: #e2e8f0;
}

.public-comments-like.is-on {
    border-color: rgba(147, 197, 253, 0.55);
    background: rgba(30, 58, 138, 0.35);
    color: #f1f5f9;
}

.public-comments-like:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.55);
    outline-offset: 2px;
}

.public-comments-delete {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.public-comments-delete:hover {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.public-comments-delete:hover {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.1);
}

.public-comments-edit,
.public-comments-reply {
    font-size: 0.85rem;
}

.public-comments-edit summary,
.public-comments-reply summary {
    cursor: pointer;
    color: #93c5fd;
    font-weight: 500;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    list-style-position: outside;
}

.public-comments-edit summary:hover,
.public-comments-reply summary:hover {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.12);
}

.public-comments-edit-form,
.public-comments-reply-form {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.45);
    background: rgba(8, 18, 38, 0.35);
}

.public-comments-edit-form .public-comments-textarea,
.public-comments-reply-form .public-comments-textarea {
    min-height: 72px;
    margin-bottom: 8px;
}

.public-comments-more-wrap {
    margin-top: 16px;
    padding-top: 4px;
}

.public-comments-empty {
    margin: 1.25rem 0 0;
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.5;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.45);
    background: rgba(15, 23, 42, 0.25);
}

.public-comments-mention {
    color: #93c5fd;
    font-weight: 600;
}

.public-comments-quote {
    background: transparent;
    border: none;
    color: #93c5fd;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-comments-quote:hover {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.12);
}

.public-comments-report-wrap {
    display: inline-block;
    font-size: 0.85rem;
    vertical-align: middle;
}

.public-comments-report-summary {
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 4px 6px;
    border-radius: 6px;
    list-style: none;
}

.public-comments-report-summary::-webkit-details-marker {
    display: none;
}

.public-comments-report-summary:hover {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.public-comments-report-form {
    margin-top: 10px;
    padding: 12px;
    min-width: min(100%, 280px);
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.45);
    background: rgba(8, 18, 38, 0.45);
}

.public-comments-report-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 8px 0 4px;
    color: #cbd5e1;
}

.public-comments-report-select,
.public-comments-report-detail {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(51, 65, 85, 0.55);
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    padding: 8px 10px;
}

.public-comments-report-detail {
    resize: vertical;
    min-height: 52px;
    margin-bottom: 10px;
}

.public-comments-report-submit {
    margin-top: 4px;
}

.public-comments-load-more.is-loading {
    pointer-events: none;
    opacity: 0.65;
}

.public-comments-toast {
    position: fixed;
    z-index: 99990;
    right: 16px;
    bottom: 88px;
    max-width: min(100%, 380px);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    animation: public-comments-toast-in 0.22s ease-out;
}

@keyframes public-comments-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.public-comments-toast--out {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.public-comments-toast-text {
    flex: 1 1 160px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #e2e8f0;
}

.public-comments-toast-action {
    flex: 0 0 auto;
}

.public-comments-toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.public-comments-toast-close:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.12);
}

@media (max-width: 520px) {
    .public-comments-toast {
        left: 12px;
        right: 12px;
        bottom: 72px;
    }
}