:root {
  color-scheme: dark;
  --bg: #090c0c;
  --panel: #111616;
  --panel-2: #171d1d;
  --line: #293131;
  --muted: #899393;
  --text: #edf3f1;
  --acid: #c9ff32;
  --cyan: #58e6d0;
  --orange: #ff9a52;
  --danger: #ff6b6b;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 10% -10%, #1c2722 0, transparent 33%), var(--bg); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
button, input, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }

.topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 70px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(9,12,12,.94); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 11px; align-items: center; color: var(--text); text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font: 800 22px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.brand-mark { display: flex; gap: 3px; align-items: end; width: 28px; height: 28px; transform: skew(-11deg); }
.brand-mark i { width: 6px; background: var(--acid); }
.brand-mark i:nth-child(1) { height: 13px; }.brand-mark i:nth-child(2) { height: 23px; }.brand-mark i:nth-child(3) { height: 18px; }
.race-heading { justify-self: center; text-align: center; }
.race-heading strong { font: 700 18px/1 var(--font-display); text-transform: uppercase; }
.public-actions { display: flex; gap: 18px; align-items: center; justify-content: flex-end; justify-self: end; }
.admin-access { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.admin-access:hover { border-color: var(--acid); color: var(--acid); }
.connection { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: center; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.connection i { grid-row: 1 / -1; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(137,147,147,.1); }
.connection small { grid-column: 2; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.connection.online { color: var(--acid); }.connection.online i { background: var(--acid); box-shadow: 0 0 0 4px rgba(201,255,50,.1); }
.connection.error { color: var(--danger); }.connection.error i { background: var(--danger); }

main { width: min(1500px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 48px; }
.error { margin-bottom: 16px; padding: 11px 14px; border: 1px solid rgba(255,107,107,.4); border-radius: 8px; color: #ffc4c4; background: rgba(255,107,107,.08); font-size: 12px; }
.eyebrow { display: block; color: var(--acid); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
h1, h2, p { margin: 0; }
h1 { margin-top: 3px; font: 700 24px/1.05 var(--font-display); text-transform: uppercase; }
h2 { margin-top: 5px; font: 700 20px/1.1 var(--font-display); text-transform: uppercase; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 40%), var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.panel-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; min-height: 78px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.count { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.course-list-view { padding: 9vh 0; }
.page-title { margin-bottom: 34px; }
.page-title h1 { margin-top: 8px; font-size: clamp(36px, 6vw, 68px); }
.page-title p { margin-top: 12px; color: var(--muted); }
.course-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.course-card { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); text-decoration: none; transition: border-color .15s, transform .15s; }
.course-card:hover { border-color: var(--acid); transform: translateY(-2px); }
.course-card strong { display: block; margin: 9px 0 18px; font: 700 26px/1.1 var(--font-display); text-transform: uppercase; }
.course-card span:last-child { color: var(--muted); font-size: 11px; }

.race-page { min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.race-page main { width: 100%; min-height: 0; margin: 0; padding: 0; }
#race-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.race-tabbar { display: flex; gap: 16px; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.race-tabs { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; overflow-x: auto; background: var(--panel); scrollbar-width: thin; }
.race-tabs button { flex: 0 0 auto; min-height: 36px; padding: 0 18px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: 800 11px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.race-tabs button:hover { color: var(--text); }
.race-tabs button[aria-selected="true"] { color: #11150b; background: var(--acid); }
.followed-team-tabs { display: contents; }
.followed-team-tab { gap: 7px; }
.tab-icon { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.race-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: clamp(12px, 2vw, 28px) clamp(12px, 3vw, 40px); }
.race-content > .screen:not([hidden]) { flex: 1 1 0; min-height: 0; overflow: hidden; }
.race-content > .panel.screen { display: flex; flex-direction: column; }
.race-content > .panel.screen > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.error { margin-bottom: 16px; }

.filter select { min-width: 210px; padding: 0 34px 0 11px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.filter { display: flex; gap: 7px; flex-direction: column; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.filter select, .filter input { min-width: 0; height: 38px; border: 1px solid var(--line); outline: 0; background: var(--panel); }
.filter input { width: 90px; padding: 0 10px; border-radius: 7px; font-size: 16px; font-weight: 700; }
.filter select:focus, .filter input:focus { border-color: var(--acid); }

.table-wrap { min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
thead { position: sticky; z-index: 2; top: 0; background: #161c1c; }
th { height: 37px; padding: 0 16px; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
td { height: 50px; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.055); font-size: 12px; }
tbody tr { transition: background .12s; }
tbody tr[data-id] { cursor: pointer; }
tbody tr[data-id]:hover { background: rgba(255,255,255,.025); }
.numeric { text-align: right; }
.race-data-table td { height: 58px; }
.team-number-cell { color: var(--acid); font-size: 13px; font-weight: 800; white-space: nowrap; }
.team-identity-cell strong { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.team-identity-cell small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.group-value { color: var(--muted); font-size: 11px; white-space: nowrap; }
.group-value strong { color: var(--text); font-size: 12px; }
.rank { color: var(--muted); font: 700 18px var(--font-display); }
.group-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid rgba(88,230,208,.28); border-radius: 20px; color: var(--cyan); background: rgba(88,230,208,.05); font-size: 9px; font-weight: 800; }
.category-badge { color: var(--muted); font-size: 10px; }
.ranking-table tr.is-followed { background: linear-gradient(90deg, rgba(201,255,50,.14), rgba(201,255,50,.025)); box-shadow: inset 3px 0 var(--acid); }
.ranking-table tr.is-followed .rank { color: var(--acid); }
.ranking-table tr.selected, .ranking-table tr.selected:hover { background: rgba(88,230,208,.09); box-shadow: inset 3px 0 var(--cyan); }
.ranking-table tr.selected .rank { color: var(--cyan); }
.followed-label { margin-left: 8px; color: var(--acid); font-size: 8px; letter-spacing: .08em; }
.empty { padding: 42px !important; color: var(--muted); text-align: center; }

.ranking-grid { display: grid; grid-template-columns: minmax(650px, 1.4fr) minmax(340px, .75fr); min-height: 100%; height: 100%; gap: 16px; }
.ranking-list, .ranking-team-detail { display: flex; flex-direction: column; min-height: 0; }
.ranking-list .ranking-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ranking-title-row { display: flex; gap: 18px; align-items: center; }
.ranking-title-row h1 { margin-top: 0; }
.ranking-followed-toggle { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ranking-followed-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--acid); }
.ranking-followed-toggle input:checked + span { color: var(--acid); }
.ranking-filters { display: flex; gap: 12px; align-items: end; }
.ranking-filters #ranking-search { width: 220px; font-size: 13px; font-weight: 600; }
.ranking-grid.followed-only-mode { grid-template-columns: minmax(0, 1fr); }
.ranking-grid.followed-only-mode .ranking-wrap, .ranking-grid.followed-only-mode .ranking-team-detail, .ranking-grid.followed-only-mode .ranking-filters { display: none; }
.followed-ranking-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; overflow-y: auto; }
.followed-ranking-card { display: flex; flex-direction: column; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.followed-ranking-identity { display: flex; gap: 9px; align-items: baseline; min-width: 0; }
.followed-ranking-identity strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.followed-ranking-identity span { flex: 0 0 auto; color: var(--acid); font-size: 10px; font-weight: 800; }
.followed-ranking-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.followed-ranking-metric { min-width: 0; padding: 10px 11px; overflow: hidden; border-radius: 7px; background: rgba(255,255,255,.035); }
.followed-ranking-metric span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.followed-ranking-metric strong { display: block; margin-top: 4px; overflow: hidden; font: 800 24px/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.followed-ranking-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.followed-ranking-meta strong { margin-left: 4px; color: var(--text); font-size: 18px; }
.followed-ranking-empty { grid-column: 1 / -1; align-self: center; padding: 36px 18px; color: var(--muted); text-align: center; }
.refresh-highlight { position: relative; }
.refresh-highlight::after { position: absolute; inset: 0; border-radius: inherit; background: rgba(201,255,50,.38); box-shadow: inset 0 0 0 1px rgba(201,255,50,.72); content: ""; pointer-events: none; animation: refresh-highlight-fade 60s linear both; animation-delay: var(--refresh-delay, -60s); }
@keyframes refresh-highlight-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
.ranking-team-detail-head { padding: 20px; border-bottom: 1px solid var(--line); }
.ranking-team-detail-head h1 { overflow-wrap: anywhere; }
.ranking-team-detail-head small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.ranking-team-metrics strong { font-size: 16px; }
.ranking-team-group { margin: 16px 16px 0; padding: 14px; border: 1px solid rgba(88,230,208,.24); border-radius: 9px; background: rgba(88,230,208,.04); }
.ranking-team-group > span { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.ranking-team-group strong { display: block; margin-top: 5px; font: 700 18px var(--font-display); }
.ranking-team-group small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.ranking-detail-actions { display: flex; gap: 9px; margin: 14px 16px; }
.follow-selected-team, .open-ranking-laps { flex: 1 1 0; min-height: 38px; border: 1px solid var(--acid); border-radius: 7px; color: var(--acid); background: transparent; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.follow-selected-team:hover { color: #11150b; background: var(--acid); }.follow-selected-team:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.open-ranking-laps { display: block; border-color: rgba(88,230,208,.55); color: var(--cyan); }
.open-ranking-laps:hover { color: #071311; background: var(--cyan); }
.open-ranking-laps span { margin-left: 5px; }
.ranking-detail-laps { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
.ranking-detail-laps-head { position: sticky; z-index: 2; top: 0; display: flex; min-height: 37px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--panel); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.ranking-detail-laps-head strong { color: var(--text); font-size: 9px; }
.ranking-detail-laps-columns, .ranking-detail-lap { display: grid; grid-template-columns: 44px 46px minmax(92px, 1fr) minmax(82px, 1fr) minmax(100px, 1fr); gap: 8px; align-items: center; }
.ranking-detail-laps-columns { position: sticky; z-index: 1; top: 37px; min-height: 32px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); background: #161c1c; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ranking-detail-lap { min-height: 47px; padding: 7px 16px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 11px; }
.ranking-detail-lap > strong { color: var(--acid); }.ranking-detail-lap > span { color: var(--text); white-space: nowrap; }.ranking-detail-lap > small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.ranking-detail-lap > .ranking-lap-rank { color: var(--cyan); font-weight: 800; }
.ranking-lap-group strong { color: var(--text); font-size: 10px; }.ranking-lap-group span { color: var(--muted); }

.split-grid { display: grid; grid-template-columns: minmax(600px, 1.4fr) minmax(330px, .75fr); min-height: 0; height: 100%; gap: 16px; }
.split-grid > .panel { display: flex; flex-direction: column; min-height: 0; }
.split-grid > .panel > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
#groups-body tr.selected, #groups-body tr.selected:hover { background: rgba(201,255,50,.07); box-shadow: inset 3px 0 var(--acid); }
.group-detail { min-height: 0; padding-bottom: 15px; }
.empty-detail { padding: 25px; color: var(--muted); }
.detail-head { padding: 20px; border-bottom: 1px solid var(--line); }
.detail-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.detail-metrics div { padding: 14px 16px; background: var(--panel); }
.detail-metrics span, .state-stat span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.detail-metrics strong, .state-stat strong { display: block; margin-top: 5px; font: 700 18px var(--font-display); }
.member-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.member { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; min-height: 53px; padding: 8px 17px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.member small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }.member.inactive { opacity: .5; }

.crossings-table time { color: var(--text); font-size: 12px; font-weight: 700; }

.tracking-grid { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(550px, 1.4fr); min-height: 0; height: 100%; gap: 16px; }
.tracking-grid > .panel { min-height: 0; }
.tracking-field-column { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-width: 0; min-height: 0; }
.field-position, .tracking-group-detail { display: flex; flex-direction: column; min-height: 0; }
.field-position > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.field-position > .panel-heading { min-height: 60px; padding: 11px 16px; }
.field-position > .panel-heading h1 { margin-top: 0; font-size: 20px; }
.field-position > .panel-heading .filter { flex-direction: row; align-items: center; white-space: nowrap; }
.field-position > .panel-heading .filter input { width: 70px; height: 34px; }
.team-state { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.team-state-summary { flex: 0 0 auto; padding: 24px; }
.team-identity { padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.team-number { color: var(--acid); font: 700 23px/1.1 var(--font-display); }
.team-name { margin-top: 7px; font: 700 23px/1.1 var(--font-display); text-transform: uppercase; }.team-category { display: inline-block; margin-top: 10px; color: var(--muted); font-size: 9px; }
.state-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 20px -24px 0; background: var(--line); }
.state-stat { min-height: 78px; padding: 15px 24px; background: var(--panel); }
.state-group { margin: 22px 0 0; padding: 17px; border: 1px solid rgba(88,230,208,.24); border-radius: 9px; background: rgba(88,230,208,.04); }
.state-group > span { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.state-group strong { display: block; margin-top: 7px; font: 700 23px var(--font-display); }.state-group small { color: var(--muted); }
.team-state-actions { display: flex; gap: 9px; margin-top: 18px; }
.stop-following { flex: 1 1 0; min-height: 38px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.stop-following:hover { color: var(--danger); border-color: rgba(255,107,107,.4); }
.team-state .ranking-detail-laps-head { padding-right: 12px; padding-left: 12px; }
.team-state .ranking-detail-laps-columns, .team-state .ranking-detail-lap { grid-template-columns: 34px 34px minmax(68px, 1fr) minmax(64px, 1fr) minmax(76px, 1fr); gap: 5px; padding-right: 12px; padding-left: 12px; }
.field-groups-table time { color: var(--text); font-size: 13px; font-weight: 800; }
.field-groups-table td { font-size: 13px; }
.field-groups-table tr.followed-position.grouped { background: linear-gradient(90deg, rgba(201,255,50,.14), rgba(201,255,50,.025)); box-shadow: inset 3px 0 var(--acid); }
.field-groups-table tr.followed-position.grouped td:nth-child(2) > strong { color: var(--acid); }
.field-groups-table tr.followed-position.solo { color: var(--orange); background: linear-gradient(90deg, rgba(255,154,82,.14), rgba(255,154,82,.025)); box-shadow: inset 3px 0 var(--orange); }
.field-groups-table tr.followed-position.solo time { color: var(--orange); }
.field-groups-table tr.selected, .field-groups-table tr.selected:hover { background: rgba(201,255,50,.07); box-shadow: inset 3px 0 var(--acid); }
.tracking-group-detail { min-height: 180px; max-height: 42vh; }
.position-label { display: block; margin-top: 3px; color: var(--acid); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.screen-loading { min-height: 260px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.mobile-detail-dialog { display: none; }
.ranking-laps-dialog { padding: 0; border: 0; color: var(--text); background: var(--panel); }
.ranking-laps-dialog[open] { display: block; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.ranking-laps-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.ranking-laps-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.ranking-laps-bar { position: relative; z-index: 5; display: flex; flex: 0 0 52px; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); background: #0d1212; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.ranking-laps-bar button { display: grid; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; place-items: center; color: var(--text); background: var(--panel-2); }
.ranking-laps-bar button:hover { border-color: var(--acid); color: var(--acid); }
.ranking-laps-bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ranking-laps-content { min-height: 0; overflow: hidden; }
.ranking-laps-content > .ranking-detail-laps { display: block; max-height: calc(100dvh - 86px); overflow: auto; border-top: 0; }

@media (max-width: 1050px) {
  .split-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) minmax(0, .8fr); }
  .tracking-grid { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); }
  .ranking-grid { grid-template-columns: 1fr; }
  .ranking-team-detail { min-height: 0; }
  .ranking-team-detail > .ranking-detail-laps, .mobile-detail-content > .ranking-detail-laps { display: none; }
  .tracking-field-column { min-height: 0; }
  .tracking-group-detail { max-height: 30vh; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .ranking-grid { grid-template-rows: minmax(0, 1fr) auto; }
  .ranking-team-detail { min-height: max-content; align-self: end; }
  .ranking-grid:not(.has-ranking-selection) { grid-template-rows: minmax(0, 1fr); }
  .ranking-grid:not(.has-ranking-selection) .ranking-team-detail { display: none; }
  [data-screen="groups"] .split-grid:not(.has-group-selection) { grid-template-rows: minmax(0, 1fr) auto; }
  [data-screen="groups"] .split-grid:not(.has-group-selection) .group-detail { align-self: start; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; min-height: 62px; padding: 0 16px; }.brand > span:last-child { display: none; }.race-heading { min-width: 0; justify-self: stretch; text-align: left; }.race-heading strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.public-actions { gap: 10px; }
  .race-tabbar { gap: 8px; }.race-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); overflow-x: auto; }.race-tabs button { display: grid; min-width: 0; min-height: 44px; padding: 0; place-items: center; }.tab-icon { display: block; width: 21px; height: 21px; }.tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .race-tabs button.followed-team-tab { display: flex; gap: 5px; justify-content: center; }.followed-team-tab .tab-icon { width: 17px; height: 17px; }.followed-team-tab .tab-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
  .panel-heading { min-height: auto; padding: 12px 14px; align-items: flex-start; flex-direction: column; }.filter, .filter select { width: 100%; }
  [data-screen="groups"] .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px 12px; align-items: end; }
  [data-screen="groups"] .panel-heading > div { grid-column: 1; grid-row: 1; }
  [data-screen="groups"] .panel-heading > .filter { grid-column: 2; grid-row: 1; width: 90px; }
  [data-screen="groups"] .panel-heading > .count { grid-column: 1 / -1; grid-row: 2; }
  .ranking-filters { width: 100%; }.ranking-filters #ranking-search { width: 100%; }
  .ranking-title-row { width: 100%; justify-content: space-between; }
  .ranking-grid.followed-only-mode .ranking-heading { min-height: 52px; padding: 8px 14px; }
  .followed-ranking-list { gap: 6px; padding: 8px; }
  .followed-ranking-card { padding: 10px 11px; }
  .followed-ranking-identity strong { font-size: 20px; }
  .followed-ranking-metrics { gap: 6px; margin-top: 8px; }
  .followed-ranking-metric { padding: 7px 9px; }
  .followed-ranking-metric strong { font-size: 20px; }
  .followed-ranking-meta { gap: 5px 12px; padding-top: 7px; }
  .race-data-table { min-width: 760px; }
  .ranking-table { min-width: 650px; }
  .ranking-table th, .ranking-table td { padding-right: 8px; padding-left: 8px; }
  .ranking-grid, .split-grid { display: block; height: 100%; }
  .ranking-list, .split-grid > article { height: 100%; }
  .ranking-team-detail, .split-grid .group-detail, .tracking-group-detail { display: none; }
  .tracking-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .tracking-field-column { display: block; min-height: 0; margin-top: 0; }
  .field-position { height: 100%; }
  .field-position > .panel-heading { flex-direction: row; gap: 10px; align-items: center; min-height: 54px; padding: 8px 12px; }
  .field-position > .panel-heading h1 { font-size: 17px; }
  .field-position > .panel-heading .filter { width: auto; margin-left: auto; }
  .field-position > .panel-heading .filter input { width: 58px; height: 32px; }
  .field-groups-table { min-width: 570px; }
  .team-state-summary { padding: 14px 16px; }
  .team-identity { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; padding-bottom: 10px; }
  .team-identity .eyebrow { flex-basis: 100%; }.team-number { font-size: 20px; }.team-name { margin-top: 0; font-size: 18px; }.team-category { margin: 0 0 0 auto; }
  .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -16px; }.state-stat { min-height: 56px; padding: 10px 11px; }.state-stat strong { margin-top: 4px; font-size: 15px; }
  .state-group { margin-top: 10px; padding: 10px 12px; }.state-group strong { display: inline; margin: 0 7px; font-size: 16px; }.state-group small { font-size: 9px; }
  .team-state-actions { margin-top: 10px; }
  .stop-following, .team-state-actions .open-ranking-laps { min-height: 34px; }
  .team-state > .ranking-detail-laps { display: none; }

  .mobile-detail-dialog[open] { display: block; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--text); background: var(--panel); }
  .mobile-detail-dialog::backdrop { background: rgba(0,0,0,.72); }
  .mobile-detail-shell { display: grid; grid-template-rows: 52px minmax(0, 1fr); height: 100%; }
  .mobile-detail-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); background: #0d1212; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
  .mobile-detail-bar button { display: grid; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; place-items: center; color: var(--text); background: var(--panel-2); }
  .mobile-detail-bar button:hover { border-color: var(--acid); color: var(--acid); }
  .mobile-detail-bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .mobile-detail-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .mobile-detail-content > .screen-loading { flex: 1 1 auto; }
  .mobile-detail-content > .member-list, .mobile-detail-content > .ranking-detail-laps { display: block; flex: 1 1 auto; min-height: 0; max-height: none; }
  .ranking-laps-dialog[open] { width: 100vw; max-height: 100dvh; margin: auto 0; border: 0; border-radius: 0; }
  .ranking-laps-shell { max-height: 100dvh; }
  .ranking-laps-content > .ranking-detail-laps { max-height: calc(100dvh - 52px); }
}
@media (max-width: 450px) {
  .connection { display: none; }.admin-access { padding: 8px 9px; font-size: 8px; }.race-tabbar { }
  .panel { border: 0; border-radius: 0; box-shadow: 0; }
  .race-content { padding: 0; }
  .state-stat { min-height: 52px; padding: 8px 7px; }
  .state-stat span { font-size: 7px; }.state-stat strong { font-size: 14px; }
  .state-group { margin-top: 8px; padding: 8px 10px; }
  .ranking-team-detail-head { padding: 14px; }.ranking-team-group { margin: 10px 12px 0; padding: 10px; }.ranking-detail-actions { margin: 10px 12px; }
  .ranking-detail-laps { max-height: 380px; }.ranking-detail-laps-head { padding: 0 12px; }.ranking-detail-laps-columns, .ranking-detail-lap { grid-template-columns: 34px 34px minmax(68px, 1fr) minmax(64px, 1fr) minmax(76px, 1fr); gap: 5px; padding-right: 12px; padding-left: 12px; }.ranking-detail-lap { min-height: 42px; }
}