/* =========================================================
   CHAMPIONSHIP WEB MANAGER
   PUBLIC EXPERIENCE
   ========================================================= */

:root {
    --bg: #08090c;
    --surface: #101116;
    --surface-2: #16171d;

    --text: #f5f5f7;
    --muted: #8e9099;

    --accent: #e10600;

    --line: rgba(255,255,255,0.08);

    --page:
        min(1500px, calc(100vw - 64px));
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(225,6,0,0.09),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


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


/* =========================================================
   NAV
   ========================================================= */

.public-nav {
    position: absolute;
    z-index: 50;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: var(--page);
    height: 94px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.brand {
    display: flex;
    align-items: center;
    gap: 13px;
}


.brand img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


.brand div {
    display: flex;
    flex-direction: column;
}


.brand strong {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.brand span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}


.public-nav nav {
    display: flex;
    align-items: center;
    gap: 30px;
}


.public-nav nav a {
    position: relative;

    color: #b5b6bd;

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    transition:
        color 0.2s ease;
}


.public-nav nav a:hover {
    color: white;
}


.public-nav nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--accent);

    transition: width 0.2s ease;
}


.public-nav nav a:hover::after {
    width: 100%;
}


.manager-link {
    padding: 10px 16px;

    border: 1px solid var(--line);
    border-radius: 100px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    display: flex;
    align-items: center;

    border-bottom: 1px solid var(--line);

    background:
        linear-gradient(
            110deg,
            #090a0e 0%,
            #0b0c11 45%,
            #141017 100%
        );
}


.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    background:
        linear-gradient(
            transparent,
            var(--bg)
        );
}


.hero-glow {
    position: absolute;

    width: 680px;
    height: 680px;

    right: -140px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(225,6,0,0.14);

    filter: blur(130px);
}


.hero-content {
    position: relative;
    z-index: 5;

    width: var(--page);

    margin: 80px auto 0;
}


.hero-eyebrow {
    margin-bottom: 16px;

    color: var(--accent);

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.hero h1 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            4rem,
            7.5vw,
            8rem
        );

    line-height: 0.88;

    letter-spacing: -0.065em;
    text-transform: uppercase;
}


.hero-season {
    display: flex;
    gap: 12px;

    margin-top: 24px;
}


.hero-season span {
    padding: 8px 13px;

    border: 1px solid var(--line);
    border-radius: 100px;

    color: #b7b8bd;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
}


.hero-event {
    display: flex;
    align-items: stretch;

    width: fit-content;

    margin-top: 58px;

    border-top: 1px solid var(--line);
}


.hero-round-number {
    width: 115px;

    padding: 20px 22px 0 0;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.hero-round-number strong {
    display: block;

    margin-top: 4px;

    color: white;

    font-size: 2.8rem;
    line-height: 1;
}


.hero-event-main {
    padding:
        19px 0 0 28px;

    border-left:
        3px solid var(--accent);
}


.hero-label {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.hero-event-main h2 {
    margin: 5px 0;

    font-size: 1.6rem;

    text-transform: uppercase;
}


.hero-event-main p {
    margin: 0;

    color: var(--muted);

    font-size: 0.82rem;
}


.hero-date {
    margin-top: 12px;

    font-size: 0.83rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.hero-track {
    position: absolute;
    z-index: 3;

    right: 2%;
    bottom: 110px;

    width: 46vw;
    max-width: 760px;

    opacity: 0.62;

    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateZ(-2deg);

    filter:
        contrast(1.25)
        brightness(0.8);
}


.hero-track img {
    display: block;

    width: 100%;

    border-radius: 24px;

    mix-blend-mode: screen;
}


.hero-number {
    position: absolute;

    right: -20px;
    bottom: -35px;

    color:
        rgba(
            255,
            255,
            255,
            0.025
        );

    font-size: 16vw;
    font-weight: 1000;

    letter-spacing: -0.08em;
}


/* =========================================================
   STATUS BAR
   ========================================================= */

.championship-bar {
    position: relative;
    z-index: 10;

    width: var(--page);

    margin:
        -36px auto
        90px;

    min-height: 92px;

    display: grid;

    grid-template-columns:
        repeat(4, 0.7fr)
        2fr;

    border: 1px solid var(--line);
    border-radius: 18px;

    background:
        rgba(
            18,
            19,
            24,
            0.92
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 24px 80px
        rgba(0,0,0,0.34);
}


.championship-bar > div {
    padding: 22px 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right:
        1px solid var(--line);
}


.championship-bar > div:last-child {
    border-right: 0;
}


.championship-bar span {
    color: var(--muted);

    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.11em;
}


.championship-bar strong {
    margin-top: 7px;

    font-size: 1.1rem;
}


.bar-leader {
    position: relative;

    overflow: hidden;
}


.bar-leader::after {
    content: "";

    position: absolute;

    right: -10px;
    bottom: -55px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        var(--accent);

    opacity: 0.08;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.public-section {
    width: var(--page);

    margin:
        0 auto
        130px;
}


.section-dark {
    position: relative;
}


.section-heading {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 38px;

    padding-bottom: 24px;

    border-bottom:
        1px solid var(--line);
}


.section-kicker {
    color: var(--accent);

    font-size: 0.66rem;
    font-weight: 900;

    letter-spacing: 0.16em;
}


.section-heading h2 {
    margin:
        6px 0 0;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.6rem
        );

    line-height: 0.95;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.section-heading p {
    margin: 12px 0 0;

    color: var(--muted);
}


.heading-number {
    color:
        rgba(
            255,
            255,
            255,
            0.06
        );

    font-size: 6rem;
    font-weight: 1000;

    line-height: 0.7;

    letter-spacing: -0.08em;
}


/* =========================================================
   DRIVER STANDINGS
   ========================================================= */

.driver-standings {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.driver-standing-card {
    position: relative;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        90px
        100px
        1fr
        145px;

    align-items: center;

    padding: 0 28px;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--surface);

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}


.driver-standing-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        var(--team-color);
}


.driver-standing-card:hover {
    transform:
        translateX(8px);

    background:
        var(--surface-2);
}


.leader-card {
    min-height: 132px;

    background:
        linear-gradient(
            100deg,
            #18191f,
            #111217
        );
}


.standing-position {
    font-size: 2.2rem;
    font-weight: 1000;

    letter-spacing: -0.06em;
}


.leader-card .standing-position {
    font-size: 3.4rem;
}


.driver-number {
    color: var(--muted);

    font-size: 0.85rem;
    font-weight: 900;
}


.standing-driver {
    display: flex;
    flex-direction: column;
}


.standing-driver span {
    color: #babac0;

    font-size: 0.82rem;
    font-weight: 600;
}


.standing-driver strong {
    font-size: 1.45rem;

    text-transform: uppercase;
}


.standing-driver small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 0.72rem;
}


.standing-avatar {
    position: absolute;

    right: 190px;
    bottom: 0;

    width: 115px;
    height: 115px;

    overflow: hidden;
}


.standing-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(0.1)
        contrast(1.05);
}


.standing-points {
    justify-self: end;

    display: flex;
    align-items: baseline;
    gap: 7px;
}


.standing-points strong {
    font-size: 2rem;

    letter-spacing: -0.04em;
}


.standing-points span {
    color: var(--muted);

    font-size: 0.60rem;
    font-weight: 900;
}


/* =========================================================
   TEAM GRID
   ========================================================= */

.team-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.team-public-card {
    position: relative;

    min-height: 340px;

    overflow: hidden;

    padding: 28px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            var(--surface-2),
            #0e0f13
        );
}


.team-public-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background:
        var(--team-color);
}


.team-card-rank {
    color:
        rgba(
            255,
            255,
            255,
            0.08
        );

    font-size: 5rem;
    font-weight: 1000;

    line-height: 0.8;
}


.team-card-heading {
    position: relative;
    z-index: 3;

    display: flex;
    justify-content: space-between;

    margin-top: 25px;
}


.team-card-heading h3 {
    margin: 0;

    font-size: 1.8rem;

    text-transform: uppercase;
}


.team-card-points {
    font-size: 1.5rem;
    font-weight: 900;
}


.team-card-points span {
    color: var(--muted);

    font-size: 0.6rem;
}


.team-car {
    position: absolute;

    left: 4%;
    right: 4%;
    bottom: 10px;

    height: 170px;
}


.team-car img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.35s ease;
}


.team-public-card:hover
.team-car img {
    transform:
        scale(1.04)
        translateX(8px);
}


/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-public-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.public-round-card {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--surface);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.public-round-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(
            255,
            255,
            255,
            0.16
        );
}


.public-round-image {
    position: relative;

    height: 175px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111218,
            #1b1c23
        );
}


.public-round-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.72;

    transition:
        transform 0.35s ease;
}


.public-round-card:hover
.public-round-image img {
    transform: scale(1.045);
}


.public-round-number {
    position: absolute;

    top: 18px;
    left: 18px;

    color: #d2d2d6;

    font-size: 0.55rem;
    font-weight: 900;
}


.public-round-number strong {
    display: block;

    margin-top: 2px;

    color: white;

    font-size: 2.1rem;
}


.public-round-info {
    display: flex;
    gap: 20px;

    padding: 22px;
}


.public-round-date {
    min-width: 50px;

    color: white;

    font-size: 1.7rem;
    font-weight: 1000;
}


.public-round-date span {
    display: block;

    color: var(--accent);

    font-size: 0.60rem;
    letter-spacing: 0.08em;
}


.public-round-info h3 {
    margin: 2px 0 5px;

    font-size: 1rem;

    text-transform: uppercase;
}


.public-round-info p {
    margin: 0;

    color: var(--muted);

    font-size: 0.71rem;
}


.round-status {
    position: absolute;

    right: 18px;
    top: 18px;

    padding: 6px 9px;

    border-radius: 100px;

    background:
        rgba(
            0,
            0,
            0,
            0.52
        );

    color: #d0d0d5;

    font-size: 0.53rem;
    font-weight: 900;

    letter-spacing: 0.06em;
}


/* =========================================================
   RESULTS
   ========================================================= */

.section-results {
    padding-top: 10px;
}


.latest-results {
    border-top:
        1px solid var(--line);
}


.latest-result-row {
    position: relative;

    min-height: 86px;

    display: grid;

    grid-template-columns:
        85px
        100px
        1fr
        120px;

    align-items: center;

    border-bottom:
        1px solid var(--line);
}


.latest-result-row::before {
    content: "";

    position: absolute;

    left: 0;

    width: 3px;
    height: 28px;

    background:
        var(--team-color);
}


.latest-position {
    padding-left: 22px;

    font-size: 1.35rem;
    font-weight: 1000;
}


.latest-driver-number {
    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 900;
}


.latest-driver-name {
    display: flex;
    flex-direction: column;
}


.latest-driver-name strong {
    font-size: 1rem;
}


.latest-driver-name span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 0.70rem;
}


.latest-points {
    justify-self: end;

    font-size: 1.25rem;
    font-weight: 900;
}


.latest-points span {
    color: var(--muted);

    font-size: 0.55rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.public-footer {
    width: var(--page);

    min-height: 180px;

    margin: 40px auto 0;

    padding: 42px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    border-top:
        1px solid var(--line);

    color: var(--muted);
}


.public-footer > div:first-child {
    display: flex;
    flex-direction: column;
}


.public-footer strong {
    color: white;

    text-transform: uppercase;
}


.public-footer span {
    margin-top: 5px;

    font-size: 0.72rem;
}


.footer-mark {
    font-size: 0.60rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    :root {
        --page:
            calc(100vw - 34px);
    }


    .public-nav nav a:not(.manager-link) {
        display: none;
    }


    .hero {
        min-height: 690px;
    }


    .hero-track {
        width: 58vw;

        right: -15%;

        opacity: 0.35;
    }


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


    .bar-leader {
        grid-column:
            1 / -1;
    }


    .team-grid,
    .calendar-public-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 680px) {

    .hero h1 {
        font-size: 3.6rem;
    }


    .hero-track {
        display: none;
    }


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


    .driver-standing-card {
        grid-template-columns:
            55px
            60px
            1fr
            80px;

        padding: 0 15px;
    }


    .standing-avatar {
        display: none;
    }


    .team-grid,
    .calendar-public-grid {
        grid-template-columns: 1fr;
    }


    .heading-number {
        display: none;
    }


    .latest-result-row {
        grid-template-columns:
            60px
            55px
            1fr
            75px;
    }

}


/* =========================================================
   PLATFORM LANDING
   ========================================================= */

.platform-home {
    background: #07080b;
}


/* NAV */

.landing-nav {
    position: absolute;
    z-index: 50;

    top: 0;
    left: 50%;

    width: var(--page);
    height: 100px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.landing-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


.landing-brand-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--accent);

    color: white;

    font-size: 1.25rem;
    font-weight: 1000;
}


.landing-brand > div {
    display: flex;
    flex-direction: column;
}


.landing-brand strong {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.landing-brand > div span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}


.landing-login {
    color: #a5a6ad;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}


.landing-create-small {
    padding: 12px 18px;

    border-radius: 100px;

    background: white;
    color: #090a0d;

    font-size: 0.70rem;
    font-weight: 900;

    text-transform: uppercase;
}


/* HERO */

.landing-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--line);

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(225,6,0,0.12),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #07080b 0%,
            #0b0c10 60%,
            #121015 100%
        );
}


.landing-hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;
}


.landing-hero-glow {
    position: absolute;

    right: -150px;
    top: 80px;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background: rgba(225,6,0,0.13);

    filter: blur(150px);
}


.landing-hero-content {
    position: relative;
    z-index: 4;

    width: var(--page);

    margin:
        70px auto 0;
}


.landing-kicker {
    margin-bottom: 20px;

    color: var(--accent);

    font-size: 0.66rem;
    font-weight: 1000;

    letter-spacing: 0.2em;
}


.landing-hero h1 {
    max-width: 850px;

    margin: 0;

    font-size:
        clamp(
            4.5rem,
            8vw,
            9rem
        );

    line-height: 0.82;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.landing-hero h1 span {
    color: transparent;

    -webkit-text-stroke:
        1.5px rgba(255,255,255,0.65);
}


.landing-hero-content > p {
    max-width: 570px;

    margin:
        35px 0 0;

    color: #999ba4;

    font-size: 1rem;
    line-height: 1.65;
}


.landing-actions {
    display: flex;
    gap: 12px;

    margin-top: 38px;
}


.landing-primary,
.landing-secondary {
    min-width: 215px;

    padding: 17px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 8px;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.landing-primary {
    background: var(--accent);
}


.landing-secondary {
    border: 1px solid var(--line);

    background: rgba(255,255,255,0.025);
}


.landing-hero-side {
    position: absolute;
    z-index: 5;

    right: 4.5%;
    bottom: 100px;

    display: grid;

    grid-template-columns:
        35px auto;

    gap:
        13px 14px;

    align-items: center;
}


.landing-hero-side span {
    color: var(--accent);

    font-size: 0.6rem;
    font-weight: 900;
}


.landing-hero-side strong {
    color: #71737d;

    font-size: 0.62rem;
    letter-spacing: 0.12em;
}


/* SHOWCASE */

.championship-showcase {
    width: var(--page);

    margin:
        0 auto;

    padding:
        120px 0 145px;
}


.showcase-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 52px;
}


.showcase-kicker {
    color: var(--accent);

    font-size: 0.62rem;
    font-weight: 1000;

    letter-spacing: 0.18em;
}


.showcase-heading h2,
.create-championship-cta h2 {
    margin:
        8px 0 0;

    font-size:
        clamp(
            3rem,
            5vw,
            5.5rem
        );

    line-height: 0.88;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.showcase-counter {
    display: flex;
    flex-direction: column;

    text-align: right;
}


.showcase-counter strong {
    font-size: 3.5rem;

    line-height: 1;
}


.showcase-counter span {
    margin-top: 5px;

    color: var(--muted);

    font-size: 0.55rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


/* CARDS */

.championship-card-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.championship-showcase-card {
    position: relative;

    min-height: 480px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #16171d,
            #0d0e12
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.championship-showcase-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,0.18);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.35);
}


.championship-showcase-card::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background: var(--accent);

    opacity: 0.05;

    filter: blur(20px);
}


.championship-card-top {
    display: flex;
    justify-content: space-between;

    position: relative;
    z-index: 3;
}


.championship-card-index {
    color: #5f6068;

    font-size: 0.62rem;
    font-weight: 900;
}


.championship-card-status {
    padding: 5px 8px;

    border-radius: 100px;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    color: #9d9fa7;

    font-size: 0.5rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.championship-card-logo {
    height: 150px;

    margin: 32px 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.championship-card-logo img {
    max-width: 80%;
    max-height: 130px;

    object-fit: contain;

    transition:
        transform 0.3s ease;
}


.championship-showcase-card:hover
.championship-card-logo img {
    transform: scale(1.05);
}


.championship-logo-placeholder {
    width: 100px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #25262d,
            #111216
        );

    color: white;

    font-size: 3.5rem;
    font-weight: 1000;
}


.championship-card-label {
    color: var(--accent);

    font-size: 0.55rem;
    font-weight: 1000;

    letter-spacing: 0.15em;
}


.championship-card-content h3 {
    margin: 7px 0 5px;

    font-size: 1.7rem;

    line-height: 1;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}


.championship-card-content p {
    margin: 0;

    color: var(--muted);

    font-size: 0.76rem;
}


.championship-card-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: auto;

    padding:
        22px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.championship-card-stats div {
    display: flex;
    flex-direction: column;
}


.championship-card-stats strong {
    font-size: 1.2rem;
}


.championship-card-stats span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.48rem;
    font-weight: 900;

    letter-spacing: 0.09em;
}


.championship-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 20px;

    font-size: 0.65rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}


.championship-card-footer strong {
    color: var(--accent);

    font-size: 1.3rem;
}


/* CREATE CTA */

.create-championship-cta {
    width: var(--page);

    margin:
        0 auto 120px;

    padding:
        65px;

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items: end;

    gap: 70px;

    border-radius: 24px;

    background:
        linear-gradient(
            120deg,
            #15161c 0%,
            #111216 58%,
            #250b0b 100%
        );

    border:
        1px solid var(--line);
}


.create-cta-content p {
    margin: 0 0 28px;

    color: #9a9ca4;

    line-height: 1.6;
}


.create-cta-content a {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 20px;

    background: var(--accent);

    border-radius: 8px;

    font-size: 0.72rem;
    font-weight: 900;

    text-transform: uppercase;
}


.create-cta-content small {
    display: block;

    margin-top: 11px;

    color: #686a73;

    font-size: 0.62rem;
}


/* EMPTY */

.no-championships {
    padding: 80px;

    text-align: center;

    border:
        1px solid var(--line);

    border-radius: 20px;
}


.no-championships span {
    color: var(--accent);

    font-size: 0.6rem;
    font-weight: 900;
}


.no-championships h3 {
    font-size: 2rem;
}


.no-championships a {
    color: white;

    font-weight: 900;
}


/* FOOTER */

.landing-footer {
    width: var(--page);

    min-height: 150px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top:
        1px solid var(--line);
}


.landing-footer > div {
    display: flex;
    flex-direction: column;
}


.landing-footer span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 0.65rem;
}


.landing-footer > a {
    color: var(--muted);

    font-size: 0.68rem;
    font-weight: 800;
}


/* LANDING RESPONSIVE */

@media (max-width: 1050px) {

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

}


@media (max-width: 680px) {

    .landing-create-small {
        display: none;
    }


    .landing-hero-side {
        display: none;
    }


    .landing-hero h1 {
        font-size: 3.7rem;
    }


    .landing-actions {
        flex-direction: column;
    }


    .championship-card-grid {
        grid-template-columns: 1fr;
    }


    .showcase-counter {
        display: none;
    }


    .create-championship-cta {
        grid-template-columns: 1fr;

        padding: 35px;

        gap: 35px;
    }

}


/* =========================================================
   MANAGER REGISTRATION
   ========================================================= */

.register-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(225,6,0,.10),
            transparent 30%
        ),
        #07080b;
}


.register-shell {
    width: var(--page);

    margin: auto;

    padding:
        45px 0 80px;
}


.register-back {
    color: #777982;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .07em;
    text-transform: uppercase;
}


.register-layout {
    min-height: calc(100vh - 150px);

    display: grid;

    grid-template-columns:
        1fr 520px;

    gap: 100px;

    align-items: center;
}


.register-intro h1 {
    margin:
        16px 0 30px;

    font-size:
        clamp(4rem, 7vw, 7.5rem);

    line-height: .82;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.register-intro h1 span {
    color: var(--accent);
}


.register-intro > p {
    max-width: 500px;

    color: #8f919a;

    line-height: 1.65;
}


.register-features {
    max-width: 600px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    margin-top: 50px;

    background: var(--line);

    border: 1px solid var(--line);
}


.register-features div {
    padding: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: #0b0c10;
}


.register-features strong {
    color: var(--accent);

    font-size: .58rem;
}


.register-features span {
    color: #a0a2aa;

    font-size: .65rem;
    font-weight: 800;

    text-transform: uppercase;
}


.register-panel {
    padding: 42px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #15161c,
            #0d0e12
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.35);
}


.register-panel-heading > span {
    color: var(--accent);

    font-size: .57rem;
    font-weight: 1000;

    letter-spacing: .16em;
}


.register-panel-heading h2 {
    margin:
        8px 0 5px;

    font-size: 2.2rem;

    letter-spacing: -.045em;
}


.register-panel-heading p {
    margin:
        0 0 30px;

    color: #777982;

    font-size: .72rem;
}


.register-panel-heading a {
    color: white;
    font-weight: 800;
}


.register-form {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.register-name-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.register-form label {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.register-form label > span {
    color: #989aa2;

    font-size: .59rem;
    font-weight: 900;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.register-form input {
    width: 100%;

    box-sizing: border-box;

    padding: 15px 16px;

    border:
        1px solid #282a31;

    border-radius: 8px;

    outline: none;

    background: #090a0e;

    color: white;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.register-form input:focus {
    border-color:
        rgba(225,6,0,.8);

    box-shadow:
        0 0 0 3px
        rgba(225,6,0,.08);
}


.register-form small {
    color: #5f6169;

    font-size: .58rem;
}


.register-form button {
    margin-top: 7px;

    padding: 17px 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border: 0;
    border-radius: 8px;

    background: var(--accent);

    color: white;

    cursor: pointer;

    font-size: .69rem;
    font-weight: 1000;

    letter-spacing: .05em;
    text-transform: uppercase;
}


.register-form button strong {
    font-size: 1.25rem;
}


.register-error {
    margin-bottom: 22px;

    padding: 13px 15px;

    border:
        1px solid rgba(225,6,0,.35);

    border-radius: 7px;

    background:
        rgba(225,6,0,.08);

    color: #ff8c89;

    font-size: .7rem;
}


.register-note {
    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid var(--line);

    color: #64666e;

    font-size: .62rem;
    line-height: 1.5;
}


@media (max-width: 950px) {

    .register-layout {
        grid-template-columns: 1fr;

        gap: 60px;

        padding-top: 80px;
    }


    .register-panel {
        max-width: 520px;
    }

}


@media (max-width: 600px) {

    .register-name-grid {
        grid-template-columns: 1fr;
    }


    .register-panel {
        padding: 28px;
    }


    .register-features {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   SIMPLE PORTAL HOME
   2026-09
   ========================================================= */

.portal-home {
    margin: 0;

    min-height: 100vh;

    background: #f4f4f4;

    color: #15151e;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


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


/* HEADER */

.portal-header {
    width: min(1440px, calc(100% - 64px));
    height: 92px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #d6d6d8;
}


.portal-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}


.portal-brand-mark {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e10600;

    border-radius: 8px;

    color: white;

    font-size: 22px;
    font-weight: 900;
}


.portal-brand-name {
    display: flex;
    flex-direction: column;
}


.portal-brand-name strong {
    font-size: 13px;

    letter-spacing: .06em;
}


.portal-brand-name small {
    margin-top: 2px;

    color: #77777d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .13em;
}


.portal-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}


.portal-login {
    padding: 12px 18px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .08em;
}


.portal-login:hover {
    color: #e10600;
}


.portal-new-top {
    padding: 13px 18px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 5px;

    background: #e10600;

    color: white !important;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .06em;
}


.portal-new-top span {
    font-size: 17px;

    line-height: 10px;
}


/* MAIN */

.portal-main {
    width: min(1440px, calc(100% - 64px));

    margin: auto;
}


/* INTRO */

.portal-intro {
    padding: 74px 0 80px;

    border-bottom: 1px solid #d6d6d8;
}


.portal-eyebrow {
    margin-bottom: 14px;

    color: #e10600;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .17em;
}


.portal-intro h1 {
    margin: 0;

    font-size:
        clamp(
            52px,
            7vw,
            100px
        );

    line-height: .84;

    letter-spacing: -.065em;
}


.portal-intro h1 span {
    color: #e10600;
}


.portal-intro p {
    max-width: 520px;

    margin:
        27px 0 0;

    color: #67676d;

    font-size: 15px;
    line-height: 1.55;
}


/* CHAMPIONSHIPS */

.portal-championships {
    padding:
        60px 0
        110px;
}


.portal-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 32px;
}


.portal-section-title > div:first-child > span {
    color: #e10600;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .16em;
}


.portal-section-title h2 {
    margin: 4px 0 0;

    font-size: 40px;

    line-height: .9;

    letter-spacing: -.045em;
}


.portal-total {
    display: flex;
    align-items: baseline;

    gap: 7px;
}


.portal-total strong {
    font-size: 31px;
}


.portal-total span {
    color: #77777d;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .1em;
}


/* GRID */

.portal-card-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* CHAMPIONSHIP CARD */

.portal-champ-card {
    position: relative;

    min-height: 430px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-top: 3px solid #15151e;
    border-right: 1px solid #d2d2d4;
    border-bottom: 1px solid #d2d2d4;
    border-left: 1px solid #d2d2d4;

    border-radius:
        0 18px 0 0;

    background: white;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.portal-champ-card:hover {
    transform:
        translateY(-5px);

    border-top-color: #e10600;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.08);
}


.portal-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.portal-card-head > span {
    color: #99999e;

    font-size: 10px;
    font-weight: 900;
}


.portal-card-head > strong {
    padding: 5px 8px;

    border-radius: 20px;

    background: #f0f0f1;

    color: #6b6b70;

    font-size: 8px;

    letter-spacing: .08em;
}


/* LOGO */

.portal-logo-area {
    height: 135px;

    margin:
        18px 0 19px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.portal-logo-area img {
    max-width: 78%;
    max-height: 115px;

    object-fit: contain;

    transition:
        transform .25s ease;
}


.portal-champ-card:hover
.portal-logo-area img {
    transform:
        scale(1.035);
}


.portal-logo-placeholder {
    width: 86px;
    height: 86px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #15151e;

    color: white;

    font-size: 38px;
    font-weight: 900;
}


/* CONTENT */

.portal-card-type {
    color: #e10600;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .15em;
}


.portal-card-body h3 {
    margin:
        6px 0 5px;

    font-size: 25px;

    line-height: 1;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.portal-card-body p {
    margin: 0;

    color: #77777d;

    font-size: 11px;
}


/* DATA */

.portal-card-data {
    margin-top: auto;

    padding:
        18px 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top: 1px solid #e0e0e1;
    border-bottom: 1px solid #e0e0e1;
}


.portal-card-data div {
    display: flex;
    flex-direction: column;
}


.portal-card-data strong {
    font-size: 19px;
}


.portal-card-data span {
    margin-top: 2px;

    color: #85858a;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .09em;
}


.portal-card-open {
    padding-top: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .07em;
}


.portal-card-open strong {
    color: #e10600;

    font-size: 20px;
}


/* CREATE CARD */

.portal-create-card {
    position: relative;

    min-height: 430px;

    padding: 27px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    border:
        2px dashed
        #c4c4c7;

    border-radius:
        0 18px 0 0;

    background:
        #ececee;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.portal-create-card:hover {
    transform:
        translateY(-5px);

    border-color: #e10600;

    background: white;
}


.portal-create-plus {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e10600;

    color: white;

    font-size: 30px;
    font-weight: 300;
}


.portal-create-card span {
    color: #e10600;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .16em;
}


.portal-create-card h3 {
    margin:
        7px 0 13px;

    font-size: 34px;

    line-height: .9;

    letter-spacing: -.05em;
}


.portal-create-card p {
    max-width: 250px;

    margin: 0;

    color: #77777d;

    font-size: 12px;
    line-height: 1.5;
}


.portal-create-arrow {
    position: absolute;

    right: 25px;
    bottom: 23px;

    color: #e10600;

    font-size: 24px;
}


/* EMPTY */

.portal-empty {
    padding: 70px 30px;

    text-align: center;

    border:
        1px solid #d0d0d2;

    border-radius:
        0 20px 0 0;

    background: white;
}


.portal-empty > span {
    color: #e10600;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}


.portal-empty h3 {
    margin:
        10px 0 25px;

    font-size: 30px;
}


.portal-empty a {
    display: inline-block;

    padding: 14px 18px;

    background: #e10600;

    color: white;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .06em;
}


/* FOOTER */

.portal-footer {
    width:
        min(
            1440px,
            calc(100% - 64px)
        );

    min-height: 125px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top:
        1px solid #d6d6d8;

    color: #85858a;
}


.portal-footer > div {
    display: flex;
    flex-direction: column;
}


.portal-footer strong {
    color: #15151e;

    font-size: 10px;
}


.portal-footer span {
    margin-top: 4px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .09em;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

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

}


@media (max-width: 680px) {

    .portal-header,
    .portal-main,
    .portal-footer {
        width:
            calc(100% - 30px);
    }


    .portal-header {
        height: 76px;
    }


    .portal-brand-name {
        display: none;
    }


    .portal-new-top {
        display: none;
    }


    .portal-intro {
        padding:
            55px 0 58px;
    }


    .portal-intro h1 {
        font-size: 47px;
    }


    .portal-card-grid {
        grid-template-columns: 1fr;
    }


    .portal-total {
        display: none;
    }


    .portal-championships {
        padding:
            45px 0
            75px;
    }


    .portal-footer > span {
        display: none;
    }

}


/* =========================================================
   LEGACY HOME HEADER
   Replaced by global_nav.html
   ========================================================= */

.portal-header {
    display: none !important;
}



/* =========================================================
   HOME HERO MOTORSPORT
   ========================================================= */

.portal-hero-motorsport {
    position: relative;

    width: 100%;
    min-height: 430px;

    margin: 0 0 46px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.60) 18%,
            rgba(255,255,255,0.12) 45%,
            rgba(255,255,255,0.12) 70%,
            rgba(255,255,255,0.95) 100%
        ),
        url("/static/assets/home/motorsport-hero.webp")
        center center / cover
        no-repeat;

    border-bottom: 1px solid #dedee1;
}


.portal-hero-motorsport::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.00) 55%,
            rgba(255,255,255,0.88) 100%
        );
}


.portal-hero-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 75px,
            rgba(21,21,27,0.025) 75px,
            rgba(21,21,27,0.025) 110px
        );
}


.portal-hero-content {
    position: relative;
    z-index: 2;

    width:
        min(
            1500px,
            calc(100vw - 64px)
        );

    min-height: 430px;

    margin: 0 auto;

    display: flex;
    align-items: flex-end;

    padding-bottom: 32px;
}


.portal-hero-copy {
    display: none;
}


/* =========================================================
   CHAMPIONSHIP LIST TITLE
   ========================================================= */

.portal-section-title {
    align-items: flex-end;
}


.portal-section-title > div:first-child > span {
    color: #e10600;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.portal-section-title h2 {
    margin-top: 3px;

    color: #15151b;

    font-size: clamp(
        2rem,
        3vw,
        3rem
    );

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.04em;

    text-transform: none;
}


.portal-total {
    display: flex;
    align-items: baseline;

    gap: 7px;
}


.portal-total strong {
    color: #15151b;

    font-size: 2rem;
    font-weight: 900;
}


.portal-total span {
    color: #6e7077;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .08em;
}


/* =========================================================
   RESPONSIVE HERO
   ========================================================= */

@media (max-width: 900px) {

    .portal-hero-motorsport {
        min-height: 330px;

        background-position: center center;
    }


    .portal-hero-content {
        min-height: 330px;
    }

}


@media (max-width: 600px) {

    .portal-hero-motorsport {
        min-height: 250px;

        margin-bottom: 32px;

        background-position: 55% center;
    }


    .portal-hero-content {
        min-height: 250px;

        width: calc(100vw - 30px);
    }

}



/* ============================================================
   CHAMPIONSHIP HOME - F1 STYLE OVERVIEW
   Calendar / Driver standings / Team standings
   ============================================================ */

.race-overview {
    width: min(1440px, calc(100% - 56px));
    margin: 34px auto 58px;

    display: grid;
    grid-template-columns:
        minmax(360px, 1.08fr)
        minmax(360px, 1fr)
        minmax(330px, .92fr);

    gap: 14px;

    color: #15151b;
}


/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */

.race-overview-panel {
    min-width: 0;
    overflow: hidden;

    background: #fff;

    border: 1px solid #dedee1;
    border-radius: 8px;

    box-shadow:
        0 3px 14px rgba(0,0,0,.045);
}


.race-panel-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 0 18px;

    border-bottom: 1px solid #dedee1;
}


.race-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
}


.race-panel-title h2 {
    margin: 0;

    color: #15151b;

    font-size: 15px;
    line-height: 1;
    font-weight: 900;

    letter-spacing: .02em;
    text-transform: uppercase;
}


.race-panel-icon {
    color: #15151b;
    font-size: 17px;
    line-height: 1;
}


.race-panel-caption {
    color: #e10600;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}


/* ------------------------------------------------------------
   CALENDAR
   ------------------------------------------------------------ */

.race-calendar-list {
    display: flex;
    flex-direction: column;
}


.race-calendar-row {
    position: relative;

    min-height: 68px;

    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        116px;

    align-items: stretch;

    border-bottom: 1px solid #eeeeef;

    background: #fff;

    transition:
        background .15s ease,
        transform .15s ease;
}


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


.race-calendar-row:hover {
    background: #fafafa;
}


.race-calendar-number {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #15151b;

    background: #f3f3f5;

    font-size: 14px;
    font-weight: 900;
}


.race-calendar-main {
    min-width: 0;

    display: flex;
    align-items: center;

    padding: 10px 12px;
}


.race-calendar-location {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


.race-calendar-flag {
    width: 25px;
    height: 17px;

    flex: 0 0 25px;

    object-fit: cover;

    border: 1px solid #dedee1;
}


.race-calendar-location > div {
    min-width: 0;
}


.race-calendar-location strong {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #15151b;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;

    text-transform: uppercase;
}


.race-calendar-location span {
    display: block;

    margin-top: 3px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #737681;

    font-size: 10px;
}


.race-calendar-datetime {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    padding: 8px 12px;

    color: #5d6069;

    border-left: 1px solid #eeeeef;
}


.race-calendar-datetime strong {
    font-size: 10px;
    font-weight: 900;

    white-space: nowrap;
}


.race-calendar-datetime span {
    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}


/* NEXT EVENT */

.race-calendar-row.is-next {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.105),
            rgba(225,6,0,.035)
        );
}


.race-calendar-row.is-next::before {
    content: "NEXT";

    position: absolute;
    z-index: 2;

    top: 4px;
    left: 4px;

    color: #fff;

    font-size: 7px;
    line-height: 1;
    font-weight: 900;

    letter-spacing: .06em;
}


.race-calendar-row.is-next
.race-calendar-number {
    color: #fff;
    background: #e10600;
}


.race-calendar-row.is-next
.race-calendar-datetime {
    color: #e10600;
}


.race-calendar-row.is-next
.race-calendar-location strong {
    color: #15151b;
}


/* ------------------------------------------------------------
   STANDINGS HEAD
   ------------------------------------------------------------ */

.race-standing-head {
    min-height: 35px;

    display: grid;

    grid-template-columns:
        42px
        minmax(150px, 1.35fr)
        minmax(90px, .85fr)
        48px;

    align-items: center;

    padding: 0 13px;

    background: #fafafa;

    border-bottom: 1px solid #eeeeef;

    color: #81838a;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .07em;
}


.race-standing-head span:last-child {
    text-align: right;
}


/* ------------------------------------------------------------
   DRIVER STANDINGS
   ------------------------------------------------------------ */

.race-standing-row {
    position: relative;

    min-height: 67px;

    display: grid;

    grid-template-columns:
        42px
        minmax(150px, 1.35fr)
        minmax(90px, .85fr)
        48px;

    align-items: center;

    padding: 0 13px;

    border-bottom: 1px solid #eeeeef;

    background: #fff;
}


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


.race-standing-row::before {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    left: 0;

    width: 3px;

    background: var(--standing-team-color);
}


.race-standing-position {
    color: #15151b;

    font-size: 18px;
    font-weight: 900;
}


.race-standing-driver {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}


.race-standing-avatar {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    object-fit: cover;

    border-radius: 50%;

    background: #f1f1f3;
}


.race-standing-driver > div {
    min-width: 0;
}


.race-standing-number {
    display: inline-block;

    margin-right: 7px;

    color: #737681;

    font-size: 9px;
    font-weight: 800;
}


.race-standing-driver strong {
    color: #15151b;

    font-size: 11px;
    font-weight: 900;

    white-space: nowrap;
}


.race-standing-team {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    overflow: hidden;

    color: #5d6069;

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.race-team-marker {
    display: inline-block;

    width: 3px;
    height: 18px;

    flex: 0 0 3px;

    border-radius: 3px;
}


.race-standing-points {
    color: #15151b;

    text-align: right;

    font-size: 13px;
    font-weight: 900;
}


/* LEADER */

.race-standing-row.is-leader
.race-standing-position,

.race-standing-row.is-leader
.race-standing-points,

.race-team-standing-row.is-leader
.race-standing-position,

.race-team-standing-row.is-leader
.race-standing-points {
    color: #e10600;
}


/* ------------------------------------------------------------
   TEAM STANDINGS
   ------------------------------------------------------------ */

.race-team-standing-head {
    grid-template-columns:
        42px
        minmax(0, 1fr)
        48px;
}


.race-team-standing-row {
    position: relative;

    min-height: 67px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        48px;

    align-items: center;

    padding: 0 13px;

    border-bottom: 1px solid #eeeeef;

    background: #fff;
}


.race-team-standing-row:last-child {
    border-bottom: 0;
}


.race-team-standing-row::before {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    left: 0;

    width: 3px;

    background: var(--standing-team-color);
}


.race-team-standing-name {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}


.race-team-standing-name strong {
    overflow: hidden;

    color: #15151b;

    font-size: 11px;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.race-team-logo {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    object-fit: contain;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1180px) {

    .race-overview {
        grid-template-columns: 1fr 1fr;
    }

    .race-calendar-panel {
        grid-column: 1 / -1;
    }
}


@media (max-width: 760px) {

    .race-overview {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        margin-top: 22px;
    }

    .race-calendar-panel {
        grid-column: auto;
    }

    .race-standing-head,
    .race-standing-row {
        grid-template-columns:
            36px
            minmax(140px, 1fr)
            45px;
    }

    .race-standing-head span:nth-child(3),
    .race-standing-team {
        display: none;
    }

    .race-calendar-row {
        grid-template-columns:
            46px
            minmax(0, 1fr);
    }

    .race-calendar-datetime {
        grid-column: 2;

        padding-top: 0;
        padding-bottom: 10px;

        border-left: 0;

        flex-direction: row;
        justify-content: flex-start;
    }

}


@media (max-width: 480px) {

    .race-panel-caption {
        display: none;
    }

    .race-panel-header {
        padding: 0 14px;
    }

}


/* ============================================================
   END F1 STYLE OVERVIEW
   ============================================================ */


/* ============================================================
   CHAMPIONSHIP OVERVIEW V2
   Wide F1-style calendar + standings
   ============================================================ */


/* ------------------------------------------------------------
   HERO NEXT EVENT DATE / TIME
   ------------------------------------------------------------ */

.hero-next-datetime {
    display: inline-flex !important;
    align-items: stretch;

    margin-top: 13px;

    border: 1px solid rgba(255,255,255,.18);

    background: rgba(255,255,255,.035);
}


.hero-next-date,
.hero-next-time {
    display: flex;
    align-items: center;

    min-height: 34px;

    padding: 0 12px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .055em;
}


.hero-next-date {
    color: #fff;
}


.hero-next-time {
    color: #fff;

    background: #e10600;

    font-size: 14px;
}


/* ------------------------------------------------------------
   OVERVIEW WIDTH
   ------------------------------------------------------------ */

.race-overview {
    width: min(1600px, calc(100% - 56px)) !important;

    margin-top: 52px !important;
    margin-bottom: 70px !important;

    grid-template-columns:
        minmax(430px, 1.16fr)
        minmax(390px, 1fr)
        minmax(350px, .92fr) !important;

    gap: 18px !important;
}


/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

.race-overview-panel {
    border-radius: 5px !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.08) !important;
}


.race-panel-header {
    min-height: 70px !important;

    padding: 0 22px !important;

    border-top: 4px solid #15151b;
}


.race-panel-title {
    gap: 12px !important;
}


.race-panel-title h2 {
    font-size: 17px !important;

    letter-spacing: -.015em !important;
}


.race-panel-icon {
    color: #e10600 !important;

    font-size: 18px !important;
}


/* ------------------------------------------------------------
   CALENDAR
   ------------------------------------------------------------ */

.race-calendar-row {
    min-height: 82px !important;

    grid-template-columns:
        62px
        minmax(0,1fr)
        142px !important;
}


.race-calendar-number {
    font-size: 18px !important;
}


.race-calendar-main {
    padding: 13px 16px !important;
}


.race-calendar-location {
    gap: 13px !important;
}


.race-calendar-flag {
    width: 30px !important;
    height: 20px !important;

    flex-basis: 30px !important;
}


.race-calendar-location strong {
    font-size: 13px !important;

    letter-spacing: -.01em;
}


.race-calendar-location span {
    margin-top: 5px !important;

    font-size: 10px !important;
}


.race-calendar-datetime {
    padding: 10px 15px !important;

    gap: 7px !important;
}


.race-calendar-datetime strong {
    color: #15151b;

    font-size: 11px !important;
}


.race-calendar-datetime span {
    color: #15151b;

    font-size: 14px !important;
    font-weight: 900 !important;
}


/* ------------------------------------------------------------
   NEXT ROUND
   ------------------------------------------------------------ */

.race-calendar-row.is-next {
    min-height: 96px !important;

    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.14) 0%,
            rgba(225,6,0,.045) 100%
        ) !important;

    border-bottom:
        1px solid rgba(225,6,0,.18) !important;
}


.race-calendar-row.is-next
.race-calendar-number {
    background: #e10600 !important;

    font-size: 22px !important;
}


.race-calendar-row.is-next
.race-calendar-location strong {
    font-size: 14px !important;
}


.race-calendar-row.is-next
.race-calendar-datetime {
    border-left-color:
        rgba(225,6,0,.18) !important;
}


.race-calendar-row.is-next
.race-calendar-datetime strong,

.race-calendar-row.is-next
.race-calendar-datetime span {
    color: #e10600 !important;
}


/* ------------------------------------------------------------
   DRIVER STANDINGS
   ------------------------------------------------------------ */

.race-standing-head {
    min-height: 40px !important;

    grid-template-columns:
        48px
        minmax(180px,1.45fr)
        minmax(110px,.85fr)
        55px !important;

    padding: 0 16px !important;
}


.race-standing-row {
    min-height: 78px !important;

    grid-template-columns:
        48px
        minmax(180px,1.45fr)
        minmax(110px,.85fr)
        55px !important;

    padding: 0 16px !important;
}


.race-standing-position {
    font-size: 24px !important;

    letter-spacing: -.04em;
}


.race-standing-avatar {
    width: 38px !important;
    height: 38px !important;

    flex-basis: 38px !important;
}


.race-standing-driver {
    gap: 11px !important;
}


.race-standing-number {
    display: block !important;

    margin: 0 0 3px !important;

    color: #777982 !important;

    font-size: 9px !important;
}


.race-standing-driver strong {
    display: block;

    overflow: hidden;

    color: #15151b !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    text-overflow: ellipsis;
}


.race-standing-team {
    font-size: 10px !important;
}


.race-standing-points {
    font-size: 18px !important;
}


/* ------------------------------------------------------------
   TEAM STANDINGS
   ------------------------------------------------------------ */

.race-team-standing-head {
    grid-template-columns:
        48px
        minmax(0,1fr)
        55px !important;
}


.race-team-standing-row {
    min-height: 78px !important;

    grid-template-columns:
        48px
        minmax(0,1fr)
        55px !important;

    padding: 0 16px !important;
}


.race-team-standing-name {
    gap: 12px !important;
}


.race-team-standing-name strong {
    font-size: 12px !important;
}


.race-team-logo {
    width: 38px !important;
    height: 38px !important;

    flex-basis: 38px !important;
}


/* ------------------------------------------------------------
   LEADERS
   ------------------------------------------------------------ */

.race-standing-row.is-leader,
.race-team-standing-row.is-leader {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.045),
            rgba(225,6,0,0)
        );
}


.race-standing-row.is-leader::after,
.race-team-standing-row.is-leader::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 44px;
    height: 44px;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(225,6,0,.08) 50%
        );
}


/* ------------------------------------------------------------
   LARGE SCREEN
   ------------------------------------------------------------ */

@media (min-width: 1700px) {

    .race-overview {
        width: min(
            1680px,
            calc(100% - 80px)
        ) !important;
    }

}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1250px) {

    .race-overview {
        grid-template-columns:
            1fr 1fr !important;
    }

    .race-calendar-panel {
        grid-column: 1 / -1;
    }

}


@media (max-width: 760px) {

    .race-overview {
        width: calc(100% - 28px) !important;

        grid-template-columns:
            1fr !important;
    }

    .race-calendar-panel {
        grid-column: auto;
    }

}


/* ============================================================
   END CHAMPIONSHIP OVERVIEW V2
   ============================================================ */


/* ==========================================================
   CALENDAR EVENT SCHEDULE V3
   ========================================================== */

.race-calendar-row.is-next {
    border-bottom: 0;
}

.race-calendar-sessions {
    position: relative;
    margin: -1px 14px 14px 62px;
    padding: 14px 16px 15px;
    background: #f7f7f7;
    border-left: 3px solid #e10600;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.race-calendar-sessions-label {
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #777;
}

.race-calendar-session-list {
    display: grid;
    gap: 0;
}

.race-calendar-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    gap: 14px;
    border-top: 1px solid #e4e4e4;
}

.race-calendar-session:first-child {
    border-top: 0;
}

.race-calendar-session-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.race-calendar-session-name strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #15151b;
}

.race-calendar-session-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    background: #e10600;
    border-radius: 50%;
}

.race-calendar-session time {
    flex: 0 0 auto;
    min-width: 48px;
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #15151b;
}

@media (max-width: 760px) {

    .race-calendar-sessions {
        margin-left: 48px;
        margin-right: 10px;
        padding: 12px 13px;
    }

    .race-calendar-session-name strong {
        font-size: 11px;
    }

    .race-calendar-session time {
        font-size: 12px;
    }
}



/* ==========================================================
   LATEST SESSION V4
   ========================================================== */

.race-latest-section {
    width: min(1600px, calc(100% - 56px));
    margin: 72px auto 0;
}

.race-latest-card {
    display: grid;
    grid-template-columns: minmax(310px, .76fr) minmax(620px, 2.24fr);
    overflow: hidden;
    background: #fff;
    border-top: 4px solid #15151b;
    border-radius: 5px;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, .16);
}


/* ----------------------------------------------------------
   EVENT INFO
   ---------------------------------------------------------- */

.race-latest-event {
    position: relative;
    min-height: 350px;
    padding: 30px 34px 28px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #15151b 0%,
            #101015 72%,
            #1d0b0b 100%
        );
    color: #fff;
}

.race-latest-event::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -110px;
    width: 240px;
    height: 240px;
    border: 36px solid rgba(225, 6, 0, .14);
    border-radius: 50%;
}

.race-latest-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 44px;
    color: #a9a9b0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.race-latest-kicker span {
    width: 22px;
    height: 3px;
    background: #e10600;
}

.race-latest-session-type {
    margin-bottom: 8px;
    color: #e10600;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.race-latest-event h2 {
    max-width: 360px;
    margin: 0 0 25px;
    color: #fff;
    font-size: clamp(28px, 2.15vw, 42px);
    font-weight: 1000;
    line-height: .96;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.race-latest-track {
    display: flex;
    align-items: center;
    gap: 13px;
}

.race-latest-track img {
    width: 28px;
    height: 19px;
    object-fit: cover;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.15);
}

.race-latest-track div {
    display: flex;
    flex-direction: column;
}

.race-latest-track strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
}

.race-latest-track span {
    margin-top: 4px;
    color: #85858c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.race-latest-date {
    position: absolute;
    left: 34px;
    bottom: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.race-latest-date span {
    margin-bottom: 5px;
    color: #727279;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.race-latest-date strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}


/* ----------------------------------------------------------
   RESULTS
   ---------------------------------------------------------- */

.race-latest-results {
    min-width: 0;
    background: #fff;
}

.race-latest-results-head {
    min-height: 92px;
    padding: 20px 25px 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dedee2;
}

.race-latest-results-kicker {
    display: block;
    margin-bottom: 3px;
    color: #e10600;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.race-latest-results-head h3 {
    margin: 0;
    color: #15151b;
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.race-latest-results-count {
    padding: 7px 10px;
    border: 1px solid #dedee2;
    color: #77777d;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .09em;
}

.race-latest-table-head {
    min-height: 38px;
    display: grid;
    grid-template-columns:
        72px
        minmax(230px, 1.3fr)
        minmax(180px, .9fr)
        88px;
    align-items: center;
    padding: 0 18px;
    background: #f5f5f6;
    border-bottom: 1px solid #e2e2e5;
    color: #85858d;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .1em;
}

.race-latest-table-head span:last-child {
    text-align: right;
}

.race-latest-row {
    position: relative;
    min-height: 73px;
    display: grid;
    grid-template-columns:
        72px
        minmax(230px, 1.3fr)
        minmax(180px, .9fr)
        88px;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid #e8e8ea;
    transition:
        background .18s ease,
        transform .18s ease;
}

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

.race-latest-row::before {
    content: "";
    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 0;
    width: 3px;
    background: var(--latest-team-color);
}

.race-latest-row.is-winner {
    background:
        linear-gradient(
            90deg,
            rgba(225, 6, 0, .075),
            rgba(225, 6, 0, 0) 68%
        );
}

.race-latest-row.is-winner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(225, 6, 0, .09) 50%
        );
}

.race-latest-position {
    color: #15151b;
    font-size: 27px;
    font-weight: 1000;
    line-height: 1;
}

.race-latest-row.is-winner .race-latest-position {
    color: #e10600;
}

.race-latest-driver {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.race-latest-driver-number {
    color: #85858d;
    font-size: 10px;
    font-weight: 900;
}

.race-latest-driver strong {
    overflow: hidden;
    color: #15151b;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.race-latest-team {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: #5f5f67;
    font-size: 10px;
    font-weight: 700;
}

.race-latest-team-marker {
    flex: 0 0 auto;
    width: 3px;
    height: 22px;
    background: var(--latest-team-color);
}

.race-latest-team > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.race-latest-points {
    position: relative;
    z-index: 2;
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.race-latest-points strong {
    color: #15151b;
    font-size: 20px;
    font-weight: 1000;
}

.race-latest-row.is-winner .race-latest-points strong {
    color: #e10600;
}

.race-latest-points span {
    color: #8b8b91;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

    .race-latest-card {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .race-latest-table-head,
    .race-latest-row {
        grid-template-columns:
            62px
            minmax(180px, 1fr)
            minmax(140px, .75fr)
            76px;
    }
}


@media (max-width: 900px) {

    .race-latest-section {
        width: min(100% - 28px, 720px);
        margin-top: 45px;
    }

    .race-latest-card {
        grid-template-columns: 1fr;
    }

    .race-latest-event {
        min-height: 275px;
    }

    .race-latest-kicker {
        margin-bottom: 28px;
    }
}


@media (max-width: 620px) {

    .race-latest-event {
        padding:
            25px
            22px
            25px;
    }

    .race-latest-date {
        left: 22px;
        bottom: 24px;
    }

    .race-latest-results-head {
        padding-left: 18px;
        padding-right: 18px;
    }

    .race-latest-table-head {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            64px;
        padding: 0 12px;
    }

    .race-latest-table-head span:nth-child(3) {
        display: none;
    }

    .race-latest-row {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            64px;
        min-height: 69px;
        padding: 0 12px;
    }

    .race-latest-team {
        display: none;
    }

    .race-latest-driver {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .race-latest-driver strong {
        font-size: 12px;
    }

    .race-latest-position {
        font-size: 22px;
    }

    .race-latest-points strong {
        font-size: 17px;
    }
}



/* ==========================================================
   LATEST SESSION V4.1 - BOZZA APPROVATA
   ========================================================== */

/*
 * Allineamento con il blocco Calendar / Standings.
 * Nessuna modifica strutturale ai componenti superiori.
 */

.race-latest-section {
    width: min(1600px, calc(100% - 56px));
    margin-top: 42px;
}


/* Più spazio alla classification rispetto alla event card */

.race-latest-card {
    grid-template-columns:
        minmax(300px, .70fr)
        minmax(680px, 2.30fr);
}


/* Event card leggermente più compatta */

.race-latest-event {
    min-height: 330px;
    padding:
        28px
        30px
        26px;
}

.race-latest-kicker {
    margin-bottom: 36px;
}

.race-latest-date {
    left: 30px;
    bottom: 25px;
}


/* Classification */

.race-latest-results-head {
    min-height: 86px;
}

.race-latest-table-head {
    grid-template-columns:
        74px
        minmax(260px, 1.35fr)
        minmax(210px, .95fr)
        92px;
}

.race-latest-row {
    grid-template-columns:
        74px
        minmax(260px, 1.35fr)
        minmax(210px, .95fr)
        92px;

    min-height: 70px;
}


/*
 * Manteniamo il winner highlight leggero:
 * deve essere evidente senza diventare una seconda fascia rossa.
 */

.race-latest-row.is-winner {
    background:
        linear-gradient(
            90deg,
            rgba(225, 6, 0, .085) 0%,
            rgba(225, 6, 0, .035) 48%,
            rgba(225, 6, 0, 0) 82%
        );
}


/* Tablet */

@media (max-width: 1180px) {

    .race-latest-card {
        grid-template-columns:
            280px
            minmax(0, 1fr);
    }

    .race-latest-table-head,
    .race-latest-row {
        grid-template-columns:
            60px
            minmax(180px, 1fr)
            minmax(130px, .72fr)
            75px;
    }
}


/* Mobile: resta stacked */

@media (max-width: 900px) {

    .race-latest-section {
        margin-top: 32px;
    }

    .race-latest-card {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================
   PUBLIC FOOTER V2
   BOZZA APPROVATA
   ========================================================== */

.public-footer {
    width: min(1600px, calc(100% - 56px));

    min-height: 150px;

    margin:
        34px
        auto
        0;

    padding:
        27px
        0
        52px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;

    border-top:
        1px solid rgba(255,255,255,.10);

    color: #73737b;
}


/* Championship / season */

.public-footer > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.public-footer strong {
    color: #f1f1f3;

    font-size: 11px;
    font-weight: 1000;
    line-height: 1.1;

    letter-spacing: -.01em;

    text-transform: uppercase;
}

.public-footer span {
    margin-top: 5px;

    color: #707078;

    font-size: 8px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* Platform signature */

.footer-mark {
    padding-top: 1px;

    color: #85858d;

    font-size: 8px;
    font-weight: 1000;
    line-height: 1;

    letter-spacing: .16em;
    text-align: right;
    text-transform: uppercase;
}


/* Small red motorsport signature */

.footer-mark::before {
    content: "";

    display: inline-block;

    width: 18px;
    height: 2px;

    margin:
        0
        9px
        2px
        0;

    background: #e10600;

    vertical-align: middle;
}


/* Responsive */

@media (max-width: 760px) {

    .public-footer {
        width: calc(100% - 28px);

        min-height: 130px;

        padding:
            24px
            0
            40px;

        flex-direction: column;
        gap: 20px;
    }

    .footer-mark {
        text-align: left;
    }
}



/* ==========================================================
   PUBLIC ROUND DETAIL V1
   ========================================================== */

.public-round-page {
    min-height: 100vh;
    background: #07080b;
    color: #15151b;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.round-public-hero {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    padding-top: 82px;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(225, 6, 0, .18),
            transparent 31%
        ),
        linear-gradient(
            115deg,
            #07080b 0%,
            #101116 52%,
            #171217 100%
        );
}

.round-public-hero::before {
    content: "";
    position: absolute;
    inset: auto -140px -280px auto;

    width: 650px;
    height: 650px;

    border: 74px solid rgba(255,255,255,.018);
    border-radius: 50%;
}

.round-public-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #e10600 0 22%,
            #303036 22% 100%
        );
}

.round-public-hero-inner {
    position: relative;
    z-index: 2;

    width: min(1600px, calc(100% - 56px));
    min-height: 430px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(480px, 1.05fr)
        minmax(430px, .95fr);

    align-items: center;
    gap: 70px;
}

.round-public-copy {
    padding: 55px 0 62px;
}

.round-public-back {
    display: inline-flex;
    align-items: center;

    margin-bottom: 42px;

    color: #8b8b92;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color .18s ease,
        transform .18s ease;
}

.round-public-back:hover {
    color: #fff;
    transform: translateX(-3px);
}

.round-public-kicker {
    display: block;

    margin-bottom: 11px;

    color: #e10600;

    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.round-public-copy h1 {
    max-width: 760px;

    margin: 0;

    color: #fff;

    font-size: clamp(48px, 5.7vw, 92px);
    font-weight: 1000;
    line-height: .87;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.round-public-circuit-name {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;
}

.round-public-circuit-name img {
    width: 34px;
    height: 23px;

    object-fit: cover;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.15);
}

.round-public-circuit-name > div {
    display: flex;
    flex-direction: column;
}

.round-public-circuit-name strong {
    color: #f1f1f3;

    font-size: 14px;
    font-weight: 900;
}

.round-public-circuit-name span {
    min-height: 14px;
    margin-top: 4px;

    color: #74747c;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.round-public-datetime {
    display: flex;
    align-items: stretch;
    gap: 0;

    margin-top: 37px;
}

.round-public-datetime > div {
    min-width: 145px;

    padding:
        13px
        20px
        12px;

    border:
        1px solid rgba(255,255,255,.12);
}

.round-public-datetime > div + div {
    border-left: 0;
}

.round-public-datetime span {
    display: block;

    margin-bottom: 4px;

    color: #696970;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}

.round-public-datetime strong {
    color: #fff;

    font-size: 14px;
    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}

.round-public-datetime strong.is-red {
    color: #e10600;
}


/* Circuit */

.round-public-track {
    position: relative;

    min-height: 350px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.round-public-track::before {
    content: "CIRCUIT";

    position: absolute;
    top: 6px;
    right: 0;

    color: rgba(255,255,255,.035);

    font-size: clamp(60px, 8vw, 128px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.07em;
}

.round-public-track img {
    position: relative;
    z-index: 2;

    display: block;

    width: min(100%, 560px);
    max-height: 330px;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 28px rgba(0,0,0,.42));
}

.round-public-track > span {
    position: relative;
    z-index: 2;

    color: #fff;

    font-size: 30px;
    font-weight: 1000;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

.round-public-content {
    width: min(1600px, calc(100% - 56px));

    margin:
        48px
        auto
        0;
}


/* ----------------------------------------------------------
   COMMON PANEL
   ---------------------------------------------------------- */

.round-public-panel {
    overflow: hidden;

    background: #fff;

    border-top:
        4px solid #15151b;

    border-radius: 5px;

    box-shadow:
        0 12px 34px rgba(0,0,0,.16);
}

.round-public-panel-head {
    min-height: 84px;

    padding:
        18px
        26px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border-bottom:
        1px solid #dedee2;
}

.round-panel-kicker {
    display: block;

    margin-bottom: 3px;

    color: #e10600;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.round-public-panel-head h2,
.round-results-heading h2 {
    margin: 0;

    color: #15151b;

    font-size: 23px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.round-panel-meta {
    color: #8a8a91;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
}


/* ----------------------------------------------------------
   SCHEDULE
   ---------------------------------------------------------- */

.round-schedule-list {
    background: #fff;
}

.round-schedule-row {
    position: relative;

    min-height: 88px;

    display: grid;
    grid-template-columns:
        76px
        minmax(260px, 1fr)
        150px
        145px;

    align-items: center;

    padding:
        0
        27px;

    border-bottom:
        1px solid #e7e7e9;
}

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

.round-schedule-index {
    color: #15151b;

    font-size: 26px;
    font-weight: 1000;
    line-height: 1;
}

.round-schedule-type {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}

.round-session-dot {
    flex: 0 0 auto;

    width: 5px;
    height: 30px;

    background: #777;

    border-radius: 2px;
}

.round-session-dot.session-qualifying {
    background: #e10600;
}

.round-session-dot.session-sprint {
    background: #ff8700;
}

.round-session-dot.session-race {
    background: #15151b;
}

.round-session-dot.session-practice {
    background: #8a8a91;
}

.round-schedule-type > div {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.round-schedule-type strong {
    overflow: hidden;

    color: #15151b;

    font-size: 14px;
    font-weight: 1000;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-schedule-type span:not(.round-session-dot) {
    margin-top: 4px;

    color: #8a8a91;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
}

.round-schedule-status {
    justify-self: start;

    padding:
        6px
        9px;

    border:
        1px solid #dedee2;

    color: #77777e;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.round-schedule-row time {
    justify-self: end;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.round-schedule-row time span {
    color: #8a8a91;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}

.round-schedule-row time strong {
    margin-top: 4px;

    color: #15151b;

    font-size: 18px;
    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}

.round-empty {
    padding: 38px;

    color: #8b8b92;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;

    text-align: center;
}


/* ----------------------------------------------------------
   RESULTS SECTION
   ---------------------------------------------------------- */

.round-results-section {
    margin-top: 54px;
}

.round-results-heading {
    min-height: 75px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 17px;

    color: #fff;
}

.round-results-heading h2 {
    color: #fff;
}

.round-results-heading > span {
    padding-bottom: 3px;

    color: #77777e;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}


/* ----------------------------------------------------------
   RESULT CARD
   ---------------------------------------------------------- */

.round-result-card {
    overflow: hidden;

    margin-bottom: 22px;

    background: #fff;

    border-top:
        4px solid #15151b;

    border-radius: 5px;

    box-shadow:
        0 12px 34px rgba(0,0,0,.14);
}

.round-result-card-head {
    min-height: 84px;

    padding:
        17px
        26px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border-bottom:
        1px solid #dedee2;
}

.round-result-card-head > div:first-child > span {
    display: block;

    margin-bottom: 3px;

    color: #e10600;

    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .14em;
}

.round-result-card-head h3 {
    margin: 0;

    color: #15151b;

    font-size: 21px;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
}

.round-result-session-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.round-result-session-time span {
    color: #8a8a91;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.round-result-session-time strong {
    margin-top: 3px;

    color: #15151b;

    font-size: 16px;
    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}


/* Table */

.round-result-table-head,
.round-result-row {
    display: grid;

    grid-template-columns:
        76px
        minmax(280px, 1.35fr)
        minmax(220px, .95fr)
        160px
        90px;

    align-items: center;

    padding:
        0
        22px;
}

.round-result-table-head {
    min-height: 37px;

    background: #f5f5f6;

    border-bottom:
        1px solid #e2e2e5;

    color: #85858d;

    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .10em;
}

.round-result-table-head span:nth-child(4),
.round-result-table-head span:nth-child(5) {
    text-align: right;
}

.round-result-row {
    position: relative;

    min-height: 72px;

    border-bottom:
        1px solid #e8e8ea;
}

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

.round-result-row::before {
    content: "";

    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 0;

    width: 3px;

    background:
        var(--round-team-color);
}

.round-result-row.is-winner {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.075),
            rgba(225,6,0,0) 68%
        );
}

.round-result-position {
    color: #15151b;

    font-size: 27px;
    font-weight: 1000;
}

.round-result-row.is-winner .round-result-position {
    color: #e10600;
}

.round-result-driver {
    display: grid;
    grid-template-columns:
        46px
        minmax(0, 1fr);

    align-items: center;

    min-width: 0;
}

.round-result-driver > span {
    color: #85858d;

    font-size: 10px;
    font-weight: 900;
}

.round-result-driver strong {
    overflow: hidden;

    color: #15151b;

    font-size: 13px;
    font-weight: 1000;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-result-team {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    color: #5f5f67;

    font-size: 10px;
    font-weight: 700;
}

.round-result-team i {
    flex: 0 0 auto;

    width: 3px;
    height: 23px;

    background:
        var(--round-team-color);
}

.round-result-team span {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-result-time,
.round-result-points {
    justify-self: end;

    color: #15151b;

    font-size: 11px;
    font-weight: 900;

    font-variant-numeric: tabular-nums;
}

.round-result-points {
    font-size: 16px;
    font-weight: 1000;
}

.round-result-row.is-winner .round-result-points {
    color: #e10600;
}


/* No result */

.round-result-empty {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #8c8c93;
}

.round-result-empty span {
    margin-bottom: 5px;

    color: #e10600;

    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .12em;
}

.round-result-empty strong {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}


/* ----------------------------------------------------------
   CALENDAR LINKS
   ---------------------------------------------------------- */

.race-calendar-link {
    display: block;

    color: inherit;
    text-decoration: none;
}

.race-calendar-link .race-calendar-row {
    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.race-calendar-link:hover .race-calendar-row {
    background: #f7f7f8;
}

.race-calendar-link:hover .race-calendar-number,
.race-calendar-link:hover .race-calendar-location strong {
    color: #e10600;
}

.race-calendar-link:focus-visible {
    outline:
        2px solid #e10600;

    outline-offset: -2px;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .round-public-hero-inner {
        grid-template-columns:
            minmax(390px, .95fr)
            minmax(350px, .75fr);

        gap: 35px;
    }

    .round-result-table-head,
    .round-result-row {
        grid-template-columns:
            65px
            minmax(220px, 1.25fr)
            minmax(160px, .75fr)
            125px
            72px;
    }
}


@media (max-width: 820px) {

    .round-public-hero {
        min-height: 0;
    }

    .round-public-hero-inner {
        grid-template-columns: 1fr;
    }

    .round-public-copy {
        padding-bottom: 10px;
    }

    .round-public-track {
        min-height: 260px;
        padding-bottom: 40px;
    }

    .round-public-track img {
        max-height: 245px;
    }

    .round-schedule-row {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            105px;

        padding:
            0
            18px;
    }

    .round-schedule-status {
        display: none;
    }

    .round-result-table-head,
    .round-result-row {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            105px
            70px;
    }

    .round-result-table-head span:nth-child(3),
    .round-result-team {
        display: none;
    }
}


@media (max-width: 560px) {

    .round-public-hero-inner,
    .round-public-content {
        width:
            calc(100% - 28px);
    }

    .round-public-copy h1 {
        font-size:
            clamp(42px, 15vw, 68px);
    }

    .round-public-datetime {
        width: 100%;
    }

    .round-public-datetime > div {
        flex: 1;
        min-width: 0;
    }

    .round-public-panel-head,
    .round-result-card-head {
        padding-left: 17px;
        padding-right: 17px;
    }

    .round-schedule-row {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            72px;

        min-height: 78px;

        padding:
            0
            12px;
    }

    .round-schedule-index {
        font-size: 21px;
    }

    .round-schedule-type {
        gap: 9px;
    }

    .round-schedule-type strong {
        font-size: 12px;
    }

    .round-schedule-row time strong {
        font-size: 14px;
    }

    .round-result-table-head,
    .round-result-row {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            62px;

        padding:
            0
            12px;
    }

    .round-result-table-head span:nth-child(3),
    .round-result-table-head span:nth-child(4),
    .round-result-team,
    .round-result-time {
        display: none;
    }

    .round-result-driver {
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }

    .round-result-position {
        font-size: 21px;
    }

    .round-result-driver strong {
        font-size: 11px;
    }

    .round-result-points {
        font-size: 14px;
    }
}



/* ==========================================================
   PUBLIC ROUND DETAIL V1.1
   Refinement + Round Navigation
   ========================================================== */


/* Hero più compatto */

.round-public-hero {
    min-height: 465px;
}

.round-public-hero-inner {
    min-height: 375px;
}

.round-public-copy {
    padding-top: 38px;
    padding-bottom: 45px;
}

.round-public-back {
    margin-bottom: 30px;
}

.round-public-circuit-name {
    margin-top: 24px;
}

.round-public-datetime {
    margin-top: 28px;
}

.round-public-track {
    min-height: 300px;
}

.round-public-track img {
    width: min(100%, 520px);
    max-height: 290px;

    border-radius: 2px;
}


/* ----------------------------------------------------------
   ROUND NAVIGATION
   ---------------------------------------------------------- */

.round-event-navigation {
    background: #0b0c10;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.round-event-navigation-inner {
    width: min(1600px, calc(100% - 56px));
    min-height: 76px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, .72fr)
        minmax(0, 1fr);

    align-items: stretch;
}

.round-nav-side,
.round-nav-championship {
    min-width: 0;
}

.round-nav-side > a,
.round-nav-side > div,
.round-nav-championship {
    min-height: 76px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        11px
        20px;

    color: inherit;
    text-decoration: none;

    transition:
        background .18s ease,
        color .18s ease;
}

.round-nav-prev > a,
.round-nav-prev > div {
    align-items: flex-start;

    border-right:
        1px solid rgba(255,255,255,.07);
}

.round-nav-next > a,
.round-nav-next > div {
    align-items: flex-end;

    border-left:
        1px solid rgba(255,255,255,.07);
}

.round-nav-championship {
    align-items: center;

    text-align: center;
}

.round-event-navigation span {
    margin-bottom: 4px;

    color: #65656d;

    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.round-event-navigation strong {
    overflow: hidden;

    max-width: 100%;

    color: #efeff1;

    font-size: 11px;
    font-weight: 1000;
    letter-spacing: -.01em;

    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.round-nav-side > a:hover,
.round-nav-championship:hover {
    background:
        rgba(255,255,255,.035);
}

.round-nav-side > a:hover strong,
.round-nav-championship:hover strong {
    color: #e10600;
}

.round-event-navigation .is-disabled {
    opacity: .28;
}


/* ----------------------------------------------------------
   Riduzione spazi pagina
   ---------------------------------------------------------- */

.round-public-content {
    margin-top: 34px;
}

.round-results-section {
    margin-top: 39px;
}

.round-results-heading {
    min-height: 60px;
    margin-bottom: 13px;
}

.round-result-card {
    margin-bottom: 17px;
}


/* Schedule leggermente più compatto */

.round-schedule-row {
    min-height: 80px;
}

.round-public-panel-head {
    min-height: 77px;
}


/* Results leggermente più compatto */

.round-result-card-head {
    min-height: 76px;
}

.round-result-row {
    min-height: 68px;
}


/* ----------------------------------------------------------
   Responsive navigation
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .round-event-navigation-inner {
        width: calc(100% - 28px);

        grid-template-columns:
            1fr
            1fr;
    }

    .round-nav-championship {
        display: none;
    }

    .round-nav-next > a,
    .round-nav-next > div {
        border-left:
            1px solid rgba(255,255,255,.07);
    }

}


@media (max-width: 560px) {

    .round-public-hero {
        min-height: 0;
    }

    .round-public-copy {
        padding-top: 30px;
    }

    .round-public-track {
        min-height: 225px;
    }

    .round-public-track img {
        max-height: 215px;
    }

    .round-event-navigation strong {
        font-size: 9px;
    }

    .round-nav-side > a,
    .round-nav-side > div {
        padding-left: 10px;
        padding-right: 10px;
    }

}



/* ==========================================================
   LATEST SESSION EMPTY STATE V1
   ========================================================== */

.race-latest-empty-section {
    margin-top: 42px;
}

.race-latest-empty-card {
    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            120deg,
            #111217,
            #18191f
        );

    border-top: 4px solid #e10600;
}

.race-latest-empty-content {
    padding: 38px 30px;

    text-align: center;
}

.race-latest-empty-content h2 {
    margin:
        5px
        0
        8px;

    color: #fff;

    font-size: 28px;
    font-weight: 1000;
    letter-spacing: -.04em;

    text-transform: uppercase;
}

.race-latest-empty-content p {
    margin: 0;

    color: #77777f;

    font-size: 11px;
    font-weight: 700;
}



/* ==========================================================
   PUBLIC ROUND DETAIL V2 - HOME LIGHT THEME
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

.public-round-page {
    background: #f4f4f5;
    color: #15151b;
}


/* ----------------------------------------------------------
   HERO LIGHT
   ---------------------------------------------------------- */

.public-round-page .round-public-hero {
    min-height: 445px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(225, 6, 0, .075),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f7f7f8 55%,
            #ececef 100%
        );

    border-bottom:
        1px solid #dcdce0;
}

.public-round-page .round-public-hero::before {
    border-color:
        rgba(21,21,27,.025);
}

.public-round-page .round-public-hero::after {
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #e10600 0 18%,
            #15151b 18% 24%,
            #dedee2 24% 100%
        );
}


/* Hero text */

.public-round-page .round-public-back {
    color: #77777e;
}

.public-round-page .round-public-back:hover {
    color: #e10600;
}

.public-round-page .round-public-kicker {
    color: #e10600;
}

.public-round-page .round-public-copy h1 {
    color: #15151b;
}

.public-round-page .round-public-circuit-name strong {
    color: #15151b;
}

.public-round-page .round-public-circuit-name span {
    color: #77777f;
}


/* Date / time */

.public-round-page .round-public-datetime > div {
    background: #fff;

    border-color:
        #d8d8dc;
}

.public-round-page .round-public-datetime span {
    color: #8b8b92;
}

.public-round-page .round-public-datetime strong {
    color: #15151b;
}

.public-round-page .round-public-datetime strong.is-red {
    color: #e10600;
}


/* ----------------------------------------------------------
   CIRCUIT AREA
   ---------------------------------------------------------- */

.public-round-page .round-public-track::before {
    color:
        rgba(21,21,27,.035);
}

.public-round-page .round-public-track {
    position: relative;
}

.public-round-page .round-public-track img {
    width: min(100%, 530px);
    max-height: 295px;

    background: #fff;

    padding: 10px;

    border:
        1px solid #dedee2;

    box-shadow:
        0 14px 32px rgba(21,21,27,.08);

    filter: none;
}

.public-round-page .round-public-track > span {
    color: #15151b;
}


/* ----------------------------------------------------------
   ROUND NAVIGATION
   ---------------------------------------------------------- */

.public-round-page .round-event-navigation {
    background: #fff;

    border-bottom:
        1px solid #dadade;

    box-shadow:
        0 5px 16px rgba(21,21,27,.035);
}

.public-round-page .round-event-navigation-inner {
    min-height: 70px;
}

.public-round-page .round-nav-side > a,
.public-round-page .round-nav-side > div,
.public-round-page .round-nav-championship {
    min-height: 70px;
}

.public-round-page .round-nav-prev > a,
.public-round-page .round-nav-prev > div {
    border-right:
        1px solid #e4e4e7;
}

.public-round-page .round-nav-next > a,
.public-round-page .round-nav-next > div {
    border-left:
        1px solid #e4e4e7;
}

.public-round-page .round-event-navigation span {
    color: #8c8c93;
}

.public-round-page .round-event-navigation strong {
    color: #15151b;
}

.public-round-page .round-nav-side > a:hover,
.public-round-page .round-nav-championship:hover {
    background: #f6f6f7;
}

.public-round-page .round-nav-side > a:hover strong,
.public-round-page .round-nav-championship:hover strong {
    color: #e10600;
}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

.public-round-page .round-public-content {
    margin-top: 40px;
}


/* ----------------------------------------------------------
   PANELS
   ---------------------------------------------------------- */

.public-round-page .round-public-panel,
.public-round-page .round-result-card {
    background: #fff;

    border-top:
        4px solid #15151b;

    border-radius: 3px;

    box-shadow:
        0 8px 26px rgba(21,21,27,.07);
}

.public-round-page .round-public-panel-head,
.public-round-page .round-result-card-head {
    border-bottom:
        1px solid #dedee2;
}

.public-round-page .round-public-panel-head h2,
.public-round-page .round-result-card-head h3 {
    color: #15151b;
}

.public-round-page .round-panel-kicker,
.public-round-page .round-result-card-head > div:first-child > span {
    color: #e10600;
}

.public-round-page .round-panel-meta {
    color: #8b8b92;
}


/* ----------------------------------------------------------
   SCHEDULE
   ---------------------------------------------------------- */

.public-round-page .round-schedule-list {
    background: #fff;
}

.public-round-page .round-schedule-row {
    min-height: 78px;

    border-bottom:
        1px solid #e7e7ea;

    transition:
        background .16s ease;
}

.public-round-page .round-schedule-row:hover {
    background: #fafafa;
}

.public-round-page .round-schedule-index {
    color: #15151b;
}

.public-round-page .round-schedule-type strong {
    color: #15151b;
}

.public-round-page .round-schedule-type span:not(.round-session-dot) {
    color: #8a8a91;
}

.public-round-page .round-schedule-status {
    background: #f7f7f8;

    border-color:
        #dcdce0;

    color: #77777e;
}

.public-round-page .round-schedule-row time span {
    color: #8a8a91;
}

.public-round-page .round-schedule-row time strong {
    color: #15151b;
}


/* ----------------------------------------------------------
   RESULTS TITLE AREA
   ---------------------------------------------------------- */

.public-round-page .round-results-section {
    margin-top: 46px;
}

.public-round-page .round-results-heading {
    min-height: 62px;

    padding:
        0
        2px;
}

.public-round-page .round-results-heading h2 {
    color: #15151b;
}

.public-round-page .round-results-heading > span {
    color: #888890;
}


/* ----------------------------------------------------------
   RESULT CARDS
   ---------------------------------------------------------- */

.public-round-page .round-result-card {
    margin-bottom: 18px;
}

.public-round-page .round-result-table-head {
    background: #f3f3f5;

    border-bottom:
        1px solid #dedee2;

    color: #7e7e86;
}

.public-round-page .round-result-row {
    min-height: 67px;

    background: #fff;

    border-bottom:
        1px solid #e6e6e9;

    transition:
        background .15s ease;
}

.public-round-page .round-result-row:hover {
    background: #fafafa;
}

.public-round-page .round-result-row.is-winner {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.075),
            rgba(225,6,0,.016) 56%,
            #fff 100%
        );
}

.public-round-page .round-result-position,
.public-round-page .round-result-driver strong,
.public-round-page .round-result-time,
.public-round-page .round-result-points {
    color: #15151b;
}

.public-round-page .round-result-row.is-winner .round-result-position,
.public-round-page .round-result-row.is-winner .round-result-points {
    color: #e10600;
}

.public-round-page .round-result-driver > span {
    color: #8a8a91;
}

.public-round-page .round-result-team {
    color: #5e5e66;
}


/* ----------------------------------------------------------
   EMPTY RESULTS
   ---------------------------------------------------------- */

.public-round-page .round-result-empty {
    min-height: 105px;

    background: #fafafa;

    color: #85858c;
}

.public-round-page .round-result-empty span {
    color: #e10600;
}


/* ----------------------------------------------------------
   FOOTER LIGHT
   ---------------------------------------------------------- */

.public-round-page .public-footer {
    color: #15151b;

    border-top:
        1px solid #d7d7db;
}

.public-round-page .public-footer strong {
    color: #15151b;
}

.public-round-page .public-footer span,
.public-round-page .footer-mark {
    color: #85858c;
}


/* ----------------------------------------------------------
   CALENDAR LINKS - HOME STYLE
   ---------------------------------------------------------- */

.public-round-page .race-calendar-link:hover .race-calendar-row {
    background: #f7f7f8;
}


/* ----------------------------------------------------------
   SMALL DETAIL ACCENTS
   ---------------------------------------------------------- */

.public-round-page .round-public-panel::before,
.public-round-page .round-result-card::before {
    content: "";
}

.public-round-page .round-session-dot.session-qualifying {
    background: #e10600;
}

.public-round-page .round-session-dot.session-sprint {
    background: #f28c00;
}

.public-round-page .round-session-dot.session-race {
    background: #15151b;
}

.public-round-page .round-session-dot.session-practice {
    background: #97979e;
}


/* ----------------------------------------------------------
   RESPONSIVE LIGHT
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    .public-round-page .round-public-hero {
        min-height: 0;
    }

    .public-round-page .round-public-track img {
        max-height: 250px;
    }

}


@media (max-width: 560px) {

    .public-round-page .round-public-content {
        margin-top: 26px;
    }

    .public-round-page .round-results-section {
        margin-top: 32px;
    }

    .public-round-page .round-public-track img {
        padding: 6px;
    }

}



/* ==========================================================
   CHAMPIONSHIP PUBLIC V3 - HOME LIGHT THEME
   Same visual language as Championship WEB Manager Home
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

body:has(.hero) {
    background: #f4f4f5;
    color: #15151b;
}


/* La global nav è già presente */

body:has(.hero) .public-nav {
    display: none;
}


/* ----------------------------------------------------------
   CHAMPIONSHIP HERO
   ---------------------------------------------------------- */

body:has(.hero) .hero {
    position: relative;

    min-height: 600px;

    background:
        radial-gradient(
            circle at 84% 40%,
            rgba(225,6,0,.055),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f8f8f9 58%,
            #eeeeef 100%
        );

    border-bottom:
        1px solid #d9d9dd;

    color: #15151b;
}


/* Elimina il vecchio effetto dark */

body:has(.hero) .hero-glow {
    background:
        radial-gradient(
            circle,
            rgba(225,6,0,.08),
            rgba(225,6,0,0) 68%
        );

    opacity: 1;
}

body:has(.hero) .hero::after {
    background:
        linear-gradient(
            90deg,
            #e10600 0 18%,
            #15151b 18% 23%,
            #dedee2 23% 100%
        );
}


/* ----------------------------------------------------------
   HERO COPY
   ---------------------------------------------------------- */

body:has(.hero) .hero-eyebrow {
    color: #e10600;
}

body:has(.hero) .hero h1 {
    color: #15151b;

    text-shadow: none;
}

body:has(.hero) .hero-season span {
    background: #fff;

    border-color: #d7d7db;

    color: #15151b;
}


/* ----------------------------------------------------------
   NEXT ROUND
   ---------------------------------------------------------- */

body:has(.hero) .hero-event {
    border-top:
        1px solid #d9d9dd;
}

body:has(.hero) .hero-round-number {
    color: #77777f;

    border-right-color:
        #e10600;
}

body:has(.hero) .hero-round-number strong {
    color: #15151b;
}

body:has(.hero) .hero-label {
    color: #77777f;
}

body:has(.hero) .hero-event-main h2 {
    color: #15151b;
}

body:has(.hero) .hero-event-main p {
    color: #74747c;
}


/* Date + time */

body:has(.hero) .hero-next-date,
body:has(.hero) .hero-next-time {
    border-color: #d8d8dc;
}

body:has(.hero) .hero-next-date {
    background: #fff;

    color: #15151b;
}

body:has(.hero) .hero-next-time {
    background: #e10600;

    border-color: #e10600;

    color: #fff;
}


/* ----------------------------------------------------------
   CIRCUIT
   ---------------------------------------------------------- */

body:has(.hero) .hero-track {
    background: transparent;
}

body:has(.hero) .hero-track img {
    filter: none;

    opacity: .92;
}


/* Giant season number */

body:has(.hero) .hero-number {
    color: rgba(21,21,27,.028);
}


/* ----------------------------------------------------------
   CHAMPIONSHIP STATUS BAR
   ---------------------------------------------------------- */

body:has(.hero) .championship-bar {
    background: #fff;

    border-top: 0;
    border-bottom:
        1px solid #dcdce0;

    box-shadow:
        0 8px 22px rgba(21,21,27,.04);
}

body:has(.hero) .championship-bar > div {
    border-color: #e1e1e4;
}

body:has(.hero) .championship-bar span {
    color: #85858c;
}

body:has(.hero) .championship-bar strong {
    color: #15151b;
}

body:has(.hero) .championship-bar .bar-leader strong {
    color: #e10600;
}


/* ----------------------------------------------------------
   MAIN OVERVIEW
   ---------------------------------------------------------- */

body:has(.hero) .race-overview {
    margin-top: 42px;
}


/* Calendar / Driver / Team panels */

body:has(.hero) .race-overview-panel {
    background: #fff;

    border-top:
        4px solid #15151b;

    border-left:
        1px solid #e0e0e3;
    border-right:
        1px solid #e0e0e3;
    border-bottom:
        1px solid #e0e0e3;

    box-shadow:
        0 8px 26px rgba(21,21,27,.065);
}


/* Panel header */

body:has(.hero) .race-panel-header {
    background: #fff;

    border-bottom:
        1px solid #dedee2;
}

body:has(.hero) .race-panel-caption {
    color: #e10600;
}

body:has(.hero) .race-panel-title {
    color: #15151b;
}

body:has(.hero) .race-panel-icon {
    color: #15151b;
}


/* ----------------------------------------------------------
   CALENDAR
   ---------------------------------------------------------- */

body:has(.hero) .race-calendar-list {
    background: #fff;
}

body:has(.hero) .race-calendar-link {
    color: #15151b;
}

body:has(.hero) .race-calendar-row {
    background: #fff;

    border-color: #e5e5e8;
}

body:has(.hero) .race-calendar-link:hover .race-calendar-row {
    background: #f7f7f8;
}

body:has(.hero) .race-calendar-number {
    color: #15151b;
}

body:has(.hero) .race-calendar-location strong {
    color: #15151b;
}

body:has(.hero) .race-calendar-location span {
    color: #7e7e86;
}

body:has(.hero) .race-calendar-datetime strong {
    color: #15151b;
}

body:has(.hero) .race-calendar-datetime span {
    color: #85858c;
}


/* Next round resta il punto rosso forte */

body:has(.hero) .race-calendar-row.is-next {
    background:
        linear-gradient(
            90deg,
            #e10600 0%,
            #e10600 100%
        );
}

body:has(.hero) .race-calendar-row.is-next,
body:has(.hero) .race-calendar-row.is-next .race-calendar-number,
body:has(.hero) .race-calendar-row.is-next .race-calendar-location strong,
body:has(.hero) .race-calendar-row.is-next .race-calendar-location span,
body:has(.hero) .race-calendar-row.is-next .race-calendar-datetime strong,
body:has(.hero) .race-calendar-row.is-next .race-calendar-datetime span {
    color: #fff;
}


/* Schedule sotto il prossimo evento */

body:has(.hero) .race-calendar-sessions {
    background: #f4f4f5;

    border-color: #e10600;
}

body:has(.hero) .race-calendar-sessions-label {
    color: #e10600;
}

body:has(.hero) .race-calendar-session {
    border-color: #dedee2;

    color: #15151b;
}

body:has(.hero) .race-calendar-session-name strong {
    color: #15151b;
}

body:has(.hero) .race-calendar-session time {
    color: #15151b;
}


/* ----------------------------------------------------------
   DRIVER + TEAM STANDINGS
   ---------------------------------------------------------- */

body:has(.hero) .race-standing-head {
    background: #f4f4f5;

    border-color: #dedee2;

    color: #7d7d85;
}

body:has(.hero) .race-standing-list {
    background: #fff;
}

body:has(.hero) .race-standing-driver,
body:has(.hero) .race-standing-team {
    background: #fff;

    border-color: #e6e6e8;

    color: #15151b;
}

body:has(.hero) .race-standing-driver:hover,
body:has(.hero) .race-standing-team:hover {
    background: #f8f8f9;
}

body:has(.hero) .race-standing-position {
    color: #15151b;
}

body:has(.hero) .race-standing-number {
    color: #85858c;
}

body:has(.hero) .race-standing-driver strong,
body:has(.hero) .race-team-standing-name {
    color: #15151b;
}

body:has(.hero) .race-standing-points {
    color: #15151b;
}


/* First position */

body:has(.hero) .race-standing-list > :first-child {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.07),
            rgba(225,6,0,0) 72%
        );
}

body:has(.hero) .race-standing-list > :first-child .race-standing-position,
body:has(.hero) .race-standing-list > :first-child .race-standing-points {
    color: #e10600;
}


/* ----------------------------------------------------------
   LATEST SESSION
   ---------------------------------------------------------- */

body:has(.hero) .race-latest-section {
    margin-top: 42px;
}

body:has(.hero) .race-latest-card {
    background: #fff;

    border-top:
        4px solid #15151b;

    border-left:
        1px solid #e0e0e3;
    border-right:
        1px solid #e0e0e3;
    border-bottom:
        1px solid #e0e0e3;

    box-shadow:
        0 8px 26px rgba(21,21,27,.065);
}


/* Anche la parte evento diventa chiara */

body:has(.hero) .race-latest-event {
    background:
        linear-gradient(
            145deg,
            #f1f1f3,
            #ffffff
        );

    border-right:
        1px solid #dedee2;

    color: #15151b;
}

body:has(.hero) .race-latest-event::after {
    border-color:
        rgba(21,21,27,.035);
}

body:has(.hero) .race-latest-kicker {
    color: #e10600;
}

body:has(.hero) .race-latest-session-type {
    color: #77777f;
}

body:has(.hero) .race-latest-event h2 {
    color: #15151b;
}

body:has(.hero) .race-latest-track strong {
    color: #15151b;
}

body:has(.hero) .race-latest-track span {
    color: #85858c;
}

body:has(.hero) .race-latest-date {
    border-color: #d7d7db;
}

body:has(.hero) .race-latest-date span {
    color: #85858c;
}

body:has(.hero) .race-latest-date strong {
    color: #15151b;
}


/* Results side */

body:has(.hero) .race-latest-results {
    background: #fff;
}

body:has(.hero) .race-latest-results-head {
    border-color: #dedee2;
}

body:has(.hero) .race-latest-results-kicker {
    color: #e10600;
}

body:has(.hero) .race-latest-results-head h3 {
    color: #15151b;
}

body:has(.hero) .race-latest-results-count {
    color: #85858c;
}

body:has(.hero) .race-latest-table-head {
    background: #f4f4f5;

    border-color: #dedee2;

    color: #7f7f87;
}

body:has(.hero) .race-latest-row {
    background: #fff;

    border-color: #e6e6e8;
}

body:has(.hero) .race-latest-row.is-winner {
    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.07),
            rgba(225,6,0,0) 72%
        );
}

body:has(.hero) .race-latest-position,
body:has(.hero) .race-latest-driver strong,
body:has(.hero) .race-latest-team,
body:has(.hero) .race-latest-points strong {
    color: #15151b;
}

body:has(.hero) .race-latest-driver-number,
body:has(.hero) .race-latest-points span {
    color: #85858c;
}

body:has(.hero) .race-latest-row.is-winner .race-latest-position,
body:has(.hero) .race-latest-row.is-winner .race-latest-points strong {
    color: #e10600;
}


/* ----------------------------------------------------------
   EMPTY LATEST SESSION
   ---------------------------------------------------------- */

body:has(.hero) .race-latest-empty-card {
    background:
        linear-gradient(
            120deg,
            #ffffff,
            #f2f2f4
        );

    border-top:
        4px solid #15151b;
}

body:has(.hero) .race-latest-empty-content h2 {
    color: #15151b;
}

body:has(.hero) .race-latest-empty-content p {
    color: #7c7c84;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

body:has(.hero) .public-footer {
    color: #15151b;

    border-top:
        1px solid #d7d7db;
}

body:has(.hero) .public-footer strong {
    color: #15151b;
}

body:has(.hero) .public-footer span,
body:has(.hero) .footer-mark {
    color: #85858c;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    body:has(.hero) .hero {
        min-height: auto;
    }

    body:has(.hero) .race-overview,
    body:has(.hero) .race-latest-section {
        margin-top: 28px;
    }

}



/* ==========================================================
   CHAMPIONSHIP HERO LIGHT V3.1
   Fix overlap + bundled circuit layout
   ========================================================== */


/* Hero layout */

body:has(.hero) .hero {
    min-height: 650px;

    padding-bottom: 0;
}

body:has(.hero) .hero-content {
    position: relative;
    z-index: 4;

    padding-bottom: 48px;
}


/* ----------------------------------------------------------
   NEXT ROUND
   Never overlaps championship-bar
   ---------------------------------------------------------- */

body:has(.hero) .hero-event {
    position: relative !important;

    inset: auto !important;

    width: min(620px, 100%);

    margin-top: 56px;

    display: grid;
    grid-template-columns:
        115px
        minmax(0, 1fr);

    align-items: stretch;

    background: transparent !important;

    border-top:
        1px solid #d8d8dc !important;

    overflow: visible;
}

body:has(.hero) .hero-round-number {
    min-height: 118px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        16px
        22px
        16px
        0;

    background: transparent !important;

    border-right:
        3px solid #e10600 !important;
}

body:has(.hero) .hero-round-number strong {
    margin-top: 4px;

    color: #15151b;

    font-size: 48px;
    line-height: .9;
}

body:has(.hero) .hero-event-main {
    position: relative;

    min-height: 118px;

    padding:
        16px
        0
        10px
        28px;

    background: transparent !important;
}

body:has(.hero) .hero-event-main h2 {
    margin-top: 4px;

    color: #15151b;

    font-size: 25px;
}

body:has(.hero) .hero-event-main p {
    margin-top: 3px;
}


/* Date under event, not floating */

body:has(.hero) .hero-next-datetime {
    position: relative !important;

    inset: auto !important;

    display: inline-flex;

    margin-top: 13px;
}


/* ----------------------------------------------------------
   TRACK
   Bundled SVGs have no uploaded-image card
   ---------------------------------------------------------- */

body:has(.hero) .hero-track {
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
}

body:has(.hero) .hero-track img {
    width: min(100%, 590px);
    max-height: 390px;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    object-fit: contain;

    opacity: .78;

    filter:
        grayscale(1)
        contrast(1.25);
}


/* ----------------------------------------------------------
   CHAMPIONSHIP BAR
   Sits below hero instead of entering it
   ---------------------------------------------------------- */

body:has(.hero) .championship-bar {
    position: relative;
    z-index: 10;

    margin-top: 0 !important;

    transform: none !important;
}


/* ----------------------------------------------------------
   ROUND DETAIL CIRCUIT SVG
   ---------------------------------------------------------- */

.public-round-page .round-public-track img {
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    object-fit: contain;

    filter:
        grayscale(1)
        contrast(1.2);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    body:has(.hero) .hero {
        min-height: 610px;
    }

    body:has(.hero) .hero-track img {
        width: min(100%, 500px);
    }

}


@media (max-width: 760px) {

    body:has(.hero) .hero {
        min-height: auto;
    }

    body:has(.hero) .hero-event {
        width: 100%;

        grid-template-columns:
            88px
            minmax(0, 1fr);

        margin-top: 38px;
    }

    body:has(.hero) .hero-round-number strong {
        font-size: 38px;
    }

}



/* ==========================================================
   CHAMPIONSHIP PARTICIPANTS MODAL
========================================================== */

.portal-card-open {
    gap: 14px;
}

.portal-participants-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    font: inherit;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;

    color: #111318;
    cursor: pointer;
}

.portal-participants-button:hover {
    color: #e10600;
}

.portal-participants-icon {
    color: #e10600;
    font-size: 6px;
    letter-spacing: -2px;
}

.portal-open-link {
    margin-left: auto;

    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.portal-open-link strong {
    color: #e10600;
    font-size: 20px;
}


body.participants-modal-open {
    overflow: hidden;
}


.participants-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 32px;
}

.participants-modal.is-open {
    display: flex;
}


.participants-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(12, 15, 20, .72);
    backdrop-filter: blur(4px);
}


.participants-panel {
    position: relative;
    z-index: 1;

    width: min(1180px, 94vw);
    max-height: 90vh;

    overflow: hidden;

    background: #f7f7f8;

    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .42);
}


.participants-close {
    position: absolute;
    z-index: 10;

    top: 18px;
    right: 18px;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #111318;

    font-size: 28px;
    line-height: 38px;

    cursor: pointer;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, .15);
}


.participants-hero {
    min-height: 180px;

    padding: 30px 72px 30px 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    color: #fff;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(225, 6, 0, .25),
            transparent 34%
        ),
        linear-gradient(
            115deg,
            #10151b 0%,
            #19232c 55%,
            #0b0f13 100%
        );
}


.participants-hero-brand {
    display: flex;
    align-items: center;
    gap: 24px;

    min-width: 0;
}


.participants-championship-logo {
    width: 145px;
    max-height: 105px;

    object-fit: contain;

    background: rgba(255, 255, 255, .96);
    border-radius: 8px;

    padding: 10px;
}


.participants-hero-brand span,
.participants-hero-copy span {
    display: block;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;

    color: rgba(255, 255, 255, .65);
}


.participants-hero-brand h2 {
    max-width: 650px;

    margin: 5px 0 6px;

    font-size: clamp(24px, 3vw, 40px);
    line-height: .95;
    letter-spacing: -.045em;

    text-transform: uppercase;
}


.participants-hero-brand p {
    margin: 0;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;

    color: rgba(255, 255, 255, .72);

    text-transform: uppercase;
}


.participants-hero-copy {
    flex: 0 0 auto;

    text-align: right;
    transform: skew(-7deg);
}


.participants-hero-copy strong {
    display: block;

    color: #ff1e16;

    font-size: 22px;
    line-height: 1;
}


.participants-toolbar {
    min-height: 68px;

    padding: 0 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff;

    border-bottom: 1px solid #dedfe2;
}


.participants-tab {
    height: 68px;

    display: inline-flex;
    align-items: center;

    position: relative;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}


.participants-tab::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background: #e10600;
}


.participants-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;

    color: #777d85;
}


.participants-summary strong {
    color: #111318;
    font-size: 16px;
}


.participants-summary span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}


.participants-summary i {
    width: 1px;
    height: 13px;

    margin: 0 7px;

    background: #c9cbd0;
}


.participants-content {
    max-height: calc(90vh - 310px);

    overflow-y: auto;

    padding: 18px 28px 24px;
}


.participants-team {
    position: relative;

    min-height: 126px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1.05fr)
        minmax(260px, 1.15fr)
        minmax(360px, 1.7fr);

    align-items: stretch;

    margin-bottom: 12px;

    background: #fff;

    border: 1px solid #e1e2e5;
    border-radius: 10px;

    overflow: hidden;
}


.participants-team::before {
    content: "";

    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;

    width: 4px;

    background: var(--team-color);
}


.participants-team-identity {
    min-width: 0;

    padding: 18px 18px 18px 24px;

    display: flex;
    align-items: center;
    gap: 18px;

    border-right: 1px solid #ececef;
}


.participants-team-logo,
.participants-team-logo-placeholder {
    width: 76px;
    height: 64px;

    flex: 0 0 76px;

    object-fit: contain;
}


.participants-team-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #f0f1f3;

    font-size: 28px;
    font-weight: 900;
}


.participants-team-identity strong {
    display: block;

    font-size: 15px;
    line-height: 1.05;

    text-transform: uppercase;
}


.participants-team-identity span {
    display: block;

    margin-top: 8px;

    color: #8a8f96;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}


.participants-team-car {
    min-width: 0;

    padding: 10px 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #ececef;
}


.participants-car {
    display: block;

    width: 100%;
    max-width: 285px;
    height: 94px;

    object-fit: contain;
}


.participants-car-empty {
    color: #a4a8ae;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}


.participants-team-drivers {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.participants-driver {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
}


.participants-driver + .participants-driver {
    border-left: 1px solid #ececef;
}


.participants-driver-avatar,
.participants-driver-placeholder {
    width: 64px;
    height: 76px;

    flex: 0 0 64px;

    object-fit: cover;

    border-radius: 8px;

    background: #eceef0;
}


.participants-driver-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
    font-weight: 900;

    color: #7b8087;
}


.participants-driver-info {
    min-width: 0;
}


.participants-driver-name {
    display: flex;
    align-items: center;
    gap: 7px;
}


.participants-driver-name strong {
    overflow: hidden;

    font-size: 12px;
    line-height: 1.15;

    text-overflow: ellipsis;
}


.participants-driver-flag {
    width: 19px;
    height: 13px;

    flex: 0 0 19px;

    object-fit: cover;
}


.participants-driver-info > span {
    display: block;

    margin-top: 8px;

    color: #e10600;

    font-size: 17px;
    font-weight: 950;
}


.participants-no-driver {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #a4a8ae;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}


.participants-loading,
.participants-empty {
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #858a91;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}


.participants-empty strong {
    color: #111318;
    font-size: 22px;
}


.participants-empty span {
    margin-top: 8px;
}


.participants-footer {
    min-height: 58px;

    padding: 0 30px;

    display: flex;
    align-items: center;
    gap: 15px;

    border-top: 1px solid #dedfe2;

    background: #fff;

    color: #92979e;
}


.participants-footer > span {
    color: #858a91;
    font-size: 8px;
    letter-spacing: -2px;
}


.participants-footer em {
    font-size: 10px;
}


.participants-footer strong {
    margin-left: auto;

    color: #777d84;

    font-size: 9px;
    letter-spacing: .15em;
}


@media (max-width: 980px) {

    .participants-modal {
        padding: 15px;
    }

    .participants-panel {
        width: 100%;
        max-height: 94vh;
    }

    .participants-hero {
        min-height: 145px;
    }

    .participants-hero-copy {
        display: none;
    }

    .participants-content {
        max-height: calc(94vh - 270px);
    }

    .participants-team {
        grid-template-columns: 1fr 1.15fr;
    }

    .participants-team-drivers {
        grid-column: 1 / -1;

        border-top: 1px solid #ececef;
    }
}


@media (max-width: 650px) {

    .participants-modal {
        padding: 0;
    }

    .participants-panel {
        height: 100%;
        max-height: none;

        border-radius: 0;
    }

    .participants-hero {
        min-height: 130px;

        padding: 24px 58px 24px 20px;
    }

    .participants-championship-logo {
        width: 90px;
    }

    .participants-toolbar {
        padding: 0 18px;
    }

    .participants-content {
        max-height: calc(100vh - 255px);

        padding: 12px;
    }

    .participants-team {
        display: block;
    }

    .participants-team-identity,
    .participants-team-car {
        border-right: 0;
        border-bottom: 1px solid #ececef;
    }

    .participants-team-car {
        min-height: 105px;
    }

    .participants-team-drivers {
        display: block;
    }

    .participants-driver + .participants-driver {
        border-left: 0;
        border-top: 1px solid #ececef;
    }

    .participants-footer strong {
        display: none;
    }
}



/* ==========================================================
   HOME CARD MANAGER INFO
========================================================== */

.portal-champ-card {
    cursor: default;
}

.portal-card-manager {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 22px 17px;
    padding: 11px 0 14px;

    border-top: 1px solid #ececef;
}

.portal-manager-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;
    object-fit: cover;

    background: #eceef0;

    border: 1px solid #dedfe2;
}

.portal-manager-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #191c20;

    font-size: 13px;
    font-weight: 900;
}

.portal-manager-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portal-manager-copy span {
    color: #9a9ea4;

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
}

.portal-manager-copy strong {
    overflow: hidden;

    color: #17191d;

    font-size: 11px;
    line-height: 1.15;
    font-weight: 850;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.portal-open-link {
    color: inherit;
    text-decoration: none;
}

.portal-open-link:hover span {
    color: #e10600;
}

.portal-open-link:hover strong {
    transform: translateX(3px);
}

.portal-open-link strong {
    transition: transform .16s ease;
}

.portal-participants-button,
.portal-open-link {
    position: relative;
    z-index: 2;
}



/* ==========================================================
   HOME CARDS ULTRA COMPACT V2
   ========================================================== */

.portal-champ-card {
    min-height: 0 !important;
    padding: 14px 16px 15px !important;
}

/* header 01 / ACTIVE */
.portal-card-head > strong {
    padding: 4px 7px;
}

/* logo */
.portal-logo-area {
    height: 70px !important;
    margin: 7px 0 9px !important;
}

.portal-logo-area img {
    max-height: 62px !important;
    max-width: 72% !important;
}

.portal-logo-placeholder {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    font-size: 25px !important;
}

/* championship title */
.portal-card-body h3 {
    margin: 3px 0 3px !important;
    font-size: 21px !important;
    line-height: .98 !important;
}

.portal-card-body p {
    font-size: 9px !important;
}

/* manager */
.portal-card-manager {
    margin: 8px 0 0 !important;
    padding: 8px 0 !important;
    gap: 8px !important;
}

.portal-manager-avatar {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
}

.portal-manager-copy span {
    font-size: 7px !important;
}

.portal-manager-copy strong {
    font-size: 10px !important;
}

/* counters */
.portal-card-data {
    margin-top: 0 !important;
    padding: 9px 0 !important;
}

.portal-card-data strong {
    font-size: 16px !important;
    line-height: 1 !important;
}

.portal-card-data span {
    font-size: 6px !important;
}

/* actions */
.portal-card-open {
    padding-top: 9px !important;
    min-height: 25px;
}

.portal-participants-button {
    font-size: 8px !important;
}

.portal-open-link {
    font-size: 8px !important;
    gap: 7px !important;
}

.portal-open-link strong {
    font-size: 17px !important;
}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width: 760px) {

    .portal-card-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .portal-champ-card {
        padding: 12px 14px !important;
    }

    .portal-logo-area {
        height: 58px !important;
        margin: 5px 0 7px !important;
    }

    .portal-logo-area img {
        max-height: 52px !important;
        max-width: 66% !important;
    }

    .portal-card-body h3 {
        font-size: 19px !important;
    }

    .portal-card-manager {
        margin-top: 7px !important;
        padding: 7px 0 !important;
    }

    .portal-card-data {
        padding: 8px 0 !important;
    }

    .portal-card-open {
        padding-top: 8px !important;
    }

}



/* ==========================================================
   CHAMPIONSHIP CARDS SHOWCASE V3
   ========================================================== */


/* GRID */

.portal-card-grid {
    gap: 16px !important;
    align-items: start;
}


/* CARD */

.portal-champ-card {
    min-height: 0 !important;

    padding: 16px !important;

    background: #ffffff !important;

    border-top: 2px solid #15151e !important;
    border-right: 1px solid #dedee2 !important;
    border-bottom: 1px solid #dedee2 !important;
    border-left: 1px solid #dedee2 !important;

    border-radius: 0 14px 0 0 !important;

    box-shadow:
        0 8px 24px
        rgba(20, 20, 25, .035);

    cursor: default !important;

    transform: none !important;
}


/* La card NON è un link */

.portal-champ-card:hover {
    transform: none !important;

    border-top-color: #15151e !important;

    box-shadow:
        0 12px 30px
        rgba(20, 20, 25, .065) !important;
}


/* ----------------------------------------------------------
   HEADER: numero + stato
   ---------------------------------------------------------- */

.portal-card-head {
    min-height: 22px;
}

.portal-card-head > span {
    color: #5f636a !important;

    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .06em;
}

.portal-card-head > strong {
    padding: 4px 8px !important;

    border-radius: 20px !important;

    background: #49b96b !important;
    color: #ffffff !important;

    font-size: 7px !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: .08em !important;
}


/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

.portal-logo-area {
    height: 92px !important;

    margin:
        8px 0
        10px !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-logo-area img {
    max-width: 84% !important;
    max-height: 82px !important;

    object-fit: contain !important;
}

.portal-champ-card:hover
.portal-logo-area img {
    transform: none !important;
}

.portal-logo-placeholder {
    width: 62px !important;
    height: 62px !important;

    border-radius: 13px !important;

    font-size: 28px !important;
}


/* ----------------------------------------------------------
   CHAMPIONSHIP INFO
   ---------------------------------------------------------- */

.portal-card-type {
    display: block;

    margin-bottom: 3px;

    color: #e10600 !important;

    font-size: 7px !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

.portal-card-body h3 {
    margin:
        0 0 4px !important;

    color: #15151b;

    font-size: 20px !important;
    line-height: 1.02 !important;

    font-weight: 950;

    letter-spacing: -.035em !important;
}

.portal-card-body p {
    margin: 0 !important;

    color: #6f737a !important;

    font-size: 9px !important;
    line-height: 1.2;
}


/* ----------------------------------------------------------
   MANAGER
   ---------------------------------------------------------- */

.portal-card-manager {
    min-height: 43px;

    margin:
        9px 0 0 !important;

    padding:
        9px 0 !important;

    gap: 9px !important;

    border-top:
        1px solid #ececef !important;

    border-bottom:
        1px solid #ececef;
}

.portal-manager-avatar {
    width: 31px !important;
    height: 31px !important;

    flex:
        0 0 31px !important;

    border:
        1px solid #dedfe2 !important;
}

.portal-manager-copy {
    gap: 2px !important;
}

.portal-manager-copy span {
    color: #8b8f96 !important;

    font-size: 6px !important;

    font-weight: 900 !important;

    letter-spacing: .13em !important;
}

.portal-manager-copy strong {
    color: #17191d !important;

    font-size: 10px !important;

    line-height: 1.05 !important;

    font-weight: 850 !important;
}


/* ----------------------------------------------------------
   STATISTICHE
   ---------------------------------------------------------- */

.portal-card-data {
    margin-top: 0 !important;

    padding:
        10px 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    border-top: 0 !important;

    border-bottom:
        1px solid #ececef !important;
}


/*
 * Sovrascrive il vecchio
 * flex-direction:column applicato a tutti i div.
 */
.portal-card-data .portal-stat {
    min-width: 0;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;

    gap: 7px;

    padding:
        0 7px;

    border-right:
        1px solid #eeeeef;
}

.portal-card-data .portal-stat:first-child {
    padding-left: 0;
}

.portal-card-data .portal-stat:last-child {
    padding-right: 0;

    border-right: 0;
}


.portal-stat-icon {
    width: 20px;
    height: 20px;

    flex:
        0 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #e10600;
}

.portal-stat-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.portal-card-data .portal-stat-copy {
    min-width: 0;

    display: flex !important;
    flex-direction: column !important;

    gap: 1px;
}

.portal-card-data
.portal-stat-copy strong {
    color: #15151b;

    font-size: 16px !important;
    line-height: .95 !important;

    font-weight: 950 !important;
}

.portal-card-data
.portal-stat-copy span {
    margin: 0 !important;

    color: #7e8289 !important;

    font-size: 6px !important;

    line-height: 1 !important;

    font-weight: 900 !important;

    letter-spacing: .08em !important;
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.portal-card-open {
    min-height: 0 !important;

    padding-top:
        11px !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.15fr);

    align-items: stretch !important;

    gap: 9px !important;
}


/* Participants = secondary */

.portal-participants-button {
    min-height: 37px;

    padding:
        0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    border:
        1px solid #e10600 !important;

    border-radius:
        5px !important;

    background:
        #ffffff !important;

    color:
        #e10600 !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .055em !important;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.portal-participants-button:hover {
    background:
        #fff3f2 !important;

    color:
        #d00600 !important;
}


/* Open Championship = primary */

.portal-open-link {
    min-height: 37px;

    margin-left:
        0 !important;

    padding:
        0 11px;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    border-radius:
        5px;

    background:
        #e10600;

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .055em !important;

    transition:
        background .15s ease,
        transform .15s ease;
}

.portal-open-link span {
    color:
        #ffffff !important;
}

.portal-open-link strong {
    color:
        #ffffff !important;

    font-size:
        15px !important;
}

.portal-open-link:hover {
    background:
        #c90500;
}

.portal-open-link:hover span {
    color:
        #ffffff !important;
}

.portal-open-link:hover strong {
    transform:
        translateX(2px);
}


/* vecchi pallini Participants più puliti */

.portal-participants-icon {
    color:
        #e10600 !important;

    font-size:
        5px !important;

    letter-spacing:
        -1px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .portal-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .portal-card-grid {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    .portal-champ-card {
        padding:
            13px 14px !important;
    }


    .portal-logo-area {
        height:
            72px !important;

        margin:
            5px 0
            7px !important;
    }

    .portal-logo-area img {
        max-height:
            65px !important;

        max-width:
            78% !important;
    }


    .portal-card-body h3 {
        font-size:
            19px !important;
    }


    .portal-card-manager {
        min-height:
            39px;

        margin-top:
            7px !important;

        padding:
            7px 0 !important;
    }


    .portal-manager-avatar {
        width:
            28px !important;

        height:
            28px !important;

        flex-basis:
            28px !important;
    }


    .portal-card-data {
        padding:
            9px 0 !important;
    }


    .portal-card-data
    .portal-stat {
        gap:
            5px;

        padding:
            0 5px;
    }


    .portal-stat-icon {
        width:
            18px;

        height:
            18px;

        flex-basis:
            18px;
    }

    .portal-stat-icon svg {
        width:
            17px;

        height:
            17px;
    }


    .portal-card-data
    .portal-stat-copy strong {
        font-size:
            15px !important;
    }


    .portal-card-open {
        padding-top:
            9px !important;

        gap:
            7px !important;
    }


    .portal-participants-button,
    .portal-open-link {
        min-height:
            36px;

        font-size:
            7px !important;
    }

}


/* Telefoni molto stretti */

@media (max-width: 390px) {

    .portal-card-open {
        grid-template-columns:
            1fr !important;
    }

    .portal-participants-button,
    .portal-open-link {
        width:
            100%;
    }

}



/* ==========================================================
   CHAMPIONSHIP WELCOME MODAL V1
   ========================================================== */

body.cw-welcome-open {
    overflow: hidden;
}


.cw-welcome-modal {
    position: fixed;
    inset: 0;

    z-index: 9000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 28px;
}

.cw-welcome-modal.is-open {
    display: flex;
}


.cw-welcome-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(7, 9, 12, .76);

    backdrop-filter:
        blur(3px);
}


/* ----------------------------------------------------------
   DIALOG
   ---------------------------------------------------------- */

.cw-welcome-dialog {
    position: relative;
    z-index: 1;

    width:
        min(
            1160px,
            calc(100vw - 56px)
        );

    max-height:
        calc(100vh - 56px);

    display: grid;

    grid-template-columns:
        minmax(350px, .72fr)
        minmax(520px, 1fr);

    overflow: hidden;

    background: #ffffff;

    border-radius:
        0 18px 0 18px;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .36);
}


/* ----------------------------------------------------------
   LEFT VISUAL
   ---------------------------------------------------------- */

.cw-welcome-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #090a0d;
}

.cw-welcome-visual > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        contrast(1.08)
        saturate(.88)
        brightness(.68);
}

.cw-welcome-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.34),
            rgba(0,0,0,.06) 42%,
            rgba(0,0,0,.74)
        ),
        linear-gradient(
            115deg,
            rgba(225,6,0,.19),
            transparent 55%
        );
}


.cw-welcome-visual-top,
.cw-welcome-visual-bottom {
    position: absolute;
    z-index: 2;

    left: 48px;

    color: #ffffff;
}

.cw-welcome-visual-top {
    top: 50px;
}

.cw-welcome-visual-bottom {
    bottom: 48px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .28em;
}


.cw-welcome-racing-mark {
    width: 112px;

    margin-bottom: 22px;

    color: #e10600;

    font-size: 34px;
    line-height: .9;

    font-weight: 1000;
    font-style: italic;

    letter-spacing: -.08em;
}


.cw-welcome-slogan {
    display: flex;
    flex-direction: column;

    gap: 6px;

    font-size: 12px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .28em;
}

.cw-welcome-red-line {
    width: 48px;
    height: 3px;

    margin-top: 18px;

    background: #e10600;
}


/* ----------------------------------------------------------
   RIGHT CONTENT
   ---------------------------------------------------------- */

.cw-welcome-content {
    position: relative;

    overflow-y: auto;

    padding:
        45px 48px
        28px;
}


.cw-welcome-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #15151b;

    font-size: 32px;
    line-height: 1;

    font-weight: 300;

    cursor: pointer;
}

.cw-welcome-close:hover {
    color: #e10600;
}


/* language */

.cw-welcome-language {
    position: absolute;

    top: 25px;
    right: 67px;

    display: flex;
    align-items: center;

    gap: 5px;
}

.cw-welcome-language > span {
    color: #c1c2c5;

    font-size: 10px;
}

.cw-welcome-language-button {
    appearance: none;

    padding: 3px 2px;

    border: 0;

    background: transparent;

    color: #85888e;

    font-size: 9px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .09em;

    cursor: pointer;
}

.cw-welcome-language-button:hover {
    color: #15151b;
}

.cw-welcome-language-button.is-active {
    color: #e10600;
}


.cw-welcome-eyebrow {
    margin-bottom: 10px;

    color: #e10600;

    font-size: 12px;
    line-height: 1;

    font-weight: 950;

    letter-spacing: .25em;
}


.cw-welcome-content h2 {
    margin: 0;

    color: #15151b;

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height: .87;

    font-weight: 1000;

    letter-spacing: -.055em;
}


.cw-welcome-title-line {
    width: 56px;
    height: 4px;

    margin:
        21px 0
        22px;

    background: #e10600;
}


.cw-welcome-intro {
    max-width: 650px;

    margin:
        0 0 28px;

    color: #333841;

    font-size: 14px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   FEATURES
   ---------------------------------------------------------- */

.cw-welcome-features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px 28px;
}


.cw-welcome-feature {
    min-width: 0;

    display: grid;

    grid-template-columns:
        55px minmax(0, 1fr);

    gap: 14px;

    align-items: start;
}


.cw-welcome-feature-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #f3f3f4;

    color: #e10600;
}

.cw-welcome-feature-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.cw-welcome-feature strong {
    display: block;

    margin:
        5px 0
        4px;

    color: #17191d;

    font-size: 10px;
    line-height: 1.15;

    font-weight: 950;
}


.cw-welcome-feature p {
    margin: 0;

    color: #68707b;

    font-size: 10px;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   QUOTE
   ---------------------------------------------------------- */

.cw-welcome-quote {
    margin-top: 28px;

    padding:
        18px 0
        17px;

    border-top:
        1px solid #e1e2e5;

    border-bottom:
        1px solid #e1e2e5;
}

.cw-welcome-quote p {
    max-width: 650px;

    margin: 0;

    color: #717681;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
    line-height: 1.45;

    font-style: italic;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.cw-welcome-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 16px;
}


.cw-welcome-never {
    min-width: 0;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #555b65;

    font-size: 10px;

    cursor: pointer;
}


.cw-welcome-never input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.cw-welcome-checkbox {
    position: relative;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border:
        1px solid #999da4;

    border-radius: 3px;

    background: #fff;
}


.cw-welcome-never
input:checked
+ .cw-welcome-checkbox {
    border-color: #e10600;

    background: #e10600;
}


.cw-welcome-never
input:checked
+ .cw-welcome-checkbox::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 2px;

    width: 5px;
    height: 9px;

    border:
        solid white;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


.cw-welcome-start {
    min-width: 166px;
    height: 42px;

    padding:
        0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: 0;

    border-radius: 5px;

    background: #e10600;

    color: #ffffff;

    font-size: 10px;
    line-height: 1;

    font-weight: 950;

    letter-spacing: .06em;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}

.cw-welcome-start strong {
    font-size: 17px;
}

.cw-welcome-start:hover {
    background: #c90500;

    transform:
        translateY(-1px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .cw-welcome-dialog {
        grid-template-columns:
            290px minmax(0, 1fr);
    }

    .cw-welcome-visual {
        min-height: 620px;
    }

    .cw-welcome-visual-top,
    .cw-welcome-visual-bottom {
        left: 30px;
    }

    .cw-welcome-content {
        padding:
            44px 34px
            26px;
    }

    .cw-welcome-features {
        grid-template-columns: 1fr;

        gap: 17px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .cw-welcome-modal {
        padding: 12px;
    }

    .cw-welcome-dialog {
        width:
            calc(100vw - 24px);

        max-height:
            calc(100vh - 24px);

        display: block;

        border-radius:
            0 13px 0 13px;
    }


    .cw-welcome-visual {
        min-height: 155px;
        height: 155px;
    }


    .cw-welcome-visual > img {
        object-position:
            center 50%;
    }


    .cw-welcome-visual-top {
        top: 20px;
        left: 20px;
    }

    .cw-welcome-racing-mark {
        margin-bottom: 9px;

        font-size: 23px;
    }

    .cw-welcome-slogan {
        gap: 3px;

        font-size: 8px;
    }

    .cw-welcome-visual-bottom {
        display: none;
    }


    .cw-welcome-content {
        max-height:
            calc(100vh - 179px);

        padding:
            42px 20px
            18px;
    }


    .cw-welcome-close {
        top: 8px;
        right: 10px;
    }


    .cw-welcome-language {
        top: 16px;
        left: 20px;
        right: auto;
    }


    .cw-welcome-eyebrow {
        font-size: 9px;
    }


    .cw-welcome-content h2 {
        font-size: 34px;
    }


    .cw-welcome-title-line {
        margin:
            14px 0
            15px;
    }


    .cw-welcome-intro {
        margin-bottom: 20px;

        font-size: 12px;
    }


    .cw-welcome-features {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .cw-welcome-feature {
        grid-template-columns:
            44px minmax(0, 1fr);

        gap: 11px;
    }


    .cw-welcome-feature-icon {
        width: 44px;
        height: 44px;
    }


    .cw-welcome-feature-icon svg {
        width: 23px;
        height: 23px;
    }


    .cw-welcome-feature strong {
        margin-top: 2px;

        font-size: 9px;
    }


    .cw-welcome-feature p {
        font-size: 9px;
    }


    .cw-welcome-quote {
        margin-top: 20px;

        padding:
            14px 0;
    }


    .cw-welcome-footer {
        align-items: stretch;

        flex-direction: column;

        gap: 13px;
    }


    .cw-welcome-start {
        width: 100%;
    }

}



/* ==========================================================
   HOME QUICK CHAMPIONSHIP POPUPS V1
   ========================================================== */


/* ----------------------------------------------------------
   CARD QUICK ACTIONS
   ---------------------------------------------------------- */

.portal-card-quick-actions {
    padding-top: 11px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


.portal-quick-button {
    appearance: none;

    min-width: 0;
    min-height: 36px;

    padding:
        0 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid #d6d8dc;

    border-radius: 5px;

    background: #ffffff;

    color: #15151b;

    font: inherit;

    font-size: 7px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .045em;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.portal-quick-button:hover {
    border-color: #e10600;

    color: #e10600;

    background: #fff8f7;

    transform:
        translateY(-1px);
}


.portal-quick-icon {
    color: #e10600;

    font-size: 12px;
    line-height: 1;
}


/*
 * Participants previously had its own
 * outline/button styling.
 * It now follows the common quick-action style.
 */
.portal-card-quick-actions
.portal-participants-button {
    min-height: 36px !important;

    padding:
        0 8px !important;

    border:
        1px solid #d6d8dc !important;

    background:
        #ffffff !important;

    color:
        #15151b !important;

    font-size:
        7px !important;
}


.portal-card-quick-actions
.portal-participants-button:hover {
    border-color:
        #e10600 !important;

    background:
        #fff8f7 !important;

    color:
        #e10600 !important;
}


/* OPEN CHAMPIONSHIP stays the primary action */

.portal-card-open {
    display: block !important;

    padding-top:
        8px !important;
}


.portal-card-open
.portal-open-link {
    width: 100%;

    min-height: 39px;

    margin: 0 !important;

    display: flex !important;

    align-items: center;
    justify-content: center !important;

    gap: 10px;

    background: #e10600;

    color: #ffffff !important;

    border-radius: 5px;

    text-decoration: none;
}


.portal-card-open
.portal-open-link span,
.portal-card-open
.portal-open-link strong {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   MODAL
   ---------------------------------------------------------- */

body.champ-quick-open {
    overflow: hidden;
}


.champ-quick-modal {
    position: fixed;
    inset: 0;

    z-index: 7000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 24px;
}


.champ-quick-modal.is-open {
    display: flex;
}


.champ-quick-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(9, 11, 15, .76);

    backdrop-filter:
        blur(3px);
}


.champ-quick-dialog {
    position: relative;
    z-index: 1;

    width:
        min(
            900px,
            calc(100vw - 48px)
        );

    max-height:
        calc(100vh - 48px);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #f7f7f8;

    border:
        1px solid rgba(255,255,255,.55);

    border-radius:
        0 16px 0 16px;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.34);
}


/* header */

.champ-quick-header {
    position: relative;

    min-height: 122px;

    padding:
        27px 70px
        24px 30px;

    display: flex;
    align-items: flex-end;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(225,6,0,.20),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            #10151a,
            #151b22 60%,
            #250f13
        );

    color: white;
}


.champ-quick-header::after {
    content: "";

    position: absolute;

    left: 30px;
    bottom: 0;

    width: 84px;
    height: 4px;

    background: #e10600;
}


.champ-quick-kicker {
    display: block;

    margin-bottom: 8px;

    color: #e10600;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .18em;
}


.champ-quick-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
    line-height: .96;

    font-weight: 950;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.champ-quick-header p {
    margin:
        7px 0 0;

    color: #bfc3c9;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.champ-quick-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 38px;
    height: 38px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #ffffff;

    color: #15151b;

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}


.champ-quick-close:hover {
    color: #e10600;
}


/* body */

.champ-quick-body {
    min-height: 260px;

    overflow-y: auto;

    padding: 22px;
}


/* ----------------------------------------------------------
   CALENDAR
   ---------------------------------------------------------- */

.champ-quick-calendar {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.champ-quick-calendar-row {
    min-height: 76px;

    display: grid;

    grid-template-columns:
        56px
        78px
        minmax(0, 1fr)
        115px;

    align-items: center;

    background: #ffffff;

    border:
        1px solid #dedfe2;

    border-left:
        3px solid #15151b;

    border-radius:
        0 8px 0 0;

    overflow: hidden;
}


.champ-quick-round-number {
    align-self: stretch;

    display: flex;
    align-items: center;
    justify-content: center;

    border-right:
        1px solid #ececef;

    color: #15151b;

    font-size: 24px;
    line-height: 1;

    font-weight: 950;
}


.champ-quick-round-date {
    padding-left: 14px;

    color: #e10600;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .05em;
}


.champ-quick-round-main {
    min-width: 0;

    padding:
        11px 14px;
}


.champ-quick-round-name {
    display: flex;
    align-items: center;

    gap: 8px;
}


.champ-quick-round-main strong {
    overflow: hidden;

    color: #17191d;

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;

    text-transform: uppercase;
}


.champ-quick-round-main > span {
    display: block;

    margin-top: 4px;

    color: #858990;

    font-size: 9px;
}


.champ-quick-flag,
.champ-quick-driver-flag {
    width: 19px;
    height: 13px;

    object-fit: cover;

    flex:
        0 0 auto;
}


.champ-quick-track {
    width: 100px;
    height: 58px;

    padding: 7px;

    object-fit: contain;

    opacity: .82;
}


/* ----------------------------------------------------------
   STANDINGS
   ---------------------------------------------------------- */

.champ-quick-standing-list {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.champ-quick-standing-row {
    min-height: 66px;

    display: grid;

    grid-template-columns:
        45px
        42px
        minmax(0, 1fr)
        85px;

    align-items: center;

    padding:
        0 15px;

    background: #ffffff;

    border:
        1px solid #e0e1e4;

    border-left:
        3px solid transparent;
}


.champ-quick-standing-row.is-leader {
    border-left-color:
        #e10600;

    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.045),
            #ffffff 24%
        );
}


.champ-quick-position {
    color: #15151b;

    font-size: 20px;

    font-weight: 950;
}


.champ-quick-avatar {
    width: 35px;
    height: 35px;

    border-radius: 7px;

    object-fit: cover;

    background: #eceef0;
}


.champ-quick-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #8a8e94;

    font-size: 15px;

    font-weight: 900;
}


.champ-quick-driver-copy {
    min-width: 0;

    padding:
        0 10px;
}


.champ-quick-driver-copy strong {
    display: flex;
    align-items: center;

    gap: 6px;

    overflow: hidden;

    color: #17191d;

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.champ-quick-driver-copy > span {
    display: block;

    margin-top: 4px;

    color: #858990;

    font-size: 8px;

    font-weight: 700;
}


.champ-quick-number {
    color: #e10600;

    font-size: 9px;

    font-weight: 950;
}


.champ-quick-points {
    justify-self: end;

    color: #15151b;

    font-size: 19px;

    font-weight: 950;
}


.champ-quick-points span {
    display: block;

    margin-top: 1px;

    color: #92959b;

    font-size: 6px;

    text-align: right;

    letter-spacing: .08em;
}


/* teams */

.champ-quick-team-row {
    grid-template-columns:
        45px
        4px
        70px
        minmax(0, 1fr)
        85px;
}


.champ-quick-team-color {
    width: 3px;
    height: 31px;
}


.champ-quick-team-logo {
    max-width: 58px;
    max-height: 38px;

    object-fit: contain;
}


.champ-quick-team-logo-fallback {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: #eceef0;

    color: #777b82;

    font-weight: 900;
}


/* states */

.champ-quick-loading,
.champ-quick-empty {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #8c9096;

    text-align: center;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .1em;
}


.champ-quick-empty strong {
    color: #15151b;

    font-size: 15px;
}


.champ-quick-empty span {
    color: #93969c;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0;
}


/* footer */

.champ-quick-footer {
    min-height: 45px;

    padding:
        0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: #ffffff;

    border-top:
        1px solid #e0e1e4;

    color: #a1a4aa;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .11em;
}


.champ-quick-footer strong {
    color: #777b82;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .portal-card-quick-actions {
        gap: 6px;
    }

    .portal-quick-button,
    .portal-card-quick-actions
    .portal-participants-button {
        min-height: 34px !important;

        padding:
            0 5px !important;

        font-size:
            6.5px !important;
    }


    .champ-quick-modal {
        padding: 10px;
    }


    .champ-quick-dialog {
        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        border-radius:
            0 12px 0 12px;
    }


    .champ-quick-header {
        min-height: 100px;

        padding:
            22px 58px
            19px 18px;
    }


    .champ-quick-header::after {
        left: 18px;
    }


    .champ-quick-header h2 {
        font-size: 22px;
    }


    .champ-quick-body {
        padding: 12px;
    }


    .champ-quick-calendar-row {
        grid-template-columns:
            42px
            58px
            minmax(0, 1fr);
    }


    .champ-quick-track {
        display: none;
    }


    .champ-quick-round-number {
        font-size: 19px;
    }


    .champ-quick-round-date {
        padding-left: 8px;

        font-size: 7px;
    }


    .champ-quick-round-main {
        padding:
            9px 8px;
    }


    .champ-quick-round-main strong {
        font-size: 9px;
    }


    .champ-quick-round-main > span {
        font-size: 7px;
    }


    .champ-quick-standing-row {
        grid-template-columns:
            30px
            36px
            minmax(0, 1fr)
            54px;

        min-height: 61px;

        padding:
            0 8px;
    }


    .champ-quick-team-row {
        grid-template-columns:
            30px
            3px
            45px
            minmax(0, 1fr)
            54px;
    }


    .champ-quick-position {
        font-size: 16px;
    }


    .champ-quick-driver-copy {
        padding:
            0 6px;
    }


    .champ-quick-driver-copy strong {
        font-size: 8px;
    }


    .champ-quick-driver-copy > span {
        font-size: 7px;
    }


    .champ-quick-points {
        font-size: 15px;
    }


    .champ-quick-team-logo {
        max-width: 40px;
        max-height: 30px;
    }


    .champ-quick-footer {
        padding:
            0 14px;
    }

    .champ-quick-footer strong {
        display: none;
    }

}



/* ==========================================================
   MOTORSPORT TYPOGRAPHY V1
   Titillium Web - local
   ========================================================== */

@font-face {
    font-family: "CW Motorsport";
    src: url("/static/assets/fonts/titillium/TitilliumWeb-Regular.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "CW Motorsport";
    src: url("/static/assets/fonts/titillium/TitilliumWeb-SemiBold.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "CW Motorsport";
    src: url("/static/assets/fonts/titillium/TitilliumWeb-Bold.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 700 1000;
    font-display: swap;
}


/* ----------------------------------------------------------
   CHAMPIONSHIP CARDS
   ---------------------------------------------------------- */

.portal-champ-card,
.portal-champ-card button,
.portal-champ-card a {
    font-family:
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif !important;
}


/* Championship */

.portal-card-type {
    font-size: 8px !important;
    font-weight: 700 !important;
}

.portal-card-body h3 {
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}

.portal-card-body p {
    font-size: 10px !important;
    font-weight: 600 !important;
}


/* Manager */

.portal-manager-copy span {
    font-size: 7px !important;
    font-weight: 700 !important;
}

.portal-manager-copy strong {
    font-size: 11px !important;
    font-weight: 700 !important;
}


/* Statistics */

.portal-card-data
.portal-stat-copy strong {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.portal-card-data
.portal-stat-copy span {
    font-size: 7px !important;
    font-weight: 700 !important;
}


/* Quick buttons */

.portal-quick-button,
.portal-card-quick-actions
.portal-participants-button {
    min-height: 39px !important;

    font-family:
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: .035em !important;
}


/* Main action */

.portal-card-open
.portal-open-link {
    min-height: 42px !important;

    font-family:
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .045em !important;
}


/* ----------------------------------------------------------
   PARTICIPANTS POPUP
   ---------------------------------------------------------- */

.participants-modal,
.participants-modal button {
    font-family:
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif !important;
}

.participants-modal h2 {
    font-weight: 700 !important;
}

.participants-team-name,
.participants-driver-name {
    font-weight: 700 !important;
}


/* ----------------------------------------------------------
   CALENDAR / DRIVER / TEAM QUICK POPUPS
   ---------------------------------------------------------- */

.champ-quick-dialog,
.champ-quick-dialog button {
    font-family:
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif !important;
}


/* Header */

.champ-quick-kicker {
    font-size: 10px !important;
    font-weight: 700 !important;
}

.champ-quick-header h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
}

.champ-quick-header p {
    font-size: 10px !important;
    font-weight: 600 !important;
}


/* Calendar */

.champ-quick-round-number {
    font-size: 27px !important;
    font-weight: 700 !important;
}

.champ-quick-round-date {
    font-size: 10px !important;
    font-weight: 700 !important;
}

.champ-quick-round-main strong {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.champ-quick-round-main > span {
    font-size: 10px !important;
}


/* Standings */

.champ-quick-position {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.champ-quick-driver-copy strong {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.champ-quick-driver-copy > span {
    font-size: 9px !important;
}

.champ-quick-number {
    font-size: 10px !important;
    font-weight: 700 !important;
}

.champ-quick-points {
    font-size: 21px !important;
    font-weight: 700 !important;
}

.champ-quick-points span {
    font-size: 7px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .portal-card-body h3 {
        font-size: 21px !important;
    }

    .portal-quick-button,
    .portal-card-quick-actions
    .portal-participants-button {
        min-height: 38px !important;
        font-size: 8px !important;
    }

    .portal-card-open
    .portal-open-link {
        min-height: 41px !important;
        font-size: 9px !important;
    }

    .champ-quick-header h2 {
        font-size: 26px !important;
    }

    .champ-quick-round-main strong {
        font-size: 11px !important;
    }

    .champ-quick-driver-copy strong {
        font-size: 10px !important;
    }

}



/* ==========================================================
   PUBLIC WOW MOTORSPORT UI V1
   Light Home + Dark Quick Popups
   ========================================================== */


/* ==========================================================
   FORMULA 1 FONT
   ----------------------------------------------------------
   Copiare i file LEGITTIMAMENTE LICENZIATI in:

   /static/assets/fonts/f1/Formula1-Regular.woff2
   /static/assets/fonts/f1/Formula1-Bold.woff2
   /static/assets/fonts/f1/Formula1-Wide.woff2

   Se assenti viene usato il fallback.
   ========================================================== */

@font-face {
    font-family: "Formula1";
    src:
        url("/static/assets/fonts/f1/Formula1-Regular.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Formula1";
    src:
        url("/static/assets/fonts/f1/Formula1-Bold.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 700 1000;
    font-display: swap;
}

@font-face {
    font-family: "Formula1 Wide";
    src:
        url("/static/assets/fonts/f1/Formula1-Wide.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 400 1000;
    font-display: swap;
}


:root {
    --f1-font:
        "Formula1",
        "CW Motorsport",
        "Titillium Web",
        Arial,
        Helvetica,
        sans-serif;

    --f1-wide:
        "Formula1 Wide",
        "Formula1",
        "CW Motorsport",
        Arial,
        Helvetica,
        sans-serif;

    --wow-black: #0b1016;
    --wow-black-2: #111820;
    --wow-panel: #141c24;
    --wow-line: #28313b;
    --wow-red: #e10600;
    --wow-muted: #8f99a5;
}


/* ==========================================================
   HOME CHAMPIONSHIP CARD
   ========================================================== */

.portal-champ-card,
.portal-champ-card button,
.portal-champ-card a {
    font-family: var(--f1-font) !important;
}


.portal-champ-card {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 82%,
            #fafafa 100%
        ) !important;

    border-top:
        3px solid #15151b !important;

    box-shadow:
        0 9px 28px
        rgba(12, 16, 22, .055) !important;
}


.portal-card-head > span {
    font-family:
        var(--f1-wide) !important;

    font-size:
        10px !important;
}


.portal-card-head > strong {
    min-height: 21px;

    display: inline-flex;
    align-items: center;

    padding:
        0 9px !important;

    background:
        #2fa65a !important;

    box-shadow:
        0 3px 10px
        rgba(47, 166, 90, .18);

    font-size:
        8px !important;
}


.portal-card-type {
    font-family:
        var(--f1-font) !important;

    font-size:
        9px !important;
}


.portal-card-body h3 {
    font-family:
        var(--f1-wide) !important;

    font-size:
        24px !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.02em !important;
}


.portal-card-body p {
    font-size:
        11px !important;
}


/* MANAGER */

.portal-card-manager {
    min-height:
        49px !important;

    padding:
        9px 0 !important;
}


.portal-manager-avatar {
    width:
        34px !important;

    height:
        34px !important;

    flex-basis:
        34px !important;
}


.portal-manager-copy span {
    font-size:
        7.5px !important;
}


.portal-manager-copy strong {
    font-size:
        12px !important;
}


/* STATS */

.portal-stat-icon {
    width:
        22px !important;

    height:
        22px !important;

    flex-basis:
        22px !important;
}


.portal-stat-icon svg {
    width:
        21px !important;

    height:
        21px !important;
}


.portal-card-data
.portal-stat-copy strong {
    font-family:
        var(--f1-wide) !important;

    font-size:
        19px !important;
}


.portal-card-data
.portal-stat-copy span {
    font-size:
        7.5px !important;
}


/* ==========================================================
   QUICK BUTTONS
   ========================================================== */

.portal-card-quick-actions {
    gap:
        7px !important;

    padding-top:
        10px !important;
}


.portal-quick-button,
.portal-card-quick-actions
.portal-participants-button {
    min-height:
        40px !important;

    border:
        1px solid #d7dbe0 !important;

    border-radius:
        6px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8f8f9
        ) !important;

    color:
        #11151a !important;

    font-family:
        var(--f1-font) !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .025em !important;

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.025);
}


.portal-quick-button:hover,
.portal-card-quick-actions
.portal-participants-button:hover {
    border-color:
        var(--wow-red) !important;

    background:
        #fff !important;

    color:
        var(--wow-red) !important;

    transform:
        translateY(-1px);
}


.portal-quick-icon {
    font-size:
        14px !important;
}


/* OPEN CHAMPIONSHIP */

.portal-card-open
.portal-open-link {
    min-height:
        44px !important;

    background:
        linear-gradient(
            100deg,
            #d50000,
            #ef0800
        ) !important;

    border-radius:
        6px !important;

    font-family:
        var(--f1-wide) !important;

    font-size:
        10px !important;

    box-shadow:
        0 7px 18px
        rgba(225, 6, 0, .17);
}


.portal-card-open
.portal-open-link:hover {
    background:
        #c80000 !important;
}


/* ==========================================================
   DARK QUICK POPUPS
   ========================================================== */

.champ-quick-dialog,
.champ-quick-dialog * {
    box-sizing: border-box;
}


.champ-quick-dialog {
    width:
        min(
            1050px,
            calc(100vw - 48px)
        ) !important;

    background:
        var(--wow-black) !important;

    border:
        1px solid #424d58 !important;

    border-radius:
        0 15px 0 15px !important;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .52) !important;

    font-family:
        var(--f1-font) !important;
}


/* HEADER */

.champ-quick-header {
    min-height:
        145px !important;

    padding:
        28px 78px
        25px 34px !important;

    background:
        radial-gradient(
            circle at 74% -25%,
            rgba(225,6,0,.22),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #0a1016,
            #101820 58%,
            #12161c
        ) !important;

    border-bottom:
        1px solid #303943;
}


.champ-quick-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 155px;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--wow-red) 0 70%,
            transparent 70%
        );
}


.champ-quick-header::after {
    left:
        34px !important;

    width:
        58px !important;

    height:
        4px !important;
}


.champ-quick-kicker {
    color:
        #ffffff !important;

    font-size:
        10px !important;

    letter-spacing:
        .08em !important;
}


.champ-quick-header h2 {
    font-family:
        var(--f1-wide) !important;

    color:
        #ffffff !important;

    font-size:
        40px !important;

    line-height:
        .95 !important;

    letter-spacing:
        -.025em !important;
}


.champ-quick-header p {
    color:
        #c1c7ce !important;

    font-size:
        11px !important;
}


.champ-quick-close {
    background:
        transparent !important;

    border:
        1px solid #5c6570 !important;

    color:
        white !important;
}


.champ-quick-close:hover {
    border-color:
        var(--wow-red) !important;

    background:
        var(--wow-red) !important;
}


/* BODY */

.champ-quick-body {
    background:
        linear-gradient(
            180deg,
            #0b1117,
            #0d141b
        ) !important;

    padding:
        18px !important;
}


/* ==========================================================
   CALENDAR DARK
   ========================================================== */

.champ-quick-calendar {
    gap:
        5px !important;
}


.champ-quick-calendar-row {
    min-height:
        82px !important;

    grid-template-columns:
        64px
        92px
        minmax(0, 1fr)
        125px !important;

    background:
        linear-gradient(
            90deg,
            #111820,
            #151e27
        ) !important;

    border:
        1px solid #29343f !important;

    border-left:
        4px solid var(--wow-red) !important;

    border-radius:
        0 5px 5px 0 !important;
}


.champ-quick-calendar-row:hover {
    background:
        linear-gradient(
            90deg,
            #141d25,
            #19232d
        ) !important;
}


.champ-quick-round-number {
    border-right:
        1px solid #2d3842 !important;

    color:
        #ffffff !important;

    font-family:
        var(--f1-wide) !important;

    font-size:
        26px !important;
}


.champ-quick-round-date {
    color:
        #ffffff !important;

    font-size:
        10px !important;
}


.champ-quick-round-main strong {
    color:
        #ffffff !important;

    font-family:
        var(--f1-wide) !important;

    font-size:
        14px !important;
}


.champ-quick-round-main > span {
    color:
        #b1bac4 !important;

    font-size:
        10px !important;
}


.champ-quick-track {
    filter:
        brightness(0)
        invert(1);

    opacity:
        .92 !important;
}


/* ==========================================================
   DRIVER / TEAM STANDINGS DARK
   ========================================================== */

.champ-quick-standing-list {
    gap:
        5px !important;
}


.champ-quick-standing-row {
    min-height:
        74px !important;

    background:
        linear-gradient(
            90deg,
            #111820,
            #151e26
        ) !important;

    border:
        1px solid #29343e !important;

    border-left:
        4px solid transparent !important;
}


.champ-quick-standing-row.is-leader {
    border-left-color:
        var(--wow-red) !important;

    background:
        linear-gradient(
            90deg,
            rgba(225,6,0,.16),
            #131b23 17%,
            #151e26
        ) !important;
}


.champ-quick-position {
    color:
        white !important;

    font-family:
        var(--f1-wide) !important;

    font-size:
        23px !important;
}


.champ-quick-driver-copy strong {
    color:
        #ffffff !important;

    font-size:
        13px !important;
}


.champ-quick-driver-copy > span {
    color:
        #9ca6b0 !important;

    font-size:
        9px !important;
}


.champ-quick-number {
    color:
        var(--wow-red) !important;

    font-size:
        10px !important;
}


.champ-quick-points {
    color:
        #ffffff !important;

    font-family:
        var(--f1-wide) !important;

    font-size:
        22px !important;
}


.champ-quick-points span {
    color:
        #949da7 !important;
}


/* ==========================================================
   TEAM STANDINGS + CAR
   ========================================================== */

.champ-quick-team-row {
    grid-template-columns:
        46px
        4px
        80px
        minmax(130px, .8fr)
        minmax(210px, 1.25fr)
        82px !important;
}


.champ-quick-team-color {
    width:
        3px !important;

    height:
        38px !important;
}


.champ-quick-team-logo {
    max-width:
        68px !important;

    max-height:
        46px !important;

    filter:
        drop-shadow(
            0 3px 4px
            rgba(0,0,0,.22)
        );
}


.champ-quick-team-logo-fallback {
    color:
        white !important;

    background:
        #252f39 !important;
}


.champ-quick-team-copy {
    padding-left:
        8px !important;
}


.champ-quick-team-car {
    min-width: 0;

    height:
        64px;

    padding:
        3px 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.champ-quick-team-car img {
    width:
        100%;

    max-width:
        245px;

    max-height:
        61px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 6px 6px
            rgba(0,0,0,.34)
        );
}


.champ-quick-team-car span {
    color:
        #6f7984;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


/* ==========================================================
   DARK EMPTY / LOADING
   ========================================================== */

.champ-quick-loading,
.champ-quick-empty {
    color:
        #8e99a4 !important;
}


.champ-quick-empty strong {
    color:
        white !important;

    font-family:
        var(--f1-wide) !important;
}


/* FOOTER */

.champ-quick-footer {
    min-height:
        48px !important;

    background:
        #090f14 !important;

    border-top:
        1px solid #27313a !important;

    color:
        #737e89 !important;
}


.champ-quick-footer strong {
    color:
        #949da6 !important;
}


/* ==========================================================
   PARTICIPANTS MODAL - DARK MOTORSPORT
   ========================================================== */

.participants-modal-dialog {
    background:
        #0b1117 !important;

    border:
        1px solid #3d4853 !important;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.5) !important;

    font-family:
        var(--f1-font) !important;
}


.participants-modal-header {
    background:
        radial-gradient(
            circle at 75% 0,
            rgba(225,6,0,.20),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #0a1016,
            #111923
        ) !important;
}


.participants-modal-content,
.participants-modal-body {
    background:
        #0c131a !important;
}


.participants-team-row {
    background:
        linear-gradient(
            90deg,
            #111820,
            #151e27
        ) !important;

    border-color:
        #2b3540 !important;
}


.participants-team-name,
.participants-driver-name {
    color:
        #ffffff !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .portal-card-body h3 {
        font-size:
            22px !important;
    }


    .portal-quick-button,
    .portal-card-quick-actions
    .portal-participants-button {
        min-height:
            40px !important;

        font-size:
            8px !important;
    }


    .champ-quick-header {
        min-height:
            115px !important;

        padding:
            24px 58px
            20px 18px !important;
    }


    .champ-quick-header h2 {
        font-size:
            28px !important;
    }


    .champ-quick-calendar-row {
        grid-template-columns:
            43px
            59px
            minmax(0, 1fr) !important;
    }


    .champ-quick-team-row {
        grid-template-columns:
            30px
            3px
            45px
            minmax(0, 1fr)
            54px !important;
    }


    .champ-quick-team-car {
        grid-column:
            3 / 5;

        height:
            48px;

        padding:
            0 4px 5px;
    }


    .champ-quick-team-car img {
        max-height:
            45px;
    }

}