/* Gridline race-control theme. Layout and breakpoints live in styles.css. */
:root {
  color-scheme: dark;
  --red: #e10600;
  --red-bright: #ff3933;
  --lime: var(--red);
  --dark: #0d0d12;
  --surface: #17171f;
  --border: #2c2c37;
  --muted: #a0a0b0;
  --display: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  --timing: "Bahnschrift", "Consolas", ui-monospace, monospace;
  background: #101015;
  color: #f4f4f7;
}
body {
  background: radial-gradient(ellipse at 85% 0, #e106000a, transparent 40%), #101015;
}
::selection { background: #e10600; color: white; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #ff6963; }
input:focus, select:focus, textarea:focus { outline-color: #ff6963; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }
.sidebar {
  background: #0c0c11;
  border-right: 1px solid #272730;
  border-top: 4px solid var(--red);
  padding-top: 28px;
}
.brand { color: white; font-weight: 850; font-style: italic; letter-spacing: -1.8px; }
.brand-mark { gap: 4px; transform: skew(-30deg); }
.brand-mark i { background: var(--red); width: 7px; height: 25px; }
.brand-mark i:first-child { height: 17px; }
.brand-dot { color: var(--red-bright); }
.sidebar-label { color: #92929f; font-size: 9px; letter-spacing: 2px; }
.nav-item { border-radius: 3px 10px 3px 3px; color: #a9a9b8; font-weight: 600; }
.nav-item:hover { background: #20202a; color: white; }
.nav-item.selected { background: var(--red); color: white; box-shadow: 0 4px 16px #e1060015; }
.nav-count { background: #0003; color: white; font-family: var(--timing); }
.league-label { margin-top: 32px; }
.league-title { color: #f3f3f7; }
.league-title small { color: #9595a5; }
.league-icon { background: #262630; border: 1px solid #3a3a47; color: #dddde5; border-radius: 3px 9px 3px 3px; }
.sidebar-card {
  border: 1px solid #30303c;
  border-top: 2px solid #e10600;
  border-radius: 3px 12px 3px 3px;
  background: repeating-linear-gradient(135deg, #ffffff02 0 2px, transparent 2px 6px), #17171f;
}
.tiny-label { color: #a0a0b0; }
.code-button { color: #f4f4f8; font-family: var(--timing); letter-spacing: .4px; }
.code-button .icon { color: #ff5c56; }
.sidebar-card p { color: #9999a9; }
.connection { color: #8c8c9c; border-color: #292933; }
.connection > span { background: var(--red-bright); }
.topbar { background: #13131a; border-color: #2a2a33; position: relative; }
.topbar::before { content: ""; position: absolute; top: 0; left: 0; width: 104px; height: 4px; background: var(--red); transform: skew(-32deg); transform-origin: left; }
.breadcrumb { color: #9999a8; }
.breadcrumb strong { color: #e2e2e9; }
.role-badge { background: #202029; border-color: #373744; border-radius: 3px; color: #c3c3cf; font-size: 10px; }
.season-tag { color: #c1c1cc; font-family: var(--timing); letter-spacing: 1.3px; padding-left: 12px; border-left: 3px solid var(--red); }
.eyebrow { color: #afafb9; font-size: 9px; letter-spacing: 2px; }
.page-head { border-top: 5px solid var(--red); border-right: 5px solid var(--red); border-radius: 0 24px 0 0; padding: 22px 23px 0 0; margin-bottom: 30px; }
.page-head .eyebrow { color: #a0a0af; margin-bottom: 7px; }
.page-head h1 { font-size: clamp(30px, 3.1vw, 46px); font-weight: 850; text-transform: uppercase; font-style: italic; letter-spacing: -1.7px; }
.heading-dot { color: var(--red-bright); }
.page-head p { color: #a0a0af; }
.middot { color: #525262; }
.btn { border-radius: 3px 10px 3px 3px; font-weight: 650; letter-spacing: .1px; min-height: 42px; }
.primary { background: var(--red); border-color: var(--red); color: white; box-shadow: 0 5px 18px #e1060018; }
.primary:hover { background: #ff2019; border-color: #ff2019; box-shadow: 0 5px 20px #e1060033; }
.secondary { background: #23232d; color: #f1f1f6; border-color: #3b3b48; }
.secondary:hover { background: #30303d; border-color: #777787; }
.quiet { color: #c4c4d0; }
.quiet:hover { background: #2a2a35; color: white; }
.danger { background: #351b20; border-color: #6e2a31; color: #ffb0aa; }
.danger:hover { background: #4a2025; }
.text-link { color: #d6d6e0; }
.text-link .icon { color: #ff4a44; }
.text-link:hover { color: #ff6b66; }
.metric-strip { background: #181820; border-color: #30303a; border-radius: 3px 14px 3px 3px; padding: 23px 0; }
.metric-strip > div { border-color: #373742; }
.metric-strip span { color: #aaaab8; font-size: 8px; }
.metric-strip strong { font-family: var(--timing); font-size: 33px; font-weight: 700; font-style: italic; font-variant-numeric: tabular-nums; color: white; }
.metric-strip .icon { color: #686877; }
.metric-strip > div:last-child strong { color: #ff524b; }
.podium-panel {
  border: 1px solid #33333f;
  border-radius: 4px 24px 4px 4px;
  background: radial-gradient(ellipse at 50% 110%, #e1060024, transparent 65%), repeating-linear-gradient(135deg, #ffffff02 0 1px, transparent 1px 6px), #181820;
  position: relative;
  padding-top: 27px;
}
.podium-panel::after {
  content: ""; pointer-events: none; position: absolute; right: 0; top: 0; height: 4px; width: 130px;
  background: repeating-linear-gradient(110deg, var(--red) 0 15px, transparent 15px 22px);
}
.panel-heading h2 { color: #f0f0f6; font-weight: 700; font-size: 18px; }
.panel-heading p { color: #a0a0ae; }
.panel-heading > .icon { color: #818191; }
.podium-panel .panel-heading h2 { font-size: 23px; text-transform: uppercase; font-style: italic; letter-spacing: -.5px; }
.live-label { color: #bebecd; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; border: 1px solid #41414d; padding: 7px 9px; border-radius: 2px; }
.live-label i { background: var(--red-bright); }
.podium { margin-top: 40px; gap: 14px; }
.avatar { background: color-mix(in srgb, var(--player) 17%, #1b1b25); border: 1px solid color-mix(in srgb, var(--player) 50%, #1b1b25); color: color-mix(in srgb, var(--player) 36%, white); border-radius: 4px 9px 4px 4px; }
.podium-avatar { border-radius: 50%; box-shadow: 0 0 0 4px #22222d, 0 0 0 5px #4a4a58; }
.podium-1 .podium-avatar { box-shadow: 0 0 0 5px #371c22, 0 0 0 7px #e10600; }
.podium h3 { color: white; text-transform: uppercase; font-size: 17px; font-weight: 750; letter-spacing: -.3px; }
.podium p { color: #aaaab9; font-size: 10px; }
.podium p span { color: #656575; }
.crown { color: #ffc654; top: -33px; }
.podium-base { border-color: #41414e; border-top: 3px solid #8b8b9c; border-radius: 3px 12px 0 0; background: linear-gradient(160deg, #34343f, #21212c); height: 105px; }
.podium-1 .podium-base { background: linear-gradient(145deg, #f51a13, #b50500); border-color: #ff534c; border-top-color: #ff8981; height: 135px; box-shadow: 0 0 35px #e1060020; }
.podium-3 .podium-base { background: linear-gradient(160deg, #30282a, #21212b); border-top-color: #af8268; height: 88px; }
.podium-place { color: #ffffff0c; font-family: var(--display); font-style: italic; font-size: 100px; font-weight: 900; }
.podium-1 .podium-place { color: #ffffff17; font-size: 119px; }
.podium-base > div { margin-left: 30px; }
.podium-base strong { font-family: var(--timing); color: white; font-style: italic; font-size: 34px; font-weight: 800; }
.podium-1 .podium-base strong { font-size: 42px; }
.podium-base small { color: #bdbdcd; font-size: 8px; letter-spacing: 2px; }
.podium-1 .podium-base small { color: #ffdad8; }
.podium-vacant { color: #a0a0b1; }
.panel { background: #181820; border-color: #2e2e3a; border-radius: 4px 15px 4px 4px; }
.points-panel .panel-heading, .latest-panel .panel-heading { padding-bottom: 16px; border-bottom: 1px solid #30303b; margin-bottom: 17px; }
.bar-chart { margin-top: 20px; }
.bar-name { color: #d2d2dd; }
.bar-row > strong { font-family: var(--timing); font-size: 15px; color: #eeeeF5; font-variant-numeric: tabular-nums; }
.bar-track { background: repeating-linear-gradient(90deg, #282833 0 calc(20% - 1px), #4a4a571f calc(20% - 1px) 20%); height: 12px; border-radius: 0 4px 0 0; }
.bar-fill { border-radius: 0 4px 0 0; position: relative; }
.bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0003, transparent); }
.latest-track { color: #a0a0b0; }
.country-tag { background: #25252f; border-color: #40404d; color: #dadade; border-radius: 2px; }
.track-name { text-transform: uppercase; font-weight: 800; font-style: italic; font-size: 30px; }
.mini-results strong { color: #d2d2dc; font-family: var(--timing); font-size: 12px; }
.mini-place { color: #a3a3b2; font-family: var(--timing); }
.table-scroll th { background: #101017; color: #a8a8b9; border-color: #333341; letter-spacing: 1px; font-size: 9px; }
.table-scroll td { border-color: #2d2d38; font-variant-numeric: tabular-nums; color: #c8c8d5; font-size: 12px; padding-top: 16px; padding-bottom: 16px; }
.table-scroll tbody tr:hover { background: #22222e; }
.driver-cell strong { color: #eeeef6; font-weight: 650; font-size: 12px; }
.standings-panel { border-top: 3px solid #e10600; }
.standings-panel tbody tr:first-child { background: linear-gradient(90deg, #e1060010, transparent); }
.rank { color: #a3a3b3; font-family: var(--timing); font-size: 15px; font-style: italic; }
.rank-1 { color: #ff574f; }
.rank-2 { color: #e1e1ec; }
.rank-3 { color: #cd9e7f; }
.points-cell strong { color: white; font-family: var(--timing); font-size: 18px; font-style: italic; }
.scoring-note { color: #9090a2; }
.demo-banner { background: #242027; border-color: #45353b; color: #d0bdc0; border-radius: 2px 10px 2px 2px; border-left: 3px solid #e10600; }
.demo-banner .quiet { color: #ff8e87; }
.empty { color: #b1b1c0; }
.empty > .icon { color: #fb514b; }
.empty h3 { color: #e0e0ea; font-style: italic; }
.home-hero { grid-template-columns: 1.03fr 1fr; gap: 32px; margin-top: 12px; margin-bottom: 50px; }
.home-hero .eyebrow { color: #b1b1bf; font-size: 9px; }
.status-dot { background: var(--red-bright); box-shadow: 0 0 10px #e1060055; border-radius: 1px; transform: skew(-20deg); }
.home-hero h1 { font-family: var(--display); font-size: clamp(43px, 4.7vw, 73px); font-style: italic; font-weight: 850; text-transform: uppercase; letter-spacing: -2.8px; line-height: 1.02; margin: 24px 0; }
.home-hero h1 em { color: #ff3029; font-style: italic; }
.home-hero p { color: #aaaabb; line-height: 1.85; }
.home-hero > .hero-art {
  height: 415px;
  border: 1px solid #373740;
  border-top: 5px solid #e10600;
  border-right: 5px solid #e10600;
  border-radius: 3px 35px 3px 3px;
  background: radial-gradient(ellipse at 65% 35%, #80180e33, transparent 65%), #16161f;
  transform: none;
  isolation: isolate;
}
.art-grid { background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 26px 26px; transform: perspective(500px) rotateX(18deg) scale(1.15); }
.art-label { color: #c1c1d0; font-family: var(--timing); top: 25px; left: 24px; font-size: 9px; letter-spacing: 2px; }
.hero-art svg { top: 10%; width: 110%; height: 78%; left: -4%; transform: rotate(-6deg); }
.hero-art svg path:first-child { stroke: #282832; }
.hero-art svg path:nth-child(2) { stroke: #ff332b; stroke-width: 4; stroke-dasharray: none; filter: drop-shadow(0 0 5px #e1060030); }
.hero-art svg path:last-child { stroke: #f8f8ff; }
.start-lights { position: absolute; top: 23px; right: 22px; display: flex; gap: 6px; }
.start-lights i { width: 12px; height: 12px; border: 2px solid #572427; border-radius: 50%; background: #fa211b; box-shadow: 0 0 10px #f5060040; }
.art-bottom { bottom: 27px; left: 24px; }
.art-bottom small { color: #a8a8b8; }
.art-bottom strong { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-style: italic; font-size: 32px; line-height: .98; }
.art-number { color: #ffffff0a; -webkit-text-stroke: 1px #f7f7ff66; font-family: var(--display); font-size: 91px; font-style: italic; font-weight: 900; line-height: .76; }
.section-head { border-top: 3px solid #4a4a57; border-right: 3px solid #4a4a57; border-radius: 0 18px 0 0; padding: 19px 18px 0 0; }
.section-head h2 { text-transform: uppercase; font-style: italic; font-weight: 800; }
.count { background: #30303b; color: #d7d7e0; border-radius: 2px; font-style: normal; }
.league-card { background: #1b1b24; border-color: #373741; border-radius: 3px 18px 3px 3px; transition: border-color .2s, transform .2s; }
.league-card:hover { border-color: #ff3832; transform: translateY(-3px); }
.league-card .league-icon { background: #332127; color: #ff8d85; border-color: #663037; }
.league-card h3 { font-weight: 750; color: white; }
.league-card p { color: #aaaab9; }
.league-card > div { border-color: #393944; color: #e0e0ea; }
.league-card > div .icon { color: #ff4b43; }
.role-pill { color: #a9a9b9; }
.join-card { background: repeating-linear-gradient(135deg, #ffffff01 0 2px, transparent 2px 7px), #17171e; }
.join-card > .icon { color: #ff4e46; }
.cookie-note { color: #9595a8; }
.search-box { background: #191921; color: #9e9eb0; border-color: #3a3a48; border-radius: 3px 9px 3px 3px; }
.search-box input { background: transparent !important; border: 0 !important; }
.race-card { border-top: 3px solid #5b3134; transition: border-color .18s; position: relative; overflow: hidden; }
.race-card:hover { border-top-color: #f32720; }
.race-top { color: #a8a8b8; }
.race-round { font-family: var(--timing); font-style: italic; font-size: 24px; font-weight: 800; color: #717185; }
.race-card h2 { text-transform: uppercase; font-style: italic; font-weight: 800; font-size: 28px; }
.race-card > p { color: #a1a1b3; }
.race-title { color: #d2d2df; }
.race-winner { border-color: #333341; }
.race-winner small { color: #aaaaBB; }
.race-winner strong { color: white; }
.race-winner > .icon { color: #d7aa5b; }
.race-footer { color: #a2a2b4; }
.track-stats > div { border-color: #2b2b36; }
.track-stats strong { color: #e0e0eb; font-family: var(--timing); }
.frequency-track { background: #2c2c38; border-radius: 1px; }
.frequency-track i { background: #ed332d; border-radius: 1px 4px 1px 1px; }
.quota-row small { color: #a1a1b4; }
.quota-row strong { font-family: var(--timing); font-style: italic; }
.rule-panel { background: #201a22; border-color: #4b2d36; border-left: 3px solid #e10600; }
.rule-panel p { color: #b1a7b9; }
.heat { color: #808097; border-radius: 2px; }
.heat.has-value { background: rgb(225 6 0 / var(--heat)); color: #fff3f2; }
.player-card { border-top: 3px solid var(--player, #e10600); border-radius: 3px 20px 3px 3px; }
.player-status { color: #aaaabc; }
.player-card h2 { text-transform: uppercase; font-style: italic; font-weight: 800; }
.player-card > p, .player-numbers span { color: #a5a5b8; }
.player-numbers strong { font-family: var(--timing); font-style: italic; font-size: 28px; }
footer { border-color: #30303c; color: #e4e4ee; font-family: var(--display); font-style: italic; font-weight: 700; }
footer span, footer button { color: #9797aa; font-style: normal; font-weight: 400; }
dialog { color: #f0f0f7; background: #1a1a23; border: 1px solid #41414f; border-top: 4px solid #e10600; border-radius: 4px 20px 4px 4px; box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #08080dbb; backdrop-filter: blur(6px); }
.modal-head h2 { color: white; font-family: var(--display); font-weight: 750; }
.modal-head p { color: #afafc0; }
.icon-button { color: #aaaabc; }
.icon-button:hover { background: #343442; color: #fefeff; }
input:not([type=checkbox]):not([type=color]), select, textarea { background: #101017; border-color: #454554; color: #ededf5; border-radius: 3px; }
input::placeholder, textarea::placeholder { color: #8d8da0; }
input[type=color] { background: #101017; border-color: #454554; }
input[type=checkbox] { accent-color: #e10600; }
input:disabled { opacity: .4; }
.field-hint, .results-heading span, .result-points small { color: #a0a0b5; }
.optional { color: #c5c5d4; border-color: #393946; }
.form-actions { border-color: #393946; }
.form-error { background: #421d25; border-color: #913e4a; color: #ffd2cd; }
.info-box { background: #25252f; color: #c3c3d2; border-left: 3px solid #e10600; border-radius: 2px; }
.result-row { border-color: #373745; }
.result-points { font-family: var(--timing); color: #f5f5ff; }
.race-notes p { color: #b0b0c4; }
.prose { color: #b6b6c7; }
.prose h3 { color: #f1f1f8; }
.prose a { color: #ff8b83; }
#toast { background: #292934; border: 1px solid #4c4c5f; border-left: 4px solid #e10600; color: #f2f2fc; box-shadow: 0 8px 30px #0006; border-radius: 3px; }
.boot { color: #f0f0f7; background: #101015; }
.boot span { color: #a5a5b7; }

@media (max-width: 1200px) {
  .home-hero { gap: 25px; }
  .home-hero > .hero-art { height: 390px; }
  .home-hero h1 { font-size: 53px; }
  .art-label { font-size: 8px; letter-spacing: 1px; }
  .start-lights { gap: 5px; right: 17px; }
  .start-lights i { width: 10px; height: 10px; }
}
@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 64px; }
  .home-hero > .hero-art { height: 300px; }
  .hero-art svg { left: 20%; width: 90%; top: -7%; height: 110%; }
  .page-head { padding-right: 16px; border-width: 4px; }
  .page-head h1 { font-size: 34px; }
  .page-head .btn { padding: 11px; font-size: 11px; }
  .podium h3 { font-size: 14px; }
  .podium-base strong { font-size: 29px; }
  .podium-1 .podium-base strong { font-size: 36px; }
  .podium-panel .panel-heading h2 { font-size: 20px; }
  .live-label { font-size: 7px; letter-spacing: .5px; }
}
@media (max-width: 680px) {
  .sidebar { padding-top: 14px; border-bottom: 1px solid #33333c; }
  .sidebar > .nav-item { color: #c4c4d5; background: #24242f; top: 13px; }
  .sidebar > .nav-item.selected { background: #e10600; color: white; }
  .sidebar nav .nav-item { border-radius: 3px; font-size: 10px; }
  .brand { font-size: 25px; }
  .brand-mark i { width: 6px; height: 22px; }
  .topbar::before { display: none; }
  .topbar { height: 52px; }
  .breadcrumb { font-size: 9px; }
  .role-badge { font-size: 8px; }
  .page-head { padding-top: 17px; border-right-width: 3px; border-top-width: 4px; border-radius: 0 18px 0 0; padding-right: 10px; }
  .page-head h1 { font-size: clamp(24px, 7.3vw, 37px); letter-spacing: -1px; }
  .page-head .eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .page-head > div > .btn { font-size: 0; padding: 9px; margin-top: 14px; }
  .metric-strip { padding: 19px 0; }
  .metric-strip strong { font-size: 29px; }
  .metric-strip span { font-size: 7px; }
  .podium-panel { padding-top: 21px; border-radius: 3px 20px 3px 3px; }
  .podium-panel .eyebrow { font-size: 7px; letter-spacing: 1.3px; }
  .podium-panel .panel-heading { gap: 8px; }
  .podium-panel .panel-heading h2 { font-size: 17px; }
  .live-label { padding: 5px; font-size: 6px; letter-spacing: 0; }
  .podium { gap: 8px; margin-top: 38px; }
  .podium h3 { font-size: 11px; min-height: 28px; }
  .podium p { font-size: 8px; }
  .podium-base { height: 91px; }
  .podium-1 .podium-base { height: 113px; }
  .podium-3 .podium-base { height: 78px; }
  .podium-base > div { margin-left: 8px; }
  .podium-base strong { font-size: 27px; }
  .podium-1 .podium-base strong { font-size: 33px; }
  .podium-base small { font-size: 6px; letter-spacing: 1px; }
  .podium-place { font-size: 72px; left: 0; }
  .podium-1 .podium-place { font-size: 86px; }
  .panel-heading h2 { font-size: 17px; }
  .home-hero h1 { font-size: clamp(43px, 12vw, 67px); letter-spacing: -2px; }
  .home-hero .eyebrow { font-size: 8px; }
  .home-hero > .hero-art { height: 290px; border-radius: 3px 27px 3px 3px; }
  .hero-art svg { width: 110%; height: 97%; left: 0; top: 0; }
  .art-bottom strong { font-size: 28px; }
  .art-number { font-size: 77px; }
  .section-head { padding-top: 17px; padding-right: 9px; gap: 10px; }
  .section-head > .muted { max-width: 92px; text-align: right; line-height: 1.6; }
  .section-head h2 { font-size: 22px; }
  .join-card h3 { font-size: 18px; }
  .player-card h2 { font-size: 19px; }
  .player-numbers strong { font-size: 24px; }
  .table-scroll td { font-size: 11px; }
  .driver-cell strong { font-size: 11px; }
  .rank { font-size: 13px; }
  .points-cell strong { font-size: 16px; }
  .form-actions .btn { min-height: 44px; }
  .icon-button { min-height: 32px; }
}