@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

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

.f1-live-brief {
    margin-top: 4px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, #ef3338 32%, var(--line));
    border-radius: 18px;
    background: linear-gradient(125deg, color-mix(in srgb, #ef3338 9%, var(--panel)), var(--panel) 55%);
    font-family: 'Titillium Web', Arial, sans-serif;
}

.f1-quali-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.f1-quali-driver {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 3px solid var(--driver-colour);
    border-radius: 5px 14px 5px 5px;
    background: var(--panel-2);
}

.f1-quali-driver-head { display: flex; align-items: end; min-height: 120px; gap: 5px; padding: 8px; }
.f1-quali-photo { width: 45%; max-height: 112px; object-fit: contain; object-position: bottom; align-self: end; }
.f1-quali-identity { min-width: 0; padding-bottom: 5px; }
.f1-quali-rank { color: var(--driver-colour); font-size: .72rem; font-weight: 700; }
.f1-quali-identity h4 { margin: 4px 0; color: var(--text); font-size: clamp(.9rem, 1.8vw, 1.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.f1-quali-identity strong { color: var(--text); font-size: 1.1rem; }
.f1-quali-phases { display: flex; flex-wrap: wrap; gap: 3px; padding: 7px; border-top: 1px solid var(--line); }
.f1-quali-phases span { padding: 3px 5px; border-radius: 4px; background: var(--panel); color: var(--muted); font-size: .66rem; white-space: nowrap; }
.f1-quali-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 7px; }
.f1-quali-sector { display: flex; flex-direction: column; min-width: 0; gap: 3px; padding: 6px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.f1-quali-sector-label { color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .1em; }
.f1-quali-sector-track { display: block; height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.f1-quali-sector-fill { display: block; height: 100%; border-radius: inherit; background: var(--driver-colour); }
.f1-quali-sector strong { color: var(--text); font-size: .69rem; white-space: nowrap; }
.f1-quali-sector.is-fastest { border-color: color-mix(in srgb, var(--driver-colour) 60%, var(--line)); background: color-mix(in srgb, var(--driver-colour) 12%, var(--panel)); }
.f1-quali-sector.is-fastest .f1-quali-sector-label { color: var(--driver-colour); }
.f1-quali-speed { display: block; margin: 2px 8px 0; color: var(--muted); font-size: .68rem; }
.f1-quali-unavailable { grid-column: 1 / -1; margin: 4px 0; color: var(--muted); font-size: .72rem; }

@media (max-width: 620px) {
    .f1-quali-podium { grid-template-columns: 1fr; }
    .f1-quali-driver-head { min-height: 100px; }
    .f1-quali-photo { width: 25%; max-height: 94px; }
}

.f1-live-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.f1-live-kicker,
.f1-live-label {
    margin: 0;
    color: #ef3338;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f1-live-heading h3 {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1.15;
}

.f1-live-source {
    color: var(--muted);
    font-size: .69rem;
    text-align: right;
}

.f1-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.f1-live-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 112px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 5px 14px 5px 5px;
    background: var(--panel-2);
}

.f1-live-value {
    display: block;
    margin: 10px 0 2px;
    color: var(--text);
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.f1-live-detail,
.f1-live-loading {
    margin: auto 0 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.25;
}

.f1-live-podium {
    display: flex;
    align-items: end;
    gap: 4px;
    margin-top: 9px;
}

.f1-live-podium-place {
    display: grid;
    place-items: center;
    width: 28px;
    height: 17px;
    border-radius: 3px 3px 0 0;
    background: #ef3338;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
}

.f1-live-podium-2 { height: 14px; opacity: .72; }
.f1-live-podium-3 { height: 11px; opacity: .48; }

.f1-live-next { padding-left: 60px; }

.f1-live-countdown {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #ef3338;
    border-radius: 50%;
    color: #ef3338;
    font-size: 1rem;
    font-weight: 700;
}

.backend-notes p {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.42;
}

.backend-notes strong {
    color: var(--text);
    font-size: .79rem;
    letter-spacing: .03em;
}

.f1-dialog {
    --f1-red: #ef3338;
    width: min(860px, calc(100% - 24px));
    max-height: min(850px, calc(100dvh - 24px));
    border-color: color-mix(in srgb, var(--f1-red) 45%, var(--line));
    border-radius: 18px;
    background: var(--panel);
    font-family: 'Titillium Web', Arial, sans-serif;
}

.f1-dialog-shell {
    overflow: hidden;
    padding: clamp(20px, 4vw, 36px);
    background: linear-gradient(145deg, color-mix(in srgb, var(--f1-red) 10%, var(--panel)) 0%, var(--panel) 35%);
}

.f1-dialog-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--f1-red);
}

.f1-dialog-kicker {
    color: var(--f1-red);
    font-size: .8rem;
    letter-spacing: .14em;
}

.f1-dialog h2 {
    font-family: 'Titillium Web', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

.f1-dialog-nav button {
    border-radius: 5px;
    font-family: inherit;
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.f1-dialog-nav button[aria-pressed="true"] {
    border-color: var(--f1-red);
    background: color-mix(in srgb, var(--f1-red) 18%, var(--panel-2));
}

.f1-data-list {
    gap: 12px;
}

.f1-data-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border-radius: 5px 18px 5px 5px;
    border-top: 2px solid color-mix(in srgb, var(--f1-red) 60%, var(--line));
    background: color-mix(in srgb, var(--panel-2) 92%, var(--f1-red));
}

.f1-data-eyebrow,
.f1-data-intro {
    font-size: .75rem;
    letter-spacing: .1em;
}

.f1-data-title {
    font-family: 'Titillium Web', Arial, sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 700;
}

.f1-data-value,
.f1-result-position,
.f1-stop-result strong {
    color: var(--f1-red);
    font-weight: 700;
}

.console-grid .f1-card {
    border-color: color-mix(in srgb, #ef3338 42%, var(--line));
}

.console-grid .f1-card .f1-card-title {
    color: var(--text);
    font-family: 'Titillium Web', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .015em;
}

.f1-race-card {
    padding-right: 160px;
}

.f1-race-place {
    position: absolute;
    top: 18px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 130px;
    color: var(--muted);
    font-size: .8rem;
    text-align: right;
}

.f1-country-flag {
    width: 23px;
    height: 17px;
    flex: none;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 2px;
}

.f1-pitstop-place {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .84rem;
}

.f1-driver-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.f1-driver-photo,
.f1-driver-monogram {
    width: 84px;
    height: 94px;
    flex: none;
    border-radius: 6px 16px 6px 6px;
    background: color-mix(in srgb, var(--f1-red) 18%, var(--panel));
    object-fit: contain;
    object-position: center bottom;
}

.f1-driver-monogram {
    display: grid;
    place-items: center;
    color: var(--f1-red);
    font-size: 1.6rem;
    font-weight: 700;
}

.f1-driver-bio {
    min-width: 0;
    flex: 1 1 auto;
}

.f1-driver-number {
    display: grid;
    place-items: center;
    width: 72px;
    height: 82px;
    flex: none;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px 13px 5px 5px;
    background: #18181d;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.f1-driver-number img {
    display: block;
    width: 68px;
    height: 76px;
    object-fit: contain;
}

.f1-driver-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: .85rem;
}

.f1-team-name::before {
    content: '·';
    margin-right: 7px;
    color: var(--f1-red);
}

.f1-form-results {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 12px;
}

.f1-form-result,
.f1-stop-result {
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}

.f1-lab-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.f1-lab-tabs button {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: var(--panel-2);
    font: 700 .84rem 'Titillium Web', Arial, sans-serif;
    cursor: pointer;
}

.f1-lab-tabs button[aria-pressed="true"] {
    border-color: #ef3338;
    color: var(--text);
    background: color-mix(in srgb, #ef3338 17%, var(--panel-2));
}

.f1-lab-head .f1-data-title { margin-bottom: 3px; }

.f1-lab-highlight {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid #ef3338;
    background: color-mix(in srgb, #ef3338 9%, var(--panel-2));
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.f1-comparison-chart {
    display: grid;
    gap: 11px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 5px 16px 5px 5px;
    background: var(--panel-2);
}

.f1-comparison-row {
    display: grid;
    grid-template-columns: 30px minmax(110px, 1fr) minmax(70px, 1.3fr) 70px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: .85rem;
}

.f1-comparison-rank { color: #ef3338; font-weight: 700; }
.f1-comparison-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.f1-comparison-track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.f1-comparison-bar { display: block; height: 100%; border-radius: inherit; }
.f1-comparison-time { color: var(--text); font-size: .8rem; text-align: right; }

.f1-telemetry-label { margin: 4px 0 -8px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.f1-telemetry-chart { display: block; width: 100%; height: 180px; border: 1px solid var(--line); border-radius: 5px 14px 5px 5px; background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--line) 44px 45px), var(--panel-2); }
.f1-telemetry-chart polyline { fill: none; stroke: #ef3338; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.f1-inputs { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 5px 14px 5px 5px; background: var(--panel-2); }
.f1-input-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: end; gap: 10px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.f1-input-bars { display: flex; align-items: end; gap: 2px; height: 34px; border-bottom: 1px solid var(--line); }
.f1-input-bars i { display: block; flex: 1; min-width: 1px; background: #65d3ac; opacity: .8; }
.f1-input-brake i { background: #ef3338; }

.f1-sector-chart { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 5px 16px 5px 5px; background: var(--panel-2); }
.f1-sector-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 82px; align-items: center; gap: 10px; color: var(--text); font-size: .82rem; }
.f1-sector-row strong { text-align: right; }
.f1-sector-row small { grid-column: 2 / 4; margin-top: -8px; color: var(--muted); text-align: right; }
.f1-sector-row .f1-comparison-bar { background: #ef3338; }

.f1-stop-driver {
    display: flex;
    align-items: center;
    gap: 9px;
}

.f1-stop-photo {
    width: 32px;
    height: 34px;
    flex: none;
    border-radius: 4px;
    background: color-mix(in srgb, var(--f1-red) 18%, var(--panel));
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 720px) {
    .backend-notes { grid-template-columns: 1fr; }
    .backend-notes p { padding: 10px 12px; }
    .f1-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .f1-live-heading { align-items: start; flex-direction: column; }
    .f1-live-source { text-align: left; }
    .f1-live-grid { gap: 7px; }
    .f1-live-item { min-height: 118px; padding: 10px; }
    .f1-live-next { padding-left: 10px; padding-top: 48px; }
    .f1-live-countdown { top: 9px; left: 9px; width: 30px; height: 30px; font-size: .78rem; }
    .f1-live-value { font-size: 1rem; }
    .f1-comparison-chart { padding: 12px; }
    .f1-comparison-row { grid-template-columns: 24px minmax(70px, 1fr) 64px; gap: 6px; }
    .f1-comparison-track { grid-column: 2 / 4; grid-row: 2; }
    .f1-comparison-time { grid-column: 3; grid-row: 1; }
    .f1-sector-row { grid-template-columns: 80px minmax(0, 1fr) 70px; gap: 6px; }
    .f1-race-card { padding-right: 20px; }
    .f1-race-place { position: static; max-width: none; margin-bottom: 10px; text-align: left; }
    .f1-driver-photo, .f1-driver-monogram { width: 58px; height: 72px; }
    .f1-driver-header { gap: 8px; }
    .f1-driver-number { width: 52px; height: 64px; font-size: 1.9rem; }
    .f1-driver-number img { width: 48px; height: 60px; }
}