/*
 * RacePanel - web UI. Colours are the dashboard firmware's own palette (theme.h in
 * elrs-race-lcd), so the site reads like the 7" panel it mirrors.
 */
:root {
    --bg: #000000;
    --bg-soft: #07090d;
    --panel: #141821;
    --panel-2: #1a1f2b;
    --header: #1a2b40;
    --label: #7d879b;
    --text: #f0f0f0;
    --stale: #5f646e;
    --none: #3c4048;
    --good: #46dc64;
    --warn: #ffb400;
    --bad: #ff4034;
    --accent: #5aafff;
    --grid: #2a303c;
    --alert-warn: #ffd228;
    --gold: #ffcd28;
    --silver: #c8d0da;
    --bronze: #cd7f32;
    --pink: #ff69b4;
    --orange: #ff8c3c;
    --violet: #dc78ff;
    --sky: #78aaff;

    --radius: 8px;
    --radius-sm: 6px;
    --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --gutter: 16px;
    --maxw: 1320px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 var(--font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-cond); font-weight: 700; letter-spacing: .02em; margin: 0; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 20px; text-transform: uppercase; color: var(--label); letter-spacing: .08em; font-weight: 600; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
code, .mono { font-family: var(--font-mono); }
.muted { color: var(--label); }
.small { font-size: 13px; }
.inline { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- top bar: the LCD's info bar ------------------------------------------------------ */
.topbar { background: var(--header); border-bottom: 1px solid #23395a; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 56px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none !important; }
.brand-mark { width: 32px; height: 32px; border-radius: 7px; background: var(--good); color: #062a10; display: grid; place-items: center; }
.brand-text { font-family: var(--font-cond); font-size: 21px; letter-spacing: .06em; font-weight: 600; }
.brand-text b { color: var(--good); font-weight: 700; margin-left: 2px; }
.mainnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a { font-family: var(--font-cond); font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a9b4c8; padding: 6px 12px; border-radius: 6px; white-space: nowrap; }
.mainnav a:hover { color: var(--text); background: rgba(255,255,255,.06); text-decoration: none; }
.mainnav a.active { color: var(--text); background: rgba(0,0,0,.35); box-shadow: inset 0 -2px 0 var(--good); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pilot-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.3); color: var(--text); font-weight: 600; font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-chip:hover, .pilot-chip.active { text-decoration: none; background: rgba(0,0,0,.5); }
.pilot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); flex: none; }

.main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 48px; }
.footer { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 18px var(--gutter) 28px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--stale); border-top: 1px solid #10131a; }
.footer a { color: var(--label); }

.flash { max-width: var(--maxw); margin: 16px auto 0; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; width: calc(100% - 2 * var(--gutter)); }
.flash-ok { background: rgba(70,220,100,.12); color: var(--good); border: 1px solid rgba(70,220,100,.35); }
.flash-error { background: rgba(255,64,52,.12); color: #ff8a80; border: 1px solid rgba(255,64,52,.4); }

/* --- buttons & forms ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 15px/1 var(--font-cond); letter-spacing: .07em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; color: var(--text); background: var(--grid); text-decoration: none !important; white-space: nowrap; }
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn-primary { background: var(--good); color: #04220c; }
.btn-accent { background: var(--accent); color: #031a30; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.18); }
.btn-danger { background: transparent; border-color: rgba(255,64,52,.55); color: #ff8a80; }
.btn-danger:hover { background: rgba(255,64,52,.12); }
.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 18px; }
.btn-block { width: 100%; }

label { display: block; font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%; font: 15px var(--font); color: var(--text); background: #0b0e14; border: 1px solid var(--grid); border-radius: var(--radius-sm); padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,175,255,.18); }
textarea { min-height: 80px; resize: vertical; }
.field { margin-bottom: 16px; }
.field-hint { font-size: 13px; color: var(--label); margin-top: 5px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600; }
.alert-error { background: rgba(255,64,52,.12); color: #ff8a80; border: 1px solid rgba(255,64,52,.4); }

/* --- page scaffolding ---------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .eyebrow { font: 600 13px var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.page-head h1 { font-size: 32px; }
.page-head .sub { color: var(--label); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-head a { font: 600 14px var(--font-cond); letter-spacing: .06em; text-transform: uppercase; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }

.panel { background: var(--panel); border-radius: var(--radius); padding: 16px; }
.panel + .panel { margin-top: 12px; }
.panel-title { font: 600 13px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }

/* --- stat cards: the LCD's history summary row ---------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.stats.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .stats, .stats.stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-trend { grid-column: 1 / -1; } }
.stat { background: var(--panel); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.stat-label { font: 600 13px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--label); display: flex; justify-content: space-between; gap: 8px; }
.stat-note { color: var(--stale); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; text-transform: none; }
.stat-value { font: 700 30px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; margin-top: 8px; }
.stat-value.good { color: var(--good); }
.stat-value small { font-size: 15px; color: var(--label); font-weight: 500; margin-left: 3px; }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover { background: var(--panel-2); }
.stat-trend canvas { width: 100%; height: 52px; display: block; margin-top: 6px; }

/* --- tables: the LCD's race list/lap tables ------------------------------------------- */
.table-wrap { background: var(--panel); border-radius: var(--radius); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { font: 600 13px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--label); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.data td { padding: 10px 14px; border-bottom: 1px solid #1d222d; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data td.r, table.data th.r { text-align: right; }
table.data td.c, table.data th.c { text-align: center; }
table.data tbody tr.link { cursor: pointer; }
table.data tbody tr.link:hover td { background: #191e29; }
table.data td .title { font-weight: 600; color: var(--text); }
table.data td .meta { font-size: 13px; color: var(--label); }
table.data tr.is-best td { background: rgba(70,220,100,.06); }
table.data tr.is-current td { background: rgba(90,175,255,.12); }
.empty { padding: 36px 20px; text-align: center; color: var(--label); }
.empty h3 { color: var(--text); margin-bottom: 6px; }

.pos { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 5px; font: 700 15px var(--font-mono); background: var(--grid); color: var(--label); }
.pos-gold { background: var(--gold); color: #261c00; }
.pos-silver { background: var(--silver); color: #14181f; }
.pos-bronze { background: var(--bronze); color: #1f1206; }
.tag { display: inline-block; font: 700 11px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.tag-best { background: var(--good); color: #052610; }
.tag-est { background: transparent; border: 1px solid var(--stale); color: var(--label); }
.tag-link { background: rgba(90,175,255,.15); color: var(--accent); }
.delta { font-family: var(--font-mono); font-size: 13px; color: var(--stale); }
.delta.slow { color: #e7a35b; }

.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; font-family: var(--font-mono); color: var(--label); }

/* --- event cards -------------------------------------------------------------------- */
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.event-card { display: block; background: var(--panel); border-radius: var(--radius); padding: 14px 16px; color: inherit; text-decoration: none !important; border: 1px solid transparent; position: relative; }
.event-card:hover { border-color: var(--grid); background: var(--panel-2); }
.event-date { display: flex; align-items: baseline; gap: 8px; font: 600 13px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.event-date b { font: 700 26px/1 var(--font-mono); color: var(--text); letter-spacing: 0; }
.event-name { font: 700 19px var(--font-cond); letter-spacing: .02em; margin: 6px 0 10px; color: var(--text); }
.event-figs { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--label); }
.event-figs b { color: var(--text); font-family: var(--font-mono); font-weight: 700; margin-right: 3px; }
.event-figs .best b { color: var(--good); }
.event-card .pos { position: absolute; top: 12px; right: 12px; }

/* --- cards for devices / misc ------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.device-card { background: var(--panel); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.device-top { display: flex; align-items: center; gap: 12px; }
.device-icon { width: 46px; height: 32px; border-radius: 4px; border: 2px solid #3a4456; background: linear-gradient(180deg, #1a2b40 0 28%, #0b0e14 28%); position: relative; flex: none; }
.device-icon::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; background: var(--good); border-radius: 2px; opacity: .8; }
.device-name { font: 700 18px var(--font-cond); letter-spacing: .02em; }
.device-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.device-meta dt { color: var(--label); font: 600 12px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.device-meta dd { margin: 0; font-family: var(--font-mono); font-size: 13px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--stale); vertical-align: 1px; }
.status-dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.device-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
details.inline-edit summary { list-style: none; cursor: pointer; }
details.inline-edit summary::-webkit-details-marker { display: none; }
details.inline-edit[open] summary { margin-bottom: 10px; }

/* --- pairing dialog ----------------------------------------------------------------- */
dialog.modal { background: var(--panel); color: var(--text); border: 1px solid var(--grid); border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 2 * var(--gutter))); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.modal-head { background: var(--header); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.modal-body { padding: 22px 20px; }
.modal-close { background: none; border: none; color: var(--label); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.pair-code { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 18px; }
.pair-code span { width: 58px; height: 74px; display: grid; place-items: center; background: #05070a; border: 1px solid var(--grid); border-radius: 8px; font: 700 42px var(--font-mono); color: var(--text); box-shadow: inset 0 -3px 0 rgba(70,220,100,.5); }
.pair-code i { width: 16px; height: 4px; background: var(--label); border-radius: 2px; }
@media (max-width: 480px) { .pair-code span { width: 42px; height: 58px; font-size: 30px; } .pair-code { gap: 5px; } }
.pair-status { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.pair-timer { height: 4px; background: var(--grid); border-radius: 2px; overflow: hidden; margin: 14px 0 6px; }
.pair-timer div { height: 100%; background: var(--good); transition: width 1s linear; }
.pair-steps { margin: 18px 0 0; padding: 14px 16px 14px 34px; background: #0b0e14; border-radius: 8px; color: #c5ccd8; font-size: 14px; }
.pair-steps li { margin: 4px 0; }
.pair-steps b { color: var(--text); font-family: var(--font-cond); letter-spacing: .06em; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--grid); border-top-color: var(--good); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pair-done { text-align: center; }
.pair-done .check { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: rgba(70,220,100,.15); color: var(--good); display: grid; place-items: center; }
.pair-done h3 { font-size: 24px; margin-bottom: 4px; }
[hidden] { display: none !important; }

/* --- auth pages / landing ------------------------------------------------------------ */
.auth { max-width: 420px; margin: 32px auto 0; }
.auth .panel { padding: 26px 24px; }
.auth h1 { margin-bottom: 4px; }
.auth .lead { color: var(--label); margin-bottom: 22px; }
.auth-switch { text-align: center; margin-top: 16px; color: var(--label); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding: 28px 0 40px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero-kicker { display: inline-flex; gap: 8px; align-items: center; font: 600 13px var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--good); background: rgba(70,220,100,.1); padding: 5px 10px; border-radius: 999px; }
.hero h1 { font-size: clamp(38px, 6vw, 60px); margin: 16px 0 14px; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--good); }
.hero p.lead { font-size: 18px; color: #b8c1d1; max-width: 520px; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--panel); border-radius: var(--radius); padding: 18px; }
.step-n { font: 700 13px var(--font-mono); color: var(--good); }
.step h3 { margin: 6px 0 6px; font-size: 19px; }
.step p { color: var(--label); margin: 0; font-size: 14px; }

/* Mini LCD mock on the landing page */
.lcd-mock { background: #000; border: 10px solid #15181e; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px #262b35; overflow: hidden; }

/* =====================================================================================
 * Telemetry viewer: a replica of the 800x480 dashboard layout (ui.cpp), scaled to fit.
 * ===================================================================================== */
.tv { background: #000; border-radius: 10px; overflow: hidden; border: 1px solid #1d222d; user-select: none; }
.tv-head { background: var(--header); display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 44px; flex-wrap: wrap; }
.tv-head .tv-mode { font: 700 18px var(--font-cond); letter-spacing: .06em; min-width: 110px; }
.badge { display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--font-cond); letter-spacing: .08em; padding: 4px 12px; border-radius: 5px; background: var(--grid); color: var(--stale); white-space: nowrap; }
.badge.armed { background: var(--bad); color: var(--text); }
.badge.race { color: var(--good); }
.tv-flight { display: flex; align-items: baseline; gap: 8px; font: 600 14px var(--font-cond); color: var(--text); letter-spacing: .08em; }
.tv-flight b { font: 700 20px var(--font-mono); }
.tv-head .tv-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tv-rate { font: 600 13px var(--font-mono); color: var(--label); }

.tv-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4px; padding: 4px; }
@media (max-width: 1100px) { .tv-body { grid-template-columns: 1fr; } }
.tv-left { display: grid; gap: 4px; grid-template-rows: auto auto auto auto; }
.tv-row { display: grid; grid-template-columns: repeat(3, 92px) minmax(0, 1fr); gap: 4px; min-height: 92px; }
.tv-row-bottom { display: grid; grid-template-columns: 184px 92px minmax(0, 1fr); gap: 4px; }
@media (max-width: 700px) {
    .tv-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tv-row .tv-graph { grid-column: 1 / -1; min-height: 110px; }
    .tv-row-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tv-row-bottom .tv-graph-stack { grid-column: 1 / -1; }
}
.tile { background: var(--panel); border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; position: relative; border: 1px solid transparent; transition: background .2s; min-height: 64px; }
.tile-label { font: 600 12px var(--font-cond); letter-spacing: .08em; color: var(--label); }
.tile-value { font: 700 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tile-value small { font: 600 12px var(--font-cond); color: var(--label); margin-left: 2px; letter-spacing: .04em; }
.tile.none .tile-value { color: var(--none); }
.tile.warn { border-color: var(--alert-warn); background: color-mix(in srgb, var(--panel), var(--alert-warn) 14%); }
.tile.warn .tile-label { color: var(--alert-warn); }
.tile.crit { border-color: var(--bad); background: color-mix(in srgb, var(--panel), var(--bad) 18%); animation: pulse 1s ease-in-out infinite; }
.tile.crit .tile-label { color: var(--bad); }
@keyframes pulse { 50% { background: color-mix(in srgb, var(--panel), var(--bad) 32%); } }
.tile-col { display: grid; gap: 4px; grid-template-rows: repeat(3, 1fr); }

.tv-graph { background: var(--panel); border-radius: 4px; position: relative; min-height: 92px; overflow: hidden; }
.tv-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.tv-graph-stack { display: grid; gap: 4px; grid-template-rows: 1fr 1fr; }
.tv-graph-stack .tv-graph { min-height: 98px; }

.horizon { background: var(--panel); border-radius: 4px; position: relative; overflow: hidden; min-height: 200px; }
.horizon canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* race panel - the right-hand column of the LCD */
.race-panel { background: var(--panel); border-radius: 4px; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; }
.rp-label { background: #0b0e14; text-align: center; font: 700 15px var(--font-cond); letter-spacing: .08em; padding: 8px 10px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-label.none { color: var(--stale); }
.rp-timer { padding: 8px 14px 6px; border-bottom: 1px solid var(--grid); }
.rp-timer .tile-label { display: block; }
.rp-timer .big { font: 700 40px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; }
.rp-lapposn { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--grid); }
.rp-lapposn > div { padding: 6px 14px 8px; }
.rp-lapposn > div + div { border-left: 1px solid var(--grid); }
.rp-lapposn .big { font: 700 34px/1.1 var(--font-mono); text-align: center; }
.rp-banner { min-height: 36px; display: grid; place-items: center; font: 700 15px var(--font-cond); letter-spacing: .1em; color: var(--warn); border-bottom: 1px solid var(--grid); padding: 4px 8px; text-align: center; }
.rp-table { flex: 1; overflow-y: auto; }
.rp-table table { width: 100%; border-collapse: collapse; }
.rp-table th { font: 600 12px var(--font-cond); letter-spacing: .1em; color: var(--label); text-align: left; padding: 6px 14px; position: sticky; top: 0; background: var(--panel); }
.rp-table th:last-child, .rp-table td:last-child { text-align: right; }
.rp-table td { font: 600 16px var(--font-mono); padding: 5px 14px; border-top: 1px solid #1d222d; }
.rp-table tr.future td { color: var(--none); }
.rp-table tr.current td { background: rgba(90,175,255,.12); }
.rp-table tr.best td:nth-child(2) { color: var(--good); }

/* playback bar */
.tv-transport { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; background: #05070a; border-top: 1px solid #141821; flex-wrap: wrap; }
.tv-transport .btn { min-width: 44px; }
.timeline { position: relative; flex: 1; min-width: 200px; height: 34px; cursor: pointer; touch-action: none; }
.timeline canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.speed { display: flex; gap: 2px; background: var(--panel); border-radius: 6px; padding: 2px; }
.speed button { background: none; border: none; color: var(--label); font: 600 13px var(--font-mono); padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.speed button.on { background: var(--grid); color: var(--text); }
.tv-time { font: 700 15px var(--font-mono); color: var(--text); min-width: 116px; text-align: right; }
.tv-hint { color: var(--stale); font-size: 13px; padding: 8px 2px 0; }
.tv-loading { padding: 80px 20px; text-align: center; color: var(--label); }

/* lap chart on the race page */
.chart-box { background: var(--panel); border-radius: var(--radius); padding: 12px 14px 8px; }
.chart-box canvas { width: 100%; height: 240px; display: block; }
.legend { display: inline-flex; gap: 12px; font: 600 12px var(--font-cond); letter-spacing: .08em; color: var(--label); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 14px; }
.kv dt { color: var(--label); font: 600 12px var(--font-cond); letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; }
.danger-zone { border: 1px solid rgba(255,64,52,.25); }

/* --- phone widths -------------------------------------------------------------------- */
@media (max-width: 760px) {
    .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; gap: 8px 12px; }
    .mainnav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
    .pilot-chip { max-width: 140px; }
    .page-head h1 { font-size: 26px; }
    .footer { flex-direction: column; }
}
.lcd-mock .rp-table td { padding: 4px 8px; font-size: 13px; }
.lcd-mock .rp-table { overflow: hidden; }