:root {
  /* Brand */
  --c-red: #e10600;
  --c-red-dark: #a00000;
  --c-amber: #f5a623;
  --c-teal: #00d4aa;
  --c-blue: #4a9eff;
  --c-purple: #b87fff;

  /* Backgrounds */
  --bg-header: #0c0b0a;
  --bg-base: #111010;
  --bg-table: #141210;
  --bg-card: #1e1d1b;
  --bg-panel: #222120;

  /* Borders */
  --bdr: #2e2b27;
  --bdr-light: #3c3835;

  /* Text */
  --txt-bright: #f0ede8;
  --txt-mid: #a09890;
  --txt-muted: #7a7168;
  --txt-faint: #635e58;
  --txt-dim: #504c48;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* F1 Professional Table Style for Qualifying Card */
.f1-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  margin-top: 10px;
}

.f1-qualifying-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  background: var(--bg-table);
  color: var(--txt-bright);
  font-size: 0.88rem;
}

.f1-qualifying-table thead tr {
  background: linear-gradient(90deg, var(--c-red) 0%, var(--c-red-dark) 100%);
}

.f1-qualifying-table th {
  color: #fff;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 10px;
  border: none;
  white-space: nowrap;
  text-align: left;
}

/* Race Results section: subtle header matching the rest of the app */
.race-inline-detail .f1-qualifying-table thead tr {
  background: var(--bg-panel);
  border-bottom: 1px solid
    color-mix(in srgb, var(--league-accent, var(--bdr)) 45%, var(--bdr));
}
/* Leagues view: accent-tinted header + row hover inside the expanded table */
#lo-detail-wrap .race-inline-detail .f1-qualifying-table thead tr {
  background: color-mix(
    in srgb,
    var(--league-accent, transparent) 6%,
    var(--bg-panel)
  );
}
#lo-detail-wrap .race-inline-detail .f1-qualifying-table tbody tr:hover {
  background: color-mix(in srgb, var(--league-accent, #252220) 8%, #252220);
}
.race-inline-detail .f1-qualifying-table th {
  font-family: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: var(--txt-muted) !important;
  letter-spacing: 0.08em;
  padding: 5px 10px;
}

.f1-qualifying-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bg-card);
  border-left: none;
  border-right: none;
  color: #ccc5bb;
  white-space: nowrap;
}

.f1-qualifying-table td:first-child {
  color: #fff;
  font-weight: 600;
}

.f1-qualifying-table tbody tr {
  background: var(--bg-table);
}

.f1-qualifying-table tbody tr:hover {
  background: #252220;
  transition: background 0.2s ease;
}

.f1-qualifying-table tbody tr:first-child td {
  padding-top: 14px !important;
}

.f1-qualifying-table thead tr:last-child th {
  padding-bottom: 14px !important;
}

.f1-qualifying-table tbody tr:last-child td {
  border-bottom: none;
}

.f1-table-title {
  font-family: "Segoe UI", "Arial", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.f1-table-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--c-red);
  border-radius: 2px;
}
body {
  font-family: "Arial", sans-serif;
  background: linear-gradient(135deg, var(--bg-base) 0%, #1c1a18 100%);
  min-height: 100vh;
  color: white;
  padding: 0;
}

/* ── App Header ──────────────────────────────────────────────────────────── */
.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--bg-header);
  border-bottom: 2px solid var(--c-red);
  padding: 0 10px;
  height: 62px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.app-header-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 30px;
}

.app-logo-img {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.app-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-logo-title {
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  line-height: 1;
}

.app-logo-sub {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--c-amber);
  line-height: 1;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
/* Profile drawer tab and its backdrop: desktop shows the sidebar as a column, so
   both stay hidden here. The ≤1200px block turns them into the drawer. */
.sidebar-toggle,
.sidebar-scrim {
  display: none;
}

.app-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  height: 100%;
}

.nav-tab {
  background: none;
  border: none;
  border-top: 2px solid transparent;
  color: var(--txt-dim);
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 22px;
  height: 100%;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}

.nav-tab:hover {
  color: var(--txt-mid);
  background: #ffffff07;
}

.nav-tab.active {
  color: #fff;
  border-top-color: var(--c-amber);
  background: #ffffff0d;
}

/* ── Header user area (login bar) ────────────────────────────────────────── */
.app-header-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-left: 16px;
}
.login-bar-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-bar-session {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-transform: uppercase;
  transition: color 0.3s;
}
.login-bar-session-label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.login-bar-session-time {
  color: #888;
}
.app-header-user:hover .login-bar-session {
  color: #888;
}
@keyframes session-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.login-bar-session-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
  animation: session-pulse 3s ease-in-out infinite;
}

/* ── Registration warning bar ──────────────────────────────────────────────── */
.reg-warning-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  background: rgba(245, 166, 35, 0.07);
  border-bottom: 1px solid rgba(245, 166, 35, 0.22);
  color: var(--c-amber);
  font-size: 0.74rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.05em;
  animation: fadeInDown 0.2s ease;
}
.reg-warning-bar-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  opacity: 0.9;
}
.reg-warning-bar-text {
  flex: 1;
}
.reg-warning-bar-close {
  background: none;
  border: 1px solid rgba(245, 166, 35, 0.25);
  color: var(--c-amber);
  opacity: 0.55;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 3px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.reg-warning-bar-close:hover {
  opacity: 1;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  max-width: 1700px;
  margin: 0 auto;
  padding: 24px 20px;
  align-items: start;
  transition: grid-template-columns 0.22s ease;
}
/* The collapsed grid (36px rail) lives with the rest of the collapse feature in
   the ≥1201px block below. */

/* Profile card collapse button */
.sidebar-collapse-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--txt-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  transition:
    background 0.15s,
    color 0.15s;
}
.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Collapsed state: hide everything in the card except the toggle.
   Desktop only — the ‹ button does not exist below 1200px, where the card is a
   drawer instead. The collapsed flag is remembered in localStorage per origin, so
   without this bound it followed the user onto a tablet and `display: none
   !important` emptied the drawer while it still slid in and out. */
@media (min-width: 1201px) {
  .main-content.sidebar-collapsed {
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }
  .sidebar-collapsed .car-card {
    padding: 8px 4px;
    border-radius: 10px;
    overflow: hidden;
  }
  .sidebar-collapsed .car-card > *:not(.sidebar-collapse-btn) {
    display: none !important;
  }
  .sidebar-collapsed .sidebar-collapse-btn {
    position: relative;
    top: auto;
    right: auto;
    margin: 2px auto 0;
    width: 24px;
    height: 24px;
  }
}

/* ── Wide-screen layout (only active when content is actually capped at 1700px) */
@media (min-width: 1701px) {
  /* Decorative rails: darker outer zones + thin red accent line at content boundary */
  body {
    background:
      linear-gradient(
        90deg,
        #080706 0,
        #080706 calc(50% - 851px),
        rgba(225, 6, 0, 0.22) calc(50% - 851px),
        rgba(225, 6, 0, 0.22) calc(50% - 849px),
        transparent calc(50% - 849px),
        transparent calc(50% + 849px),
        rgba(225, 6, 0, 0.22) calc(50% + 849px),
        rgba(225, 6, 0, 0.22) calc(50% + 851px),
        #080706 calc(50% + 851px),
        #080706 100%
      ),
      linear-gradient(135deg, var(--bg-base) 0%, #1c1a18 100%);
  }
  /* Align header logo/user with content edges */
  .app-header {
    padding: 0 calc((100% - 1700px) / 2 + 24px);
  }
  /* Add comfortable horizontal gutter inside the content box */
  .main-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── 4K layout (≥2560px) — wider content box, scaled sidebar, textured rails */
@media (min-width: 2560px) {
  .main-content {
    max-width: 2100px;
    grid-template-columns: 360px 1fr;
    gap: 36px;
  }
  /* Re-align header to the new 2100px content width */
  .app-header {
    padding: 0 calc((100% - 2100px) / 2 + 24px);
  }
  /* Update rail lines + add diagonal texture to the now-wider rail zones */
  body {
    background:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 16px,
        rgba(255, 255, 255, 0.013) 16px,
        rgba(255, 255, 255, 0.013) 17px
      ),
      linear-gradient(
        90deg,
        #080706 0,
        #080706 calc(50% - 1051px),
        rgba(225, 6, 0, 0.22) calc(50% - 1051px),
        rgba(225, 6, 0, 0.22) calc(50% - 1049px),
        transparent calc(50% - 1049px),
        transparent calc(50% + 1049px),
        rgba(225, 6, 0, 0.22) calc(50% + 1049px),
        rgba(225, 6, 0, 0.22) calc(50% + 1051px),
        #080706 calc(50% + 1051px),
        #080706 100%
      ),
      linear-gradient(135deg, var(--bg-base) 0%, #1c1a18 100%);
  }
}

/* Guest (not logged in): no sidebar column, content fills full width. The
   second selector wins even when a stale `sidebar-collapsed` state is restored
   from localStorage — otherwise the collapsed grid (36px 1fr) would crush the
   content into the tiny first column. */
.main-content--guest,
.main-content--guest.sidebar-collapsed {
  grid-template-columns: 1fr;
}

.main-content--guest .left-sidebar {
  display: none;
}

@keyframes sidebarSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.left-sidebar--reveal {
  animation: sidebarSlideIn 0.18s ease forwards;
}

.telemetry-data {
  min-width: 0;
  width: 100%;
}

.left-sidebar {
  position: sticky;
  top: 86px;
  height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.left-sidebar::-webkit-scrollbar {
  width: 4px;
}
.left-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.left-sidebar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.car-card {
  background: linear-gradient(135deg, var(--bg-base) 0%, #1c1a18 100%);
  border-radius: 20px;
  padding: 12px;
  position: relative;
  height: fit-content;
}

.car-number {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.car-position {
  position: absolute;
  top: 80px;
  left: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #b03b3b;
}

.car-image {
  width: 200px;
  height: 150px;
  border-radius: 10px;
  margin: 20px auto;
  display: block;
  overflow: hidden;
}

.car-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.car-driver {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.car-setup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.team-colors {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.team-color {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.telemetry-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.telemetry-card {
  background: var(--bg-card);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid var(--bdr-light);
}

.telemetry-card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: var(--c-amber);
  display: flex;
  align-items: center;
  gap: 10px;
}

.trend-positive {
  color: #f5c842;
  font-size: 1.2rem;
}

.current-laptime {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.sector-times {
  list-style: none;
}

.sector-times li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bdr-light);
}

.sector-best {
  font-size: 1.2rem;
}

.sector-normal {
  font-size: 1.2rem;
}

.laptime-list {
  list-style: none;
}

.lap-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr-light);
}

.lap-number {
  font-weight: bold;
}

.compound {
  color: var(--txt-muted);
  font-size: 0.92rem;
}

.lap-time {
  font-weight: bold;
  font-family: "Courier New", monospace;
}

.bottom-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.info-card {
  background: var(--bg-card);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid var(--bdr-light);
  text-align: center;
}

.info-card h4 {
  color: var(--c-amber);
  margin-bottom: 10px;
}

.info-value {
  font-size: 1.65rem;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.btn-primary {
  background: var(--c-amber);
  color: #000;
}

.btn-secondary {
  background: var(--bdr);
  color: white;
  border: 1px solid var(--txt-faint);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Race Results List */
.race-list-table tbody .race-result-row {
  cursor: pointer;
}

.race-list-table tbody .race-result-row:hover {
  background: #302d2a !important;
}

.race-list-table tbody .race-result-row.selected {
  background: color-mix(
    in srgb,
    var(--league-accent, var(--c-amber)) 9%,
    transparent
  ) !important;
}

.race-list-table tbody .race-result-row.selected td:first-child {
  border-left-color: var(--league-accent, var(--c-amber));
}

.race-list-table .fastest-lap-time {
  font-family: "Courier New", monospace;
  color: var(--league-accent, var(--c-amber));
  font-weight: 700;
}

.race-list-table .row-arrow {
  color: var(--txt-dim);
  font-size: 1.3rem;
  font-weight: 300;
  text-align: right;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.race-list-table tbody .race-result-row:hover .row-arrow {
  color: var(--league-accent, var(--c-amber));
}

.race-list-table tbody .race-result-row.selected .row-arrow {
  color: var(--league-accent, var(--c-amber));
}

.race-list-table .race-list-winner {
  min-width: 130px;
}
/* Race-report marker sits at the far right of the row, before the caret */
.race-list-table .row-arrow .lo-report-flag {
  font-size: 1rem;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

/* Accent-tinted body to match the Drivers' Standings card. */
#lo-detail-wrap .race-list-table tbody tr {
  background: color-mix(
    in srgb,
    var(--league-accent, transparent) 7%,
    var(--bg-panel)
  );
}

/* Distinct header bar for the Upcoming Events + Race Results tables — a stronger
   league-accent tint with a bright accent underline, so the header stands out
   from the light table body. */
#lo-detail-wrap .race-list-table thead tr,
#lo-detail-wrap .lo-upcoming-table thead tr {
  background: color-mix(
    in srgb,
    var(--league-accent, var(--bdr)) 24%,
    var(--bg-panel)
  );
  border-bottom: 2px solid
    color-mix(in srgb, var(--league-accent, var(--bdr)) 60%, var(--bdr));
}
#lo-detail-wrap .race-list-table thead th,
#lo-detail-wrap .lo-upcoming-table thead th {
  color: #f3efe9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
   RACE RESULTS — expandable leaderboard  (inside .race-inline-detail)

   Race  columns:  Pos · # · Nat · Driver · Logo · Team · Grid · Race Time ·
                   Pen · Best Lap · FL · Stops · Pts
   Quali columns:  Pos · # · Nat · Driver · Logo · Team · Best Lap · Tyre ·
                   S1 · S2 · S3 · Laps

   • Header alignment is set inline on each <th> in league_overview.js.
   • Body alignment + sizing live entirely in this block.
   • Scoped to .race-inline-detail so the Standings tables (.lg-table.lb-table)
     are never affected. The 3-class specificity beats every base rule, so
     NO !important and NO positional :nth-child selectors are needed.
   ════════════════════════════════════════════════════════════════════════ */

/* Uniform cell rhythm */
.race-inline-detail .lb-table th,
.race-inline-detail .lb-table td {
  padding: 8px 12px;
  vertical-align: middle;
  border: none;
}

/* Compact columns — shrink to their content and center */
.race-inline-detail .lb-table .lb-pos,
.race-inline-detail .lb-table .lb-car-num,
.race-inline-detail .lb-table .lb-nat,
.race-inline-detail .lb-table .lb-team-logo-cell,
.race-inline-detail .lb-table .lb-grid,
.race-inline-detail .lb-table .lb-time,
.race-inline-detail .lb-table .lg-pen-cell,
.race-inline-detail .lb-table .lb-best-lap,
.race-inline-detail .lb-table .lb-fl,
.race-inline-detail .lb-table .lb-fp,
.race-inline-detail .lb-table .lb-pits,
.race-inline-detail .lb-table .lb-pts,
.race-inline-detail .lb-table .lb-tyre,
.race-inline-detail .lb-table .lb-sector,
.race-inline-detail .lb-table .lb-topspeed,
.race-inline-detail .lb-table .lb-laps {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* Flexible columns — Driver and Team absorb the remaining width */
.race-inline-detail .lb-table .lb-driver,
.race-inline-detail .lb-table .lb-team {
  width: auto;
  text-align: left;
  white-space: nowrap;
}
.race-inline-detail .lb-table .lb-team {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nationality flag — a little extra side room */
.race-inline-detail .lb-table .lb-nat {
  padding-left: 14px;
  padding-right: 14px;
}
/* Team logo — extra gap on the right, before the team name */
.race-inline-detail .lb-table .lb-team-logo-cell {
  padding-left: 20px;
  padding-right: 32px;
  min-width: 70px;
}

/* Driver cell: accent bar + name + abbr on one baseline */
.race-inline-detail .lb-table .lb-driver {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Team color bar — vertically centered in the row, 5px clear on each side */
.race-inline-detail .lb-table .lb-driver .lg-team-accent {
  align-self: center;
  margin-left: 5px;
  margin-right: 5px;
}

.lb-team-logo-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.race-list-hint {
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--league-accent, var(--c-amber));
  margin: 10px 0 6px 2px;
  opacity: 0.8;
}

/* Leaderboard table */
.lb-table-wrapper {
  margin-top: 14px;
}

.lb-table td {
  border-bottom: none;
}
.lb-table td:first-child {
  border-left: none;
}
.lb-table th:first-child {
  border-left: none;
}
.lb-table th:first-child,
.lb-table td:first-child {
  padding-left: 16px;
}
.lb-table th,
.lb-table td {
  text-align: left;
  padding-left: 12px;
  padding-right: 12px;
}
/* Header alignment is set inline on each <th> in league_overview.js, and body
   cells align via their own classes (lb-pos, lb-nat, lb-team, lb-best-lap …).
   No positional nth-child rules — they break when columns are inserted. */

.lb-table .lb-pos {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.lb-table .pos-gold {
  color: #ffd700;
}
.lb-table .pos-silver {
  color: #c0c0c0;
}
.lb-table .pos-bronze {
  color: #cd7f32;
}
.lb-table .lb-status-dnf {
  color: #ff6b6b;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lb-table .lb-status-dns {
  color: #888;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lb-table .lb-status-dsq {
  color: #f5a623;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lb-table .lb-row-out {
  opacity: 0.6;
}
.lb-penalty {
  font-size: 0.72rem;
  color: #f5a623;
  letter-spacing: 0.03em;
  margin-left: 4px;
}

.lb-table .lb-car-num {
  font-weight: 700;
  color: var(--txt-mid);
  text-align: center;
}

.lb-table .lb-driver {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.lb-team-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lb-driver-name {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.lb-driver-abbr {
  color: var(--txt-faint);
  font-size: 0.78rem;
}

.lb-table .lb-team {
  color: #b0a89f;
  font-size: 0.85rem;
}

.lb-table .lb-grid {
  font-family: "Courier New", monospace;
  color: var(--txt-mid);
  white-space: nowrap;
}
.grid-pos-num {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.grid-gain {
  display: inline-block;
  min-width: 3ch;
  color: #2ecc71;
  font-size: 0.8rem;
  margin-left: 4px;
}
.grid-loss {
  display: inline-block;
  min-width: 3ch;
  color: var(--c-red);
  font-size: 0.8rem;
  margin-left: 4px;
}
.grid-same {
  display: inline-block;
  min-width: 3ch;
  color: var(--txt-dim);
  font-size: 0.8rem;
  margin-left: 4px;
}

.lb-table .lb-time {
  font-family: "Courier New", monospace;
  color: #ccc5bb;
  white-space: nowrap;
  text-align: center;
}

.lb-table .lb-best-lap {
  font-family: "Courier New", monospace;
  color: var(--txt-mid);
  white-space: nowrap;
  text-align: center;
}

.lb-table .lb-best-lap.lb-fastest {
  color: var(--c-purple);
  font-weight: 700;
}
.lg-fl-highlight {
  color: var(--c-purple) !important;
  font-weight: 700;
}

.fastest-lap-mark {
  color: var(--c-purple);
  margin-right: 4px;
  font-size: 0.7rem;
  vertical-align: middle;
}

.lb-table .lb-fl {
  text-align: center;
}
.lb-fl-badge {
  font-size: 0.75rem;
  color: var(--c-purple);
}
.lb-xpt-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #50c878;
}
/* Fair Play medal marker (results + leaderboard FP column). FL and FP share a
   min-width so the two columns are exactly the same size. */
.lb-fp,
.lo-sc-fp {
  text-align: center;
  white-space: nowrap;
}
.race-inline-detail .lb-table .lb-fl,
.race-inline-detail .lb-table .lb-fp {
  min-width: 46px;
}
/* Fair Play points input in the league settings form */
.lg-fp-pts {
  margin: 0 4px;
}
.lg-fp-pts:disabled {
  opacity: 0.4;
}
.lb-table .lb-pits {
  text-align: center;
  color: var(--txt-muted);
}

.lb-table .lb-pen {
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: #f5a623;
}

.lb-table .lb-pts {
  text-align: center;
  font-weight: 700;
  color: #fff;
}

/* Inline detail expansion row */
.race-detail-row td {
  padding: 0 !important;
  border-bottom: none !important;
}

/* Race Results expanded — three panels in ONE row: info · track · weather */
/* Double class to beat the later `.race-inline-header { flex-direction: column }` */
.race-inline-header.race-inline-header--bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

/* ── Left group: info block + track map, track matches block height ── */
.race-inline-left-group {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

/* ── Info block (left) — no card, no border ── */
.race-inline-header-text {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.race-inline-session-label {
  font-size: 2.88rem;
  font-weight: 800;
  color: #f3efe9;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Track name highlighted, like the GP title in the Next Event card */
.race-inline-track-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.64rem;
  font-weight: 700;
  color: #e8e3db;
  line-height: 1.2;
  white-space: nowrap;
}
.race-inline-track-name .fi {
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.race-inline-meta {
  font-size: 1.21rem;
  font-weight: 600;
  color: var(--txt-muted);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
  margin-top: 2px;
}

/* ── Track map — square, ~half the block height ── */
.lov-result-track-card {
  flex: 0 0 auto;
  align-self: center;
  width: 101px;
  height: 101px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lov-result-track-map {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(225, 6, 0, 0.45));
}

/* ── Weather (right) — static chips, no expand button ── */
.lo-wx-chips-static {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lo-wx-chips-static .lo-wx-chips {
  gap: 5px;
}
/* Each chip a fixed, narrow width (≈20% smaller than the prior compact size) */
.lo-wx-chips-static .lo-wx-chip {
  flex: 0 0 64px;
  width: 64px;
  min-width: 0;
  gap: 4px;
  padding: 8px 6px 7px;
  border-radius: 8px;
}
/* Weather chips — scaled element sizes */
.lo-wx-chips-static .lo-wx-chip-when {
  font-size: 0.5rem;
  padding: 1px 6px;
}
.lo-wx-chips-static .lo-wx-chip-sym {
  font-size: 1.32rem;
}
.lo-wx-chips-static .lo-wx-chip-cond {
  font-size: 0.64rem;
}
.lo-wx-chips-static .lo-wx-chip-track {
  font-size: 0.68rem;
}
.lo-wx-chips-static .lo-wx-chip-air {
  font-size: 0.55rem;
}
.lo-wx-chips-static .lo-wx-chip-rainbar {
  height: 3px;
}
.lo-wx-chips-static .lo-wx-chip-rainval {
  font-size: 0.51rem;
}
.lo-wx-chips-static .lo-wx-label {
  font-size: 0.61rem;
}

.race-inline-detail {
  padding: 16px 20px 20px;
  /* Accent-tinted background to match the other league cards. */
  background: color-mix(
    in srgb,
    var(--league-accent, transparent) 7%,
    var(--bg-panel)
  );
  border-left: 3px solid var(--league-accent, transparent);
  animation: fadeInUp 0.2s ease;
}

.race-inline-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--league-accent, var(--bdr)) 45%, var(--bdr));
}

.race-list-uploader {
  font-size: 0.78rem;
  color: var(--txt-muted);
}

.race-detail-uploader {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: var(--txt-muted);
  cursor: help;
}

.race-detail-delete-btn {
  margin-left: auto;
  padding: 5px 14px;
  background: transparent;
  color: #e05252;
  border: 1px solid #6b2e2e;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.race-detail-delete-btn:hover {
  background: rgba(224, 82, 82, 0.12);
  border-color: #c44;
  color: #ff7070;
}

/* Race Detail Card */
.race-detail-placeholder {
  grid-column: 1 / -1;
  color: var(--txt-dim);
  text-align: center;
  padding: 28px;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px dashed var(--bdr);
  border-radius: 12px;
}

.race-detail-card {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border-radius: 15px;
  border: 1px solid var(--bdr-light);
  padding: 20px 24px;
  animation: fadeInUp 0.15s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.race-detail-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c-red);
  flex-wrap: wrap;
}

/* Big session title (RACE / QUALIFYING / RACE 2 …) */
.race-detail-session {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

/* Small grey detail line: flag · track · round · laps · date */
.race-detail-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--txt-muted);
  letter-spacing: 0.3px;
}
.race-detail-track-wrap {
  display: inline-flex;
  align-items: center;
}
.race-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.race-detail-track {
  font-weight: 600;
  color: #ccc5bb;
}
/* Track home-country flag — small framed rectangle before the track name */
.race-detail-flag {
  width: 22px;
  height: 16px;
  margin-right: 6px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}
.race-detail-sep {
  color: var(--txt-dim);
  opacity: 0.7;
}

.race-detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.race-detail-meta-row .race-detail-meta {
  flex: 1;
  min-width: 0;
}
.race-detail-weather {
  font-size: 0.8rem;
  color: var(--txt-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.race-detail-weather .rdw-text {
  color: var(--c-blue);
  font-weight: 600;
}

.race-detail-weather .rdw-sep,
.race-inline-footer .foot-sep {
  margin: 0 7px;
  color: var(--txt-dim);
}

.race-inline-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bdr);
  font-size: 0.8rem;
  color: var(--txt-muted);
  letter-spacing: 0.3px;
}

.race-inline-footer .foot-fl {
  color: var(--c-purple);
  font-weight: 600;
}

.race-inline-footer .foot-sub {
  color: var(--txt-faint);
}
.race-inline-footer .foot-sector {
  color: var(--c-amber);
  font-weight: 600;
}

.race-inline-meta {
  margin-top: 8px;
  text-align: right;
  font-size: 0.7rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
}

.race-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.race-detail-section {
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--bdr);
}

.race-detail-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt-faint);
  margin-bottom: 7px;
}

.race-detail-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.race-detail-stat-value.highlight {
  color: var(--c-amber);
  font-family: "Courier New", monospace;
}

.race-detail-stat-value.speed {
  color: #fbbf24;
}

.race-detail-stat-value.sector {
  color: #a78bfa;
  font-family: "Courier New", monospace;
}

.race-detail-stat-value.weather {
  font-size: 1.1rem;
}

.race-detail-stat-label {
  font-size: 0.84rem;
  color: #756f69;
}

@media (max-width: 900px) {
  .race-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .race-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  /* The card is a drawer here, so the page is a single column. (The desktop
     "collapsed" grid is scoped to ≥1201px, so it can no longer leak in.) */
  .main-content,
  .market-section {
    grid-template-columns: 1fr;
  }
  /* Profile card is shown/hidden by the red tab here, so the desktop "‹"
     collapse button is redundant. */
  .sidebar-collapse-btn {
    display: none;
  }
  /* bottom-section keeps 3 columns down to sm — see responsive block below */

  /* ── Profile card as a left drawer ───────────────────────────────────────
     Below 1200px the card slides in over the page from the left edge instead of
     sitting in a column: the red tab opens it, the scrim / Esc / the tab closes
     it. It is `fixed`, so it never takes part in the grid and never pushes the
     tab content around. Kept in the flow-free layer (not `display: none`) so the
     slide can animate in both directions.
     This is the single place the drawer geometry is defined — the ≤1024 / ≤767
     blocks used to re-declare position, height and overflow, and disagreeing
     copies are what put a blank band above the card. */
  .left-sidebar {
    position: fixed;
    left: 0;
    top: 86px;
    bottom: 0;
    z-index: 320;
    width: min(640px, 94vw);
    height: auto;
    max-height: none;
    padding: 10px 12px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-base);
    border-right: 1px solid var(--bdr);
    border-bottom: none;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.55);
    visibility: hidden;
    transform: translateX(-102%);
    transition:
      transform 0.24s ease,
      visibility 0.24s;
  }
  .left-sidebar.is-open {
    visibility: visible;
    transform: translateX(0);
  }
  /* Dimmed backdrop — click anywhere on it to close */
  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.24s ease,
      visibility 0.24s;
  }
  .sidebar-scrim.is-open {
    opacity: 1;
    visibility: visible;
  }
  /* Don't scroll the page behind an open drawer */
  body.sidebar-drawer-open {
    overflow: hidden;
  }
  .sidebar-toggle {
    display: block;
    position: fixed;
    left: 0;
    top: 106px;
    width: 10px;
    height: 44px;
    padding: 0;
    background: var(--c-red);
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    z-index: 330;
    overflow: hidden;
    opacity: 0.7;
    transition:
      width 0.15s ease,
      opacity 0.15s,
      left 0.24s ease;
  }
  .sidebar-toggle svg {
    display: none;
  }
  .sidebar-toggle:hover,
  .sidebar-toggle[aria-expanded="true"] {
    width: 14px;
    opacity: 1;
  }
  /* The tab rides the drawer's edge, so it still closes what it opened. Animated
     with `left`, not `translateX()` — a `min()` inside `translateX()` resolves to
     0 in Chrome, so the tab silently stayed put. */
  body.sidebar-drawer-open .sidebar-toggle {
    left: min(640px, 94vw);
  }
}

/* ── Drawer content spreads across the drawer's width ────────────────────────
   The drawer is wider than the 320px desktop column, so the card's blocks lay
   out in as many ~280px columns as fit — two on a tablet, one on a phone —
   instead of one tall stack with the rest of the width left blank. */
@media (max-width: 1200px) {
  .left-sidebar.is-open .car-card {
    padding: 12px 16px;
  }
  .left-sidebar.is-open .profile-zone-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 22px;
    align-items: start;
  }
  /* Identity row keeps its own full-width line above the columns */
  .left-sidebar.is-open .profile-avatar-row {
    margin-bottom: 12px;
  }
  /* The stacked spacing (margins between sections) is redundant once the blocks
     sit side by side — the grid gap separates them. */
  .left-sidebar.is-open .profile-team-memberships,
  .left-sidebar.is-open .profile-last-races,
  .left-sidebar.is-open .profile-next-races {
    margin-top: 0;
  }
  .left-sidebar.is-open .profile-roles,
  .left-sidebar.is-open .profile-team-bar,
  .left-sidebar.is-open .profile-team-bar:last-of-type {
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   LEAGUE RACING
   ══════════════════════════════════════════════════════════════ */

.league-card {
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow-x: hidden;
}

/* Header */
.league-card-header {
  padding: 14px 18px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.lg-header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-header-logo {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ── League header banner (background image behind the header content) ── */
.lg-header-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Scrim keeps the title/meta legible over any banner, in both themes */
.lg-header-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.58) 45%,
    rgba(0, 0, 0, 0.32) 100%
  );
}
.league-card-header--bannered > .lg-header-main,
.league-card-header--bannered > .lg-header-logo {
  position: relative;
  z-index: 1;
}
.league-card-header--bannered .league-name,
.league-card-header--bannered .lg-meta-item,
.league-card-header--bannered .lg-hf-creator,
.league-card-header--bannered .lg-hf-creator strong,
.league-card-header--bannered .lg-header-subtitle {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Optional free-text tagline under the league name */
.lg-header-subtitle {
  font-size: 26px; /* 60% of the 30px league-name font */
  font-weight: 500;
  color: var(--txt-mid);
  margin-top: -2px;
  line-height: 1.3;
}
/* Leagues overview hero: sub-header in the league accent colour, italic.
   Higher specificity than the bannered-white rule so it wins over a banner. */
.lo-hero-card .league-card-header .lg-header-subtitle {
  color: var(--league-accent, var(--txt-mid));
  font-style: italic;
}

/* Banner picker — small control sitting just left of the logo */
.lg-banner-ctrl {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  gap: 4px;
  padding: 8px 10px;
}
.lg-banner-btn,
.lg-banner-remove {
  font: inherit;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--bdr);
  background: var(--bg-table);
  color: var(--txt-bright);
  cursor: pointer;
  white-space: nowrap;
}
.lg-banner-btn {
  font-size: 0.72rem;
  padding: 6px 10px;
}
.lg-banner-btn:hover,
.lg-banner-remove:hover {
  border-color: var(--league-accent, #888);
}
/* Delete = symbol-only square button right beside "Banner" */
.lg-banner-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 0.72rem;
  color: #e05b5b;
}
.lg-banner-remove:hover {
  border-color: #e05b5b;
  background: rgba(224, 91, 91, 0.12);
}

/* Manage Leagues: logo fills height of left content, flush to right edge */
.lg-wrapper .league-card-header {
  padding-right: 0;
  overflow: hidden;
}
.lg-wrapper .lg-header-logo {
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  width: auto;
  gap: 0;
  overflow: hidden;
}
/* Meta column: creator + code, right-aligned at the bottom of the header */
.lg-logo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 8px 12px 0;
}
.lg-hf-creator {
  font-size: 0.72rem;
  color: var(--txt-muted);
  white-space: nowrap;
}
.lg-hf-creator strong {
  color: var(--txt);
  font-weight: 600;
}
/* Code button inline (not absolute) inside the meta column */
.lg-wrapper .lg-header-code {
  position: static;
}
/* Logo image: fills full header height, flush right */
.lg-wrapper .lg-logo-area {
  width: 88px;
  height: auto;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 0;
}
.lg-wrapper .lg-logo-img {
  object-fit: cover;
}
.lg-wrapper .lg-logo-area--empty {
  border-radius: 0;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.18);
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
}

.lg-logo-area {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.lg-logo-area[data-action] {
  cursor: pointer;
}
.lg-logo-area--empty {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-logo-area--readonly {
  cursor: default;
}
.lg-logo-placeholder-icon {
  font-size: 1.4rem;
  opacity: 0.5;
  pointer-events: none;
}
.lg-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lg-logo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 1.2rem;
  color: #fff;
  pointer-events: none;
}
.lg-logo-area[data-action]:hover .lg-logo-overlay {
  opacity: 1;
}
.lg-logo-area[data-action]:hover.lg-logo-area--empty {
  background: rgba(255, 255, 255, 0.12);
}
.lg-logo-code {
  display: none;
}
.lg-header-code {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: rgba(245, 166, 35, 0.67);
  letter-spacing: 0.12em;
  background: none;
  border: 1px solid rgba(245, 166, 35, 0.16);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  user-select: all;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.lg-header-code:hover {
  color: var(--c-amber);
  border-color: rgba(245, 166, 35, 0.4);
  background: rgba(245, 166, 35, 0.05);
}
.lg-header-code--copied {
  color: var(--c-teal) !important;
  border-color: rgba(0, 212, 170, 0.4) !important;
  background: rgba(0, 212, 170, 0.05) !important;
}
/* ── Proxy Managers ─────────────────────────────────────────────────────── */
.lg-header-mgmt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.lg-proxy-toggle-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--bdr-light);
  color: var(--txt-mid);
  font-size: 0.86rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-proxy-toggle-btn:hover {
  border-color: #5b9bd5;
  color: #5b9bd5;
}
.lg-visibility-btn {
  background: none;
  border: 1px solid #2e2e2e;
  color: #555;
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-visibility-btn:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.lg-visibility-btn--public {
  color: var(--c-teal);
  border-color: #00d4aa44;
}

/* Season-completed checkbox toggle (sits inline with the mgmt buttons) */
.lg-season-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #2e2e2e;
  color: #666;
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-season-toggle:hover {
  border-color: #f6e05e;
  color: #f6e05e;
}
.lg-season-toggle--on {
  color: #f6e05e;
  border-color: #f6e05e55;
}
.lg-season-checkbox {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: #f6e05e;
}
.lg-season-toggle-label {
  white-space: nowrap;
}

.lg-accent-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.68rem;
  color: #666;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-accent-btn:hover {
  border-color: #888;
  color: #aaa;
}
.lg-accent-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.lg-accent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lg-cancel-league-btn {
  background: transparent;
  border: 1px solid rgba(224, 96, 96, 0.4);
  color: #e06060;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lg-cancel-league-btn:hover:not(:disabled) {
  background: rgba(224, 96, 96, 0.12);
  border-color: #e06060;
}
.lg-archive-league-btn {
  background: transparent;
  border: 1px solid rgba(136, 136, 136, 0.4);
  color: #888;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lg-archive-league-btn:hover:not(:disabled) {
  background: rgba(136, 136, 136, 0.12);
  border-color: #888;
}
.lg-delete-league-btn {
  background: transparent;
  border: 1px solid rgba(225, 6, 0, 0.4);
  color: var(--c-red);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lg-delete-league-btn:hover {
  background: rgba(225, 6, 0, 0.12);
  border-color: var(--c-red);
}

/* Admin-only hard purge — solid red to signal it's more destructive. */
.lg-delete-all-league-btn {
  background: rgba(225, 6, 0, 0.16);
  border: 1px solid var(--c-red);
  color: #ff6b63;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lg-delete-all-league-btn:hover {
  background: var(--c-red);
  color: #fff;
}

.lg-proxy-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5b9bd5;
  color: #0d0d0d;
  border-radius: 8px;
  min-width: 16px;
  height: 14px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
  position: relative;
  top: -0.5px;
}
.lg-proxy-panel {
  background: #141414;
  border: 1px solid #252525;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px 0;
}
.lg-proxy-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  color: #999;
  margin-bottom: 6px;
}
.lg-proxy-hint {
  font-size: 0.68rem;
  color: #555;
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.lg-proxy-list {
  margin-bottom: 10px;
}
.lg-proxy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #1e1e1e;
  font-size: 0.77rem;
}
.lg-proxy-row:last-child {
  border-bottom: none;
}
.lg-proxy-name {
  color: #ccc;
}
.lg-official-link {
  cursor: pointer;
  transition: color 0.12s;
}
.lg-official-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lg-proxy-roles {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.lg-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.lg-proxy-abbr {
  margin-left: auto;
  color: #666;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
}
.lg-proxy-empty {
  color: #444;
  font-size: 0.72rem;
  font-style: italic;
  padding: 4px 0;
}
.lg-proxy-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lg-proxy-msg {
  font-size: 0.7rem;
  margin-top: 6px;
}
.league-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.league-title-icon {
  font-size: 1.1rem;
}
/* Bookmark star in the Manage Leagues header — same control as the Leagues
   Overview banner. Scoped under the title so it beats the base .lo-bm-btn
   colour/size that appears later in this file, and legible on a banner. */
.league-card-title .lg-header-bm {
  font-size: 1.25rem;
  color: #b8b2aa;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.league-card-title .lg-header-bm:disabled {
  opacity: 0.5;
  cursor: default;
}
.league-name {
  font-size: 30px;
  font-weight: 700;
  color: #ccc5bb;
}
.league-season {
  font-size: 0.78rem;
  color: var(--txt-faint);
  font-family: "Courier New", monospace;
}
.league-season--pre {
  color: #e0a23c;
  font-weight: 700;
}
.league-card-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.lg-meta-item {
  font-size: 0.78rem;
  color: #756f69;
  font-family: "Courier New", monospace;
}
.lg-meta-code {
  margin-left: auto;
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  color: rgba(245, 166, 35, 0.4);
  letter-spacing: 0.08em;
  user-select: all;
}

/* Status badges */
.lg-badge {
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid;
}
.lg-badge--active {
  color: var(--c-teal);
  border-color: var(--c-teal);
  background: rgba(0, 212, 170, 0.08);
}
.lg-badge--planned {
  color: var(--txt-muted);
  border-color: var(--txt-muted);
}
.lg-badge--finished {
  color: var(--c-red);
  border-color: var(--c-red);
}
.lg-badge--cancelled {
  color: #e06060;
  border-color: #e06060;
  opacity: 0.8;
}
.lg-badge--archived {
  color: #888;
  border-color: #555;
}

/* Sub-tabs */
.league-tabs {
  display: flex;
  background: #1a1815;
  border-bottom: 1px solid var(--bg-card);
}
.league-tab {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #a09a93;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
  position: relative;
}
.league-tab:hover {
  background: var(--bg-table);
}
.league-tab.active {
  background: var(--bg-table);
}

/* Per-tab colours – unified accent colour */
.league-tab:hover {
  color: rgba(255, 255, 255, 0.55);
}
.league-tab.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}
.lg-tab-badge {
  display: inline-block;
  background: var(--c-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: bold;
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}
.lg-tab-badge--warn {
  background: #7a4e00;
  color: #f0a500;
  font-size: 0.75rem;
  padding: 0 3px;
}

/* Content */
.league-content {
  padding: 0 10px 10px;
  min-width: 0;
}

/* Table shared overrides */
.lg-table th,
.lg-table td {
  padding: 7px 10px;
}
/* Compact columns so action buttons stay inside the table */
.lg-table .lg-th-nat,
.lg-table .lg-nationality {
  width: 38px;
  text-align: center;
}
.lg-table .lg-th-age,
.lg-table .lg-driver-age {
  width: 42px;
  text-align: center;
}
.lg-table .lg-th-w,
.lg-table .lg-wpofl-w {
  width: 32px;
  text-align: center;
}
.lg-table .lg-wpofl-pod {
  width: 34px;
}
.lg-table .lg-wpofl-fl {
  width: 34px;
}
.lg-table .lg-wpofl-pole {
  width: 40px;
  text-align: center;
}
.lg-table .lg-wpofl-fp {
  width: 34px;
  text-align: center;
}
.lg-table .lg-drivers-status-col {
  width: 62px;
}

.lg-results-editor .f1-table-wrapper {
  max-height: 65vh;
  overflow-y: auto;
}
.lg-results-editor .f1-qualifying-table {
  font-size: 0.79rem;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}
.lg-results-editor .f1-qualifying-table th,
.lg-results-editor .f1-qualifying-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.lg-results-editor .f1-qualifying-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #1c1916;
}
/* Card rows */
.lg-results-editor .f1-qualifying-table .lg-result-row td {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: none;
  border-right: none;
  background: rgba(255, 255, 255, 0.035);
}
.lg-results-editor .f1-qualifying-table .lg-result-row td:first-child {
  border-left: 3px solid var(--row-color, #555);
  border-radius: 5px 0 0 5px;
}
.lg-results-editor .f1-qualifying-table .lg-result-row td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0 5px 5px 0;
}
.lg-results-editor .f1-qualifying-table .lg-result-row:hover td {
  background: rgba(255, 255, 255, 0.065);
}
.lg-table--no-pts th:nth-child(11),
.lg-table--no-pts td:nth-child(11),
.lg-table--no-pts th:nth-child(12),
.lg-table--no-pts td:nth-child(12) {
  display: none;
}

.lg-table--no-race-time th:nth-child(7),
.lg-table--no-race-time td:nth-child(7) {
  display: none;
}

.lg-table--no-fl th:nth-child(12),
.lg-table--no-fl td:nth-child(12) {
  display: none;
}

/* Team-colour dot in its own column, left of the driver name */
.lg-results-editor .f1-qualifying-table td.lg-team-dot-cell {
  width: 1px;
  white-space: nowrap;
  text-align: center;
  padding-left: 4px;
  padding-right: 6px;
}
/* Bring the # column closer to Pos */
.lg-results-editor .f1-qualifying-table td.lg-pos-cell {
  padding-right: 2px;
}
.lg-results-editor .f1-qualifying-table th:nth-child(2),
.lg-results-editor .f1-qualifying-table .lb-car-num {
  padding-left: 2px;
}

/* ── League Results table — leaderboard styling ───────────────────────── */
.lg-table .lb-pos {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  min-width: 38px;
}
.lg-table .pos-gold {
  color: #ffd700;
}
.lg-table .pos-silver {
  color: #c0c0c0;
}
.lg-table .pos-bronze {
  color: #cd7f32;
}
.lg-table .lb-status-dnf {
  color: #ff6b6b;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lg-table .lb-status-dns {
  color: #888;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lg-table .lb-status-dsq {
  color: #f5a623;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lg-table tr.lb-row-out {
  opacity: 0.55;
}
.lg-table .lb-car-num {
  font-weight: 700;
  color: var(--txt-mid);
  text-align: center;
  width: 1%;
  white-space: nowrap;
}
.lg-table .lb-team {
  color: #b0a89f;
  font-size: 0.8rem;
}
.lg-table .lb-grid {
  font-family: "Courier New", monospace;
  color: var(--txt-mid);
  white-space: nowrap;
}
.lg-table .lb-time,
.lg-table .lb-best-lap {
  font-family: "Courier New", monospace;
  color: #ccc5bb;
  white-space: nowrap;
}
.lg-table .lb-time {
  min-width: 96px;
}
.lg-table .lb-best-lap.lb-fastest {
  color: var(--c-purple);
  font-weight: 700;
}
.lg-table .lb-fl {
  text-align: center;
}
.lg-table .lb-pits {
  text-align: center;
  color: var(--txt-muted);
}
.lg-table .lb-pts {
  text-align: center;
  font-weight: 700;
  color: #fff;
}
.lg-table .lg-note-cell {
  color: var(--txt-muted);
  font-size: 0.8rem;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hint that the full text is available via tooltip when truncated */
.lg-table .lg-note-cell[title],
.lg-penalty-reason[title] {
  cursor: help;
}
.lg-table .lg-result-row:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* Penalty column */
.lg-table .lg-pen-cell {
  text-align: center;
}
.lg-pen-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--c-amber);
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.4);
}
.lg-pen-zero {
  color: var(--txt-dim);
}

/* Standings */
.f1-qualifying-table th.lg-rnd {
  font-size: 0.7rem;
  color: #fff;
  text-align: center;
  min-width: 36px;
  line-height: 1.3;
}
.lg-rnd-track {
  font-size: 0.68rem;
  color: var(--c-amber);
  display: block;
}
.lg-rnd-type {
  font-size: 0.72rem;
  color: #888;
  display: block;
  margin-top: -2px;
}
.lg-rnd-pts {
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
}
.lg-no-result {
  color: var(--bdr);
}
.lg-fl {
  color: #b44aff !important;
  font-weight: bold;
}
.lg-dsq {
  color: var(--c-red) !important;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}
/* Shared result markers: purple bolt = fastest lap, silver medal = Fair Play.
   Drawn as SVG rather than emoji (⚡ / 🤝) because emoji glyphs ignore CSS
   `color`, so the exact purple / silver could not be guaranteed. In the
   standings the bolt sits left of the points value and the medal right of it,
   with the cell centred so the group reads as one unit. */
.tt-ico {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background: center / contain no-repeat;
  vertical-align: -0.1em;
  margin: 0 2px;
  flex-shrink: 0;
}
.tt-ico--fl {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b87fff' d='M13.6 1.4 3.4 14.6h6.3l-1.3 8 10.2-13.2h-6.3z'/%3E%3C/svg%3E");
}
.tt-ico--fp {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='%23cbd1d8' stroke='%238e959e' stroke-width='1.6'/%3E%3Cpath fill='%23f4f6f8' d='M12 6.4l1.62 3.3 3.63.53-2.63 2.56.62 3.62L12 14.7l-3.24 1.71.62-3.62-2.63-2.56 3.63-.53z'/%3E%3C/svg%3E");
}
/* Standings round cell: [fastest lap] [value] [medal]. The two side columns are
   both `1fr`, so they always take an equal share of the leftover width — the
   value column therefore sits dead-centre and the numbers line up down the
   column whether or not a row has markers. minmax(0,…) lets the side columns
   shrink below their content instead of pushing the value off-centre. */
.tt-rnd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 3px;
  width: 100%;
}
.tt-rnd-l {
  justify-self: end;
}
.tt-rnd-r {
  justify-self: start;
}
.tt-rnd-l,
.tt-rnd-r {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.tt-rnd-val {
  font-variant-numeric: tabular-nums;
}
.lg-legend-sep {
  margin: 0 8px;
  color: var(--bdr);
}
.lg-xpt-note {
  font-size: 0.7rem;
  color: var(--c-purple);
  margin-left: 3px;
  opacity: 0.85;
}
.lg-driver-cell {
  white-space: nowrap;
}
.lg-driver-cell-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-driver-name {
  color: #ccc5bb;
}
.lg-team-name {
  color: var(--txt-faint);
  font-size: 0.82rem;
}

.lg-std-name-link {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.lg-driver-name.lg-std-name-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.lg-team-name .lg-std-name-link:hover {
  color: var(--txt-mid);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

@keyframes lgRowFlash {
  0% {
    background: rgba(255, 255, 255, 0.12);
  }
  60% {
    background: rgba(255, 255, 255, 0.06);
  }
  100% {
    background: transparent;
  }
}
.lg-row-flash {
  animation: lgRowFlash 1.4s ease forwards;
}
.lg-total-pts {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #ccc5bb;
  text-align: center;
}

/* ── Standings v2 — Podium Championship ──────────────────────────────────── */
/* Medal position badge (top 3) */
.lg-table .lb-pos .lg-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1714;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lg-table .lb-pos .lg-pos-badge.pos-gold {
  background: radial-gradient(
    circle at 32% 28%,
    #fff3b0 0%,
    #ffd700 42%,
    #b8860b 100%
  );
}
.lg-table .lb-pos .lg-pos-badge.pos-silver {
  background: radial-gradient(
    circle at 32% 28%,
    #ffffff 0%,
    #d8d8d8 45%,
    #8a8a8a 100%
  );
}
.lg-table .lb-pos .lg-pos-badge.pos-bronze {
  background: radial-gradient(
    circle at 32% 28%,
    #f3c08a 0%,
    #cd7f32 48%,
    #7c4a1e 100%
  );
}

/* Top-3 row tints — same format as LeagueOverview driver standings */
.lg-table tr.lg-podium-1 {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent 70%);
}
.lg-table tr.lg-podium-2 {
  background: linear-gradient(
    90deg,
    rgba(192, 192, 192, 0.08),
    transparent 70%
  );
}
.lg-table tr.lg-podium-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent 70%);
}
.lg-table tr.lg-std-row {
  transition: background 0.12s;
}
.lg-table tr.lg-std-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Car number + nationality flag columns */
.lg-std-num {
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: var(--txt-mid);
  text-align: center;
  white-space: nowrap;
}
.lg-table th.lg-std-nat,
.lg-table td.lg-std-nat {
  text-align: center;
  font-size: 1.05rem;
  width: 1%;
  white-space: nowrap;
  padding-left: 2px;
  padding-right: 2px;
}

/* Team-color accent bar on the driver cell */
.lg-team-accent {
  display: inline-block;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
/* Team logo in the Constructors standings table */
.lg-team-stand-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
}
/* Home-country flag to the right of a team name (overview Constructors) */
.lo-team-stand-flag {
  margin-left: 8px;
  vertical-align: middle;
}

/* Gap-to-leader column */
.lg-std-gap {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--txt-muted);
  text-align: center;
}

.lg-driver-age {
  text-align: center;
  color: #718096;
  font-size: 0.8rem;
}
.lg-wpofl-w {
  text-align: center;
  color: #f6e05e;
  font-weight: 600;
}
.lg-wpofl-pod {
  text-align: center;
}
.lg-wpofl-fl {
  text-align: center;
  color: #68d391;
  font-weight: 600;
}
.lg-wpofl-pole {
  text-align: center;
  color: #b794f4;
  font-weight: 600;
}
.lg-wpofl-fp {
  text-align: center;
  color: #cbd1d8;
  font-weight: 600;
}
.lg-gap-col {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--c-red);
  text-align: center;
}
.lg-gap {
  color: var(--c-red);
}
.lg-gap-leader {
  color: var(--bdr-light);
}
.lg-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 10px;
  font-size: 0.7rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
}

/* Calendar */
.lg-calendar-wrap {
  display: block;
}
.lg-cal-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--bg-panel);
}
.lg-cal-switch {
  display: inline-flex;
  border-radius: 999px;
  background: var(--bg-base);
  border: 1px solid #2a2622;
  overflow: hidden;
}
.lg-cal-tab {
  background: transparent;
  color: #756f69;
  border: none;
  padding: 6px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.lg-cal-tab:hover {
  color: #fff;
  background: #1a1816;
}
.lg-cal-tab.active {
  color: #fff;
  background: linear-gradient(90deg, var(--c-red) 0%, var(--c-red-dark) 100%);
}
.lg-cal-view {
  display: none;
}
.lg-cal-view.active {
  display: block;
}
.lg-round-num {
  font-family: "Courier New", monospace;
  color: var(--txt-faint);
  white-space: nowrap;
  font-size: 0.82rem;
}
.lg-round-track {
  font-size: 0.72rem;
  color: var(--txt-dim);
}
.lg-track {
  color: #ccc5bb;
}
.lg-date {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: #756f69;
  white-space: nowrap;
}
.lg-row-upcoming td {
  opacity: 0.55;
}
.lg-status {
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
}
.lg-status--done {
  color: var(--c-amber);
}
.lg-status--sched {
  color: var(--txt-faint);
}
.lg-status--cancel {
  color: var(--c-red);
}

/* Month grid */
.lg-month-block {
  margin: 12px 12px 16px;
  background: var(--bg-table);
  border: 1px solid #1f1d1b;
  border-radius: 12px;
  overflow: hidden;
}
.lg-month-header {
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #0f0e0d;
  color: var(--txt-bright);
}
.lg-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.lg-weekday {
  padding: 6px 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-faint);
  background: var(--bg-base);
  border-bottom: 1px solid #1f1d1b;
}
.lg-day {
  min-height: 86px;
  padding: 8px;
  border-right: 1px solid #1f1d1b;
  border-bottom: 1px solid #1f1d1b;
  background: var(--bg-table);
}
.lg-day--empty {
  background: #0f0e0d;
}
.lg-day-num {
  font-size: 0.68rem;
  color: #756f69;
  margin-bottom: 6px;
  font-family: "Courier New", monospace;
}
.lg-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lg-cal-nav {
  cursor: pointer;
}
.lg-cal-nav:hover {
  opacity: 0.8;
}

.lg-day-event {
  font-size: 0.68rem;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid #2a2622;
  color: #ccc5bb;
  background: var(--bg-base);
}

/* Timeline */
.lg-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.lg-timeline-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-table);
  border: 1px solid #1f1d1b;
  border-radius: 10px;
  padding: 10px 12px;
}
.lg-timeline-date {
  text-align: center;
  font-family: "Courier New", monospace;
}
.lg-timeline-day {
  font-size: 1rem;
  color: var(--txt-bright);
}
.lg-timeline-mon {
  font-size: 0.7rem;
  color: var(--txt-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lg-timeline-title {
  font-size: 0.85rem;
  color: var(--txt-bright);
}
.lg-timeline-meta {
  font-size: 0.7rem;
  color: #756f69;
}
.lg-timeline-status {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Courier New", monospace;
}

/* Week strip */
.lg-week-strip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
.lg-week-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-table);
  border: 1px solid #1f1d1b;
  border-radius: 5px;
  padding: 7px 12px;
  min-width: 0;
}
.lg-week-row--tbd {
  opacity: 0.6;
}
.lg-week-tag {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  color: var(--c-amber);
  min-width: 30px;
  flex-shrink: 0;
}
.lg-week-rnd {
  font-size: 0.75rem;
  font-family: "Courier New", monospace;
  color: var(--c-teal);
  min-width: 26px;
  flex-shrink: 0;
}
.lg-week-track {
  font-size: 0.8rem;
  color: var(--txt-bright);
  min-width: 76px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-week-dates {
  font-size: 0.7rem;
  color: #756f69;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}
.lg-week-chips {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
}
.lg-week-chip {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--bdr);
  color: #8a847d;
  white-space: nowrap;
  flex-shrink: 0;
}
.lg-week-chip.lg-status--done {
  color: var(--c-teal);
  border-color: rgba(0, 212, 170, 0.3);
  background: rgba(0, 212, 170, 0.07);
}
.lg-week-chip.lg-status--cancel {
  color: #555;
  border-color: #2a2624;
  text-decoration: line-through;
}

/* Status accents inside events */
.lg-day-event.lg-status--done,
.lg-timeline-status.lg-status--done {
  color: var(--c-amber);
}
.lg-day-event.lg-status--sched,
.lg-timeline-status.lg-status--sched {
  color: var(--txt-faint);
}
.lg-day-event.lg-status--cancel,
.lg-timeline-status.lg-status--cancel {
  color: var(--c-red);
}

/* TBD list */
.lg-tbd-block {
  margin-top: 8px;
  padding: 10px 12px;
  background: #0f0e0d;
  border: 1px dashed #2a2622;
  border-radius: 10px;
}
.lg-tbd-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #756f69;
  margin-bottom: 6px;
  font-family: "Courier New", monospace;
}
.lg-tbd-item {
  font-size: 0.72rem;
  color: #ccc5bb;
  margin: 4px 0;
}

/* Drivers */
.lg-car-num {
  font-family: "Courier New", monospace;
  color: var(--txt-dim);
  text-align: center;
}
.lg-car-num-warn {
  color: #f0a500;
  font-size: 0.85rem;
  margin-left: 3px;
  cursor: default;
  vertical-align: middle;
}
.lg-car-dup-warn {
  color: #f0a500;
  font-size: 0.78rem;
  margin-left: 3px;
  cursor: default;
  vertical-align: middle;
}
.lg-dup-warning {
  margin: 0 0 8px 0;
  padding: 8px 12px;
  background: #1e1500;
  border: 1px solid #6b4a00;
  border-radius: 6px;
  color: #f0a500;
  font-size: 0.8rem;
  line-height: 1.5;
}
.lg-dup-warning strong {
  color: #ffc84a;
}
.lg-nationality {
  font-size: 1.1rem;
  text-align: center;
  width: 32px;
}
.lg-active-badge {
  font-size: 0.7rem;
  font-family: "Courier New", monospace;
}
.lg-drivers-status-col {
  text-align: center;
}
.lg-active--yes {
  color: var(--c-amber);
}
.lg-active--no {
  color: var(--txt-dim);
}

/* Team header rows */
.lg-team-header-row td {
  padding: 5px 10px 5px 12px;
  border-bottom: 1px solid var(--bg-card);
  position: relative;
}
.lg-team-header-name {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.lg-team-header-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
.lg-team-header-flag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 7px;
}
.lg-team-header-flag .fi {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.lg-team-header-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.lg-team-header-actions .lg-action-btn {
  margin-left: 0;
}
.lg-team-unassigned td {
  background: #111110 !important;
}
.lg-team-unassigned .lg-team-header-name {
  color: var(--txt-dim) !important;
}
.lg-team-edit-btn {
  margin-left: 8px;
  vertical-align: middle;
  font-size: 0.75rem;
  padding: 1px 5px;
  background: transparent !important;
}

/* Team add/edit form */
.lg-team-form {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-panel);
  background: #0e0d0c;
}
.lg-team-form-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

/* Inline team edit (inside a team header row) */
.lg-team-header-row td.lg-team-header-editing {
  padding-top: 4px;
  padding-bottom: 4px;
}
.lg-team-inline-form {
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.lg-team-inline-name {
  width: 200px;
  height: 28px;
  box-sizing: border-box;
}
/* Name field locked: editable only by the team's creator, before its first
   race, and while it isn't shared with another league. */
.lg-team-inline-name.lg-input-locked {
  opacity: 0.65;
  cursor: not-allowed;
}
.lg-team-inline-form .lg-color-input {
  flex: 0 0 auto;
}
/* Rectangle border around the colour picker, in the row background's
   complementary colour (border-color set inline). */
.lg-team-inline-color {
  width: 30px;
  height: 26px;
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
}
/* "Take over drivers" button — appears beside Cancel when the typed name
   matches an existing global team. Colours set inline to match the row. */
.lg-takeover-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.lg-takeover-btn:hover {
  background: rgba(0, 0, 0, 0.45);
}
/* Live consequence hint under the inline team-name field.
   Sits on the team's coloured background, so it gets its own dark chip. */
.lg-team-inline-hint {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}
.lg-team-inline-hint:not(:empty) {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
}
.lg-team-inline-hint.lg-hint-neutral {
  color: #cbd5e1;
}
.lg-team-inline-hint.lg-hint-new {
  color: #4ade80;
}
.lg-team-inline-hint.lg-hint-link {
  color: #fbbf24;
}
.lg-team-inline-hint.lg-hint-warn {
  color: #f87171;
}

/* Search panels (Add Team / Add Driver) */
.lg-search-panel {
  padding: 10px 14px 6px;
  background: #0e0d0c;
  border-bottom: 1px solid var(--bg-panel);
}
.lg-driver-add-panel {
  border-bottom: 1px solid var(--bg-panel);
}
.lg-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.lg-search-bar .lg-input {
  flex: 1;
  max-width: 360px;
}
.lg-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 6px;
}
.lg-search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #171614;
  font-size: 0.85rem;
}
.lg-search-result-item.lg-result-linked {
  opacity: 0.5;
}
.lg-result-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lg-result-flag {
  font-size: 1rem;
  flex-shrink: 0;
}
.lg-result-name {
  font-weight: 600;
  color: #e8e3db;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Team search rows have a driver list, so the name shrinks to its content
   instead of taking all the flexible space. */
.lg-search-result-item:has(.lg-result-drivers) .lg-result-name {
  flex: 0 1 auto;
  max-width: 42%;
}
.lg-result-drivers {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: #918b84;
}
.lg-result-drivers--empty {
  color: #55504a;
  font-style: italic;
}
.lg-result-abbr {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  color: #756f69;
  flex-shrink: 0;
}
.lg-result-meta {
  font-size: 0.75rem;
  color: #756f69;
  white-space: nowrap;
  flex-shrink: 0;
}
.lg-result-discord {
  font-size: 0.8rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.lg-search-in-league {
  font-size: 0.75rem;
  color: #68d391;
  white-space: nowrap;
  flex-shrink: 0;
}
.lg-link-btn {
  background: transparent;
  border: 1px solid var(--bdr-light);
  color: #a09a93;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-link-btn:hover {
  border-color: #a09a93;
  color: #e8e3db;
}
.lg-team-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.lg-link-team-btn {
  border-color: #68d391;
  color: #68d391;
}
.lg-link-team-btn:hover {
  border-color: #9ae6b4;
  color: #9ae6b4;
}
.lg-search-hint {
  font-size: 0.8rem;
  color: var(--txt-dim);
  padding: 4px 2px;
}
.lg-search-error {
  color: var(--c-red);
}
.lg-search-create-toggle {
  padding: 4px 0 6px;
  border-top: 1px solid var(--bg-panel);
  margin-top: 4px;
}

/* Teams section */
.tm-list-card {
  margin-bottom: 12px;
}
.tm-list-wrapper {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 0;
}
.tm-list-row {
  cursor: pointer;
  transition: background 0.1s;
}
.tm-list-row:hover {
  background: #1e1c1a;
}
.tm-list-row.tm-row-active {
  background: #252220;
  outline: 1px solid var(--bdr-light);
  outline-offset: -1px;
}
.tm-detail-card {
  min-height: 60px;
}

/* ── Teams selector bar ──────────────────────────────────────────────── */
.tm-selector-wrap {
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 12px 16px 14px;
}

.tm-selector-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* Pill search — matches the Manage Leagues selector (icon + input, rounded). */
.lo-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  max-width: 340px;
  padding: 5px 12px;
  background: #141210;
  border: 1px solid #2e2b27;
  border-radius: 999px;
  transition: border-color 0.15s;
}
.lo-filter-pill:focus-within {
  border-color: var(--c-teal);
}
.lo-filter-ico {
  font-size: 0.82rem;
  opacity: 0.55;
  flex: 0 0 auto;
}
.lo-filter-pill .lo-filter-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Find a League: search row + scope toggles above, pill chips below a divider
   — the same layout as the Manage Leagues selector. */
.lo-filter-row {
  flex-wrap: wrap;
  margin-bottom: 0;
}
.lo-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.lo-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--bdr, #2a2622);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--txt-dim, #9b9590);
  font-family: inherit;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.14s,
    border-color 0.14s,
    background 0.14s;
}
.lo-scope-btn:hover {
  color: var(--txt-bright, #e8e3db);
  border-color: var(--txt-dim, #9b9590);
}
.lo-scope-btn.active {
  color: #17150f;
  background: var(--c-amber, #f5a623);
  border-color: var(--c-amber, #f5a623);
  font-weight: 700;
}
.lo-chips-row {
  border-top: 1px solid var(--bg-panel);
  padding-top: 10px;
  margin-top: 10px;
}
/* Rounded pill chips, matching the Manage Leagues league buttons. */
.lo-chip.tm-chip {
  border-radius: 999px;
  border-left-width: 1px;
}

.tm-filter-more-badge {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 20px;
  color: var(--c-teal);
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.tm-filter-more-badge:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--c-teal);
}

.tm-selector-filter-input {
  width: 220px;
  background: #141210;
  border: 1px solid #2e2b27;
  border-radius: 5px;
  color: #e8e3db;
  font-size: 0.8rem;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.tm-selector-filter-input:focus {
  border-color: var(--c-teal);
}

.tm-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 9px;
  border-radius: 5px;
  border: 1px solid #2a2724;
  border-left-width: 3px;
  background: #181613;
  color: #a09a93;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 0.1s,
    background 0.15s,
    color 0.15s;
  animation: tm-chip-in 0.18s ease both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.tm-chip:hover {
  background: #1e1c19;
  color: #e8e3db;
  transform: translateY(-1px);
}
.tm-chip--active {
  color: #e8e3db;
}

@keyframes tm-chip-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tm-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-chip-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

.tm-chip-name {
  white-space: nowrap;
}
.tm-detail-empty {
  text-align: center;
  color: var(--txt-dim);
  font-size: 0.8rem;
  padding: 24px;
}

/* ── Teams overview (no team selected) ───────────────────────────────── */
.tm-ov-loading {
  padding: 32px;
  text-align: center;
  color: var(--txt-dim);
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.08em;
}

.tm-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.tm-ov-card {
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tm-ov-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-panel);
}

.tm-ov-icon {
  font-size: 1rem;
}

.tm-ov-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--txt-bright);
  flex: 1;
}

.tm-ov-subhead {
  font-size: 0.65rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
}

.tm-ov-list {
  padding: 6px 0;
}

.tm-ov-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tm-ov-row:last-child {
  border-bottom: none;
}

.tm-ov-row--link {
  cursor: pointer;
  transition: background 0.12s;
}

.tm-ov-row--link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tm-ov-rank {
  font-size: 0.9rem;
  min-width: 24px;
  text-align: center;
}

.tm-ov-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-ov-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-ov-pts {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-amber);
  white-space: nowrap;
}

.tm-ov-win-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tm-ov-wins {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-amber);
}

.tm-ov-pods {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--txt-muted);
}

.tm-ov-unit {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--txt-dim);
}

.tm-ov-empty {
  padding: 20px 16px;
  color: var(--txt-dim);
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 900px) {
  .tm-overview {
    grid-template-columns: 1fr;
  }
}

/* ── Teams grid (public Teams section) ───────────────────────────────── */
.tm-grid-outer {
  padding: 0;
  overflow: hidden;
}
.tm-grid-filter {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bdr);
}
.tm-grid-filter-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input, #111);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  color: var(--txt-bright);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.tm-grid-filter-input:focus {
  border-color: var(--c-teal);
}
.tm-grid-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--bdr);
  overflow-y: auto;
  max-height: 520px;
}
.tm-grid-empty {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--txt-dim);
  font-size: 0.85rem;
  background: var(--bg-card);
}
.tm-grid-card {
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}
.tm-grid-card:hover {
  background: var(--bg-hover, #1e1c1a);
}
.tm-gc-bar {
  height: 3px;
  width: 100%;
}
.tm-gc-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.tm-gc-logo-wrap {
  flex-shrink: 0;
}
.tm-gc-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}
.tm-gc-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tm-gc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tm-gc-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-gc-stats {
  font-size: 0.76rem;
  color: var(--txt-dim);
}
.tm-gc-established {
  font-size: 0.72rem;
  color: var(--c-amber);
  font-family: "Courier New", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Detail header with toggle */
.tm-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Team hero header */
.tm-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 18px 0 20px;
}
.tm-hero-glow {
  position: absolute;
  top: -55px;
  right: -55px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  pointer-events: none;
}
.tm-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
}
.tm-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tm-hero-label {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Team name + home-country flag share one row */
.tm-hero-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tm-hero-name {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.tm-hero-established {
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.tm-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.tm-member-btn-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.tm-hero-accent {
  position: relative;
  z-index: 1;
  height: 1px;
}

/* National emblem — team home country flag as a small framed rectangle,
   sitting just to the right of the team name. */
.tm-hero-flag {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tm-hero-flag-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  animation: tmFlagReveal 0.45s ease both;
  transition: transform 0.15s ease;
}
/* Flag as a 4:3 rectangle with a thin frame + soft shadow. */
.tm-hero-flag .fi {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}
/* Reveal — gentle scale + fade in on render. */
@keyframes tmFlagReveal {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-hero-flag-emoji {
    animation: none;
  }
}
/* Empty state (no country set yet) — dashed rectangle inviting a pick. */
.tm-hero-flag-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  opacity: 0.7;
}
.tm-hero-flag--editable {
  cursor: pointer;
}
.tm-hero-flag--editable:hover .tm-hero-flag-emoji {
  transform: scale(1.06);
}
/* Transparent native dropdown overlaid on the flag */
.tm-hero-flag-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Team logo in hero */
.tm-logo-area {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: default;
  margin-right: 4px;
}
.tm-logo-area[data-action] {
  cursor: pointer;
}
.tm-logo-area--empty {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-logo-area--readonly {
  cursor: default;
}
.tm-logo-placeholder-icon {
  font-size: 1.5rem;
  opacity: 0.65;
  pointer-events: none;
}
.tm-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tm-logo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 1.3rem;
  color: #fff;
  pointer-events: none;
}
.tm-logo-area[data-action]:hover .tm-logo-overlay {
  opacity: 1;
}
.tm-logo-area[data-action]:hover.tm-logo-area--empty {
  background: rgba(255, 255, 255, 0.18);
}
.tm-color-swatch-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.tm-color-swatch-label:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.tm-color-input {
  width: 36px;
  height: 36px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  transform: scale(1.5);
}
.tm-view-toggle {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.tm-view-btn {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.45;
  padding: 3px 9px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: opacity 0.15s;
}
.tm-view-btn:hover {
  opacity: 0.75;
}
.tm-view-btn--active {
  opacity: 1;
}
.tm-view-btn + .tm-view-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Visibility toggle */
.tm-visibility-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.15s;
  letter-spacing: 0.03em;
}
.tm-visibility-btn:hover {
  opacity: 1;
}
.tm-visibility-btn--public {
  opacity: 0.9;
}

/* Admin-only delete on the team hero — inherits hero fg color, red on hover. */
.tm-delete-team-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.6;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  letter-spacing: 0.03em;
}
.tm-delete-team-btn:hover {
  opacity: 1;
  background: var(--c-red);
  border-color: var(--c-red) !important;
  color: #fff !important;
}

/* Role badges */
.tm-role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.tm-error-toast {
  display: none;
  background: #3d1515;
  color: #ff8080;
  border: 1px solid #6b2222;
  border-radius: 4px;
  font-size: 0.78rem;
  padding: 6px 12px;
  margin: 8px 14px 0;
}

.tm-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: #756f69;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition:
    color 0.15s,
    background 0.15s;
}
.tm-remove-btn:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

/* Card grid view */
.tm-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  justify-content: center;
}
.tm-tier-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px 6px 0 0;
  margin-bottom: 4px;
}
.tm-tier-section--1 {
  border-top-color: rgba(155, 89, 182, 0.3);
  background: linear-gradient(
    to bottom,
    rgba(155, 89, 182, 0.06) 0%,
    transparent 90px
  );
}
.tm-tier-section--2 {
  border-top-color: rgba(0, 212, 170, 0.3);
  background: linear-gradient(
    to bottom,
    rgba(0, 212, 170, 0.06) 0%,
    transparent 90px
  );
}
.tm-tier-section--3 {
  border-top-color: rgba(232, 184, 75, 0.3);
  background: linear-gradient(
    to bottom,
    rgba(232, 184, 75, 0.06) 0%,
    transparent 90px
  );
}
.tm-tier-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--txt-dim);
  padding: 14px 18px 8px 20px;
  position: relative;
}
.tm-tier-label::before {
  display: none;
}
.tm-tier-divider {
  height: 1px;
  margin: 0 0 4px;
}
.tm-tier-section--1 .tm-tier-label {
  color: rgba(155, 89, 182, 0.85);
}
.tm-tier-section--1 .tm-tier-divider {
  background: linear-gradient(
    to right,
    rgba(155, 89, 182, 0.45) 0%,
    transparent 60%
  );
}
.tm-tier-section--2 .tm-tier-label {
  color: rgba(0, 212, 170, 0.85);
}
.tm-tier-section--2 .tm-tier-divider {
  background: linear-gradient(
    to right,
    rgba(0, 212, 170, 0.45) 0%,
    transparent 60%
  );
}
.tm-tier-section--3 .tm-tier-label {
  color: rgba(232, 184, 75, 0.85);
}
.tm-tier-section--3 .tm-tier-divider {
  background: linear-gradient(
    to right,
    rgba(232, 184, 75, 0.45) 0%,
    transparent 60%
  );
}
.tm-tier-header-row td.tm-tier-label {
  padding: 6px 8px 4px;
  background: var(--bg-base);
}
.tm-level-toggle-btn {
  font-size: 0.68rem;
  padding: 1px 7px;
  border: 1px solid #3a3835;
  border-radius: 3px;
  background: transparent;
  color: #756f69;
  cursor: pointer;
  white-space: nowrap;
  font-family: "Courier New", monospace;
}
.tm-level-toggle-btn:hover {
  border-color: var(--c-amber);
  color: var(--c-amber);
}
.tm-lvl-picker {
  display: inline-flex;
  gap: 2px;
}
.tm-lvl-picker--card {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 2px;
  z-index: 1;
}
.tm-lvl-btn {
  font-size: 0.68rem;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-weight: 700;
  line-height: 1.4;
}
.tm-lvl-btn:not(:disabled):hover {
  filter: brightness(1.3);
}
.tm-lvl-btn--active {
  font-weight: 700;
}
.tm-add-level-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tm-add-as-label {
  font-size: 0.68rem;
  color: var(--txt-dim);
}
.tm-add-lvl-btn {
  font-size: 0.68rem;
  padding: 1px 7px;
  border: 1px solid #3a3835;
  border-radius: 3px;
  background: transparent;
  color: #a09a93;
  cursor: pointer;
  font-family: "Courier New", monospace;
}
.tm-add-lvl-btn:hover {
  border-color: var(--c-amber);
  color: var(--c-amber);
}
.tm-member-card {
  background: #1a1815;
  border: 1px solid var(--bdr);
  border-top: 3px solid #888;
  border-radius: 6px;
  width: 190px;
  padding: 26px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.tm-member-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.tm-member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bdr);
}
.tm-member-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #252220;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
}
.tm-member-info {
  min-width: 0;
  flex: 1;
  text-align: center;
  width: 100%;
}
.tm-member-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8e3db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-member-discord {
  font-size: 0.7rem;
  opacity: 0.5;
}
.tm-member-sub {
  font-size: 0.75rem;
  color: #756f69;
  margin-top: 2px;
  font-family: "Courier New", monospace;
}
.tm-member-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  justify-content: center;
}
.tm-member-stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--bdr);
  padding-top: 8px;
}
.tm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.tm-stat-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f6e05e;
  font-family: "Courier New", monospace;
}
.tm-stat-fl {
  color: #68d391;
}
.tm-stat-lbl {
  font-size: 0.72rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

/* Team detail summary card (leagues, points, titles) */
.tm-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding: 14px 18px;
  margin: 0;
  background: #15130f;
  border-bottom: 1px solid #2e2b27;
}
.tm-summary-stats {
  display: flex;
  gap: 26px;
}
.tm-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tm-summary-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #e8e3db;
  font-family: "Courier New", monospace;
  line-height: 1;
}
.tm-summary-lbl {
  font-size: 0.66rem;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tm-summary-leagues-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 180px;
}
.tm-summary-leagues-label {
  font-size: 0.66rem;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tm-summary-leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-summary-league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: #211e1a;
  border: 1px solid #322e29;
  border-radius: 12px;
  font-size: 0.74rem;
  color: #cfc8bf;
}
.tm-summary-league--champ {
  border-color: #f6e05e66;
  background: #2a2410;
}
.tm-summary-trophy {
  font-size: 0.74rem;
}
.tm-summary-league-name {
  font-weight: 600;
}
.tm-summary-league-pts {
  font-family: "Courier New", monospace;
  color: #a09a93;
  font-size: 0.7rem;
}
.tm-summary-league-pts::after {
  content: " pts";
  opacity: 0.6;
}
.tm-summary-empty {
  font-size: 0.76rem;
  color: #756f69;
}

/* Roster driver name → Drivers section link */
.tm-driver-link {
  cursor: pointer;
  transition: color 0.12s;
}
.tm-driver-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Penalties */
.lg-penalty-badge {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 3px;
  white-space: nowrap;
}
.lg-penalty-val {
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.lg-penalty-reason {
  font-size: 0.8rem;
  color: #756f69;
}

/* Penalty source badge (CSV import vs. steward decision) */
.lg-pen-src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-family: "Courier New", monospace;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 10px;
  white-space: nowrap;
}
.lg-pen-src--import {
  color: #8a847d;
  border-color: #3a352f;
  background: #1c1a17;
}
.lg-pen-src--steward {
  color: #e05c2a;
  border-color: #e05c2a55;
  background: #e05c2a12;
  cursor: pointer;
}
.lg-pen-src--steward:hover {
  color: #ff7b45;
  text-decoration: underline;
}

/* Penalty → race-result effect tag */
.lg-pen-effect {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-family: "Courier New", monospace;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 9px;
  white-space: nowrap;
  vertical-align: middle;
}
.lg-pen-effect--time {
  color: #f5a623;
  border-color: #f5a62355;
  background: #f5a6230f;
}
.lg-pen-effect--note {
  color: #8a847d;
  border-color: #3a352f;
  background: #1c1a17;
}
.lg-pen-session {
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  color: #9b9590;
  white-space: nowrap;
}
.lg-pen-effect--revoked {
  color: #8a847d;
  border-color: #3a352f;
  background: #1c1a17;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Revoked penalty: the row is kept on record but struck through and dimmed so
   it reads as "no longer in force". The reason keeps its "— REVOKED (…)" note. */
.lg-pen-row--revoked .lg-penalty-badge,
.lg-pen-row--revoked .lg-penalty-val {
  text-decoration: line-through;
  opacity: 0.55;
}
.lg-pen-row--revoked .lg-driver-name,
.lg-pen-row--revoked .lg-round-num {
  opacity: 0.6;
}
.lg-pen-act-btn--restore:hover {
  border-color: #2ecc71;
  color: #8ff0b5;
}
.lg-pen-reason-text {
  color: #756f69;
  display: inline-block;
  max-width: 60ch;
  white-space: normal;
  overflow-wrap: break-word;
  vertical-align: middle;
}

/* ── Race statistics tabs + Tyre Strategy chart (League Overview) ─────────── */
.lo-stats-wrap {
  margin: 14px auto 4px;
  white-space: normal;
}
.lo-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lo-stats-eyebrow {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6560;
  margin-right: 4px;
}
.lo-stats-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a09a93;
  background: #1c1a17;
  border: 1px solid #3a352f;
  border-radius: 999px;
  padding: 4px 13px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lo-stats-tab:hover {
  color: #e8e3db;
  border-color: #55504a;
}
.lo-stats-tab--active {
  color: var(--league-accent, #e05c2a);
  border-color: color-mix(in srgb, var(--league-accent, #e05c2a) 55%, transparent);
  background: color-mix(in srgb, var(--league-accent, #e05c2a) 9%, transparent);
}
.lo-stats-tab-ic {
  font-size: 0.8rem;
  line-height: 1;
}

/* Panel shell — deep carbon, quiet chrome; the pills carry the color. */
.lo-ts-panel {
  --ts-grid: #262220;
  margin-top: 10px;
  background: #131211;
  border: 1px solid #2a2622;
  border-radius: 10px;
  padding: 16px 18px 18px;
}
.lo-ts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lo-ts-eyebrow {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: #6b6560;
  margin-bottom: 3px;
}
.lo-ts-title {
  font-size: 1.45rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #e8e3db;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  display: inline-block;
}
.lo-ts-head-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lo-ts-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lo-ts-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #a09a93;
}
.lo-ts-leg i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.lo-ts-lapcount {
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: #756f69;
  border: 1px solid #3a352f;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Chart lanes */
.lo-ts-scroll {
  overflow-x: auto;
}
.lo-ts-chart {
  min-width: 520px;
}
.lo-ts-lane {
  display: grid;
  grid-template-columns: 32px 118px 1fr;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
}
.lo-ts-lane--axis {
  padding-bottom: 6px;
}
.lo-ts-pos {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-style: italic;
  font-size: 0.82rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.lo-ts-pos--axis {
  background: none !important;
}
.lo-ts-drv {
  min-width: 0;
  line-height: 1.15;
}
/* Top line: full driver name; bottom line: 3-letter abbreviation. */
.lo-ts-drv b {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #e8e3db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lo-ts-drv i {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6b6560;
}
.lo-ts-drv--axis {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: #55504a;
  align-self: end;
}
.lo-ts-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  border-left: 1px solid var(--ts-grid);
}
.lo-ts-track--axis {
  height: 14px;
  border-left-color: transparent;
  background-image: none !important;
}
.lo-ts-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  color: #55504a;
  bottom: 0;
}

/* Stint pills — the loud part of the panel. */
.lo-ts-pill {
  flex-basis: 0;
  min-width: 20px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 10px rgba(0, 0, 0, 0.18);
  transform-origin: left center;
  cursor: default;
}
.lo-ts-pill b {
  font-size: 0.82rem;
  font-weight: 800;
}
.lo-ts-pill i {
  font-style: normal;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.72;
}
.lo-ts-pill--slim b {
  font-size: 0.7rem;
}
.lo-ts-out {
  flex: 0 0 auto;
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: #8a5c5c;
  border: 1px solid #4a3030;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 3px;
}
.lo-ts-spacer {
  flex-basis: 0;
  height: 1px;
}

/* Orchestrated reveal: lanes rise in, pills grow from the start line. */
@keyframes loTsLaneIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes loTsPillIn {
  from { transform: scaleX(0.35); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.lo-ts-chart .lo-ts-lane {
  animation: loTsLaneIn 0.32s ease both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.lo-ts-chart .lo-ts-pill {
  animation: loTsPillIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms + 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .lo-ts-chart .lo-ts-lane,
  .lo-ts-chart .lo-ts-pill {
    animation: none;
  }
}

/* Narrow screens: drop the abbreviation line, tighten the label columns. */
@media (max-width: 640px) {
  .lo-ts-lane {
    grid-template-columns: 28px 86px 1fr;
    gap: 6px;
  }
  .lo-ts-drv i {
    display: none;
  }
  .lo-ts-panel {
    padding: 12px 12px 14px;
  }
}

/* ── Position History chart ────────────────────────────────────────────────── */
.lo-ph-frame {
  min-width: 640px;
}
.lo-ph-grid-row {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  gap: 8px;
}
.lo-ph-grid-row--axis {
  margin-top: 4px;
  align-items: start;
}
.lo-ph-hint {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #55504a;
}
/* Quick-select buttons (All / None / Top 5 / Top 10) beside the compare hint. */
.lo-ph-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lo-ph-fbtn {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a847d;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #3a352f;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.14s,
    border-color 0.14s,
    background 0.14s;
}
.lo-ph-fbtn:hover {
  color: var(--txt-bright, #e8e3db);
  border-color: #6b6560;
  background: rgba(255, 255, 255, 0.07);
}
.lo-ph-fbtn--on {
  color: #17150f;
  background: var(--c-amber, #f5a623);
  border-color: var(--c-amber, #f5a623);
  font-weight: 700;
}
.lo-ph-edge {
  position: relative;
}
.lo-ph-lab {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.lo-ph-edge--l .lo-ph-lab {
  justify-content: flex-end;
}
.lo-ph-edge--r .lo-ph-lab {
  justify-content: flex-start;
}
.lo-ph-lab b {
  font-family: "Courier New", monospace;
  font-size: 0.98rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #c2bbb0;
  min-width: 20px;
  text-align: center;
  line-height: 1;
}
/* Position sits in its own column — pinned to the outer edge, the driver hugs
   the chart — so the numbers line up cleanly down each side. */
.lo-ph-edge--l .lo-ph-lab b {
  margin-right: auto;
  text-align: left;
}
.lo-ph-edge--r .lo-ph-lab b {
  margin-left: auto;
  text-align: right;
}
/* Podium tint on the finishing order. */
.lo-ph-lab b.lo-ph-pos--p1 {
  color: #f6c945;
  text-shadow: 0 0 8px rgba(246, 201, 69, 0.35);
}
.lo-ph-lab b.lo-ph-pos--p2 {
  color: #cbd1d8;
}
.lo-ph-lab b.lo-ph-pos--p3 {
  color: #cd8544;
}
.lo-ph-lab i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lo-ph-lab u {
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #cfc9c1;
}
.lo-ph-stage {
  position: relative;
}
.lo-ph-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lo-ph-grid-v {
  stroke: #262220;
  vector-effect: non-scaling-stroke;
}
.lo-ph-grid-h {
  stroke: #1b1917;
  vector-effect: non-scaling-stroke;
}
.lo-ph-line {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.88;
  transition: opacity 0.15s ease, stroke-width 0.15s ease;
}
.lo-ph-hit {
  stroke: transparent;
  stroke-width: 13;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}
.lo-ph-dnf path {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
/* Focus mode: one driver lit, the field recedes. */
.lo-ph--focus .lo-ph-line:not(.lo-ph--hot),
.lo-ph--focus .lo-ph-dnf:not(.lo-ph--hot) {
  opacity: 0.12;
}
.lo-ph--focus .lo-ph-lab:not(.lo-ph--hot) {
  opacity: 0.3;
}
.lo-ph-line.lo-ph--hot {
  opacity: 1;
  stroke-width: 3;
}
.lo-ph-lab.lo-ph--hot u {
  color: #fff;
}
.lo-ph-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #1c1a17;
  border: 1px solid #3a352f;
  border-radius: 5px;
  padding: 3px 9px;
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #e8e3db;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.lo-ph-axis {
  position: relative;
  height: 14px;
}
.lo-ph-axis-cap {
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: #55504a;
}
.lo-ph-grid-row--axis .lo-ph-axis-cap:first-child {
  text-align: right;
}
/* One orchestrated reveal: the whole chart sweeps in left → right. */
@keyframes loPhSweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.lo-ph-svg {
  animation: loPhSweep 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .lo-ph-svg {
    animation: none;
  }
}
@media (max-width: 640px) {
  .lo-ph-grid-row {
    grid-template-columns: 64px 1fr 64px;
    gap: 5px;
  }
}

/* Consequences banner shown after issuing / editing / revoking a penalty */
.lg-pen-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #2e5e3a;
  border-left: 3px solid #2ecc71;
  border-radius: 6px;
  background: #14201780;
  color: #b9d8c2;
  font-size: 0.8rem;
  line-height: 1.5;
}
.lg-pen-flash-text {
  flex: 1;
}
.lg-pen-flash-loser {
  color: #ffb14d;
  font-weight: 700;
}
.lg-pen-flash-close {
  background: none;
  border: none;
  color: #6f8f7a;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
}
.lg-pen-flash-close:hover {
  color: #e8e3db;
}

/* Steward penalty toolbar + row actions */
.lg-pen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 0;
}
/* Text filter on the left of the toolbar. */
.lg-pen-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  max-width: 320px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bdr, #2a2622);
  border-radius: 6px;
}
.lg-pen-filter:focus-within {
  border-color: var(--c-amber, #f5a623);
}
.lg-pen-filter-ico {
  font-size: 0.78rem;
  opacity: 0.6;
  flex: 0 0 auto;
}
.lg-pen-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--txt-bright, #e8e3db);
  font-family: inherit;
  font-size: 0.8rem;
}
.lg-pen-filter-input::placeholder {
  color: var(--txt-faint, #6b6560);
}
.lg-pen-filter-clear {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--txt-dim, #9b9590);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  padding: 2px;
}
.lg-pen-filter-clear:hover {
  color: var(--txt-bright, #e8e3db);
}
.lg-pen-issue-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e05c2a14;
  border: 1px solid #e05c2a66;
  color: #e8985f;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.lg-pen-issue-btn:hover {
  border-color: #e05c2a;
  color: #ffb27e;
  background: #e05c2a22;
}
.lg-pen-actions {
  white-space: nowrap;
  text-align: right;
}
.lg-pen-act-btn {
  background: none;
  border: 1px solid #34302a;
  color: #9b9590;
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 7px;
  margin-left: 3px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-pen-act-btn:hover {
  border-color: #5b9bd5;
  color: #cfe2f5;
}
.lg-pen-act-btn--danger:hover {
  border-color: #e10600;
  color: #ff7a72;
}
.lg-pen-act-btn--post:hover {
  border-color: #5865f2;
  color: #aab2ff;
}
.lg-pen-act-btn--posted {
  border-color: #68d391 !important;
  color: #68d391 !important;
}

/* Issue / edit penalty form */
.lg-pen-form {
  margin: 10px;
  padding: 12px 14px;
  border: 1px solid #322e29;
  border-left: 3px solid #e05c2a;
  border-radius: 8px;
  background: #16140f;
}

/* Edit opens the form inside its own line under the penalty being edited, and the
   status line lands there too. Both are hosts for content that is already styled,
   so the cell itself stays out of the way — no table padding, no row hover. */
.lg-pen-form-row > td,
.lg-pen-flash-row > td {
  padding: 0;
  background: #100e0b;
  border-bottom: 1px solid var(--bdr);
}
.lg-pen-form-row:hover > td,
.lg-pen-flash-row:hover > td {
  background: #100e0b;
}
.lg-pen-flash-row .lg-pen-flash {
  margin: 8px 10px;
}
/* Mark the row the steward just acted on for as long as its status line shows. */
.lg-pen-row--flash > td {
  background: #14201740;
}
.lg-pen-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lg-pen-form-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e8e3db;
}
.lg-pen-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
}
.lg-pen-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lg-pen-field > span {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a847d;
}
.lg-pen-field--reason {
  margin-top: 9px;
}
.lg-pen-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}
.lg-pen-form-msg {
  font-size: 0.76rem;
}

/* Empty state */
.lg-empty {
  padding: 36px;
  text-align: center;
  color: var(--bdr-light);
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
}

/* ── Driver Admin ──────────────────────────────────────────────────────── */
.lg-admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px 6px;
  gap: 8px;
  border-bottom: 1px solid var(--bg-panel);
}
.lg-admin-bar-left,
.lg-admin-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg-race-form {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-panel);
  background: #0e0d0c;
}

/* ── Season Planner ───────────────────────────────────────────────────────── */
.lg-season-planner {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 14px;
}
.lg-sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lg-sp-title {
  font-size: 0.82rem;
  font-family: "Courier New", monospace;
  color: var(--c-teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lg-sp-close {
  background: none;
  border: none;
  color: #706b64;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  line-height: 1;
}
.lg-sp-close:hover {
  color: var(--c-red);
}
.lg-sp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  margin-bottom: 14px;
}
/* Unify native control arrows (Rounds spinner + Day selects, etc.) under one
   dark UA theme so the number-input spinner arrows match the select arrows. */
.lg-sp-controls .lg-input {
  color-scheme: dark;
  height: 30px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.lg-sp-unit {
  font-size: 0.78rem;
  color: #706b64;
  margin-left: 4px;
}
.lg-sp-template {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-radius: 4px;
  flex-wrap: wrap;
}
.lg-sp-template-label {
  font-size: 0.72rem;
  color: #706b64;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.lg-sp-tpl-groups {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.lg-sp-tpl-cb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #bab4ae;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--bdr);
  user-select: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.lg-sp-tpl-cb:has(input:checked) {
  border-color: rgba(0, 212, 170, 0.45);
  color: var(--c-teal);
  background: rgba(0, 212, 170, 0.09);
}
.lg-sp-tpl-cb input {
  margin: 0;
  accent-color: var(--c-teal);
}
.lg-sp-day-tag {
  font-size: 0.68rem;
  color: #706b64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 2px;
}
.lg-sp-day-sep {
  color: #3c3835;
}
.lg-sp-rounds-wrap {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  margin-bottom: 12px;
  background: var(--bg-base);
}
.lg-sp-rounds {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lg-sp-round-row {
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 8px 10px;
}
.lg-sp-round-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.lg-sp-round-label {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--c-amber);
  min-width: 28px;
  font-weight: bold;
}
.lg-sp-dates {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
.lg-sp-day-label {
  font-size: 0.72rem;
  color: #8a847d;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lg-sp-day-label .lg-sp-day-tag {
  font-size: 0.68rem;
}
.lg-sp-day-label--tbd {
  color: #504c48;
  font-style: italic;
}
.lg-sp-remove-btn {
  background: none;
  border: none;
  color: #504c48;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
  line-height: 1;
  margin-left: auto;
  transition: color 0.12s;
}
.lg-sp-remove-btn:hover {
  color: var(--c-red);
}
.lg-sp-sessions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.lg-sp-cb {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: #8a847d;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--bdr);
  user-select: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.lg-sp-cb:has(input:checked) {
  border-color: rgba(0, 212, 170, 0.4);
  color: var(--c-teal);
  background: rgba(0, 212, 170, 0.07);
}
.lg-sp-cb input {
  margin: 0;
  accent-color: var(--c-teal);
}
.lg-sp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lg-sp-footer-right {
  display: flex;
  gap: 8px;
}
.lg-sp-created-msg {
  font-size: 0.78rem;
  color: var(--c-teal);
  font-family: "Courier New", monospace;
}
.lg-race-form-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.lg-add-btn {
  background: rgba(245, 166, 35, 0.13);
  color: var(--c-amber);
  border: 1px solid rgba(245, 166, 35, 0.27);
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  cursor: pointer;
  transition: background 0.15s;
}
.lg-add-btn:hover {
  background: rgba(245, 166, 35, 0.27);
}
.lg-add-btn[data-action="add-team"],
.lg-add-btn[data-action="add-driver"],
.lg-add-btn[data-action="add-race"],
.lg-add-btn[data-action="plan-season"],
.lg-add-btn[data-action="sp-add-round"] {
  background: rgba(0, 212, 170, 0.13);
  color: var(--c-teal);
  border-color: rgba(0, 212, 170, 0.27);
}
.lg-add-btn[data-action="add-team"]:hover,
.lg-add-btn[data-action="add-driver"]:hover,
.lg-add-btn[data-action="add-race"]:hover,
.lg-add-btn[data-action="plan-season"]:hover,
.lg-add-btn[data-action="sp-add-round"]:hover {
  background: rgba(0, 212, 170, 0.27);
}
.lg-sp-footer .lg-cancel-btn {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: transparent;
  color: #e05252;
  border: 1px solid #6b2e2e;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.lg-sp-footer .lg-cancel-btn:hover {
  background: rgba(224, 82, 82, 0.12);
  border-color: #c44;
  color: #ff7070;
}
.admin-add-driver-btn {
  background: rgba(0, 212, 170, 0.13);
  color: var(--c-teal);
  border-color: rgba(0, 212, 170, 0.27);
}
.admin-add-driver-btn:hover {
  background: rgba(0, 212, 170, 0.27);
}

.lg-action-col {
  white-space: nowrap;
  text-align: right;
}
.lg-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 2px 4px;
  border-radius: 3px;
  color: #c8c0b0;
  opacity: 0.55;
  transition:
    opacity 0.15s,
    background 0.15s;
}
.lg-action-btn:hover {
  opacity: 1;
  background: #ffffff11;
}
.lg-delete-btn:hover {
  color: var(--c-red);
  background: rgba(225, 6, 0, 0.13);
}
.lg-save-btn {
  color: #2ecc71;
  opacity: 0.8;
  font-size: 1.1rem;
}
.admin-form-btns .lg-save-btn {
  font-size: 1.4rem;
}
.lg-save-btn:hover {
  background: #2ecc7122;
  opacity: 1;
}
.lg-cancel-btn {
  color: var(--c-red);
  opacity: 0.8;
}
.lg-cancel-btn:hover {
  background: rgba(225, 6, 0, 0.13);
  opacity: 1;
}
.lg-danger-btn {
  background: rgba(225, 6, 0, 0.13);
  color: var(--c-red);
  border: 1px solid rgba(225, 6, 0, 0.27);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  cursor: pointer;
  margin-left: 8px;
  opacity: 1;
}
.lg-danger-btn:hover {
  background: rgba(225, 6, 0, 0.33);
}

/* Edit row */
.lg-edit-row td {
  background: #1a1815 !important;
  padding: 5px 7px !important;
}
.lg-avatar-edit-label {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
}
.lg-avatar-edit-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #444;
  display: block;
  transition: opacity 0.15s;
}
.lg-avatar-edit-label:hover .lg-avatar-edit-img {
  opacity: 0.7;
}
.lg-avatar-edit-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2a2724;
  border: 1px solid #444;
  font-size: 0.85rem;
  font-weight: 700;
  color: #888;
}
.lg-avatar-edit-label:hover .lg-avatar-edit-placeholder {
  border-color: var(--c-amber);
  color: var(--c-amber);
}
.lg-input {
  background: var(--bg-table);
  border: 1px solid #272422;
  color: #ccc5bb;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  vertical-align: middle;
}
.lg-input:focus {
  border-color: var(--c-amber);
  box-shadow:
    0 0 0 2px rgba(245, 166, 35, 0.28),
    0 0 8px rgba(245, 166, 35, 0.18);
  color: #fff;
}
.lg-results-editor .f1-qualifying-table .lg-result-row:has(.lg-input:focus) td {
  background: rgba(245, 166, 35, 0.07) !important;
}
.lg-input-sm {
  padding: 3px 4px;
}
.lg-nat-select {
  padding: 3px 4px;
  font-size: 0.8rem;
  width: auto;
  min-width: 130px;
  max-width: 160px;
}
.lg-input-sm[type="number"]::-webkit-inner-spin-button,
.lg-input-sm[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lg-input-sm[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.lg-color-input {
  width: 34px;
  height: 24px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  background: none;
  vertical-align: middle;
}
.lg-all-label {
  font-size: 0.72rem;
  color: var(--txt-faint);
  font-family: "Courier New", monospace;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.lg-all-label input {
  vertical-align: middle;
  accent-color: var(--c-amber);
}
.lg-edit-hint {
  font-size: 0.68rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  margin-left: 3px;
  vertical-align: middle;
  cursor: help;
}

.lg-edit-hint--locked {
  color: var(--c-teal);
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
}

.lg-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Linked-driver avatar — not editable by the league manager */
.lg-avatar-locked {
  cursor: default;
}
.lg-avatar-locked:hover .lg-avatar-edit-img,
.lg-avatar-locked:hover .lg-avatar-edit-placeholder {
  filter: none;
  opacity: 1;
}

/* Delete confirm row */
.lg-delete-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #180e0e;
  border-top: 1px solid #3a1a1a;
  border-radius: 0 0 8px 8px;
}
.lg-delete-panel-msg {
  color: #cc5555;
  font-size: 0.82rem;
  font-family: "Courier New", monospace;
}
.lg-delete-panel-msg strong {
  color: #ff7070;
}
.lg-delete-panel-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.lg-confirm-msg strong {
  color: #ff7070;
}
.lg-row-confirming td {
  opacity: 0.35;
}

/* Stats row */
.lg-stats-row td {
  background: var(--bg-header) !important;
  padding: 10px 18px !important;
}
.lg-msg-row td {
  background: var(--bg-header) !important;
  padding: 12px 18px !important;
}
.lg-msg-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-msg-compose-header {
  font-size: 0.78rem;
  color: var(--c-teal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lg-msg-compose-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.lg-msg-compose-form .lg-msg-body {
  width: 100%;
}
.lg-msg-compose-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}
.lg-msg-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lg-msg-counter {
  font-size: 0.68rem;
  color: #555;
  text-align: right;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.lg-msg-counter--warn {
  color: #e07b3a;
}
.lg-stats-strip {
  display: flex;
  gap: 24px;
  align-items: center;
}
.lg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}
.lg-stat-val {
  font-family: "Courier New", monospace;
  font-size: 1.15rem;
  color: #c0b8ae;
  font-weight: bold;
}
.lg-stat-lbl {
  font-size: 0.68rem;
  color: var(--bdr-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.lg-stat-fl .lg-stat-val {
  color: #b44aff;
}
.lg-stat-pole .lg-stat-val {
  color: #b794f4;
}
.lg-stat-fp .lg-stat-val {
  color: #cbd1d8;
}
.lg-stat-dsq .lg-stat-val {
  color: var(--c-red);
}

/* Inactive row */
.lg-row-inactive {
  opacity: 0.45;
}

/* Error toast */
.lg-error-toast {
  display: none;
  padding: 7px 14px;
  background: rgba(225, 6, 0, 0.09);
  border-left: 3px solid var(--c-red);
  color: #ff7070;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  margin-bottom: 2px;
}
.lg-success-toast {
  display: none;
  padding: 7px 14px;
  background: rgba(0, 212, 170, 0.09);
  border-left: 3px solid var(--c-teal);
  color: var(--c-teal);
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  margin-bottom: 2px;
}

/* ── League Selector ───────────────────────────────────────────────────── */
.lg-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lg-selector-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bg-panel);
}
/* Row 1 — controls: search, scope chips, New League (pushed right). */
.lg-selector-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.lg-selector-new-wrap {
  margin-left: auto;
  flex: 0 0 auto;
}
/* Scope toggles (Owned / Bookmarked) beside the league filter. */
.lg-selector-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.lg-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--bdr, #2a2622);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--txt-dim, #9b9590);
  font-family: inherit;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.14s,
    border-color 0.14s,
    background 0.14s;
}
.lg-scope-btn:hover {
  color: var(--txt-bright, #e8e3db);
  border-color: var(--txt-dim, #9b9590);
}
.lg-scope-btn.active {
  color: #17150f;
  background: var(--c-amber, #f5a623);
  border-color: var(--c-amber, #f5a623);
  font-weight: 700;
}
/* Bookmark star on a selector button. */
.lg-selector-star {
  color: #f5c518;
  font-size: 0.82em;
}

/* Search is a single pill: icon + input + optional "+N more" badge. */
.lg-selector-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  max-width: 300px;
  padding: 5px 10px;
  background: var(--bg-base);
  border: 1px solid var(--bdr);
  border-radius: 999px;
  transition: border-color 0.15s;
}
.lg-selector-filter-wrap:focus-within {
  border-color: var(--c-teal);
}
.lg-selector-filter-ico {
  font-size: 0.78rem;
  opacity: 0.55;
  flex: 0 0 auto;
}
.lg-selector-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--txt-bright);
  font-size: 0.74rem;
  font-family: "Courier New", monospace;
  padding: 0;
  outline: none;
}
.lg-filter-more-badge {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 20px;
  color: var(--c-teal);
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lg-filter-more-badge:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--c-teal);
}

/* Row 2 — the league list. Wraps freely; if a member is in very many leagues
   it scrolls rather than pushing the page down. */
.lg-selector-leagues {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 108px;
  overflow-y: auto;
  padding-top: 9px;
  border-top: 1px solid var(--bg-panel);
}
.lg-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-table);
  border: 1px solid var(--bg-card);
  color: var(--txt-dim);
  border-radius: 999px;
  padding: 4px 13px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  white-space: nowrap;
}
.lg-selector-btn:hover {
  color: var(--txt-bright);
  border-color: var(--txt-dim);
}
.lg-selector-btn:hover {
  color: #928c85;
  border-color: var(--bdr-light);
}
.lg-selector-btn.active {
  color: #ccc5bb;
  border-color: rgba(245, 166, 35, 0.4);
  background: #0d1e1c;
}
.lg-selector-empty {
  font-size: 0.78rem;
  color: var(--bdr-light);
  font-family: "Courier New", monospace;
}
.lg-new-league-btn {
  background: none;
  border: 1px dashed var(--txt-dim);
  color: #928c85;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.lg-new-league-btn:hover {
  color: var(--c-amber);
  border-color: rgba(245, 166, 35, 0.33);
}
.lg-league-area {
  flex: 1;
  min-width: 0;
}

/* ── New League Form ───────────────────────────────────────────────────── */
.lg-new-league-form {
  padding: 22px 22px 18px;
}
.lg-form-title {
  font-size: 0.75rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lg-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 18px;
}
.lg-form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lg-form-wide {
  flex-basis: 100%;
}
.lg-input-full {
  width: 280px;
}
.lg-form-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  text-transform: none;
  color: var(--txt-bright);
  cursor: pointer;
}
.lg-form-check--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lg-form-hint {
  color: var(--txt-faint);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
}
.lg-pts-details--disabled {
  opacity: 0.45;
  pointer-events: none;
}
.lg-form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #5a544c;
  border-radius: 3px;
  background: var(--bg-table);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.12s,
    background 0.12s,
    box-shadow 0.12s;
}
.lg-form-check input[type="checkbox"]:hover {
  border-color: var(--c-amber);
}
.lg-form-check input[type="checkbox"]:checked {
  background: #2a2218;
  border-color: var(--c-amber);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.25);
}
.lg-form-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid var(--c-amber);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.lg-form-check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(245, 166, 35, 0.5);
  outline-offset: 1px;
}
.lg-form-check:hover {
  color: var(--c-amber);
}
.lg-pts-details {
  margin-top: 8px;
}
.lg-pts-details > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--fg-muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg-pts-details > summary::before {
  content: "▶";
  font-size: 0.65rem;
  transition: transform 0.15s;
}
.lg-pts-details[open] > summary::before {
  transform: rotate(90deg);
}
.lg-pts-section {
  margin-top: 10px;
}
.lg-pts-label {
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lg-pts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.lg-pts-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lg-pts-pos {
  font-size: 0.6rem;
  color: var(--fg-muted);
  line-height: 1;
}
.lg-pts-inp {
  width: 54px !important;
  text-align: center !important;
  padding: 3px 4px !important;
  font-size: 0.8rem !important;
}
.lg-pts-inp::-webkit-inner-spin-button,
.lg-pts-inp::-webkit-outer-spin-button {
  opacity: 1;
  filter: invert(1) brightness(0.85);
}
.lg-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.lg-import-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #333;
  color: #888;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: "Courier New", monospace;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.lg-import-btn:hover {
  border-color: var(--c-amber);
  color: var(--c-amber);
}

.lg-import-preview {
  margin-top: 18px;
  border-top: 1px solid #242220;
  padding-top: 14px;
}
.lg-import-preview-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: #666;
  font-family: "Courier New", monospace;
}
.lg-import-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 0.73rem;
  padding: 2px 6px;
  transition: color 0.15s;
}
.lg-import-clear-btn:hover {
  color: var(--c-red);
}
.lg-import-existing {
  font-size: 0.68rem;
  color: var(--c-amber);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 3px;
  padding: 0 4px;
  font-family: "Courier New", monospace;
  vertical-align: middle;
  margin-left: 4px;
}
.lg-import-new {
  font-size: 0.68rem;
  color: #50c878;
  border: 1px solid rgba(80, 200, 120, 0.3);
  border-radius: 3px;
  padding: 0 4px;
  font-family: "Courier New", monospace;
  vertical-align: middle;
  margin-left: 4px;
}
/* Existing driver paired with an existing team they don't belong to. */
.lg-badge-orphan {
  font-size: 0.68rem;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  border-radius: 3px;
  padding: 0 4px;
  font-family: "Courier New", monospace;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Administration Card ───────────────────────────────────────────────── */
.admin-card {
  background: #1a1815;
  border: 1px solid var(--bg-panel);
  border-radius: 8px;
  overflow: hidden;
}
.admin-card-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bg-panel);
  background: #0f0e0c;
}
.admin-title {
  font-size: 0.86rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.admin-section {
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--bg-table);
}
.admin-section:last-child {
  border-bottom: none;
}
.admin-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-section-label {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-muted);
}

.admin-orphan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.admin-orphan-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid #2a2724;
  background: #181613;
  color: #a09a93;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s;
}
.admin-orphan-chip:hover {
  background: #1e1c19;
  color: #e8e3db;
  transform: translateY(-1px);
  border-color: rgba(0, 212, 170, 0.35);
}

.admin-driver-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.admin-driver-filter-bar .lg-input[type="search"] {
  width: 180px;
}
.admin-driver-filter-bar
  .lg-input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}
.admin-created-cell {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: #555;
  white-space: nowrap;
}

/* Role pills */
.admin-role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}
.admin-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid;
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  cursor: default;
}
.admin-pill-icon {
  font-size: 0.9rem;
}
.admin-pill-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.admin-role-count {
  display: inline-block;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.68rem;
  color: #0f0e0c;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}
.admin-pill-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  opacity: 0.4;
  padding: 0 2px;
  margin-left: 2px;
  transition: opacity 0.15s;
  line-height: 1;
}
.admin-pill-edit:hover {
  opacity: 1;
}

/* Role edit form */
.admin-role-form {
  margin-top: 10px;
  padding: 12px 14px;
  background: #0e0e0e;
  border: 1px solid var(--bg-panel);
  border-radius: 5px;
}
.admin-role-form-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
}
.admin-icon-input {
  width: 48px;
  font-size: 1.1rem;
  text-align: center;
}
.admin-desc-label {
  flex: 1;
  min-width: 200px;
}
.admin-form-btns {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-bottom: 1px;
}

/* Driver roster */
.admin-driver-read-row td {
  padding: 4px 6px;
  font-size: 0.82rem;
}
.admin-roles-cell {
  padding: 4px 6px;
}
.admin-role-mini-badge {
  display: inline-block;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-family: "Courier New", monospace;
  margin-right: 3px;
  white-space: nowrap;
}
.admin-age-cell {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--txt-faint);
  text-align: center;
  width: 36px;
}
.admin-driver-read-row .lg-car-num {
  width: 40px;
  font-size: 0.76rem;
}
.admin-driver-read-row .lg-action-col {
  white-space: nowrap;
  width: 1%;
}
.admin-no-roles {
  color: #272422;
  font-size: 0.75rem;
}

/* Driver edit row */
.admin-driver-edit-row td {
  background: var(--bg-header) !important;
  padding: 10px 14px !important;
}
.admin-driver-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-driver-edit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-end;
}
.admin-driver-edit-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.admin-driver-edit-actions {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding-bottom: 2px;
  margin-left: auto;
}
.admin-field-static {
  display: inline-block;
  padding: 3px 6px;
  font-size: 0.8rem;
  color: #555;
  font-style: italic;
}
.admin-driver-save-btn {
  font-size: 1.4rem !important;
  opacity: 1 !important;
  color: #2ecc71 !important;
  padding: 2px 7px !important;
}
.admin-driver-save-btn:hover {
  background: #2ecc7122 !important;
}
.admin-driver-cancel-btn {
  font-size: 1.1rem !important;
  opacity: 0.8 !important;
  color: var(--c-red) !important;
}
.admin-driver-cancel-btn:hover {
  opacity: 1 !important;
  background: rgba(225, 6, 0, 0.13) !important;
}
.admin-check-for {
  font-size: 0.72rem;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  margin-right: 6px;
  white-space: nowrap;
}
.admin-check-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.admin-check-label input {
  accent-color: var(--c-amber);
  cursor: pointer;
}
.admin-check-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-check-locked input {
  cursor: not-allowed;
}
.admin-role-lock {
  font-size: 0.7rem;
  opacity: 0.6;
}
.admin-check-actions {
  display: flex;
  gap: 4px;
  margin-left: 0;
}

/* ── Header user / login area ──────────────────────────────────────────────── */
.login-bar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.login-bar-banner {
  position: absolute;
  inset: -6px -10px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  opacity: 0.45;
  pointer-events: none;
}
.login-bar-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-bar-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bdr);
}
.login-bar-name {
  color: var(--txt-mid);
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.login-bar-logout {
  color: #718096;
  text-decoration: none;
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.08em;
}
.login-bar-logout:hover {
  color: var(--c-red);
}
.login-bar-expired {
  font-size: 0.68rem;
  font-weight: 600;
  color: #f5a623;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-align: right;
}

.login-bar-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Troubleshooting hint shown under the logged-out login buttons.
   Positioned absolutely below the header border so it never inflates the
   fixed 62px header height (which would push the buttons over the red line). */
.login-bar-help {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  max-width: 360px;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--txt-muted);
  text-align: right;
  padding: 8px 26px 8px 12px;
  background: var(--bg-header);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 200;
}
.login-bar-help-x {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition:
    color 0.12s,
    background 0.12s;
}
.login-bar-help-x:hover {
  color: var(--txt-bright);
  background: rgba(255, 255, 255, 0.08);
}
.login-bar-help code {
  font-family: "Courier New", monospace;
  color: var(--txt-mid);
}

.login-bar-discord-btn,
.login-bar-steam-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.login-bar-discord-btn {
  background: #5865f2;
}
.login-bar-discord-btn:hover {
  background: #4752c4;
}
.login-bar-steam-btn {
  background: #1b2838;
  border: 1px solid #4a6a8a;
}
.login-bar-steam-btn:hover {
  background: #2a475e;
}
.login-bar-discord-btn svg,
.login-bar-steam-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Sign Up button in login bar ──────────────────────────────────────────── */
.login-bar-signup-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #322659;
  color: #b794f4;
  border: 1px solid #553c9a;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.login-bar-signup-btn:hover {
  background: #44337a;
  border-color: #6b46c1;
  color: #d6bcfa;
}

/* ── App sign-up modal ────────────────────────────────────────────────────── */
.app-reg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.app-reg-modal.is-active {
  display: flex;
}
.app-reg-box {
  position: relative;
  background: #1a1a2e;
  border: 1px solid #2d3748;
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.app-reg-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: #718096;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.app-reg-close:hover {
  color: #e2e8f0;
}
.app-reg-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.app-reg-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 0.25rem;
}
.app-reg-desc {
  font-size: 0.82rem;
  color: #718096;
  line-height: 1.5;
  margin: 0;
}
.app-reg-input {
  width: 100%;
  box-sizing: border-box;
  margin: 1rem 0 0.4rem;
  padding: 0.6rem 0.85rem;
  background: #0f0f1a;
  border: 1px solid #2d3748;
  border-radius: 7px;
  color: #e2e8f0;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.app-reg-input:focus {
  border-color: #b794f4;
}
.app-reg-error {
  min-height: 1.2em;
  color: #fc8181;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.app-reg-btn {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0.65rem 1.5rem;
  background: #44337a;
  color: #d6bcfa;
  border: 1px solid #553c9a;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.app-reg-btn:hover {
  background: #553c9a;
  border-color: #6b46c1;
  color: #e9d8fd;
}
.app-reg-discord-btn {
  background: #3c4a9c;
  border-color: #3c4a9c;
  color: #c3ceff;
  margin-top: 0.75rem;
}
.app-reg-discord-btn:hover {
  background: #4a5bbf;
  border-color: #4a5bbf;
  color: #dce3ff;
}
.app-reg-greeting {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.4;
}
.app-reg-greeting span {
  color: #b794f4;
  font-size: 1.45rem;
}
.app-reg-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #718096;
}

/* ── Invite row in admin ───────────────────────────────────────────────────── */
.admin-invite-row td {
  padding: 0;
}
.admin-invite-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: #0e1a17;
  border-left: 3px solid var(--c-amber);
}
.lg-invite-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: #0e1a17;
  border-left: 3px solid #5865f2;
}
.lg-invite-label {
  font-size: 0.78rem;
  color: var(--txt-muted);
}
.lg-invite-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg-invite-input {
  flex: 1;
  background: #0f0e0c;
  border: 1px solid var(--bg-card);
  color: #aeb6ff;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 4px;
}
.lg-invite-btn .lg-discord-icon {
  display: block;
  color: #5865f2;
}
.lg-th-linked,
.lg-linked-col {
  width: 34px;
  text-align: center;
}
.lg-linked-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  opacity: 0.5;
}
.admin-invite-label {
  font-size: 0.78rem;
  color: var(--txt-muted);
}
.admin-invite-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-invite-input {
  flex: 1;
  background: #0f0e0c;
  border: 1px solid var(--bg-card);
  color: var(--c-amber);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 4px;
}
.admin-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-discord-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.admin-discord-badge--linked {
  color: #57f287;
  background: #57f28715;
  border: 1px solid #57f28740;
  cursor: default;
}
.admin-discord-badge--invite {
  color: #5865f2;
  background: #5865f215;
  border: 1px solid #5865f240;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.admin-discord-badge--invite:hover {
  background: #5865f230;
  border-color: #5865f2aa;
}

.admin-reg-badge--active {
  color: #00d4aa;
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.3);
  cursor: default;
}
.admin-reg-badge--pending {
  color: #555;
  background: rgba(85, 85, 85, 0.1);
  border: 1px solid rgba(85, 85, 85, 0.25);
  cursor: default;
}
.admin-revoke-reg-btn {
  color: #e10600;
  border-color: #e10600;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.admin-revoke-reg-btn:hover {
  opacity: 1;
  background: rgba(225, 6, 0, 0.1);
}

.admin-invite-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── Driver Profile Card ───────────────────────────────────────────────────── */
.profile-zone {
  padding: 2px 0 6px;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.profile-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
}
.profile-avatar-wrap:hover .profile-avatar-overlay {
  opacity: 1;
}
.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #00000077;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.44rem;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(245, 166, 35, 0.33);
  flex-shrink: 0;
  display: block;
}

.profile-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1815;
  color: var(--txt-muted);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.profile-id {
  flex: 1;
  min-width: 0;
}

.profile-abbr {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--c-amber);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-age-badge {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-amber);
  background: rgba(245, 166, 35, 0.09);
  border: 1px solid rgba(245, 166, 35, 0.27);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.profile-nat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #928c85;
  margin-top: 3px;
}

.profile-car-num {
  font-family: "Courier New", monospace;
  font-size: 1.92rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  line-height: 1;
}

.profile-team-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.profile-team-bar:last-of-type {
  margin-bottom: 10px;
}
.profile-team-bar--link {
  cursor: pointer;
  transition: filter 0.15s;
}

/* Expand / collapse the extra league participations. */
.profile-teams-more[hidden] {
  display: none;
}
.profile-teams-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--bdr, #2a2622);
  border-radius: 4px;
  color: var(--txt-dim, #9b9590);
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.profile-teams-toggle:hover {
  color: var(--txt-bright, #e8e3db);
  border-color: var(--c-amber, #f5a623);
  background: rgba(245, 166, 35, 0.06);
}
.profile-teams-toggle-chev {
  font-size: 0.6rem;
  transition: transform 0.18s ease;
}
.profile-teams-toggle.is-open .profile-teams-toggle-chev {
  transform: rotate(180deg);
}
.profile-team-bar--link:hover {
  filter: brightness(1.25);
}
.profile-team-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-team-bar-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #928c85;
  font-family: "Courier New", monospace;
}

.profile-team-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.profile-ts-sep {
  color: #3a3733;
  font-size: 0.72rem;
}
.profile-ts-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 22px;
}
.profile-ts-val {
  font-family: "Courier New", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: #c8c0b4;
}
.profile-ts-lbl {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: #5a554e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.profile-ts-item--fl .profile-ts-val {
  color: #a78bfa;
}
.profile-ts-item--fp .profile-ts-val {
  color: #cbd1d8;
}
.profile-car-num-inline {
  font-family: "Courier New", monospace;
  font-size: 1.02rem;
  font-weight: 900;
}
.profile-no-team {
  font-size: 0.84rem;
  color: var(--txt-faint);
  margin-bottom: 14px;
  padding: 6px 10px;
}

.profile-team-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.profile-team-no-team {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-amber);
  letter-spacing: 0.03em;
}

.profile-joined {
  font-size: 0.78rem;
  color: var(--txt-muted);
  font-family: "Courier New", monospace;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bg-panel);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.profile-stat {
  background: var(--bg-table);
  padding: 10px 6px;
  text-align: center;
}

.profile-stat-val {
  font-family: "Courier New", monospace;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--txt-bright);
  line-height: 1;
  margin-bottom: 4px;
}

.profile-stat-val--fl {
  color: #b44aff;
}

.profile-stat-label {
  font-size: 0.92rem;
  color: var(--txt-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.profile-role-badge {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  font-family: "Courier New", monospace;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.profile-no-roles {
  font-size: 0.82rem;
  color: var(--txt-faint);
  font-family: "Courier New", monospace;
}

.profile-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-footer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-footer-label {
  font-size: 0.78rem;
  color: var(--c-amber);
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.profile-footer-val {
  font-size: 0.86rem;
  color: #ccc5bb;
  display: flex;
  align-items: center;
  gap: 5px;
}

.profile-penalties--warn {
  color: var(--c-red);
}

.profile-status-tag {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  border: 1px solid;
}

.profile-status-tag--ok {
  color: var(--c-teal);
  background: rgba(0, 212, 170, 0.1);
  border-color: rgba(0, 212, 170, 0.35);
}

.profile-status-tag--pending {
  color: var(--c-amber);
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.35);
}

.profile-league-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-league-dot--active {
  background: var(--c-amber);
}
.profile-league-dot--planned {
  background: #5865f2;
}
.profile-league-dot--finished {
  background: var(--bdr-light);
}

.profile-divider {
  height: 1px;
  background: var(--bg-panel);
  margin: 12px 0 16px;
}

.profile-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px;
  color: var(--txt-muted);
  font-size: 0.9rem;
  font-family: "Courier New", monospace;
  text-align: center;
}

/* ── Account Card ──────────────────────────────────────────────────────────── */

.account-card {
  padding: 4px 0 16px;
}

.account-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0;
  cursor: pointer;
}
.account-card-toggle[aria-expanded="true"] {
  margin-bottom: 14px;
}

.account-card-title {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-amber);
}

.account-card-chevron {
  font-size: 1rem;
  color: rgba(245, 166, 35, 0.53);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
.account-card-toggle[aria-expanded="true"] .account-card-chevron {
  transform: rotate(90deg);
}

.account-section {
  margin-bottom: 18px;
}

.account-section-title {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #928c85;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2825;
}

.account-section-title--danger {
  color: #e05555;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.account-field-label {
  font-size: 0.7rem;
  color: #c8c0b4;
}

.account-field-row {
  display: flex;
  gap: 6px;
}

.account-input {
  flex: 1;
  background: #18171580;
  border: 1px solid #35322e;
  border-radius: 4px;
  color: #e8e0d4;
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.account-input:focus {
  border-color: rgba(245, 166, 35, 0.4);
}
.account-input--abbr {
  flex: 0 0 auto;
  width: 56px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.account-field-hint {
  font-size: 0.68rem;
  color: #5a554e;
}

.acct-feedback--ok {
  color: var(--c-teal);
}
.acct-feedback--err {
  color: var(--c-red);
}

.account-select {
  flex: 1;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a554e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.account-action-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
}

/* ── Account card: League Manager section (leagues you founded) ──────────── */
.acct-lgm-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
}
.acct-lgm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.022);
  min-width: 0;
}
.acct-lgm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a453f;
  flex-shrink: 0;
}
.acct-lgm-dot--active {
  background: var(--c-teal, #00d4aa);
  box-shadow: 0 0 5px rgba(0, 212, 170, 0.6);
}
.acct-lgm-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--txt-bright, #e8e3db);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.acct-lgm-badge {
  font-family: "Courier New", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d857a;
  border: 1px solid #3a352f;
  border-radius: 9px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.acct-lgm-badge--arch {
  color: #f5a623;
  border-color: #f5a62355;
  background: #f5a6230f;
}
.acct-lgm-meta {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  color: #706b64;
  white-space: nowrap;
  flex-shrink: 0;
}

.account-action-info {
  flex: 1;
  min-width: 0;
}

.account-action-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c8c0b4;
  margin-bottom: 2px;
}

.account-action-desc {
  font-size: 0.68rem;
  color: #5a554e;
  line-height: 1.4;
}

.account-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    opacity 0.15s,
    filter 0.15s;
  white-space: nowrap;
}
.account-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-btn--primary {
  background: rgba(245, 166, 35, 0.13);
  border-color: rgba(245, 166, 35, 0.4);
  color: var(--c-amber);
}
.account-btn--primary:hover:not(:disabled) {
  background: #f5a62333;
}

.account-btn--warn {
  background: #e0923322;
  border-color: #e0923355;
  color: #e09233;
}
.account-btn--warn:hover:not(:disabled) {
  background: #e0923333;
}

.account-danger-zone {
  border: 1px solid #e0555522;
  border-radius: 6px;
  padding: 10px 12px;
  background: #e0555508;
}

.account-btn--danger {
  background: #e0555522;
  border-color: #e0555555;
  color: #e05555;
}
.account-btn--danger:hover:not(:disabled) {
  background: #e0555533;
}

.account-btn--steam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1b2838;
  border-color: #2a475e;
  color: #c6d4df;
  text-decoration: none;
}
.account-btn--steam:hover {
  background: #2a475e;
  color: #fff;
}

.acct-steam-linked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--bdr);
  border-radius: 6px;
}
.acct-steam-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt-bright);
}
.acct-steam-id {
  font-size: 0.68rem;
  color: var(--txt-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.acct-steam-unlinked {
  font-size: 0.78rem;
  color: var(--txt-faint);
  font-style: italic;
}

/* ── PROFILE NEXT RACES ──────────────────────────────────────────────────── */
.profile-team-memberships {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #222;
}
.profile-section-label--purple {
  color: var(--c-purple);
}
.profile-tm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #1a1a1a;
}
.profile-tm-row:last-child {
  border-bottom: none;
}
.profile-tm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-tm-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}
.profile-tm-name {
  font-size: 0.78rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.12s;
}
.profile-tm-row:hover .profile-tm-name {
  opacity: 0.75;
}
.profile-tm-roles {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.profile-tm-role {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid;
  font-family: "Courier New", monospace;
  white-space: nowrap;
}

.profile-last-races {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #222;
}

.profile-lrr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #1a1a1a;
}
.profile-lrr-row:last-child {
  border-bottom: none;
}

.profile-lrr-pos {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: monospace;
  width: 34px;
  flex-shrink: 0;
  text-align: center;
  color: #666;
}
.profile-lrr-pos--gold {
  color: #f5c518;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(245, 197, 24, 0.55);
}
.profile-lrr-pos--silver {
  color: #bdd0e8;
  font-size: 0.8rem;
  text-shadow: 0 0 6px rgba(160, 195, 230, 0.5);
}
.profile-lrr-pos--bronze {
  color: #e0924e;
  font-size: 0.8rem;
  text-shadow: 0 0 6px rgba(224, 146, 78, 0.45);
}

.profile-lrr-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.profile-lrr-track {
  font-size: 0.75rem;
  color: #c8c0b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-lrr-meta {
  font-size: 0.68rem;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-lrr-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.profile-lrr-pts {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  font-family: monospace;
}
.profile-lrr-pts-lbl {
  font-size: 0.68rem;
  font-weight: 400;
  color: #555;
  margin-left: 1px;
}

.profile-lrr-fl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #a855f7;
  border: 1px solid #a855f740;
  background: #a855f712;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.profile-next-races {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #222;
}

.profile-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 6px;
}
.profile-section-label--teal {
  color: var(--c-teal);
}
.profile-section-label--blue {
  color: var(--c-blue);
}

.profile-next-race-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #1a1a1a;
}
.profile-next-race-row:last-child {
  border-bottom: none;
}

.profile-race-date-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 44px;
  flex-shrink: 0;
}

.profile-race-day {
  font-size: 0.75rem;
  color: #c8c0b0;
  font-family: monospace;
  white-space: nowrap;
}

.profile-race-time {
  font-size: 0.68rem;
  color: #555;
  font-family: monospace;
}

.profile-race-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.profile-race-league {
  font-size: 0.75rem;
  color: var(--c-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-race-league--blue {
  color: var(--c-blue);
}

.profile-race-meta {
  font-size: 0.68rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-no-races {
  font-size: 0.72rem;
  color: #444;
  padding: 4px 0;
}

/* ── RESULTS TAB ─────────────────────────────────────────────────────────── */
.lg-results-rounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  gap: 6px;
  padding: 12px 0 10px;
}

.lg-result-round-btn {
  background: var(--bg-card);
  border: 1px solid #2a2826;
  color: #888;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: monospace;
  text-align: center;
  width: 100%;
  line-height: 1.4;
  transition:
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.2s;
}
.lg-result-round-btn:hover {
  border-color: #555;
  color: #c8c0b0;
}
.lg-result-round-btn--done {
  background: #00d4aa1a;
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.lg-result-round-btn--incomplete {
  background: #c8960c1a;
  border-color: #c8960c;
  color: #c8960c;
}
.lg-result-round-btn.active {
  background: #ffffff18;
  border-color: #ffffffaa;
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(255, 255, 255, 0.18);
}
.lg-result-round-btn--done.active {
  background: #00d4aa33;
  border-color: var(--c-teal);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(0, 212, 170, 0.15),
    0 0 10px rgba(0, 212, 170, 0.35);
}
.lg-result-round-btn--incomplete.active {
  background: #c8960c33;
  border-color: #c8960c;
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(200, 150, 12, 0.15),
    0 0 10px rgba(200, 150, 12, 0.35);
}
.lg-result-round-btn--invalid {
  background: #d4c8001a;
  border-color: #d4c800;
  color: #d4c800;
}
.lg-result-round-btn--invalid.active {
  background: #d4c80033;
  border-color: #d4c800;
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(212, 200, 0, 0.15),
    0 0 10px rgba(212, 200, 0, 0.35);
}

.lg-results-editor {
  margin-top: 4px;
}

.lg-result-row--conflict td {
  background: rgba(255, 200, 0, 0.07);
}
.lg-result-row--conflict td:first-child {
  border-left: 3px solid rgba(255, 200, 0, 0.55);
}

.lg-results-editor-header {
  font-size: 0.85rem;
  color: #c8c0b0;
  padding: 8px 0 8px;
  border-bottom: 1px solid #2a2a3e;
  margin-bottom: 4px;
  font-family: monospace;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lg-completed-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  font-family: monospace;
  letter-spacing: 0;
}

.lg-completed-toggle input[type="checkbox"] {
  accent-color: var(--c-teal);
  cursor: pointer;
}

.lg-results-save-bar {
  padding: 10px 0 4px;
}

.lg-result-warning {
  font-size: 0.75rem;
  color: #c8960c;
  background: #c8960c12;
  border: 1px solid #c8960c33;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 6px;
}

.lg-row-completed:hover td {
  background: #1c1a18;
}

/* ── Race meta / weather status bar ──────────────────────────────────────── */
.lg-race-meta-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 6px;
  background: #1a1917;
  border: 1px solid #2a2826;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #8a9db5;
  letter-spacing: 0.03em;
}

/* ── Save bar with import button ─────────────────────────────────────────── */
.lg-results-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}

.lg-results-save-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-results-save-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-add-driver-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: transparent;
  color: #68d391;
  border: 1px solid #2f6b45;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.lg-add-driver-btn:hover {
  background: rgba(104, 211, 145, 0.12);
  border-color: #4a9e6a;
  color: #9ae6b4;
}

.lg-delete-btn {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: transparent;
  color: #e05252;
  border: 1px solid #6b2e2e;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.lg-delete-btn:hover {
  background: rgba(224, 82, 82, 0.12);
  border-color: #c44;
  color: #ff7070;
}
.lg-delete-btn[data-confirm="1"] {
  background: rgba(224, 82, 82, 0.18);
  border-color: #c44;
  color: #ff7070;
}

.lg-simulate-btn {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: transparent;
  color: var(--c-amber);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.lg-simulate-btn:hover {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.6);
  color: #ffc84a;
}
.lg-clearpts-btn {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: transparent;
  color: #e0905a;
  border: 1px solid rgba(224, 144, 90, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.lg-clearpts-btn:hover {
  background: rgba(224, 144, 90, 0.12);
  border-color: rgba(224, 144, 90, 0.6);
  color: #ff9d63;
}

/* Blue "Race Report" button (Results save-bar) */
.lg-report-btn {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  background: rgba(58, 168, 255, 0.12);
  color: #3aa8ff;
  border: 1px solid rgba(58, 168, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lg-report-btn:hover {
  background: rgba(58, 168, 255, 0.22);
  border-color: rgba(58, 168, 255, 0.75);
  color: #6bc0ff;
}

/* ── Race Report modal ──────────────────────────────────────────────────── */
.lg-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lg-report-modal {
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  width: min(1000px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.lg-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
}
.lg-report-title {
  font-weight: 700;
  color: var(--txt-bright);
}
.lg-report-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-table);
}
.lg-report-toolbar button {
  font: inherit;
  font-size: 0.78rem;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background: var(--bg-panel);
  color: var(--txt-bright);
  cursor: pointer;
}
.lg-report-toolbar button:hover {
  border-color: #3aa8ff;
}
.lg-report-uploading {
  font-size: 0.75rem;
  color: #3aa8ff;
  margin-left: 4px;
}
.lg-report-body {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.lg-report-textarea {
  flex: 1 1 50%;
  min-height: 340px;
  resize: none;
  border: none;
  border-right: 1px solid var(--bdr);
  background: var(--bg-card);
  color: var(--txt-bright);
  padding: 14px;
  font-family: "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  outline: none;
}
.lg-report-preview {
  flex: 1 1 50%;
  overflow-y: auto;
  padding: 14px 18px;
  background: var(--bg-panel);
}
.lg-report-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--bdr);
}
.lg-report-meta {
  font-size: 0.75rem;
  color: var(--txt-dim);
}
.lg-report-msg {
  font-size: 0.78rem;
}
.lg-report-foot-btns {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
@media (max-width: 680px) {
  .lg-report-body {
    flex-direction: column;
  }
  .lg-report-textarea {
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    min-height: 200px;
  }
}

/* ── Rendered Markdown (report preview + overview display) ───────────────── */
.lo-md {
  color: var(--txt-mid);
  font-size: 0.9rem;
  line-height: 1.6;
  word-wrap: break-word;
}
.lo-md h1, .lo-md h2, .lo-md h3 {
  color: var(--txt-bright);
  margin: 0.6em 0 0.35em;
  line-height: 1.25;
}
.lo-md h1 { font-size: 1.4rem; }
.lo-md h2 { font-size: 1.18rem; }
.lo-md h3 { font-size: 1.02rem; }
.lo-md p { margin: 0.5em 0; }
.lo-md a { color: #3aa8ff; }
.lo-md ul, .lo-md ol { margin: 0.5em 0; padding-left: 1.4em; }
.lo-md li { margin: 0.2em 0; }
.lo-md img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.6em 0;
  display: block;
}
.lo-md blockquote {
  margin: 0.6em 0;
  padding: 4px 12px;
  border-left: 3px solid var(--league-accent, #3aa8ff);
  color: var(--txt-dim);
}
.lo-md code {
  font-family: "Courier New", monospace;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.86em;
}
.lo-md pre {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
}
.lo-md pre code { background: none; padding: 0; }
.lo-md table { border-collapse: collapse; margin: 0.6em 0; }
.lo-md th, .lo-md td { border: 1px solid var(--bdr); padding: 4px 8px; }
.lo-md hr { border: none; border-top: 1px solid var(--bdr); margin: 0.8em 0; }

/* 📝 marker on race rows that carry a report */
.lo-report-flag {
  margin-left: 4px;
  font-size: 0.85em;
}
.lo-md, .lo-md p, .lo-md li, .lo-md h1, .lo-md h2, .lo-md h3 {
  white-space: normal;
}

/* ── Race Report bulletin ("official media pack") ─────────────────────────
   Shown in the League Overview race detail. Carbon & Speed background;
   the accent adapts per league via --league-accent. Internal layout responds
   to the card's own width via container queries (the report lives inside a
   table detail cell that can be far wider than the viewport). */
.lo-rr-wrap {
  --rrac: var(--league-accent, #e10600);
  container-type: inline-size;
  margin: 16px 6px 6px;
  max-width: 100%;
  box-sizing: border-box;
}
.lo-rr {
  position: relative;
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  /* Carbon-fibre weave + diagonal accent speed streak */
  background:
    linear-gradient(
      115deg,
      transparent 0 58%,
      color-mix(in srgb, var(--rrac) 9%, transparent) 58% 59.5%,
      transparent 59.5% 63%,
      rgba(255, 255, 255, 0.03) 63% 63.7%,
      transparent 63.7%
    ),
    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.3px),
    radial-gradient(rgba(0, 0, 0, 0.55) 1px, transparent 1.3px),
    #151311;
  background-size: 100% 100%, 7px 7px, 7px 7px;
  background-position: 0 0, 0 0, 3.5px 3.5px;
  /* The host table cell sets white-space:nowrap and centers text — reset
     both for the bulletin. */
  white-space: normal;
  text-align: left;
}
.lo-rr * { white-space: normal; }

/* Checkered ribbon */
.lo-rr-ribbon {
  height: 12px;
  background:
    linear-gradient(90deg, transparent 55%, #151311 92%),
    repeating-conic-gradient(#dcd8d0 0 25%, #14120f 0 50%);
  background-size: 100% 100%, 24px 24px;
  border-bottom: 2px solid var(--rrac);
}

/* Head group: masthead + hero share one banner backdrop when the report has
   no image of its own */
.lo-rr-head {
  position: relative;
}
.lo-rr-head-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
.lo-rr-head-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.25) 100%
  );
}
.lo-rr-head > *:not(.lo-rr-head-bg) {
  position: relative;
  z-index: 1;
}
.lo-rr-head--banner .lo-rr-mast {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* Masthead */
.lo-rr-mast {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 26px 14px;
  border-bottom: 1px solid var(--bdr);
}
/* League banner behind the masthead — same treatment as the league header */
.lo-rr-mast-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
.lo-rr-mast-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.58) 45%,
    rgba(0, 0, 0, 0.32) 100%
  );
}
.lo-rr-mast > div:not(.lo-rr-mast-bg) { position: relative; z-index: 1; }
.lo-rr-mast--bannered .lo-rr-mast-sub,
.lo-rr-mast--bannered .lo-rr-doc {
  color: #e8e3db;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lo-rr-mast--bannered .lo-rr-title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lo-rr-title {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.25rem, 3.4cqw, 1.9rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--txt-bright);
  line-height: 1;
}
.lo-rr-tick {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  margin-right: 10px;
  background: var(--rrac);
  transform: skewX(-14deg) translateY(0.12em);
}
.lo-rr-mast-sub {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-top: 7px;
}
.lo-rr-doc {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  line-height: 1.75;
  text-align: right;
  color: var(--txt-dim);
  white-space: nowrap;
}
.lo-rr-doc b { color: var(--txt-bright); font-weight: 700; }

/* Hero */
.lo-rr-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.lo-rr-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}
.lo-rr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    185deg,
    rgba(20, 18, 15, 0) 30%,
    rgba(20, 18, 15, 0.55) 62%,
    rgba(20, 18, 15, 0.96) 100%
  );
}
/* League banner used as hero backdrop (report has no own image): the band
   sizes to its text content — the banner must not add card height. */
.lo-rr-hero--fallback {
  aspect-ratio: auto;
  padding: 30px 0 6px;
}
.lo-rr-hero--fallback .lo-rr-hero-txt {
  position: relative;
  inset: auto;
  margin: 0 26px 14px;
}
/* No report image and no league banner: styled accent band */
.lo-rr-hero--noimg {
  aspect-ratio: auto;
  padding: 34px 0 6px;
  background:
    linear-gradient(
      115deg,
      transparent 0 62%,
      color-mix(in srgb, var(--rrac) 22%, transparent) 62% 63.5%,
      transparent 63.5% 67%,
      rgba(255, 255, 255, 0.06) 67% 67.7%,
      transparent 67.7% 72%,
      color-mix(in srgb, var(--rrac) 12%, transparent) 72% 72.8%,
      transparent 72.8%
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--rrac) 16%, transparent), transparent);
}
.lo-rr-hero--noimg::after { display: none; }
.lo-rr-hero-txt {
  position: absolute;
  z-index: 1;
  left: 26px;
  right: 26px;
  bottom: 18px;
}
.lo-rr-hero--noimg .lo-rr-hero-txt {
  position: relative;
  inset: auto;
  margin: 0 26px 14px 26px;
}
.lo-rr-kicker {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rrac);
  padding: 4px 10px;
  transform: skewX(-8deg);
  margin-bottom: 10px;
}
.lo-rr-kicker > span { display: inline-block; transform: skewX(8deg); }
.lo-rr-h1 {
  margin: 0;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.3rem, 4.4cqw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  text-wrap: balance;
}
.lo-rr-hsub {
  margin: 10px 0 0;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.9cqw, 1.05rem);
  color: #ded9d0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  max-width: 62ch;
  text-wrap: balance;
}

/* Meta strip */
.lo-rr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--bdr);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--txt-dim);
  background: rgba(0, 0, 0, 0.25);
}
.lo-rr-meta b { color: var(--txt-bright); font-weight: 700; }
.lo-rr-mfl { color: #b87fff; }
.lo-rr-mpole { color: #00d4aa; }

/* Body grid: article + timing tower */
.lo-rr-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 361px;
}
.lo-rr-article {
  min-width: 0;
  padding: 26px 30px 30px 26px;
  overflow-wrap: anywhere;
}
/* Reading measure scales with the bulletin width: narrow screens wrap at the
   column, big screens open up to a wider measure instead of a fixed 66ch. */
.lo-rr-article > * { max-width: min(100%, 66ch + 24cqw); }
.lo-rr-article p {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.75;
}
.lo-rr-article strong { color: var(--txt-bright); }
.lo-rr-article h1 {
  position: relative;
  margin: 34px 0 14px;
  padding: 0 0 8px 22px;
  border-bottom: 1px solid var(--bdr);
  font-weight: 900;
  font-style: italic;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--txt-bright);
}
.lo-rr-article h1:first-child { margin-top: 0; }
.lo-rr-article h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 10px;
  height: 18px;
  background: var(--rrac);
  transform: skewX(-14deg);
}
.lo-rr-article p.lo-rr-pull {
  margin: 22px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--rrac);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  color: var(--txt-bright);
}
.lo-rr-article img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--bdr);
}
.lo-rr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
  max-width: min(100%, 66ch + 24cqw);
}
.lo-rr-tag {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--txt-dim);
  border: 1px solid var(--bdr);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* Timing tower */
.lo-rr-side {
  border-left: 1px solid var(--bdr);
  padding: 22px 20px 26px;
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.lo-rr-side-block { min-width: 0; }
.lo-rr-side-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 10px;
}
.lo-rr-side-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bdr);
}
.lo-rr-podium { display: flex; flex-direction: column; gap: 6px; }
.lo-rr-pod-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
}
.lo-rr-pod-row.p1 {
  border-color: rgba(245, 197, 24, 0.5);
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.03));
}
.lo-rr-pod-row.p2 {
  border-color: rgba(201, 204, 212, 0.28);
  background: linear-gradient(90deg, rgba(201, 204, 212, 0.07), rgba(201, 204, 212, 0.02));
}
.lo-rr-pod-row.p3 {
  border-color: rgba(208, 138, 78, 0.32);
  background: linear-gradient(90deg, rgba(208, 138, 78, 0.09), rgba(208, 138, 78, 0.02));
}
.lo-rr-pod-pos {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-style: italic;
  font-size: 0.92rem;
  color: #14120f;
  transform: skewX(-10deg);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.lo-rr-pod-row.p1 .lo-rr-pod-pos { background: linear-gradient(160deg, #ffe27a, #f5c518 55%, #c99a00); }
.lo-rr-pod-row.p2 .lo-rr-pod-pos { background: linear-gradient(160deg, #eceef2, #c9ccd4 55%, #9ba0ab); }
.lo-rr-pod-row.p3 .lo-rr-pod-pos { background: linear-gradient(160deg, #e5a86e, #d08a4e 55%, #a56530); }
.lo-rr-pod-driver {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lo-rr-pod-name {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.15;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rr-pod-row.p1 .lo-rr-pod-name { font-size: 0.95rem; }
.lo-rr-pod-team {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rr-pod-team-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.lo-rr-pod-logo {
  flex: 0 0 26px;
  height: 22px;
  width: 26px;
  object-fit: contain;
  opacity: 0.95;
}
/* Timing-tower standings: medal positions, team logo, points bar vs leader */
.lo-rr-st {
  display: flex;
  flex-direction: column;
}
.lo-rr-st-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.lo-rr-st-row:last-child { border-bottom: 0; }
/* Rows that navigate to Drivers / Teams */
.lo-rr-st-row[data-std-driver],
.lo-rr-st-row[data-std-team],
.lo-rr-pod-row[data-std-driver] {
  cursor: pointer;
}
.lo-rr-st-row[data-std-driver]:hover,
.lo-rr-st-row[data-std-team]:hover {
  background: rgba(255, 255, 255, 0.05);
}
.lo-rr-pod-row[data-std-driver]:hover {
  filter: brightness(1.18);
}
.lo-rr-st-row[data-std-driver]:hover .lo-rr-st-nm,
.lo-rr-st-row[data-std-team]:hover .lo-rr-st-nm {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lo-rr-st-lead {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 75%);
}
.lo-rr-st-pos {
  flex: 0 0 18px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 0.74rem;
  text-align: center;
  color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.lo-rr-st-pos.p1 { color: #f5c518; }
.lo-rr-st-pos.p2 { color: #c9ccd4; }
.lo-rr-st-pos.p3 { color: #d08a4e; }
.lo-rr-st-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lo-rr-stand-logo {
  flex: 0 0 18px;
  height: 15px;
  width: 18px;
  object-fit: contain;
}
.lo-rr-st-nm {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rr-st-pts {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--txt-bright);
  font-variant-numeric: tabular-nums;
}
/* Race-report side column: steward rulings for the round. Each ruling is a card
   with a type-coloured accent stripe (--pen), mirroring the podium/records
   blocks above it. Revoked rulings stay on show, struck through and dimmed. */
.lo-rr-pens {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* One ruling: [type] [value] Driver on the first line, the reason (when there
   is one) wrapping onto its own line below, with a type-coloured accent stripe
   down the left. */
.lo-rr-pen {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  padding: 6px 10px 7px 13px;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.lo-rr-pen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pen, #8a847d);
}
.lo-rr-pen-badge {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--pen, #8a847d);
  border: 1px solid var(--pen, #8a847d);
  align-self: center;
}
.lo-rr-pen-val {
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--pen, #8a847d);
}
.lo-rr-pen-driver {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--txt-bright);
  flex: 0 0 auto;
}
/* Own row, full width — the reason may run to a couple of sentences. */
.lo-rr-pen-reason {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--txt-dim);
  overflow-wrap: break-word;
}
.lo-rr-pen-revtag {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-faint, #6b6560);
  border: 1px solid var(--bdr);
  border-radius: 999px;
  padding: 1px 7px;
  align-self: center;
}
.lo-rr-pen--revoked {
  opacity: 0.62;
}
.lo-rr-pen--revoked .lo-rr-pen-badge,
.lo-rr-pen--revoked .lo-rr-pen-val,
.lo-rr-pen--revoked .lo-rr-pen-driver {
  text-decoration: line-through;
}

.lo-rr-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 0.75rem;
}
.lo-rr-chip b { color: var(--txt-bright); }
.lo-rr-chip + .lo-rr-chip { margin-top: 7px; }
.lo-rr-chip--fl {
  border: 1px solid rgba(184, 127, 255, 0.4);
  background: rgba(184, 127, 255, 0.08);
  color: #b87fff;
}
/* Fixed-width icon slot so the label text of every record chip starts at the
   same x, whatever the glyph is. Emoji render larger than the inline SVG at
   the same font-size, so they get scaled down to match. */
.lo-rr-chip-ico {
  flex: 0 0 0.828em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lo-rr-chip-ico--emoji {
  font-size: 0.86em;
}
.lo-rr-chip-pts {
  font-family: "Courier New", monospace;
  font-weight: 700;
  opacity: 0.75;
}
.lo-rr-chip--fp {
  border: 1px solid rgba(203, 209, 216, 0.4);
  background: rgba(203, 209, 216, 0.08);
  color: #cbd1d8;
}
.lo-rr-chip--fp .tt-ico {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
}
.lo-rr-chip--pole {
  border: 1px solid rgba(0, 212, 170, 0.4);
  background: rgba(0, 212, 170, 0.07);
  color: #00d4aa;
}

/* Signature footer */
.lo-rr-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 26px;
  border-top: 1px solid var(--bdr);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--txt-dim);
  background: rgba(0, 0, 0, 0.28);
}
.lo-rr-foot b { color: var(--txt-bright); }
.lo-rr-check {
  width: 60px;
  height: 8px;
  background: repeating-conic-gradient(var(--txt-dim) 0 25%, transparent 0 50%);
  background-size: 16px 16px;
  opacity: 0.6;
}

/* Responsive to the bulletin's own width (works inside the wide table cell) */
@container (max-width: 940px) {
  .lo-rr-body { grid-template-columns: 1fr; }
  .lo-rr-side {
    border-left: 0;
    border-top: 1px solid var(--bdr);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
  }
  .lo-rr-article { padding: 24px 24px 26px; }
}
@container (max-width: 620px) {
  .lo-rr-hero { aspect-ratio: 16 / 10; }
  .lo-rr-mast {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 12px;
  }
  .lo-rr-doc { text-align: left; white-space: normal; }
  .lo-rr-hero-txt { left: 18px; right: 18px; bottom: 14px; }
  .lo-rr-hero--noimg .lo-rr-hero-txt { margin: 0 18px 12px 18px; }
  .lo-rr-meta { padding: 10px 18px; gap: 6px 16px; }
  .lo-rr-article { padding: 20px 18px 22px; }
  .lo-rr-article p { font-size: 0.9rem; }
  .lo-rr-foot { padding: 12px 18px; }
}

/* ── Per-row delete / add buttons ───────────────────────────────────────── */
.lg-result-row-actions {
  width: 1px;
  white-space: nowrap;
  padding: 0 4px !important;
}
.lg-row-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  transition:
    background 0.12s,
    color 0.12s;
  opacity: 0.45;
}
.lg-row-btn:hover {
  opacity: 1;
}
.lg-row-delete {
  color: #e05252;
}
.lg-row-delete:hover {
  background: rgba(224, 82, 82, 0.15);
}

/* ── Drag-to-reorder classification rows ─────────────────────────────────── */
.lg-pos-cell {
  white-space: nowrap;
}
.lg-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #7a756e;
  cursor: grab;
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.lg-drag-handle:hover {
  color: var(--c-amber);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
}
.lg-drag-handle:active {
  cursor: grabbing;
}
.lg-results-editor .f1-qualifying-table .lg-result-row.lg-dragging td {
  opacity: 0.35;
  background: rgba(255, 255, 255, 0.015);
}
.lg-result-row.lg-drop-before td {
  box-shadow: inset 0 3px 0 0 var(--c-amber);
}
.lg-result-row.lg-drop-after td {
  box-shadow: inset 0 -3px 0 0 var(--c-amber);
}

/* ── Driver picker row ───────────────────────────────────────────────────── */
.lg-add-driver-picker td {
  padding: 6px 8px !important;
  background: #0e1a12;
  border-bottom: 1px solid #2a2826;
}
.lg-add-driver-picker-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-add-driver-select {
  background: #111;
  border: 1px solid #3a3835;
  color: var(--txt-bright);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.82rem;
  flex: 1 1 auto;
  max-width: 280px;
}

.lg-import-label {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-family: "Courier New", monospace;
  color: #718096;
  background: transparent;
  border: 1px solid #3a3835;
  border-radius: 4px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  user-select: none;
}
.lg-server-import-btn {
  line-height: 1.4;
}
.lg-server-session-select {
  width: 100%;
  margin-bottom: 16px;
}
.lg-import-label:hover {
  color: #a0aec0;
  border-color: #5a5653;
}

/* ── Import CSV modal ────────────────────────────────────────────────────── */
.lg-import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lg-import-modal {
  background: #1a1917;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 22px 24px 18px;
  width: min(560px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

.lg-import-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt-bright);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.lg-import-meta-info {
  font-size: 0.78rem;
  color: #718096;
  margin-bottom: 14px;
  line-height: 1.6;
}

/* "Add team to league" wizard — driver selection */
.lg-team-wiz-modal {
  width: min(480px, 94vw);
}
.lg-team-wiz-modal .lg-import-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-team-wiz-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0 16px;
  max-height: 46vh;
  overflow-y: auto;
}
.lg-team-wiz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.84rem;
}
.lg-team-wiz-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.lg-team-wiz-row--locked {
  cursor: default;
  opacity: 0.55;
}
.lg-team-wiz-row input[type="checkbox"] {
  accent-color: #2ecc71;
}
.lg-team-wiz-name {
  color: var(--txt-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-team-wiz-status {
  font-size: 0.68rem;
  color: #718096;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.lg-team-wiz-status--on {
  color: #3aa8ff;
}
.lg-team-wiz-status--off {
  color: #6b6560;
  font-style: italic;
}
.lg-team-wiz-status--clash {
  color: #ff9500;
}
.lg-team-wiz-empty {
  padding: 14px 10px;
  font-size: 0.8rem;
  color: #718096;
  text-align: center;
}
.lg-import-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.78rem;
  color: #718096;
  margin: 2px 0 12px;
}
.lg-import-dates strong {
  color: #ccc5bb;
  font-weight: 600;
}
.lg-import-weather {
  color: #8a9db5;
}
.lg-import-ok {
  color: #68d391;
}
.lg-import-warn {
  color: #f6ad55;
}
.lg-import-track-warn {
  font-size: 0.8rem;
  color: #c8960c;
  background: #c8960c14;
  border: 1px solid #c8960c44;
  border-radius: 6px;
  padding: 7px 12px;
  margin-bottom: 12px;
}

.lg-import-mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.lg-import-mapping th {
  text-align: left;
  color: #718096;
  padding: 5px 8px;
  border-bottom: 1px solid #2a2826;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.lg-import-mapping td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bg-card);
  color: #c8c0b0;
}
.lg-import-row--unmatched td:first-child {
  color: #f6ad55;
}
.lg-import-select {
  background: #111;
  border: 1px solid #3a3835;
  color: var(--txt-bright);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8rem;
  width: 100%;
  max-width: 200px;
}

.lg-import-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid #2a2826;
  margin-top: 6px;
}

.lg-create-driver-row td {
  padding: 4px 6px 8px;
  background: #0e1a12;
  border-bottom: 1px solid #2a2826;
}
.lg-create-driver-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.lg-create-driver-fields .lg-create-name {
  flex: 1 1 160px;
}
.lg-create-driver-fields .lg-create-team {
  flex: 1 1 140px;
}
.lg-input-error {
  border-color: #c44 !important;
  box-shadow: 0 0 0 2px rgba(204, 68, 68, 0.25);
}

/* ══════════════════════════════════════════════════════════════
   LAPTIMES SECTION
   ══════════════════════════════════════════════════════════════ */

.lt-wrap {
  width: 100%;
  overflow-x: hidden;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 20px;
}

/* ── Header ──────────────────────────────────────────────────── */
.lt-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.lt-eyebrow {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-purple);
  margin-bottom: 4px;
}

.lt-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  font-family: "Courier New", monospace;
}

/* ── Controls ────────────────────────────────────────────────── */
.lt-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.lt-track-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dim the combo when ALL is active */
.lt-track-group--all .lt-track-select {
  border-color: var(--bdr);
  background: var(--bg-panel);
  color: var(--txt-dim);
}
.lt-track-group--all .lt-select-wrap::after {
  color: var(--txt-dim);
}

/* Separator bars between control groups */
.lt-sep {
  width: 1px;
  height: 18px;
  background: var(--bdr);
  flex-shrink: 0;
  margin: 0 4px;
}

.lt-select-wrap {
  position: relative;
}

.lt-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-purple);
  font-size: 0.68rem;
}

.lt-track-select {
  appearance: none;
  background: rgba(167, 139, 250, 0.07);
  border: 1px solid var(--c-purple);
  color: var(--c-purple);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  padding: 7px 30px 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 170px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.lt-track-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.25);
}

.lt-chips {
  display: flex;
  gap: 3px;
}

.lt-chip {
  background: none;
  border: 1px solid var(--bdr);
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}

.lt-chip:hover {
  border-color: var(--c-purple);
  color: var(--c-purple);
}

.lt-chip--active {
  background: rgba(167, 139, 250, 0.1);
  border-color: var(--c-purple);
  color: var(--c-purple);
}

/* ── Table caption ───────────────────────────────────────────── */
.lt-table-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bdr);
  border-radius: 8px 8px 0 0;
}
.lt-caption-track {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lt-caption-track-map {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(100, 210, 180, 0.55));
  animation: lo-track-float 5s ease-in-out infinite;
}

.lt-track-name {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-teal);
}

.lt-record-count {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: var(--txt-dim);
  letter-spacing: 0.08em;
}

/* ── Table ───────────────────────────────────────────────────── */
.lt-table-wrap {
  border-radius: 0 0 18px 18px;
  border: none;
  border-top: 1px solid var(--bdr);
  overflow-x: auto;
  margin: 0 -24px -24px;
}

.lt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.lt-table thead tr {
  background: var(--bg-panel);
  border-bottom: 2px solid var(--bdr);
}

.lt-table th {
  padding: 7px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
  text-align: left;
  white-space: nowrap;
}

.lt-th-pos {
  width: 36px;
  text-align: center;
}

/* ── Rows ────────────────────────────────────────────────────── */
.lt-row {
  background: var(--bg-table);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}

.lt-row:nth-child(4n + 3),
.lt-row:nth-child(4n + 4) {
  background: var(--bg-card);
}

.lt-row[data-has-setup="1"] {
  cursor: pointer;
}

.lt-row[data-has-setup="1"]:hover {
  background: var(--bg-panel);
}

.lt-row--open {
  background: rgba(167, 139, 250, 0.07) !important;
  border-bottom: none;
}

.lt-row td {
  padding: 9px 12px;
  color: var(--txt-bright);
  white-space: nowrap;
}

/* Position */
.lt-pos {
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt-dim);
  width: 36px;
}

.lt-pos--gold {
  color: #ffd700;
}
.lt-pos--silver {
  color: #c0c0c0;
}
.lt-pos--bronze {
  color: #cd7f32;
}

/* Driver */
.lt-driver-cell {
  vertical-align: middle;
  white-space: nowrap;
}

.lt-driver-name {
  font-weight: 600;
  color: #fff;
  margin-right: 6px;
}

.lt-driver-abbr {
  font-size: 0.7rem;
  color: var(--txt-faint);
  font-family: "Courier New", monospace;
}

/* Lap time — the hero column */
.lt-time-cell {
  font-family: "Courier New", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-purple);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lt-verified-icon {
  font-size: 0.7rem;
  opacity: 0.6;
  line-height: 1;
}
.lt-invalid-icon {
  font-size: 1.69rem;
  color: var(--c-amber);
  line-height: 1;
}

/* Gap */
.lt-gap-cell {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
}

.lt-gap {
  color: var(--txt-muted);
}

.lt-gap--leader {
  color: var(--c-teal);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Sectors */
.lt-sector {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--txt-mid);
  text-align: center;
}
.lt-sector.lo-sc-best {
  color: var(--c-purple);
  font-weight: 700;
}

/* Tyre dot */
.lt-tyre-cell {
  text-align: center;
}

.lt-tyre-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.52rem;
  font-weight: 700;
  font-family: "Courier New", monospace;
  letter-spacing: 0;
}
.lt-tyre-img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
}
/* In table cells the badge is the only content — block + auto margins kill
   the baseline gap an inline image leaves and center it in the row. */
.lt-tyre-cell .lt-tyre-img {
  display: block;
  margin: 0 auto;
}
.lt-tyre-cell .lt-tyre-dot {
  margin: 0 auto;
}

/* Top speed */
.lt-speed-cell {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--c-amber);
  white-space: nowrap;
}

.lt-speed-unit {
  font-size: 0.72rem;
  color: var(--txt-dim);
}

/* Car / Game */
.lt-car-cell {
  font-size: 0.82rem;
  color: var(--txt-muted);
}

.lt-game-cell {
  font-size: 0.7rem;
  font-family: "Courier New", monospace;
  color: var(--txt-dim);
}

.lt-th-del,
.lt-del-cell {
  text-align: center;
  width: 32px;
  padding: 0 2px !important;
}

.lt-delete-btn {
  background: none;
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff5050;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.7rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s;
}
.lt-row:hover .lt-delete-btn {
  opacity: 1;
}
.lt-delete-btn:hover {
  background: rgba(255, 80, 80, 0.15);
}

/* ── Empty / loading / error states ─────────────────────────── */
.lt-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--txt-dim);
}

.lt-empty-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  opacity: 0.35;
}

.lt-empty p {
  font-size: 0.75rem;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.lt-loading {
  padding: 48px;
  text-align: center;
  color: var(--txt-dim);
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lt-error {
  padding: 20px;
  color: var(--c-red);
  font-size: 0.8rem;
  font-family: "Courier New", monospace;
}

/* ── Laptimes Overview ───────────────────────────────────────── */
.lt-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 4px 0 16px;
  height: calc(100vh - 210px);
  min-height: 300px;
}

.lt-ov-card {
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lt-ov-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-panel);
}

.lt-ov-card-icon {
  font-size: 1rem;
}

.lt-ov-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-bright);
  flex: 1;
}

.lt-ov-card-count {
  font-size: 0.7rem;
  color: var(--txt-muted);
  font-family: "Courier New", monospace;
}

.lt-ov-empty {
  padding: 24px;
  text-align: center;
  color: var(--txt-dim);
  font-size: 0.78rem;
}

/* Recent laps */
.lt-ov-recent-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.lt-ov-recent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.lt-ov-recent-row:last-child {
  border-bottom: none;
}

.lt-ov-recent-track {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-ov-recent-meta {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 0.7rem;
  color: var(--txt-muted);
}

.lt-ov-recent-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lt-ov-time {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--txt-bright);
  white-space: nowrap;
}

.lt-ov-driver {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-amber);
  text-transform: uppercase;
}

.lt-ov-session {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

/* TT records */
.lt-ov-tt-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.lt-ov-tt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.12s;
}

.lt-ov-tt-row:last-child {
  border-bottom: none;
}

.lt-ov-tt-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.lt-ov-tt-track {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lt-ov-tt-note {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--txt-dim);
  letter-spacing: 0.02em;
}

.lt-ov-tt-time {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: #ccc5bb;
  white-space: nowrap;
}

.lt-ov-tt-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Record holders */
.lt-ov-holders-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px 0;
}

.lt-ov-holder-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto 5px;
  align-items: center;
  column-gap: 8px;
  padding: 7px 14px 4px;
}

.lt-ov-holder-rank {
  font-size: 1rem;
  text-align: center;
  line-height: 1;
}

.lt-ov-holder-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-ov-holder-count {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--txt-bright);
  white-space: nowrap;
  text-align: right;
}

.lt-ov-holder-label {
  color: var(--txt-muted);
  font-size: 0.7rem;
}

.lt-ov-holder-bar-wrap {
  grid-column: 2 / -1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.lt-ov-holder-bar {
  height: 100%;
  background: var(--c-amber);
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 4px;
}

.lt-ov-holder-top .lt-ov-holder-bar {
  background: linear-gradient(90deg, var(--c-amber), #fff8);
}

@media (max-width: 900px) {
  .lt-overview {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   DRIVERS SECTION
   ══════════════════════════════════════════════════════════════ */

/* ── Driver selector bar ─────────────────────────────────────── */
.drv-selector-wrap {
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 12px 16px 14px;
}

.drv-selector-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.drv-filter-more-badge {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 20px;
  color: var(--c-teal);
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.drv-filter-more-badge:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--c-teal);
}

.drv-orphan-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 20px;
  color: #8a847d;
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.drv-orphan-toggle:hover {
  background: rgba(255, 107, 107, 0.08);
  border-color: #ff6b6b;
  color: #ff6b6b;
}
.drv-orphan-toggle--active {
  background: rgba(139, 32, 32, 0.18);
  border-color: #ff6b6b;
  color: #ffb3b3;
}
.drv-orphan-count {
  display: inline-block;
  background: #8b2020;
  color: #ffb3b3;
  border-radius: 10px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 0.65rem;
}

.drv-selector-filter-input {
  width: 220px;
  background: #141210;
  border: 1px solid #2e2b27;
  border-radius: 5px;
  color: #e8e3db;
  font-size: 0.8rem;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.drv-selector-filter-input:focus {
  border-color: var(--c-teal);
}

.drv-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 9px;
  border-radius: 5px;
  border: 1px solid #2a2724;
  background: #181613;
  color: #a09a93;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 0.1s,
    background 0.15s,
    color 0.15s;
  animation: tm-chip-in 0.18s ease both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.drv-chip:hover {
  background: #1e1c19;
  color: #e8e3db;
  transform: translateY(-1px);
}
.drv-chip--active {
  background: rgba(0, 212, 170, 0.08) !important;
  color: #e8e3db !important;
  border-color: rgba(0, 212, 170, 0.35) !important;
}

.drv-chip-abbr {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--c-teal);
  letter-spacing: 0.05em;
}
.drv-chip-name {
  white-space: nowrap;
}
.drv-chip-linked {
  font-size: 0.62rem;
  opacity: 0.6;
  margin-left: 1px;
}
.drv-linked-badge {
  font-size: 0.68rem;
  color: var(--c-teal);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.drv-detail-card {
  min-height: 60px;
}

.drv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  color: #3c3835;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.drv-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  padding: 80px 20px;
}
.drv-panel-empty-icon {
  font-size: 2.2rem;
  color: var(--bdr);
  line-height: 1;
}
.drv-panel-empty-text {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.35em;
  color: #3c3835;
}
.drv-panel-empty-sub {
  font-size: 0.68rem;
  color: #6b6560;
  text-align: center;
}

/* ── Profile banner ──────────────────────────────────────────── */
.drv-dashboard {
  display: flex;
  flex-direction: column;
}
.drv-profile-banner {
  position: relative;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}
.drv-banner-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: 0.85;
}
.drv-banner-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 22px;
  flex-wrap: wrap;
}
.drv-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bdr);
}
.drv-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  font-family: "Courier New", monospace;
  font-size: 1.02rem;
  font-weight: 700;
  border: 2px solid;
}
.drv-banner-info {
  flex: 1;
  min-width: 0;
}
.drv-banner-abbr {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1;
  margin-bottom: 3px;
}
.drv-banner-name {
  font-size: 1.32rem;
  font-weight: 700;
  color: #e8e3db;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.drv-banner-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 0.84rem;
  color: #9b9590;
}
.drv-banner-nat {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.drv-member-since {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--c-muted);
  letter-spacing: 0.03em;
  cursor: default;
}
.drv-banner-age {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  color: #706b64;
  letter-spacing: 0.08em;
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 3px;
}
.drv-banner-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.drv-role-badge {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
}

/* Career stats strip */
.drv-career-stats {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
  flex-shrink: 0;
}
.drv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  gap: 3px;
}
.drv-stat-val {
  font-family: "Courier New", monospace;
  font-size: 1.26rem;
  font-weight: 700;
  color: #e8e3db;
  line-height: 1;
}
.drv-stat-lbl {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: #706b64;
  letter-spacing: 0.14em;
}
.drv-stat-sep {
  width: 1px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* ── Admin action bar (delete, etc.) ────────────────────────── */
/* Sits at the very bottom of the driver dashboard, under the card grid — a
   destructive action kept well away from the profile content above it. */
.drv-admin-bar {
  display: flex;
  justify-content: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--bg-table);
  margin-top: 4px;
}
.drv-delete-btn {
  background: transparent;
  border: 1px solid #6b2020;
  color: #e07070;
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.drv-delete-btn:hover {
  background: #6b202022;
  border-color: #e07070;
  color: #ffaaaa;
}
.drv-delete-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Team standings (Constructors) ──────────────────────────── */
.lg-team-stand-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin: 28px 0 4px;
}

/* ── Admin Danger Zone ───────────────────────────────────────── */
.admin-danger-zone {
  margin-top: 24px;
  border: 1px solid #6b1a1a;
  border-radius: 10px;
  overflow: hidden;
}
.admin-danger-zone-header {
  background: #1e0a0a;
  color: #e07070;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-bottom: 1px solid #6b1a1a;
}
.admin-danger-inner {
  padding: 16px;
}
.admin-danger-btn {
  border-color: #6b1a1a;
  color: #e07070;
}
.admin-danger-btn:hover:not(:disabled) {
  background: #6b1a1a33;
  border-color: #e07070;
  color: #ffaaaa;
}
.admin-rename-note {
  margin-top: 10px;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 6px;
}
.admin-rename-note--ok {
  background: #0a2a1a;
  color: var(--c-teal);
  border: 1px solid #1a5a3a;
}

/* ── Card grid ───────────────────────────────────────────────── */
/* The card grid lives inside the hero card, below the performance section, so
   it gets a top rule to separate it from the content above. */
.drv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bdr);
}
/* Anchor the injected performance + evolution blocks; collapses to nothing for
   drivers with no telemetry. */
.drv-perf-slot:empty {
  display: none;
}
.drv-card {
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-table);
  min-width: 0;
}
.drv-card:nth-child(2n) {
  border-right: none;
}
.drv-card:nth-last-child(-n + 2) {
  border-bottom: none;
}

.drv-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bdr);
}
.drv-card-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: drv-pulse 3s ease-in-out infinite;
}
@keyframes drv-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
.drv-card-title {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9b9590;
  flex: 1;
}
.drv-card-meta {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: #706b64;
  letter-spacing: 0.07em;
}
.drv-card-body {
  padding: 0;
  max-height: 230px;
  overflow-y: auto;
}
.drv-card-body::-webkit-scrollbar {
  width: 3px;
}
.drv-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.drv-card-body::-webkit-scrollbar-thumb {
  background: var(--bdr);
}
.drv-card-body--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  color: #706b64;
  font-size: 0.82rem;
  font-style: italic;
}

/* Race History */
.drv-rh-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-bottom: 1px solid var(--bdr);
  font-size: 0.83rem;
}
.drv-rh-row:last-child {
  border-bottom: none;
}
.drv-rh-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.drv-rh-date {
  font-family: "Courier New", monospace;
  font-size: 0.71rem;
  color: #8a847d;
  width: 40px;
  flex-shrink: 0;
}
.drv-rh-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.drv-rh-track {
  color: #bab4ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}
.drv-rh-league {
  color: #706b64;
  font-size: 0.72rem;
  font-family: "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-rh-fl {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: #68d391;
  border: 1px solid #68d39135;
  padding: 0 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.drv-rh-pts {
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  color: #8a847d;
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}
.drv-rh-pts small {
  font-size: 0.68rem;
  margin-left: 1px;
}
.drv-rh-pos {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #9b9590;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.drv-rh-pos--gold {
  color: #e2c97e;
}
.drv-rh-pos--silver {
  color: #b0b0b0;
}
.drv-rh-pos--bronze {
  color: #cd7f32;
}

/* Leagues */
.drv-lg-row {
  display: flex;
  align-items: stretch;
  gap: 11px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--bdr);
}
.drv-lg-row:last-child {
  border-bottom: none;
}
.drv-lg-body {
  flex: 1;
  min-width: 0;
}

/* Championship-position medallion */
.drv-lg-pos {
  flex-shrink: 0;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(160deg, #2a2823, #1a1815);
  border: 1px solid #34302a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.drv-lg-pos-p {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a847d;
  line-height: 1;
  margin-top: 1px;
}
.drv-lg-pos-num {
  font-family: "Courier New", monospace;
  font-size: 1.32rem;
  font-weight: 800;
  color: #e8e3db;
  line-height: 1.15;
}
.drv-lg-pos-total {
  font-size: 0.5rem;
  color: #6f6a63;
  line-height: 1;
  margin-bottom: 1px;
}
.drv-lg-pos--none {
  background: #1a1815;
  border-style: dashed;
  border-color: #322e29;
}
.drv-lg-pos--none .drv-lg-pos-num {
  font-size: 1rem;
  color: #56524c;
}
.drv-lg-pos--gold {
  background: linear-gradient(160deg, #5a4a12, #2c2408);
  border-color: rgba(246, 224, 94, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 12px rgba(246, 224, 94, 0.15);
}
.drv-lg-pos--gold .drv-lg-pos-num {
  color: #f6e05e;
}
.drv-lg-pos--gold .drv-lg-pos-p {
  color: #d8c764;
}
.drv-lg-pos--silver {
  background: linear-gradient(160deg, #43474b, #202325);
  border-color: rgba(207, 211, 216, 0.55);
}
.drv-lg-pos--silver .drv-lg-pos-num {
  color: #e8ecf1;
}
.drv-lg-pos--silver .drv-lg-pos-p {
  color: #c2c7cd;
}
.drv-lg-pos--bronze {
  background: linear-gradient(160deg, #4d3320, #25180d);
  border-color: rgba(205, 127, 50, 0.55);
}
.drv-lg-pos--bronze .drv-lg-pos-num {
  color: #e6a463;
}
.drv-lg-pos--bronze .drv-lg-pos-p {
  color: #c98e54;
}
.drv-lg-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.drv-row--nav {
  cursor: pointer;
}
.drv-row--nav:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}
.drv-row--nav:hover .drv-lg-name,
.drv-row--nav:hover .drv-tm-name {
  color: #e8e3db;
}
.drv-lg-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.drv-lg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #706b64;
  flex-shrink: 0;
}
.drv-lg-dot--active {
  background: #68d391;
  animation: drv-pulse 2s ease-in-out infinite;
}
.drv-lg-name {
  flex: 1;
  font-size: 0.84rem;
  color: #bab4ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-lg-game {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: #706b64;
}
/* League status chip on a founded-league row (League Manager card). Archived
   rows use the louder .drv-lg-mgr badge instead. */
.drv-lg-status {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d857a;
  border: 1px solid #3a352f;
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* "League Manager" badge shown on a league row the driver manages.
   Reuses .drv-role-badge styling; this just keeps it compact and from shrinking. */
.drv-lg-mgr {
  flex-shrink: 0;
  font-size: 0.58rem;
  padding: 1px 5px;
}
.drv-lg-car {
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  flex-shrink: 0;
}
.drv-lg-team {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding-left: 11px;
  font-size: 0.82rem;
  color: #9b9590;
}
.drv-lg-team-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.drv-lg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  padding-left: 11px;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: #8a847d;
}

/* Fastest laps */
.drv-fl-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--bdr);
  transition: background 0.15s;
}
.drv-fl-row:last-child {
  border-bottom: none;
}
.drv-fl-row:hover {
  background: color-mix(in srgb, #68d391 7%, transparent);
}
/* Lap-time pill */
.drv-fl-time {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #68d391;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, #68d391 12%, transparent);
  border: 1px solid color-mix(in srgb, #68d391 28%, transparent);
  text-shadow: 0 0 9px color-mix(in srgb, #68d391 45%, transparent);
}
.drv-fl-row:hover .drv-fl-time {
  background: color-mix(in srgb, #68d391 18%, transparent);
  border-color: color-mix(in srgb, #68d391 45%, transparent);
}
/* Stacked info column */
.drv-fl-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.drv-fl-track {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e8e3db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-fl-sub {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.drv-fl-league {
  font-size: 0.68rem;
  color: #8a847d;
  font-family: "Courier New", monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.drv-fl-date {
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  color: #706b64;
  flex-shrink: 0;
}

/* Teams */
.drv-tm-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--bdr);
  border-left: 2px solid transparent;
}
.drv-tm-row:last-child {
  border-bottom: none;
}
.drv-tm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.drv-tm-name {
  flex: 1;
  font-size: 0.84rem;
  color: #bab4ae;
}
.drv-tm-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Lap stats */
.drv-ls-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-bottom: 1px solid var(--bdr);
}
.drv-ls-row:last-child {
  border-bottom: none;
}
.drv-ls-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.drv-ls-track {
  flex: 1;
  font-size: 0.8rem;
  color: #bab4ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-ls-lap {
  font-family: "Courier New", monospace;
  font-size: 0.84rem;
  font-weight: 700;
  flex-shrink: 0;
}
.drv-ls-speed {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  color: #8a847d;
  width: 56px;
  text-align: right;
  flex-shrink: 0;
}
.drv-ls-count {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: #706b64;
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   INBOX — header trigger + dropdown
   ══════════════════════════════════════════════════════════════ */

/* Right section of the header (inbox button + login bar) */
.app-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Inbox trigger button */
.header-inbox-btn {
  position: relative;
}

.header-inbox-trigger {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 8px;
  color: var(--txt-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  position: relative;
}
.header-inbox-trigger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.header-inbox-trigger:hover {
  color: var(--txt-bright);
  border-color: var(--txt-muted);
  background: rgba(255, 255, 255, 0.05);
}
.header-inbox-trigger.is-open {
  color: var(--txt-bright);
  border-color: var(--c-amber);
  background: rgba(255, 255, 255, 0.07);
}

/* FAQ / Help button (right of the inbox) */
.header-faq-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 8px;
  color: var(--txt-mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.header-faq-btn:hover {
  color: var(--txt-bright);
  border-color: var(--txt-muted);
  background: rgba(255, 255, 255, 0.05);
}
.header-faq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.62rem;
  line-height: 1;
}

/* FAQ overlay modal */
.faq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.faq-modal {
  background: #1a1917;
  border: 1px solid #333;
  border-radius: 12px;
  width: min(860px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}
.faq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #2c2a27;
}
.faq-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt-bright);
  letter-spacing: 0.02em;
}
.faq-close-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 6px;
  color: var(--txt-mid);
  cursor: pointer;
  padding: 4px 9px;
  font-size: 0.85rem;
  line-height: 1;
}
.faq-close-btn:hover {
  color: var(--txt-bright);
  border-color: var(--txt-muted);
  background: rgba(255, 255, 255, 0.05);
}
/* Nav + body side-by-side layout */
.faq-modal-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.faq-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 170px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 10px 8px;
  border-right: 1px solid #2c2a27;
  background: #161513;
  border-bottom-left-radius: 12px;
}
/* Chapter list mirrors the teal chapter headings in the body, so the nav and
   the content read as the same thing. The active entry gets a teal left bar. */
.faq-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  background: none;
  color: var(--c-teal);
  font-size: 0.8rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faq-nav-item:hover {
  background: rgba(0, 212, 170, 0.09);
  color: var(--c-teal);
}
.faq-nav-item--active {
  background: rgba(0, 212, 170, 0.14);
  border-left-color: var(--c-teal);
  color: var(--c-teal);
  font-weight: 700;
}
.faq-nav-item--searching {
  opacity: 0.45;
}
/* Search hit. Deliberately a warm yellow rather than one of the app's semantic
   accents (teal = chapter, amber = section, purple = fastest lap, silver =
   Fair Play) so a highlight is never mistaken for meaning. Dark text on a solid
   fill keeps it legible inside headings and bold runs alike. */
mark.faq-hit {
  background: #ffd54a;
  color: #17150f;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
.faq-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 22px 22px;
  color: var(--txt-mid);
  font-size: 0.84rem;
  line-height: 1.6;
}
/* Chapter heading — teal, so the top level reads louder than the amber section
   headings nested under it. */
.faq-modal-body .faq-h2 {
  font-size: 1rem;
  color: var(--c-teal);
  letter-spacing: 0.03em;
  margin: 20px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 212, 170, 0.42);
}
.faq-modal-body .faq-chapter:first-child .faq-h2 {
  margin-top: 6px;
}

/* FAQ search */
.faq-search-row {
  padding: 12px 20px 0;
}
.faq-search-input {
  width: 100%;
  box-sizing: border-box;
  background: #100f0e;
  border: 1px solid var(--bdr-light);
  border-radius: 8px;
  color: var(--txt-bright);
  font-size: 0.84rem;
  padding: 8px 12px;
}
.faq-search-input:focus {
  outline: none;
  border-color: var(--c-amber);
}
.faq-search-input::placeholder {
  color: var(--txt-muted);
}
.faq-no-results {
  padding: 24px 4px;
  text-align: center;
  color: var(--txt-muted);
  font-size: 0.84rem;
}
.faq-modal-body .faq-h3 {
  font-size: 0.86rem;
  color: var(--c-amber);
  margin: 16px 0 4px;
}
.faq-modal-body p {
  margin: 6px 0;
}
/* Release Notes chapter — version headings, "Latest" tag and the compact
   earlier-releases list. */
/* The version + date line, teal to set it apart from the amber feature headings
   under it. Needs its own class: every heading in the overlay is a .faq-h3. */
.faq-modal-body .faq-h3--rel {
  color: var(--c-teal);
}
.faq-rel-tag {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.14);
  border: 1px solid rgba(46, 204, 113, 0.4);
  color: #2ecc71;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.faq-modal-body .faq-rel-lead {
  color: var(--txt-muted);
}

/* Per-chapter "On this page" quick links */
.faq-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 2px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 212, 170, 0.28);
  border-radius: 8px;
  background: rgba(0, 212, 170, 0.05);
}
.faq-toc-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-faint, #6b6560);
  margin-right: 2px;
}
.faq-toc-link {
  font-size: 0.78rem;
  color: var(--c-teal);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 212, 170, 0.09);
  transition:
    background 0.14s,
    color 0.14s;
}
.faq-toc-link:hover {
  background: rgba(0, 212, 170, 0.2);
  color: #7ff0d3;
}
.faq-modal-body .faq-rel-list li {
  margin-bottom: 7px;
}
.faq-rel-date {
  margin-left: 5px;
  color: var(--txt-faint, #6b6560);
  font-size: 0.76rem;
  white-space: nowrap;
}
.faq-modal-body ul,
.faq-modal-body ol {
  margin: 6px 0 6px 4px;
  padding-left: 18px;
}
.faq-modal-body li {
  margin: 3px 0;
}
.faq-modal-body strong {
  color: var(--txt-bright);
}
.faq-quote {
  margin: 8px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--c-amber);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 6px 6px 0;
  color: var(--txt-mid);
}
.faq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.8rem;
}
.faq-table th,
.faq-table td {
  border: 1px solid #2c2a27;
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.faq-table th {
  color: var(--txt-bright);
  background: rgba(255, 255, 255, 0.03);
}
body.faq-open {
  overflow: hidden;
}

.header-inbox-badge {
  background: var(--c-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 5px;
  line-height: 1.5;
  letter-spacing: 0;
  min-width: 16px;
  text-align: center;
}

/* Dropdown panel */
.header-inbox-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 680px;
  max-height: 480px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr-light);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 200;
}

/* Left card — message list */
#inbox-list-card {
  border-right: 1px solid var(--bdr);
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Right card — detail */
#inbox-detail-card {
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.inbox-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
  min-height: 160px;
}

/* ── List card ─────────────────────────────────────────────── */
.inbox-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bdr);
}

.inbox-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--txt-bright);
  display: flex;
  align-items: center;
  gap: 7px;
}

.msg-unread-badge {
  background: var(--c-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 6px;
  letter-spacing: 0;
  line-height: 1.5;
}

.msg-mark-all-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 5px;
  color: var(--txt-muted);
  font-size: 0.74rem;
  padding: 3px 8px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.msg-mark-all-btn:hover {
  color: var(--txt-bright);
  border-color: var(--txt-muted);
}

.inbox-list-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}

.inbox-empty {
  padding: 24px 16px;
  font-size: 0.86rem;
  color: var(--txt-faint);
  text-align: center;
}

.msg-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
  border-left: 3px solid var(--msg-color, var(--bdr));
  transition: background 0.12s;
}
.msg-row:last-child {
  border-bottom: none;
}
.msg-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.msg-row--selected {
  background: rgba(255, 255, 255, 0.04);
}
.msg-row--read {
  border-left-color: var(--bdr);
  opacity: 0.65;
}

.msg-row-icon {
  font-size: 1.08rem;
  flex-shrink: 0;
}

.msg-row-main {
  flex: 1;
  min-width: 0;
}

.msg-row-subject {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-row--read .msg-row-subject {
  font-weight: 400;
  color: var(--txt-mid);
}

.msg-row-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

.msg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--msg-color, var(--c-amber));
  flex-shrink: 0;
}

.msg-row-delete {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--txt-faint);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.msg-row-delete svg {
  width: 13px;
  height: 13px;
  display: block;
}
.msg-row-delete:hover {
  color: var(--c-red);
  background: rgba(255, 80, 80, 0.1);
}
.msg-row:hover .msg-row-delete {
  display: flex;
}

/* ── Detail card ───────────────────────────────────────────── */
.inbox-detail-empty {
  padding: 32px 20px;
  font-size: 0.9rem;
  color: var(--txt-faint);
  text-align: center;
}

.inbox-detail-inner {
  padding: 18px 20px;
}

.inbox-detail-subject {
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--txt-bright);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-detail-meta {
  font-size: 0.78rem;
  color: var(--txt-faint);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bdr);
}

.inbox-detail-body {
  font-size: 0.96rem;
  color: var(--txt-mid);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Welcome message ───────────────────────────────────────── */
.inbox-welcome .inbox-detail-subject {
  margin-bottom: 4px;
}
.welcome-intro {
  font-size: 0.93rem;
  color: var(--txt-mid);
  line-height: 1.65;
  margin: 10px 0 4px;
}

.welcome-block {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--bdr);
}

.welcome-block--warn {
  border-color: rgba(255, 200, 0, 0.25);
  background: rgba(255, 200, 0, 0.04);
}
.welcome-block-divider {
  border: none;
  border-top: 1px solid rgba(255, 200, 0, 0.15);
  margin: 16px 0 0;
}

.welcome-block-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--txt-bright);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.welcome-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-amber);
  color: #000;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

.welcome-step-badge--opt {
  background: var(--bg-pill, rgba(255, 255, 255, 0.08));
  color: var(--txt-faint);
  border: 1px solid var(--bdr);
}

.welcome-optional-tag {
  font-size: 0.72rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
  letter-spacing: 0.08em;
  color: var(--txt-faint);
  background: var(--bg-pill, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: auto;
}

.welcome-block p {
  font-size: 0.94rem;
  color: var(--txt-mid);
  line-height: 1.65;
  margin: 0 0 8px;
}

.welcome-block p strong {
  color: var(--txt-bright);
}

.welcome-steam-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.welcome-steam-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 5px;
  background: #1b2838;
  color: #c6d4df;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #2a475e;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.welcome-steam-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.welcome-steam-link:hover {
  background: #2a475e;
  color: #fff;
}

.welcome-steam-current {
  font-size: 0.84rem;
  color: var(--txt-faint);
  font-variant-numeric: tabular-nums;
}

.welcome-manual-toggle {
  margin-top: 10px;
}

.welcome-manual-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.86rem;
  color: var(--txt-faint);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}

.welcome-manual-toggle-btn:hover {
  color: var(--txt-mid);
}

.welcome-steam-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--bdr);
  border-radius: 5px;
  background: var(--bg-input, #111);
  color: var(--txt-bright);
  font-size: 0.94rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
}

.welcome-steam-input:focus {
  border-color: var(--c-teal);
}

/* Name field locked once the driver has raced (renaming would rewrite history). */
.welcome-input-locked {
  opacity: 0.65;
  cursor: not-allowed;
}

.welcome-manual-save-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 5px;
  background: var(--c-teal);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.welcome-manual-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.welcome-steam-feedback {
  font-size: 0.86rem;
  min-height: 1em;
}

.welcome-steam-feedback--ok {
  color: var(--c-teal);
}
.welcome-steam-feedback--err {
  color: var(--c-red);
}

.welcome-sections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-sections-list li {
  font-size: 0.94rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

.wsl-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--txt-bright);
  background: var(--bg-pill, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Pilot Briefing detail renderer ────────────────────────── */
.briefing-detail {
  border-top: 2px solid var(--c-red);
}

.briefing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.briefing-title {
  font-family: "Courier New", monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--txt-bright);
}

.briefing-subtitle {
  font-size: 0.82rem;
  color: var(--txt-faint);
  margin-top: 3px;
}

.briefing-status-badge {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #00d4aa;
  background: rgba(0, 212, 170, 0.1);
  border: 1px solid rgba(0, 212, 170, 0.35);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.briefing-lead {
  font-size: 0.93rem;
  color: var(--txt-mid);
  line-height: 1.6;
  margin: 0 0 16px;
}

.briefing-section-label {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--txt-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--bdr);
}

.briefing-roles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.briefing-role-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--rc) 7%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--rc) 25%, transparent);
  border-left: 3px solid var(--rc);
  margin-bottom: 8px;
}

.briefing-role-card--other {
  opacity: 0.45;
  filter: saturate(0.5);
}

.briefing-section-label--sub {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.briefing-role-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.briefing-role-desc {
  font-size: 0.88rem;
  color: var(--txt-mid);
  line-height: 1.55;
  margin: 0;
}

.briefing-no-roles {
  font-size: 0.88rem;
  color: var(--txt-faint);
  font-style: italic;
  margin: 6px 0 0;
}

.briefing-loading {
  font-size: 0.84rem;
  color: var(--txt-faint);
  font-style: italic;
}

.briefing-notes {
  margin-top: 20px;
}

.briefing-notes-list {
  margin: 8px 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.briefing-notes-list li {
  font-size: 0.9rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

.briefing-notes-list li strong {
  color: var(--txt-bright);
}

/* ── Briefing quick guide ───────────────────────────────────── */
.briefing-guide {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bdr);
  border-radius: 8px;
}

.briefing-guide-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt-bright);
  letter-spacing: 0.02em;
}

.briefing-guide-intro {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--txt-mid);
}

.briefing-guide-list {
  margin: 8px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.briefing-guide-list li {
  font-size: 0.85rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

.briefing-guide-list li strong {
  color: var(--txt-bright);
}

.briefing-guide-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--txt-faint);
  font-style: italic;
  line-height: 1.5;
}

.briefing-divider {
  margin: 16px 0;
  border-top: 1px solid var(--bdr);
}

.briefing-guide-block {
  margin-top: 12px;
}

.briefing-guide-block-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.briefing-guide-steps {
  margin: 0 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.briefing-guide-steps li {
  font-size: 0.85rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

.briefing-guide-steps li strong {
  color: var(--txt-bright);
}

.briefing-guide-steps li em {
  color: var(--txt-bright);
  font-style: normal;
  font-weight: 500;
}

.briefing-guide-sub {
  margin: 4px 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.briefing-guide-sub li {
  font-size: 0.82rem;
  color: var(--txt-faint);
}

.briefing-guide-sub li em {
  color: var(--txt-mid);
  font-style: normal;
}

.briefing-guide-tip {
  margin: 14px 0 0;
  padding: 8px 12px;
  background: rgba(0, 212, 170, 0.07);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

.briefing-sign {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  color: var(--txt-mid);
  line-height: 1.8;
}

.briefing-sign span {
  color: var(--txt-faint);
  font-size: 0.82rem;
}

/* ── UI path / menu nav indicator ──────────────────────────── */
.ui-path {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: "Courier New", monospace;
  font-size: 0.88em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-amber);
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── Welcome feature grid ───────────────────────────────────── */
.welcome-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .welcome-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.welcome-feature-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fc) 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
  border-left: 3px solid var(--fc);
}

.welcome-feature-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc) 35%, transparent);
  border-radius: 4px;
  padding: 2px 7px;
  align-self: flex-start;
}

.welcome-feature-desc {
  font-size: 0.86rem;
  color: var(--txt-mid);
  line-height: 1.5;
}

/* ── Welcome role tags ──────────────────────────────────────── */
.welcome-roles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.welcome-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
  background: color-mix(in srgb, var(--rc) 10%, transparent);
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rc);
}

.welcome-role-name {
  font-family: inherit;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--txt-mid);
  letter-spacing: 0;
}

/* ── Driver name block (welcome message) ────────────────────── */
.welcome-name-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.welcome-name-proposal {
  margin-top: 6px;
}

.welcome-name-proposal-btn {
  background: none;
  border: 1px solid var(--c-teal);
  color: var(--c-teal);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 0.86rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.welcome-name-proposal-btn:hover {
  background: var(--c-teal);
  color: #000;
}

/* ── Registration button (welcome message) ──────────────────── */
.welcome-register-wrap {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: center;
}

.welcome-register-btn {
  background: var(--c-amber);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 9px 22px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: "Courier New", monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.welcome-register-btn:hover {
  opacity: 0.85;
}
.welcome-register-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.welcome-register-btn--done {
  background: var(--c-teal);
  opacity: 1 !important;
  cursor: default;
}

/* ── Admin message form ─────────────────────────────────────── */
.admin-msg-form {
  padding: 12px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.admin-msg-body {
  font-family: inherit;
  font-size: 0.94rem;
}

/* Per-driver message modal */
.admin-msg-modal {
  width: min(520px, 94vw);
}
.admin-msg-channel-toggle {
  display: inline-flex;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  overflow: hidden;
  margin: 4px 0 14px;
}
.admin-msg-ch-btn {
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background 0.15s,
    color 0.15s;
}
.admin-msg-ch-btn + .admin-msg-ch-btn {
  border-left: 1px solid var(--bdr);
}
.admin-msg-ch-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.admin-msg-ch-btn--active {
  background: #5865f2;
  color: #fff;
}
.admin-msg-ch-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-msg-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-msg-discord-note {
  font-size: 0.86rem;
  color: var(--txt-muted);
  line-height: 1.45;
  margin: 2px 0 4px;
}
.admin-msg-feedback {
  font-size: 0.82rem;
}
.admin-msg-feedback--ok {
  color: #4ad07a;
}
.admin-msg-feedback--err {
  color: #ff6b6b;
}
.admin-msg-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* ── League announce button ─────────────────────────────────── */
.lg-announce-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 6px;
  color: var(--txt-mid);
  font-size: 0.86rem;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.lg-announce-btn:hover {
  color: var(--c-blue);
  border-color: var(--c-blue);
}
/* ── Unified Broadcast panel ─────────────────────────────────── */
.lg-broadcast-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 6px;
  color: var(--txt-mid);
  font-size: 0.86rem;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.lg-broadcast-btn:hover {
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.lg-broadcast-panel {
  border-top: 1px solid var(--bdr);
  background: var(--bg-panel);
}
.lg-edit-league-btn {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 6px;
  color: var(--txt-mid);
  font-size: 0.86rem;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.lg-edit-league-btn:hover {
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.lg-steward-toggle-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 6px;
  color: var(--txt-mid);
  font-size: 0.86rem;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.lg-steward-toggle-btn:hover {
  color: #e05c2a;
  border-color: #e05c2a;
}
.lg-steward-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e05c2a;
  color: #0d0d0d;
  border-radius: 8px;
  min-width: 16px;
  height: 14px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
}
.lg-steward-panel .lg-proxy-panel-header span {
  color: #e05c2a;
}
.lg-edit-panel {
  border-top: 1px solid var(--bdr);
  background: var(--bg-panel);
}
.lg-edit-body {
  padding: 14px 16px 16px;
}
.lg-edit-msg {
  font-size: 0.82rem;
  margin: 10px 0 2px;
}
.lg-edit-msg--ok {
  color: #4ad07a;
}
.lg-edit-msg--err {
  color: #ff6b6b;
}

/* Edit League Settings — brighter labels, lighter spinners, +20% font sizes.
   All scoped to .lg-edit-panel so other panels/forms are unaffected. */
.lg-edit-panel .lg-proxy-header span {
  font-size: 0.888rem;
}
.lg-edit-panel .lg-form-label {
  font-size: 0.816rem;
  color: var(--txt-bright);
}
.lg-edit-panel .lg-form-check {
  font-size: 0.936rem;
  color: var(--txt-bright);
}
.lg-edit-panel .lg-form-hint {
  font-size: 0.864rem;
}
.lg-edit-panel .lg-input {
  font-size: 0.96rem;
}
.lg-edit-panel .lg-pts-details > summary {
  font-size: 0.984rem;
}
.lg-edit-panel .lg-pts-label {
  font-size: 0.9rem;
}
.lg-edit-panel .lg-pts-pos {
  font-size: 0.72rem;
}
.lg-edit-panel .lg-pts-inp {
  font-size: 0.96rem !important;
}
.lg-edit-panel .lg-edit-msg {
  font-size: 0.984rem;
}
.lg-edit-panel .lg-add-btn,
.lg-edit-panel .lg-cancel-btn {
  font-size: 0.96rem;
}
/* Light (smoke-white) native spinner arrows for Season and Max Drivers */
.lg-edit-panel [name="season"],
.lg-edit-panel [name="maxDrivers"] {
  color-scheme: dark;
}
.lg-proxy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--txt-muted);
  border-bottom: 1px solid var(--bdr);
}
.lg-panel-x {
  background: none;
  border: none;
  color: var(--txt-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s;
}
.lg-panel-x:hover {
  color: var(--txt);
}
.lg-bc-body {
  padding: 14px 16px;
  display: flex;
  gap: 0;
}
.lg-bc-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.lg-bc-divider {
  width: 1px;
  background: var(--bdr);
  margin: 0 18px;
  flex-shrink: 0;
}
.lg-bc-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-muted);
  font-weight: 700;
  margin-bottom: -4px;
}

/* Type pills */
.lg-bc-type-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lg-bc-type-btn {
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bdr);
  border-radius: 999px;
  font-size: 0.76rem;
  font-family: inherit;
  color: var(--txt-muted);
  cursor: pointer;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
}
.lg-bc-type-btn--active {
  background: color-mix(
    in srgb,
    var(--league-accent, #e10600) 14%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--league-accent, #e10600) 55%,
    transparent
  );
  color: var(--txt);
}

/* Destination tiles */
.lg-bc-dest-row {
  display: flex;
  gap: 10px;
}
.lg-bc-dest-tile {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition:
    border-color 0.14s,
    background 0.14s;
}
.lg-bc-dest-tile:hover:not(.lg-bc-dest-tile--nowebhook) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
.lg-bc-dest-tile:has(.lg-bc-dest-cb:checked) {
  border-color: color-mix(
    in srgb,
    var(--league-accent, var(--c-teal)) 65%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--league-accent, var(--c-teal)) 10%,
    transparent
  );
}
.lg-bc-dest-cb {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--league-accent, var(--c-teal));
  cursor: pointer;
}
.lg-bc-dest-tile--nowebhook {
  opacity: 0.55;
  cursor: default;
}
.lg-bc-dest-tile--nowebhook .lg-bc-dest-cb {
  cursor: not-allowed;
}
.lg-bc-dest-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lg-bc-dest-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.lg-bc-dest-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt);
}
.lg-bc-dest-sub {
  font-size: 0.7rem;
  color: var(--txt-muted);
}

/* Feedback message in zone 1 */
.lg-bc-msg {
  font-size: 0.8rem;
}
.lg-bc-msg--ok {
  color: #2ecc71;
}
.lg-bc-msg--err {
  color: var(--c-red);
}

/* Zone 2 webhook row */
.lg-bc-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bdr-light);
}
.lg-bc-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.lg-bc-webhook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.lg-bc-webhook-toggle {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 5px;
  color: var(--txt-muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  padding: 3px 8px;
  white-space: nowrap;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.lg-bc-webhook-toggle:hover {
  color: var(--txt);
  border-color: var(--bdr);
}
.lg-bc-webhook-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-bc-webhook-hint {
  font-size: 0.7rem;
  color: var(--txt-muted);
  line-height: 1.5;
}

/* Shared discord status + message styles (reused in zone 2) */
.lg-discord-status,
.lg-discord-channel-status,
.lg-discord-guild-status {
  font-size: 0.82rem;
}
.lg-discord-name {
  color: #5865f2;
  font-weight: 600;
}
.lg-discord-ok {
  color: #2ecc71;
}
.lg-discord-none {
  color: var(--txt-muted);
}
/* Status line under the Discord panel. Matches the Channel Bot / Server Bot
   status rows above it, so the "Status" section label reads consistently. */
.lg-discord-msg {
  font-size: 0.82rem;
}

/* Calendar ↔ Standings mode toggle in the Discord panel */
.lg-discord-mode-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  overflow: hidden;
  width: fit-content;
}
.lg-discord-mode-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.lg-discord-mode-btn + .lg-discord-mode-btn {
  border-left: 1px solid var(--bdr);
}
.lg-discord-mode-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.lg-discord-mode-btn--active {
  background: var(--league-accent, #5865f2);
  color: #fff;
}
.lg-discord-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lg-discord-mode-toggle {
  flex-wrap: wrap;
}
/* Race-Result event picker (shown only in raceresult mode) */
.lg-discord-event-select {
  margin-top: 8px;
}
/* Off-screen poster wrapper for the race-result Discord image capture */
.lo-raceresult-poster {
  padding: 14px;
  background: #100e0d;
}

/* Preview button — pushed to the right of the Discord action row */
.lg-bc-preview-btn {
  margin-left: auto;
}

/* Live line-up preview overlay */
.lg-lineup-preview-modal {
  background: #15120f;
  border: 1px solid #333;
  border-radius: 12px;
  width: min(98vw, 1500px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}
.lg-lineup-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--txt-bright);
}
.lg-lineup-preview-close {
  background: none;
  border: none;
  color: var(--txt-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 6px;
}
.lg-lineup-preview-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.lg-lineup-preview-body {
  overflow: auto;
  padding: 16px;
}
.lg-lineup-preview-body .lo-lineup {
  width: 100%;
  border-radius: 12px;
}

/* ══ League Line-Up posters (Discord export) ══════════════════════════════ */
.lo-lineup {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 22px 24px 26px;
  background:
    radial-gradient(
      1200px circle at 50% -10%,
      color-mix(in srgb, var(--league-accent, #e10600) 14%, transparent),
      transparent 60%
    ),
    #100e0d;
  font-family: "Segoe UI", "Arial", sans-serif;
  color: #f3efe9;
}
.lo-lineup *,
.lo-lineup *::before,
.lo-lineup *::after {
  box-sizing: border-box;
}
/* F1-style diagonal speed bars */
.lo-lineup-bg {
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lo-lineup-bar {
  position: absolute;
  left: -30%;
  top: calc(var(--i) * 12% - 6%);
  width: 55%;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--league-accent, #e10600) 75%, transparent) 45%,
    color-mix(in srgb, var(--league-accent, #e10600) 90%, #fff) 60%,
    transparent
  );
  opacity: 0.32;
  filter: blur(0.3px);
  animation: lo-lineup-fly calc(7s + var(--i) * 1.1s) linear infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
/* Variety: some thicker, some thin & white, some dark */
.lo-lineup-bar:nth-child(3n) {
  height: 18px;
  opacity: 0.22;
}
.lo-lineup-bar:nth-child(3n + 1) {
  height: 5px;
  opacity: 0.4;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 55%,
    transparent
  );
}
.lo-lineup-bar:nth-child(4n) {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.6) 55%,
    transparent
  );
  opacity: 0.35;
}
@keyframes lo-lineup-fly {
  from {
    transform: translate(-40%, 60%) rotate(-26deg);
  }
  to {
    transform: translate(190%, -150%) rotate(-26deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lo-lineup-bar {
    animation: none;
    transform: translate(40%, 0) rotate(-26deg);
  }
}
/* Keep all content above the speed bars */
.lo-lineup-title,
.lo-lineup-grid,
.lo-lineup-pairs-cols,
.lo-lineup-officials {
  position: relative;
  z-index: 1;
}

/* ── Line-up options checkboxes (Broadcast → League Line Up) ── */
.lg-discord-lineup-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.lg-bc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #cfc9c1;
  cursor: pointer;
  user-select: none;
}
.lg-bc-check input {
  accent-color: var(--c-red, #e10600);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── League officials footer band on the line-up poster ── */
.lo-lineup-officials {
  margin-top: 26px;
  text-align: center;
}
.lo-lineup-officials-divider {
  height: 2px;
  margin: 0 auto 16px;
  width: 70%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--league-accent, #e10600) 75%, #fff) 50%,
    transparent
  );
  border-radius: 2px;
}
.lo-lineup-officials-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--league-accent, #e10600) 80%, #fff);
  margin-bottom: 14px;
}
.lo-lineup-officials-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.lo-off-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.lo-off-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.lo-off-avatar--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2724;
  color: #b7b1a9;
  font-size: 0.82rem;
  font-weight: 700;
}
.lo-off-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.lo-off-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.lo-off-roles {
  display: flex;
  gap: 5px;
}
.lo-off-badge {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--ob, #9b59b6);
  background: color-mix(in srgb, var(--ob, #9b59b6) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ob, #9b59b6) 45%, transparent);
  white-space: nowrap;
}
.lo-lineup-title {
  text-align: center;
  margin-bottom: 18px;
}
.lo-lineup-league {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.lo-lineup-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--league-accent, #e10600) 80%, #fff);
}

/* ── Layout 2: team grid ── */
.lo-lineup-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lo-lineup-grid-row {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tc, #444) 70%, #15120f) 0%,
    color-mix(in srgb, var(--tc, #444) 30%, #15120f) 45%,
    color-mix(in srgb, var(--tc, #444) 30%, #15120f) 55%,
    color-mix(in srgb, var(--tc, #444) 70%, #15120f) 100%
  );
  min-height: 64px;
}
.lo-lineup-grid-side {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  min-width: 0;
}
.lo-lineup-grid-side--right {
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}
.lo-lineup-grid-num {
  font-size: 1.9rem;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  min-width: 2.2ch;
  text-align: center;
  flex-shrink: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.lo-lineup-grid-num--eng {
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 4.4ch;
  color: rgba(255, 255, 255, 0.82);
}
.lo-lineup-grid-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.lo-lineup-grid-side--right .lo-lineup-grid-txt {
  align-items: flex-end;
}
.lo-lineup-grid-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-lineup-grid-team {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-lineup-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.lo-lineup-photo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.lo-lineup-grid-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.lo-lineup-grid-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.lo-lineup-grid-logo--ph {
  width: 42px;
  height: 42px;
}

/* ── Layout 1: driver pairings ── */
.lo-lineup-pairs-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 18px;
}
.lo-lineup-pairs-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lo-lineup-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 24px;
}
.lo-lineup-center-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.lo-lineup-center-name {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  max-width: 120px;
}
.lo-lineup-pair-card {
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tc, #444) 55%, #15120f),
    color-mix(in srgb, var(--tc, #444) 18%, #15120f)
  );
  border: 1px solid color-mix(in srgb, var(--tc, #444) 60%, transparent);
}
.lo-lineup-pair-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lo-lineup-pair-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.lo-lineup-pair-logo--ph {
  width: 30px;
  height: 30px;
}
.lo-lineup-pair-team {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-lineup-pair-drivers {
  display: flex;
  gap: 10px;
}
.lo-lineup-pair-driver {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.lo-lineup-pair-driver .lo-lineup-photo {
  width: 60px;
  height: 60px;
}
.lo-lineup-pair-num {
  font-size: 0.95rem;
  font-weight: 800;
  font-style: italic;
  color: #fff;
}
.lo-lineup-pair-num--eng {
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.lo-lineup-pair-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Nav tab unread badge ────────────────────────────────────── */
.nav-tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  margin-left: 5px;
  vertical-align: middle;
}

/* ── Inbox section (full-width panel) ───────────────────────── */
.inbox-main {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  min-height: 400px;
}

.inbox-main-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-panel);
  flex-shrink: 0;
}

.inbox-main-title {
  font-family: "Courier New", monospace;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}
.inbox-tab {
  background: none;
  border: none;
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-faint);
  padding: 5px 12px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.inbox-tab:hover {
  color: var(--txt-dim);
}
.inbox-tab--active {
  color: var(--txt-bright);
  border-bottom-color: var(--c-teal);
}

.inbox-section-badge {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-amber);
  letter-spacing: 0.05em;
}

.inbox-main-mark-all {
  background: none;
  border: 1px solid var(--bdr-light);
  border-radius: 5px;
  color: var(--txt-faint);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.inbox-main-mark-all:hover {
  color: var(--txt-mid);
  border-color: var(--txt-dim);
}

.inbox-main-panels {
  display: grid;
  grid-template-columns: 290px 1fr;
  flex: 1;
  min-height: 0;
}

.inbox-panel-list {
  border-right: 1px solid var(--bdr);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inbox-panel-detail {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.inbox-panel-detail .inbox-detail-inner {
  padding: 20px 24px;
}

.inbox-panel-detail .inbox-detail-empty {
  padding: 40px 24px;
}

@media (max-width: 900px) {
  .inbox-main-panels {
    grid-template-columns: 1fr;
  }
  .inbox-panel-list {
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    max-height: 240px;
  }
}

@media (min-width: 2560px) {
  .inbox-main-panels {
    grid-template-columns: 348px 1fr;
  }
}

/* ── Inbox — accent-color dashboard redesign ────────────────────── */
.inbox-main {
  border-top: 2px solid var(--c-red);
}
.inbox-main-hd {
  background: linear-gradient(
    135deg,
    var(--bg-panel) 0%,
    rgba(225, 6, 0, 0.06) 100%
  );
  border-bottom: 1px solid rgba(225, 6, 0, 0.2);
  padding: 16px 18px;
}
.inbox-main-title {
  color: #fff;
  font-size: 0.82rem;
  gap: 10px;
}
.inbox-section-badge {
  background: rgba(245, 166, 35, 0.14);
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--c-amber);
  font-size: 0.7rem;
}
.inbox-main-mark-all {
  border-color: rgba(245, 166, 35, 0.3);
  color: rgba(245, 166, 35, 0.7);
}
.inbox-main-mark-all:hover {
  background: rgba(245, 166, 35, 0.08);
  border-color: var(--c-amber);
  color: var(--c-amber);
}
.inbox-panel-list {
  background: rgba(0, 0, 0, 0.14);
}

/* Row tinting via ::before — works with CSS custom property colors */
.msg-row {
  position: relative;
  overflow: hidden;
  border-left-width: 4px;
}
.msg-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--msg-color, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.msg-row:not(.msg-row--read)::before {
  opacity: 0.055;
}
.msg-row:hover::before {
  opacity: 0.09;
}
.msg-row--selected::before {
  opacity: 0.12;
}
/* Let ::before carry background; clear the fallback solid backgrounds */
.msg-row:hover {
  background: transparent;
}
.msg-row--selected {
  background: transparent;
}
/* Read rows: faint left border, lower ::before opacity already at 0 */
.msg-row--read {
  border-left-color: rgba(255, 255, 255, 0.07);
}

/* Icon bubble */
.msg-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.msg-row-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--msg-color, rgba(255, 255, 255, 0.1));
  opacity: 0.18;
}

/* Unread dot: subtle glow */
.msg-row:not(.msg-row--read) .msg-dot {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 0 6px var(--msg-color, var(--c-amber));
  width: 8px;
  height: 8px;
}

/* Detail panel: accent left border on subject when --msg-color is set */
.inbox-detail-inner {
  border-top: 2px solid var(--msg-color, var(--c-red));
}
.inbox-detail-subject {
  padding-left: 10px;
  border-left: 3px solid var(--msg-color, var(--bdr-light));
  gap: 10px;
}
.inbox-detail-meta {
  padding-left: 13px;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BLOCK — All P1 + P2 fixes
   ─────────────────────────────────────────────────────────────────────────
   Breakpoint system (max-width):
     xs : < 480px         @media (max-width: 479px)
     sm : 480 – 767px     @media (max-width: 767px)
     md : 768 – 1024px    @media (max-width: 1024px)
     lg : 1025 – 1279px   @media (max-width: 1279px)
     xl : ≥ 1280px        (default — no query)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── P2.b : Sidebar width at small desktop (1024–1199px) ─────────────────── */
@media (min-width: 1025px) and (max-width: 1199px) {
  /* The card is a drawer below 1200px, so this range stays single-column — a
     280px sidebar track here just traps the page content in a narrow column. */
  .main-content,
  .main-content--guest {
    grid-template-columns: 1fr;
  }
}

/* ── P1.b (md) : tablet — the profile card is a drawer, page is one column ── */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  /* The tab content grid only stacked at ≤767px, leaving iPad portrait
     (768–1024) in two columns — so a tab that didn't override it rendered its
     cards in the narrow left column. Stack it for the whole tablet range. */
  .telemetry-section {
    grid-template-columns: 1fr;
  }
  /* On tablet/phone the profile card is shown/hidden by the red edge tab, so the
     desktop "‹" collapse button is redundant. */
  .sidebar-collapse-btn {
    display: none;
  }
  /* No `.left-sidebar` geometry here on purpose — the drawer owns it, in the
     ≤1200px block. */
}

/* The portrait-tablet block that used to live here only restated the drawer and
   the red tab for ≤1024px — and its `display: none` on `.left-sidebar` stopped
   the drawer from ever showing. The ≤1200px block covers this range. */

/* ── sm breakpoint (≤ 767px) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* P1.a : Nav becomes a scrollable, momentum-scrolling pill strip */
  .app-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: 6px;
    padding: 6px 10px;
    justify-content: flex-start;
  }
  .app-nav::-webkit-scrollbar {
    display: none;
  }
  .nav-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    height: auto;
    padding: 8px 14px;
    border-top: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
  }
  .nav-tab.active {
    border-top-color: transparent;
    border-bottom-color: var(--c-amber);
  }

  /* The drawer and the red edge tab come from the ≤1200px block. This block used
     to restyle the tab as an inline 36px button — but the button element sits
     after `.main-content` in the DOM, so on phones that put it at the very
     bottom of the page instead of on the left edge. */

  /* P2.a : Telemetry section stacks to 1 column */
  .telemetry-section {
    grid-template-columns: 1fr;
  }

  /* P2.c : Info cards stay 1-col at sm */
  .bottom-section {
    grid-template-columns: 1fr;
  }

  /* P2.d : League calendar and timeline rows scroll horizontally */
  .lg-calendar-wrap,
  .lg-timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .lg-week-strip {
    min-width: 480px;
  }

  /* P1.d : Laptime table — hide sector columns at sm */
  .lt-table th:nth-child(5),
  .lt-table td:nth-child(5),
  .lt-table th:nth-child(6),
  .lt-table td:nth-child(6),
  .lt-table th:nth-child(7),
  .lt-table td:nth-child(7) {
    display: none;
  }

  /* Race results / leaderboard — hide less-critical columns at sm */
  /* Race result detail: hide Best Lap, Pits columns */
  .lg-result-table th:nth-child(7),
  .lg-result-table td:nth-child(7),
  .lg-result-table th:nth-child(8),
  .lg-result-table td:nth-child(8) {
    display: none;
  }
}

/* ── xs breakpoint (≤ 479px) ─────────────────────────────────────────────── */
@media (max-width: 479px) {
  /* P1.c : Header padding on small phones */
  .app-header {
    padding: 0 12px;
  }

  /* P1.a : Nav tabs tighter at xs */
  .nav-tab {
    padding: 8px 10px;
    font-size: 0.62rem;
  }

  /* P2.e : Login bar shrinks to avatar + icon only */
  .login-bar-name,
  .login-bar-session {
    display: none;
  }
  .login-bar-avatar img {
    width: 30px;
    height: 30px;
  }
  .login-bar-logout {
    font-size: 0.62rem;
    padding: 4px 8px;
  }

  /* P1.d : Laptime table xs — also hide speed, fuel, wear, ERS, car, game */
  .lt-table th:nth-child(8),
  .lt-table td:nth-child(8),
  .lt-table th:nth-child(9),
  .lt-table td:nth-child(9),
  .lt-table th:nth-child(10),
  .lt-table td:nth-child(10),
  .lt-table th:nth-child(11),
  .lt-table td:nth-child(11),
  .lt-table th:nth-child(12),
  .lt-table td:nth-child(12),
  .lt-table th:nth-child(13),
  .lt-table td:nth-child(13),
  .lt-table th:nth-child(14),
  .lt-table td:nth-child(14),
  .lt-table th:nth-child(15),
  .lt-table td:nth-child(15) {
    display: none;
  }
  .lt-table th,
  .lt-table td {
    min-width: 0;
    padding: 6px 8px;
  }

  /* lb-table (leaderboard): hide round-by-round columns, keep Pos/Driver/Team/Pts */
  .lb-table .lg-rnd {
    display: none;
  }

  /* P2.c : Info cards single column padding */
  .info-card {
    padding: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IPAD / TABLET FIX — Header overflow + league card width
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix 1 : Header — two-row layout at ≤1100px so login buttons don't overflow ── */
@media (max-width: 1100px) {
  .app-header {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: 8px 20px 0;
  }
  .app-header-logo {
    grid-column: 1;
    grid-row: 1;
    padding-right: 16px;
    padding-bottom: 6px;
  }
  /* Login/inbox area moves to top-right */
  .app-header-right,
  .app-header-user {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
  }
  /* Nav spans full width on row 2 */
  .app-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 42px;
    border-top: 1px solid #1f1d1b;
    padding: 0 4px;
    justify-content: flex-start;
  }
  .nav-tab {
    height: 42px;
  }
  /* Start the drawer below the taller two-row header (~106px). No `height` here:
     the drawer spans top→bottom, and a `calc(100vh …)` height fought that. */
  .left-sidebar {
    top: 106px;
  }
}

/* ── Fix 2 : League card fills full available width at all sizes ─────────── */
.lg-wrapper {
  width: 100%;
}
.lg-wrapper .league-card,
.lg-wrapper .tm-grid-outer,
.lg-wrapper .tm-list-card,
.lg-wrapper .tm-detail-card {
  width: 100%;
  box-sizing: border-box;
}

.lg-wrapper .league-card-header {
  background-color: var(--bg-panel);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--league-accent, #e10600) 18%, transparent) 0%,
    transparent 65%
  );
}

.lg-selector-btn.active {
  border-left: 3px solid var(--sa, var(--c-red));
}

/* ── My Laps chip ────────────────────────────────────────────────────────── */
.lt-chip--mylaps {
  border-color: var(--c-amber);
  color: var(--c-amber);
  margin-left: 20px;
  padding-left: 20px;
  position: relative;
}
.lt-chip--mylaps::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--bdr);
}
.lt-chip--mylaps:hover {
  background: rgba(245, 166, 35, 0.1);
  border-color: var(--c-amber);
  color: var(--c-amber);
}
.lt-chip--mylaps.lt-chip--active {
  background: rgba(245, 166, 35, 0.16);
  border-color: var(--c-amber);
  color: var(--c-amber);
  box-shadow:
    0 0 6px rgba(245, 166, 35, 0.55),
    0 0 18px rgba(245, 166, 35, 0.25),
    inset 0 0 8px rgba(245, 166, 35, 0.08);
}

/* ── My Laps grid ────────────────────────────────────────────────────────── */
.lt-ml-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── My Laps single-table row types ──────────────────────────────────────── */
.lt-ml-track-row td {
  padding: 10px 14px 8px;
  background: var(--bg-panel);
  border-top: 2px solid var(--bdr-light);
  border-bottom: 1px solid var(--bdr);
}
.lt-ml-track-row:first-child td {
  border-top: none;
}

.lt-ml-track-name {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-teal);
  margin-right: 12px;
}

.lt-ml-lap-count {
  font-family: "Courier New", monospace;
  font-size: 0.65rem;
  color: var(--txt-dim);
  letter-spacing: 0.08em;
}

.lt-ml-session-row td {
  padding: 5px 14px 4px;
  background: rgba(184, 127, 255, 0.05);
  border-bottom: 1px solid rgba(184, 127, 255, 0.1);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-purple);
  opacity: 0.75;
}

/* ── Standings chip ──────────────────────────────────────────────────────── */
.lt-chip--standings {
  border-color: var(--c-teal);
  color: var(--c-teal);
  margin-left: 6px;
}
.lt-chip--standings:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.lt-chip--standings.lt-chip--active {
  background: rgba(0, 212, 170, 0.16);
  border-color: var(--c-teal);
  color: var(--c-teal);
  box-shadow:
    0 0 6px rgba(0, 212, 170, 0.55),
    0 0 18px rgba(0, 212, 170, 0.25),
    inset 0 0 8px rgba(0, 212, 170, 0.08);
}

/* ── Standings view ──────────────────────────────────────────────────────── */
.lt-st-wrap {
  width: 100%;
}

/* Stat strip */
.lt-st-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lt-st-stat {
  flex: 1;
  min-width: 110px;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.lt-st-stat-num {
  font-family: "Courier New", monospace;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.lt-st-stat-num--gold {
  color: #ffd700;
}
.lt-st-stat-label {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--txt-dim);
}

/* Driver tier */
.lt-st-tier {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.lt-st-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.lt-st-tier-name {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--txt-muted);
}
.lt-st-tier-sub {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-dim);
  letter-spacing: 0.04em;
}
.lt-st-tier-bar {
  height: 8px;
  background: var(--bg-base);
  border-radius: 4px;
  overflow: hidden;
}
.lt-st-tier-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--txt-muted);
  transition: width 0.5s ease;
}
.lt-st-tier--rookie .lt-st-tier-fill {
  background: linear-gradient(90deg, var(--txt-faint), var(--txt-muted));
}
.lt-st-tier--pro .lt-st-tier-name {
  color: var(--c-teal);
}
.lt-st-tier--pro .lt-st-tier-fill {
  background: linear-gradient(90deg, var(--c-teal), #00f5c0);
}
.lt-st-tier--elite .lt-st-tier-name {
  color: var(--c-purple);
}
.lt-st-tier--elite .lt-st-tier-fill {
  background: linear-gradient(90deg, var(--c-purple), #d4b3ff);
}
.lt-st-tier--legend .lt-st-tier-name {
  color: #ffd700;
}
.lt-st-tier--legend .lt-st-tier-fill {
  background: linear-gradient(90deg, #ffb800, #ffd700);
}

/* Section label */
.lt-st-section-label {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-purple);
  margin-bottom: 8px;
}

/* Track rows */
.lt-st-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.lt-st-row {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--bdr-light);
  border-radius: 8px;
  padding: 9px 14px;
  transition:
    border-color 0.15s,
    transform 0.1s;
}
.lt-st-row:hover {
  border-color: var(--bdr-light);
  transform: translateX(2px);
}
.lt-st-row--gold {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.04);
}
.lt-st-row--silver {
  border-left-color: #c0c0c0;
}
.lt-st-row--bronze {
  border-left-color: #cd7f32;
}
.lt-st-row-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lt-st-track {
  flex: 1;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-st-pos {
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--txt-muted);
  flex-shrink: 0;
}
.lt-st-pos--gold {
  color: #ffd700;
}
.lt-st-pos--silver {
  color: #c0c0c0;
}
.lt-st-pos--bronze {
  color: #cd7f32;
}
.lt-st-time {
  font-family: "Courier New", monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-purple);
  flex-shrink: 0;
  min-width: 86px;
  text-align: right;
}
.lt-st-row-bot {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.lt-st-gap-leader {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  color: var(--txt-muted);
}
.lt-st-climb {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-teal);
}
.lt-st-record {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffd700;
}

/* Spotlight */
.lt-st-spotlight {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.lt-st-spot {
  flex: 1;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 14px 16px;
}
.lt-st-spot-title {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--txt-dim);
  margin-bottom: 8px;
}
.lt-st-spot-main {
  font-family: "Courier New", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.lt-st-spot-sub {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  color: var(--c-teal);
}

/* ════════════════════════════════════════════════════════════════
   OVERVIEW DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.ov-wrap {
  width: 100%;
  --txt-muted: #8b8279;
  --txt-dim: #615d59;
  --txt-mid: #b1a9a1;
  --txt-faint: #746f69;
}

.ov-loading,
.ov-error {
  padding: 40px 20px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--txt-muted);
}
.ov-error {
  color: var(--c-red);
}

/* ── Header ─────────────────────────────────────────────────────── */
.ov-header {
  margin-bottom: 20px;
}
.ov-eyebrow {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-purple);
  margin-bottom: 4px;
}
.ov-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  font-family: "Courier New", monospace;
}

/* ── Hero card (latest race) ────────────────────────────────────── */
.ov-hero {
  background: radial-gradient(
    120% 140% at 0% 0%,
    #2a2724 0%,
    var(--bg-card) 55%
  );
  border: 1px solid var(--bdr-light);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.ov-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}
.ov-hero-eyebrow {
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-amber);
}
.ov-hero-track {
  font-family: "Courier New", monospace;
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 6px 0 2px;
}
.ov-hero-meta {
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  color: var(--txt-muted);
  margin-bottom: 16px;
}
.ov-hero--empty {
  background: var(--bg-card);
  border-color: var(--bdr);
}

/* ── Podium ─────────────────────────────────────────────────────── */
.ov-podium {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.ov-pod {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: 10px 10px 0 0;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-bottom: 3px solid var(--bdr-light);
  text-align: center;
}
.ov-pod--1 {
  padding-top: 20px;
  border-bottom-color: #ffd700;
  background: linear-gradient(180deg, #2c2818 0%, var(--bg-panel) 70%);
}
.ov-pod--2 {
  padding-top: 14px;
  border-bottom-color: #c8c8c8;
}
.ov-pod--3 {
  padding-top: 10px;
  border-bottom-color: #cd7f32;
}
.ov-pod-medal {
  font-size: 1.4rem;
  line-height: 1;
}
.ov-pod-name {
  font-family: "Courier New", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  word-break: break-word;
}
.ov-pod-rank {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-muted);
}
.ov-pod--empty {
  opacity: 0.45;
}

/* ── Card grid ──────────────────────────────────────────────────── */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.ov-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 12px 14px;
}
.ov-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 8px;
}
.ov-card-note {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--txt-dim);
}

/* ── List rows ──────────────────────────────────────────────────── */
.ov-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bdr);
}
.ov-row:last-child {
  border-bottom: none;
}
.ov-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov-row-title {
  font-family: "Courier New", monospace;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-row-sub {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ov-row-meta {
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  color: var(--txt-muted);
}
.ov-laptime {
  font-family: "Courier New", monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-teal);
}
.ov-when {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--txt-bright);
}
.ov-leader {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffd700;
}
.ov-tag {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr-light);
  color: var(--txt-mid);
}
.ov-empty {
  padding: 14px 0;
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  color: var(--txt-dim);
  text-align: center;
}

/* ── Community stat tiles ───────────────────────────────────────── */
.ov-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 10px;
}
.ov-stat-num {
  font-family: "Courier New", monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-teal);
  line-height: 1;
}
.ov-stat-label {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
  text-align: center;
}

/* ── Personal snapshot ──────────────────────────────────────────── */
.ov-card--personal {
  background: radial-gradient(
    120% 140% at 100% 0%,
    #1c2622 0%,
    var(--bg-card) 60%
  );
  border-color: #00d4aa44;
}
.ov-personal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 10px;
}
.ov-personal-num {
  font-family: "Courier New", monospace;
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.ov-personal-num-label {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--txt-dim);
  margin-top: 5px;
}
.ov-personal-sub {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.ov-personal-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 6px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 9px;
}
.ov-personal-stat strong {
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  color: var(--c-teal);
}
.ov-personal-stat span {
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
}
.ov-personal-recent {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--bdr);
}
.ov-personal-recent-val {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--txt-bright);
}

/* ── Login CTA ──────────────────────────────────────────────────── */
.ov-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 8px;
  text-align: center;
}
.ov-cta-text {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--txt-muted);
  margin: 0;
}
.ov-cta-btn {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 8px;
  background: #5865f2;
  color: #fff;
  transition: filter 0.15s ease;
}
.ov-cta-btn:hover {
  filter: brightness(1.12);
}

/* ── Admin activity card ────────────────────────────────────────── */
.ov-adm-card {
  background: linear-gradient(135deg, #1a1712 0%, var(--bg-card) 60%);
  border: 1px solid #9b59b633;
  border-top: 2px solid #9b59b6;
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
}
.ov-adm-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.ov-adm-eyebrow {
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9b59b6;
  background: #9b59b618;
  border: 1px solid #9b59b633;
  border-radius: 4px;
  padding: 1px 6px;
}
.ov-adm-title {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.ov-adm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.ov-adm-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  min-width: 60px;
}
.ov-adm-pill--warn {
  border-color: #e8b84b44;
  background: #e8b84b0a;
}
.ov-adm-pill-num {
  font-family: "Courier New", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-teal);
  line-height: 1;
}
.ov-adm-pill--warn .ov-adm-pill-num {
  color: #e8b84b;
}
.ov-adm-dim {
  color: var(--txt-dim) !important;
}
.ov-adm-warn-text {
  color: #e8b84b !important;
}
.ov-adm-pill-lbl {
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-dim);
}
.ov-adm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.ov-adm-section {
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 12px 14px;
}
.ov-adm-section-title {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--txt-muted);
  margin-bottom: 8px;
}
.ov-adm-section-title--warn {
  color: #e8b84b;
}
.ov-adm-badge {
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #00d4aa22;
  color: #00d4aa;
  border: 1px solid #00d4aa44;
}
.ov-adm-badge--no {
  background: var(--bg-panel);
  color: var(--txt-dim);
  border-color: var(--bdr);
}

/* ── Team link conflict modal (CSV import) ───────────────────────────────── */
.lg-link-modal {
  width: min(540px, 94vw);
}
.lg-link-modal-desc {
  font-size: 0.82rem;
  color: var(--txt-dim);
  margin: 0 0 16px;
  line-height: 1.55;
}
.lg-link-conflicts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.lg-link-conflict-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 10px 14px;
}
.lg-link-conflict-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lg-link-conflict-team {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--txt-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-link-conflict-drivers {
  font-size: 0.75rem;
  color: var(--txt-dim);
}
.lg-link-conflict-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.lg-link-btn {
  padding: 4px 12px;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background: var(--bg-table);
  color: var(--txt-dim);
  font-size: 0.78rem;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.lg-link-btn:hover {
  border-color: #555;
  color: var(--txt-bright);
}
.lg-link-yes.active {
  background: rgba(80, 200, 120, 0.12);
  border-color: #50c878;
  color: #50c878;
}
.lg-link-no.active {
  background: rgba(220, 80, 80, 0.1);
  border-color: #c05050;
  color: #e07070;
}
.lg-link-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.lg-btn-ghost {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--bdr);
  background: transparent;
  color: var(--txt-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.lg-btn-ghost:hover {
  border-color: #555;
  color: var(--txt-bright);
}

/* ══════════════════════════════════════════════════════════════════════════
   LEAGUE OVERVIEW TAB
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Selector + bookmark bar ─────────────────────────────────────────────── */
.lo-selector-top-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.lo-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}
.lo-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.lo-chip--active {
  background: linear-gradient(
    90deg,
    rgba(225, 6, 0, 0.18),
    rgba(225, 6, 0, 0.04)
  ) !important;
  border-left-color: var(--c-red) !important;
  box-shadow: 0 0 0 1px rgba(225, 6, 0, 0.25);
}
.lo-chip-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  pointer-events: none;
}
.lo-bm-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  color: #444;
  transition:
    color 0.15s,
    transform 0.15s;
  flex-shrink: 0;
}
.lo-bm-btn:hover {
  color: #ffd700;
  transform: scale(1.25);
}
.lo-bm-btn--active {
  color: #ffd700 !important;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
}

/* Card hide/collapse toggle (search card + bookmark card) */
.lo-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lo-search-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6c6661;
}
.lo-search-body[hidden] {
  display: none !important;
}
.lo-card-hide-btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #6c6661;
  font-size: 1.27rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition:
    color 0.15s ease,
    transform 0.2s ease,
    background 0.15s ease;
}
.lo-card-hide-btn:hover {
  color: #e8e3db;
  background: rgba(255, 255, 255, 0.06);
}
.lo-card-hide-btn--collapsed {
  transform: rotate(-90deg);
}

/* Bookmark card beside filter */
.lo-bm-card {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 72px;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-table));
  border: 1px solid var(--bdr);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.lo-bm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 7px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
  border-bottom: 1px solid var(--bdr);
}
.lo-bm-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 180px;
}
.lo-bm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--bdr);
  transition:
    background 0.12s,
    padding-left 0.12s;
}
.lo-bm-item:last-child {
  border-bottom: none;
}
.lo-bm-item:hover {
  background: rgba(255, 255, 255, 0.05);
  padding-left: 14px;
}
.lo-bm-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: #e8e3db;
}
.lo-bm-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  color: #444;
  padding: 0 1px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}
.lo-bm-remove:hover {
  color: #ff6b6b;
}

/* ── Unified background container (wraps filter + all detail cards) ──────── */
#lo-root {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px 8px;
  border: 1px solid var(--bdr);
  border-radius: 14px;
  background: linear-gradient(165deg, var(--bg-base), var(--bg-table));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
#lo-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 14px;
  background:
    radial-gradient(
      760px circle at 10% 0%,
      rgba(225, 6, 0, 0.1),
      transparent 52%
    ),
    radial-gradient(
      680px circle at 94% 14%,
      rgba(74, 158, 255, 0.07),
      transparent 48%
    ),
    radial-gradient(
      860px circle at 50% 100%,
      rgba(0, 212, 170, 0.05),
      transparent 58%
    );
}
#lo-detail-wrap {
  position: relative;
  min-width: 0;
}

/* ── Cards: glassy gradient + staggered entrance ─────────────────────────── */
#lo-detail-wrap .league-card {
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--league-accent, transparent) 12%, var(--bg-card)) 0%,
    color-mix(in srgb, var(--league-accent, transparent) 5%, var(--bg-table))
      100%
  );
  border: 1px solid
    color-mix(in srgb, var(--league-accent, transparent) 25%, var(--bdr));
  border-radius: 12px;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  animation: lo-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#lo-detail-wrap > .league-card:nth-child(1) {
  animation-delay: 0.02s;
}
#lo-detail-wrap > .league-card:nth-child(2) {
  animation-delay: 0.08s;
}
#lo-detail-wrap > div:nth-child(3) {
  animation: lo-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}
#lo-detail-wrap > .league-card:nth-child(4) {
  animation-delay: 0.2s;
}
#lo-detail-wrap > .league-card:nth-child(5) {
  animation-delay: 0.26s;
}
#lo-detail-wrap > .league-card:nth-child(6) {
  animation-delay: 0.32s;
}
#lo-detail-wrap > .league-card:nth-child(7) {
  animation-delay: 0.38s;
}
#lo-detail-wrap .league-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--league-accent, transparent) 40%,
    var(--bdr-light)
  );
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px
      color-mix(in srgb, var(--league-accent, transparent) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@keyframes lo-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Tab bar + lazy panel ─────────────────────────────────────────────────── */
.lo-tabbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  position: sticky;
  top: 6px;
  z-index: 5;
  backdrop-filter: blur(6px);
}
.lo-tab {
  flex: 1;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #a09a93;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.lo-tab:hover {
  color: #e8e3db;
  background: rgba(255, 255, 255, 0.04);
}
.lo-tab--active {
  color: #fff;
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--league-accent, #e10600) 32%, var(--bg-panel)),
    color-mix(in srgb, var(--league-accent, #e10600) 14%, var(--bg-table))
  );
  border-color: color-mix(
    in srgb,
    var(--league-accent, #e10600) 55%,
    var(--bdr)
  );
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.lo-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Slim "next event" strip in the header zone ───────────────────────────── */
.lo-nextrace-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  font: inherit;
  padding: 10px 16px;
  border-radius: 10px;
  color: #e8e3db;
  border: 1px solid
    color-mix(in srgb, var(--league-accent, #e10600) 28%, var(--bdr));
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--league-accent, #e10600) 16%, var(--bg-table)),
    var(--bg-table) 70%
  );
  transition:
    border-color 0.16s ease,
    transform 0.16s ease;
}
.lo-nextrace-strip:hover {
  transform: translateY(-1px);
  border-color: color-mix(
    in srgb,
    var(--league-accent, #e10600) 50%,
    var(--bdr-light)
  );
}
.lo-nrs-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--league-accent, #e10600);
  white-space: nowrap;
}
.lo-nrs-track {
  font-weight: 700;
  white-space: nowrap;
}
.lo-nrs-sep {
  color: #555;
}
.lo-nrs-when {
  font-size: 0.78rem;
  color: #a09a93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-nrs-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e8e3db;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.lo-nrs-cta {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--league-accent, #e10600);
  white-space: nowrap;
}

/* ── Driver line-up (team-grouped) ────────────────────────────────────────── */
.lo-lu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}
.lo-lu-team {
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--lu-team, #888);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  padding: 10px 12px;
}
.lo-lu-team-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.lo-lu-team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Season label beside the "Next Event" card title, e.g. "Season 10" */
.lo-next-season {
  align-self: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt-mid);
  margin-left: 8px;
}
.lo-lu-team-name {
  font-weight: 700;
  color: #e8e3db;
  font-size: 0.84rem;
}
.lo-lu-drivers {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lo-lu-driver {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.lo-lu-num {
  font-family: monospace;
  font-weight: 700;
  color: var(--lu-team, #888);
  min-width: 30px;
}
.lo-lu-name {
  color: #d8d3cc;
}
.lo-lu-abbr {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #6c6661;
  font-family: monospace;
}

/* ── Head-to-Head ─────────────────────────────────────────────────────────── */
.lo-h2h-modes {
  margin-left: auto;
  display: flex;
  gap: 3px;
  background: var(--bg-table);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  padding: 2px;
}
.lo-h2h-mode {
  appearance: none;
  border: none;
  background: transparent;
  color: #a09a93;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.lo-h2h-mode--active {
  background: var(--league-accent, #e10600);
  color: #fff;
}
.lo-h2h-body {
  padding: 16px 18px 18px;
}
.lo-h2h-pickers {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lo-h2h-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.lo-h2h-pick--b {
  flex-direction: row;
  justify-content: flex-end;
}
.lo-h2h-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.lo-h2h-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: var(--bg-table);
  color: #e8e3db;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.lo-h2h-pick--b .lo-h2h-select {
  text-align: right;
}
.lo-h2h-vs {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #6c6661;
  flex: none;
}
.lo-h2h-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lo-h2h-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lo-h2h-rowtop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.lo-h2h-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #8a847d;
  font-variant-numeric: tabular-nums;
}
.lo-h2h-rowtop .lo-h2h-val:last-child {
  text-align: right;
}
.lo-h2h-val--win {
  color: #fff;
}
.lo-h2h-metric {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6c6661;
  padding: 0 14px;
  white-space: nowrap;
}
.lo-h2h-track {
  display: flex;
  height: 8px;
  gap: 3px;
}
.lo-h2h-half {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.lo-h2h-half--a {
  justify-content: flex-end;
}
.lo-h2h-half--b {
  justify-content: flex-start;
}
.lo-h2h-half span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lo-h2h-tally {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
}
.lo-h2h-tally-label {
  font-size: 0.74rem;
  color: #a09a93;
}
.lo-h2h-tally-score {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lo-h2h-tally-dash {
  color: #555;
  margin: 0 8px;
}

/* ── Card headers: accent bar before the title ───────────────────────────── */
#lo-detail-wrap .league-card-header {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--league-accent, transparent) 28%, transparent),
    transparent 65%
  );
  border-bottom: 1px solid var(--bdr);
}
#lo-detail-wrap .league-card-title {
  position: relative;
  padding-left: 13px;
  letter-spacing: 0.02em;
}
#lo-detail-wrap .league-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-red), var(--c-red-dark));
  box-shadow: 0 0 8px rgba(225, 6, 0, 0.6);
}

/* ── Hero (league) card ──────────────────────────────────────────────────── */
.lo-hero-card .league-card-header {
  background:
    radial-gradient(
      900px circle at 0% 0%,
      color-mix(in srgb, var(--league-accent, #e10600) 16%, transparent),
      transparent 60%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--league-accent, #e10600) 8%, transparent),
      transparent
    ) !important;
  padding: 18px 20px !important;
  align-items: center;
}
.lo-hero-card .lg-logo-area {
  width: 90px;
  height: 90px;
  box-shadow:
    0 0 0 1px var(--bdr-light),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Top-right cluster: status badge + bookmark, pinned to the header corner */
.lo-hero-topright {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.lo-hero-topright .lg-badge {
  text-transform: uppercase;
}
.lo-hero-topright .lo-bm-btn {
  font-size: 1.15rem;
}

/* Main text column: reserve room so a long name never runs under the badge */
.lo-hero-card .lg-header-main {
  gap: 10px;
  padding-right: 120px;
}
/* Title + sub-header grouped as one unit */
.lo-hero-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lo-hero-card .lo-hero-name {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--txt-bright);
}
/* Accent bar beside the name + progress fill share the league accent */
.lo-hero-card .league-card-title::before {
  background: linear-gradient(
    180deg,
    var(--league-accent, var(--c-red)),
    color-mix(in srgb, var(--league-accent, var(--c-red)) 55%, #000)
  );
  box-shadow: 0 0 8px
    color-mix(in srgb, var(--league-accent, var(--c-red)) 60%, transparent);
  height: 26px;
  width: 4px;
}
.lo-hero-card .lo-hero-titlewrap .lg-header-subtitle {
  margin-top: 0;
  font-size: 16px;
  padding-left: 13px; /* align under the name, clearing the accent bar */
}
/* Meta row */
.lo-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.lo-hero-meta .lg-meta-item {
  display: inline-flex;
  align-items: center;
}
.lo-hero-meta .lg-meta-item:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  margin-left: 14px;
}
/* Season-progress block */
.lo-hero-progress {
  margin-top: 2px;
  max-width: 420px;
}
.lo-hero-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--txt-dim);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.lo-hero-progress-track {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}
.lo-hero-card .lo-progress-fill {
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 10px
    color-mix(in srgb, var(--league-accent, #e10600) 55%, transparent);
}

/* Narrow screens: let the top-right cluster sit inline instead of overlapping */
@media (max-width: 620px) {
  .lo-hero-card .lg-header-main {
    padding-right: 0;
  }
  .lo-hero-topright {
    position: static;
    margin-bottom: 6px;
    justify-content: flex-end;
  }
}

/* ── Next race card ──────────────────────────────────────────────────────── */
.lo-nextrace-card {
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--league-accent, transparent) 16%, var(--bg-card)) 0%,
    color-mix(in srgb, var(--league-accent, transparent) 5%, var(--bg-table))
      60%
  ) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Drivers' Championship Standings — full per-round grid (PSGL-style).
   Frozen left columns (Pos · Driver · Manufacturer · Pts); the round columns
   scroll horizontally. Every cell carries an opaque background so the frozen
   columns cleanly cover the scrolling content beneath them.
   ════════════════════════════════════════════════════════════════════════ */

/* Poster header — big title + league/season strap, with an accent glow. */
.lo-champ-card {
  overflow: hidden;
  min-width: 0;
}
.lo-champ-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 18px;
  background: radial-gradient(
    1100px circle at 100% 0%,
    color-mix(in srgb, var(--league-accent, #e10600) 13%, transparent),
    transparent 55%
  );
  border-bottom: 2px solid
    color-mix(in srgb, var(--league-accent, var(--bdr)) 45%, var(--bdr));
  margin-bottom: 4px;
}
/* Left block holds the title + sub strap and may shrink/truncate. */
.lo-champ-head-main {
  min-width: 0;
}
/* League logo on the right — height tracks the two header lines (clamp
   matches the responsive title + sub strap). */
.lo-champ-head-logo {
  flex-shrink: 0;
  height: clamp(3rem, 7.5vw, 4.6rem);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.lo-champ-title {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.lo-champ-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9d4cc;
}
.lo-champ-league {
  color: #d9d4cc;
}
.lo-champ-sub-sep {
  color: var(--txt-dim, #8a8178);
  font-weight: 700;
}
.lo-champ-season {
  background: var(--league-accent, #e10600);
  color: #fff;
  padding: 4px 11px;
  border-radius: 5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--league-accent, #e10600) 45%, transparent);
}

.lo-champ-scroll {
  overflow-x: auto;
  margin-top: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Poster mode (off-screen render for the Discord image): show every round in
   one wide strip — no scroll clipping, no sticky columns, no scroll shadow. */
.lo-champ-card--poster .lo-champ-scroll {
  overflow: visible;
}
.lo-champ-card--poster .lo-champ-sticky {
  position: static;
}
.lo-champ-card--poster .lo-champ-pts {
  box-shadow: none;
}
.lo-champ-card--poster .lo-champ-chip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.lo-champ-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  font-size: 0.82rem;
  white-space: nowrap;
}
.lo-champ-table th,
.lo-champ-table td {
  background: color-mix(
    in srgb,
    var(--league-accent, transparent) 7%,
    var(--bg-panel)
  );
  padding: 11px 10px;
  border-bottom: 1px solid color-mix(in srgb, #000 25%, var(--bg-panel));
  text-align: center;
  vertical-align: middle;
}
.lo-champ-table thead th {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-muted);
  background: color-mix(
    in srgb,
    var(--league-accent, transparent) 7%,
    var(--bg-panel)
  );
  border-bottom: 2px solid
    color-mix(in srgb, var(--league-accent, var(--bdr)) 50%, var(--bdr));
}

/* Frozen left columns */
.lo-champ-sticky {
  position: sticky;
  z-index: 2;
}
.lo-champ-table thead th.lo-champ-sticky {
  z-index: 4;
  /* Larger than the round-column headers so the standings columns read clearly. */
  font-size: 0.82rem;
}
.lo-champ-pos {
  left: 0;
  width: 46px;
  min-width: 46px;
}
.lo-champ-driver {
  left: 46px;
  width: 190px;
  min-width: 190px;
}
.lo-champ-manuf {
  left: 236px;
  width: 152px;
  min-width: 152px;
}
/* Higher specificity than the base `th, td { text-align:center }` so the
   Driver and Manufacturer columns (header + cells) stay left-aligned. */
.lo-champ-table .lo-champ-driver,
.lo-champ-table .lo-champ-manuf {
  text-align: left;
}
.lo-champ-pts {
  left: 388px;
  width: 56px;
  min-width: 56px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
.lo-champ-table thead th.lo-champ-pts {
  color: var(--txt-muted);
}

/* Position number — podium colours for the top three */
.lo-champ-posnum {
  font-weight: 800;
  font-size: 0.98rem;
  color: #c4bdb3;
}
.lo-champ-row--p1 .lo-champ-posnum {
  color: #ffd700;
}
.lo-champ-row--p2 .lo-champ-posnum {
  color: #c0c0c0;
}
.lo-champ-row--p3 .lo-champ-posnum {
  color: #cd7f32;
}

/* Driver cell */
.lo-champ-driver .lg-team-accent {
  margin-right: 8px;
  vertical-align: middle;
}
.lo-champ-nat {
  margin-right: 7px;
  vertical-align: middle;
}
.lo-champ-nat .fi {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lo-champ-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

/* Manufacturer cell */
.lo-champ-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
}
.lo-champ-logo--ph {
  display: inline-block;
}
.lo-champ-team {
  color: #c4bdb3;
}

/* Round columns + header track flags */
.lo-champ-rnd {
  min-width: 76px;
}
.lo-champ-rnd-num {
  display: block;
  font-weight: 800;
  font-size: 0.72rem;
  color: #d8d2c8;
}
.lo-champ-rnd-flag {
  display: block;
  margin: 4px auto 0;
}
/* Track name under the flag — truncates; full name on hover (th title) */
.lo-champ-rnd-name {
  display: block;
  max-width: 88px;
  margin: 4px auto 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #9a938a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lo-champ-rnd-flag.fi {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lo-champ-rnd-noflag {
  width: 22px;
  height: 15px;
}
.lo-champ-cell {
  color: #c4bdb3;
  min-width: 46px;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.lo-champ-empty {
  color: #5a544c;
}
.lo-champ-out {
  color: var(--c-red);
  font-weight: 700;
  font-size: 0.72rem;
}
/* Bracketed race status behind a round's points ("8 (DNF)"): the points keep
   the regular cell font but turn red — scored despite the retirement — and
   the tag is a quieter desaturated brick so the number stays the loud part. */
.lo-champ-out-pts {
  color: var(--c-red);
  font-weight: 700;
}
.lo-champ-out-tag {
  color: #b3574a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lo-champ-cell[title] {
  cursor: help;
}

/* Gold round-winner chip — the wow accent */
.lo-champ-chip {
  display: inline-block;
  min-width: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 800;
  color: #1a1408;
  background: linear-gradient(180deg, #ffe27a, #f4b829);
  box-shadow:
    0 0 6px rgba(244, 184, 41, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Fastest-lap dot */
/* Championship-grid round cells stay centred so the bolt / points / medal
   group reads as one unit (markers use the shared .tt-ico classes). */
.lo-champ-cell {
  text-align: center;
}

/* Interval / To-Leader columns — frozen directly right of Pts so they stay
   visible without scrolling through every round. */
.lo-champ-gap {
  left: 444px;
  width: 58px;
  min-width: 58px;
  color: #9a938a;
  font-variant-numeric: tabular-nums;
}
.lo-champ-gap--leader {
  left: 502px;
  color: #c4bdb3;
  font-weight: 600;
  /* Divider between the frozen block and the scrolling round columns. */
  box-shadow: 8px 0 12px -6px rgba(0, 0, 0, 0.6);
}
.lo-champ-card--poster .lo-champ-gap--leader {
  box-shadow: none;
}
/* Planned (not-yet-run) round columns — dimmed so they read as upcoming. */
.lo-champ-rnd--future {
  opacity: 0.5;
}

/* Podium row tints — flat so frozen + scrolling cells match exactly */
.lo-champ-row--p1 td {
  background: #2b2613;
}
.lo-champ-row--p2 td {
  background: #262626;
}
.lo-champ-row--p3 td {
  background: #2a201a;
}
/* Hover beats the podium tint */
.lo-champ-table tbody tr:hover td {
  background: #302d2a;
}

/* ── Race Calendar poster ────────────────────────────────────────────────── */
.lo-rc-card {
  overflow: hidden;
}
.lo-rc-poster {
  --rc-accent: var(--league-accent, #e10600);
  position: relative;
  overflow: hidden;
  padding: 26px 26px 30px;
  background: radial-gradient(
    1100px circle at 100% 0%,
    color-mix(in srgb, var(--rc-accent) 14%, transparent),
    transparent 55%
  );
}
.lo-rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 24px;
}
.lo-rc-head-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Right meta block: logo box + SEASON N */
.lo-rc-bg-logo {
  position: absolute;
  top: 16px;
  right: 20px;
  width: clamp(80px, 11vw, 130px);
  height: auto;
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.15));
  z-index: 0;
}
.lo-rc-head,
.lo-rc-grid {
  position: relative;
  z-index: 1;
}
.lo-rc-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.lo-rc-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #d9d4cc;
  text-transform: uppercase;
}
.lo-rc-sub-sep {
  color: var(--txt-dim, #8a8178);
  font-weight: 700;
}
.lo-rc-startbadge {
  background: var(--rc-accent);
  color: #fff;
  padding: 4px 11px;
  border-radius: 5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--rc-accent) 45%, transparent);
}
.lo-rc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .lo-rc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lo-rc-chip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.lo-rc-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border-radius: 6px;
  background: var(--rc-accent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--rc-accent) 38%, transparent);
}
.lo-rc-chip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 0;
}
.lo-rc-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lo-rc-chip-date {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--rc-accent) 55%, #c9c2b8);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rc-flag {
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  border-radius: 2px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}
.lo-rc-chip-name {
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.05;
  color: #f3efe8;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rc-chip--done {
  opacity: 0.42;
}
.lo-rc-chip--done .lo-rc-num {
  background: var(--bg-panel);
  color: var(--txt-dim, #8a8178);
  box-shadow: none;
}
/* Completed round that has a recorded winner — keep it readable */
.lo-rc-chip--won {
  opacity: 0.78;
}
.lo-rc-winner {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f5c451;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-rc-trophy {
  font-size: 0.78rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* ── Empty state: tarmac hero ────────────────────────────────────────────── */
.lo-empty-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  background:
    linear-gradient(
      180deg,
      rgba(17, 16, 16, 0.74) 0%,
      rgba(17, 16, 16, 0.86) 100%
    ),
    url("../Assets/Graphics/Tt_Start_1.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
}
.lo-empty-hero-inner {
  padding: 24px;
}
.lo-empty-hero-icon {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
  margin-bottom: 12px;
}
.lo-empty-hero-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.lo-empty-hero-sub {
  margin-top: 6px;
  font-size: 0.84rem;
  color: #c7c1ba;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.lo-next-race-body {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px;
  flex-wrap: wrap;
}
.lo-next-race-info {
  flex: 1;
  min-width: 0;
}
.lo-track-map {
  width: 195px;
  height: 195px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(225, 6, 0, 0.45));
  animation: lo-track-float 4s ease-in-out infinite;
}

/* ══ Starting grid — animated F1 staggered grid ════════════════════════════ */
.lo-grid {
  margin: 4px 14px 16px;
  padding: 14px 14px 18px;
  border: 1px solid var(--bdr);
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 26px
    ),
    radial-gradient(120% 80% at 50% -10%, #2b2522 0%, #181513 55%, #141110 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.lo-grid-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.lo-grid-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f0ebe4;
}
.lo-grid-source {
  font-size: 0.72rem;
  color: #8c857d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Two staggered columns */
.lo-grid-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}
.lo-grid-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Right column (even positions) sits back ~half a slot, like a real grid */
.lo-grid-col--right {
  margin-top: 38px;
}

/* Individual grid slot */
.lo-grid-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px 8px 10px;
  border-radius: 9px;
  background: linear-gradient(
    100deg,
    rgba(34, 29, 26, 0.96),
    rgba(24, 20, 18, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--team, #888);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(26px);
  animation: lo-grid-rollin 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes lo-grid-rollin {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Painted grid-box number */
.lo-grid-num {
  flex-shrink: 0;
  min-width: 26px;
  font-size: 1.25rem;
  font-weight: 800;
  font-style: italic;
  text-align: center;
  color: var(--team, #c7c1ba);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  line-height: 1;
}

/* Driver photo */
.lo-grid-photo-wrap {
  flex-shrink: 0;
  line-height: 0;
}
.lo-grid-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--team, #888);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
  background: #0e0c0b;
}
.lo-grid-photo--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--team, #c7c1ba);
}

/* Name + team */
.lo-grid-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.lo-grid-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f0ebe4;
  white-space: nowrap;
  overflow: hidden;
}
.lo-grid-name-txt {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-grid-name .fi,
.lo-grid-name img {
  flex-shrink: 0;
}
.lo-grid-team {
  font-size: 0.7rem;
  color: #968e85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo-grid-time {
  flex-shrink: 0;
  font-family: "SFMono-Regular", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ddd5ca;
  letter-spacing: -0.01em;
}

/* Pole highlight */
.lo-grid-slot--pole {
  border-color: rgba(245, 199, 66, 0.45);
  border-left-color: var(--team, #888);
  background: linear-gradient(
    100deg,
    rgba(58, 46, 22, 0.96),
    rgba(32, 26, 17, 0.96)
  );
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(245, 199, 66, 0.25);
  animation:
    lo-grid-rollin 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    lo-pole-pulse 2.6s ease-in-out 1.2s infinite;
}
.lo-grid-slot--pole .lo-grid-num {
  color: #f5c742;
}
.lo-grid-pole-badge {
  margin-left: 2px;
  padding: 1px 6px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1a1510;
  background: linear-gradient(180deg, #ffd766, #f5b942);
  border-radius: 4px;
  flex-shrink: 0;
}
@keyframes lo-pole-pulse {
  0%,
  100% {
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(245, 199, 66, 0.25);
  }
  50% {
    box-shadow:
      0 3px 18px rgba(0, 0, 0, 0.45),
      0 0 14px 1px rgba(245, 199, 66, 0.4);
  }
}

/* Narrow cards: collapse to a single staggered column */
@media (max-width: 560px) {
  .lo-grid-cols {
    grid-template-columns: 1fr;
  }
  .lo-grid-col--right {
    margin-top: 0;
  }
  .lo-grid-col--right .lo-grid-slot {
    margin-left: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lo-grid-slot,
  .lo-grid-slot--pole {
    animation: none !important;
  }
  .lo-grid-slot {
    opacity: 1;
    transform: none;
  }
}

/* ── Full-height weather chips + expand toggle (right side of the card) ───── */
.lo-wx-toggle {
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 150px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.lo-wx-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--txt-dim);
  padding: 6px 2px 8px;
  align-self: flex-start;
}
.lo-wx-chips {
  display: flex;
  gap: 8px;
  width: 100%;
}
.lo-wx-chip {
  flex: 1 1 0;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 10px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sky) 32%, var(--bdr));
  background:
    radial-gradient(
      120% 80% at 50% -10%,
      color-mix(in srgb, var(--sky) 34%, transparent),
      transparent 70%
    ),
    linear-gradient(
      170deg,
      color-mix(in srgb, var(--sky) 20%, var(--bg-card)) 0%,
      var(--bg-table) 82%
    );
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.lo-wx-toggle:hover .lo-wx-chip {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    0 0 18px color-mix(in srgb, var(--sky) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lo-wx-chip-when {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: color-mix(in srgb, var(--sky) 55%, transparent);
  border-radius: 20px;
  padding: 2px 9px;
}
.lo-wx-chip-sym {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 9px color-mix(in srgb, var(--sky) 55%, transparent));
}
.lo-wx-chip-cond {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ede9e3;
  text-align: center;
  line-height: 1.15;
}
.lo-wx-chip-temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: "Courier New", monospace;
  line-height: 1.25;
}
.lo-wx-chip-track {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ff9d4d;
  text-shadow: 0 0 10px rgba(255, 157, 77, 0.35);
}
.lo-wx-chip-air {
  font-size: 0.7rem;
  color: #7fd1ff;
}
.lo-wx-chip-rainbar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lo-wx-chip-rainfill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4a9eff, #7fd1ff);
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.6);
}
.lo-wx-chip-rainval {
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  font-weight: 700;
  color: #7fbcff;
}
/* Expand affordance — floating pill, top-right of the chip group */
.lo-wx-toggle-arrow {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(160deg, #4a9eff, #1f6fd6);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}
.lo-wx-toggle:hover .lo-wx-toggle-arrow {
  box-shadow: 0 0 14px rgba(74, 158, 255, 0.8);
}
.lo-wx-toggle--open .lo-wx-toggle-arrow {
  transform: rotate(180deg);
}

/* ── Broadcast-style weather meteogram (expanded detail) ─────────────────── */
.lo-wx-panel--collapsed {
  display: none;
}
.lo-wx-panel--open {
  animation: lo-wx-expand 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lo-wx-expand {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lo-wx-panel {
  margin: 0 18px 16px;
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(
      900px circle at 0% 0%,
      rgba(74, 158, 255, 0.08),
      transparent 55%
    ),
    linear-gradient(160deg, var(--bg-card), var(--bg-table));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.lo-wx-panel--wet {
  background:
    radial-gradient(
      900px circle at 0% 0%,
      rgba(74, 158, 255, 0.16),
      transparent 58%
    ),
    linear-gradient(160deg, #15202c, var(--bg-table));
}
/* Header — one slim row */
.lo-wx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 14px;
  border-bottom: 1px solid var(--bdr);
  background: linear-gradient(90deg, rgba(74, 158, 255, 0.08), transparent 70%);
}
.lo-wx-headline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lo-wx-bigsym {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}
.lo-wx-title {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.lo-wx-cond {
  font-size: 0.86rem;
  font-weight: 700;
  color: #e8e3db;
  margin-top: 1px;
}
.lo-wx-readouts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lo-wx-ro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.lo-wx-ro-val {
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 700;
}
.lo-wx-ro-track {
  color: #ff9d4d;
}
.lo-wx-ro-air {
  color: #5bc8ff;
}
.lo-wx-ro-rain {
  color: #4a9eff;
}
.lo-wx-ro-lbl {
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--txt-muted, #7a7168);
  margin-top: 1px;
}
.lo-wx-alert {
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(90deg, #1f6fd6, #4a9eff);
  border-radius: 20px;
  padding: 4px 11px;
  box-shadow: 0 0 14px rgba(74, 158, 255, 0.5);
  animation: lo-wx-pulse 2s ease-in-out infinite;
}
.lo-wx-dry {
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffce54;
  background: rgba(255, 206, 84, 0.12);
  border: 1px solid rgba(255, 206, 84, 0.35);
  border-radius: 20px;
  padding: 3px 11px;
}
@keyframes lo-wx-pulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.85);
  }
}
/* Chart — fixed pixel size (labels never scale down to unreadable, panel
   never balloons in height on wide screens); scrolls sideways when narrow. */
.lo-wx-chartwrap {
  position: relative;
  padding: 8px 12px 0;
  overflow-x: auto;
}
.lo-wx-svg {
  display: block;
  margin: 0 auto;
}
/* ── Stacked-band meteogram: sky / temperature / rain on one time axis ── */
.lo-wx-bandlbl {
  font: 700 8px "Courier New", monospace;
  letter-spacing: 0.16em;
  fill: #6d675e;
}
.lo-wx-grid {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}
.lo-wx-bandline {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}
.lo-wx-yl {
  font: 9px "Courier New", monospace;
  fill: #7d766c;
  text-anchor: end;
}
.lo-wx-ico {
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
}
.lo-wx-templine--track {
  stroke: #f5a623;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.lo-wx-templine--air {
  stroke: #00d4aa;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.lo-wx-dot--track { fill: #f5a623; stroke: var(--bg-card, #161412); stroke-width: 2; }
.lo-wx-dot--air { fill: #00d4aa; stroke: var(--bg-card, #161412); stroke-width: 2; }
.lo-wx-tlbl {
  font: 700 9px "Courier New", monospace;
  text-anchor: middle;
}
.lo-wx-tlbl--track { fill: #f5a623; }
.lo-wx-tlbl--air { fill: #00d4aa; }
.lo-wx-rainbar { fill: #4a9eff; opacity: 0.85; }
.lo-wx-rlbl {
  font: 700 9px "Courier New", monospace;
  fill: #4a9eff;
  text-anchor: middle;
}
.lo-wx-rlbl--dim {
  fill: #5f6f85;
  font-weight: 400;
}
.lo-wx-rainflag-line {
  stroke: #4a9eff;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.lo-wx-rainflag-bg {
  fill: rgba(74, 158, 255, 0.22);
  stroke: rgba(74, 158, 255, 0.6);
  stroke-width: 1;
}
.lo-wx-rainflag-txt {
  font: 700 9px "Courier New", monospace;
  fill: #cfe4ff;
  letter-spacing: 0.1em;
}
.lo-wx-axis {
  fill: var(--txt-muted, #7a7168);
  font: 700 9px "Courier New", monospace;
  text-anchor: middle;
}
/* Hover crosshair + unified readout */
.lo-wx-cross {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  visibility: hidden;
}
.lo-wx-hit {
  fill: transparent;
  cursor: crosshair;
}
.lo-wx-tip {
  position: absolute;
  pointer-events: none;
  background: #1f1d1a;
  border: 1px solid #3c3835;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--txt);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  min-width: 128px;
  z-index: 2;
}
.lo-wx-tip b {
  color: var(--txt-bright);
  font-family: "Courier New", monospace;
}
.lo-wx-tip-when {
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: var(--txt-bright);
  border-bottom: 1px solid #2e2b27;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.lo-wx-tip i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .lo-wx-panel .lo-wx-rainbar {
    transform-origin: bottom;
    animation: lo-wx-grow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes lo-wx-grow {
    from { transform: scaleY(0); }
  }
}
/* Legend */
.lo-wx-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 16px 7px;
  font-size: 0.64rem;
  color: var(--txt-muted, #7a7168);
}
.lo-wx-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lo-wx-key {
  width: 13px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.lo-wx-key--track {
  background: #f5a623;
}
.lo-wx-key--air {
  background: #00d4aa;
}
.lo-wx-key--rain {
  background: #4a9eff;
  width: 8px;
  height: 8px;
}
.lo-wx-legend-axis {
  margin-left: auto;
  font-family: "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.58rem;
}
/* Table fallback */
.lo-wx-tablewrap {
  padding: 0 16px 9px;
}
.lo-wx-tablewrap summary {
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--txt-muted, #7a7168);
}
.lo-wx-tablewrap summary:hover {
  color: var(--txt-bright);
}
.lo-wx-tablescroll {
  overflow-x: auto;
}
.lo-wx-table {
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.72rem;
}
.lo-wx-table th,
.lo-wx-table td {
  border: 1px solid var(--bdr);
  padding: 3px 9px;
  font-family: "Courier New", monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lo-wx-table th {
  color: var(--txt-dim, #8d857a);
  font-weight: 400;
}
@keyframes lo-track-float {
  0%,
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 8px rgba(225, 6, 0, 0.35));
  }
  50% {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 16px rgba(225, 6, 0, 0.6));
  }
}
#lo-countdown {
  display: inline-block;
  margin-top: 12px !important;
  padding: 7px 14px;
  border: 1px solid var(--bdr-light);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--c-teal) !important;
  font-size: 1rem !important;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(0, 212, 170, 0.55);
  box-shadow: inset 0 0 14px rgba(0, 212, 170, 0.08);
}

/* ── Round session sub-cards ─────────────────────────────────────────────── */
.lo-round-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 10px 18px;
  border-top: 1px solid var(--bdr);
}
.lo-round-sessions-head {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.lo-round-sessions-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bdr), transparent);
}
.lo-round-sessions-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-amber);
}
.lo-session-card {
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-table));
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow: hidden;
  min-width: 168px;
  flex: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    flex-basis 0.2s ease,
    border-color 0.15s ease;
  container-type: inline-size;
  cursor: pointer;
}
.lo-session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.lo-session-card--expanded {
  flex: 0 0 100%;
  overflow: visible;
  border-color: rgba(245, 166, 35, 0.4);
  box-shadow:
    0 4px 28px rgba(245, 166, 35, 0.1),
    0 8px 28px rgba(0, 0, 0, 0.5);
  transform: none !important;
}
.lo-session-card--expanded table td,
.lo-session-card--expanded table th {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.lo-session-card--expanded .lo-sc-team-name {
  font-size: 0.88rem;
}
.lo-session-card--expanded .lo-sc-team,
.lo-session-card--expanded .lo-sc-sector,
.lo-session-card--expanded .lo-sc-laps {
  display: table-cell !important;
}
.lo-session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-amber);
  padding: 6px 11px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.12), transparent);
  border-bottom: 1px solid var(--bdr);
  text-transform: uppercase;
}
.lo-session-card-header::after {
  content: "↔";
  font-size: 0.75rem;
  color: var(--txt-dim);
  opacity: 0.45;
  transition:
    opacity 0.15s,
    color 0.15s;
  flex-shrink: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.lo-session-card:hover .lo-session-card-header::after {
  opacity: 0.9;
}
.lo-session-card--expanded .lo-session-card-header::after {
  content: "✕";
  color: var(--c-amber);
  opacity: 1;
}
.lo-tyre-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.lo-tyre-img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
}
/* Tyre-only table cells: center the badge cleanly within the row */
.lb-tyre .lo-tyre-img,
.lo-sc-tyre .lo-tyre-img {
  display: block;
  margin: 0 auto;
}
/* Race-results leaderboard tyre — 10% larger than the base badge */
.race-inline-detail .lb-table .lb-tyre .lo-tyre-img {
  width: 22px;
  height: 22px;
}

/* ── Session card table: header cells & sector columns ───────────────────── */
.lo-sc-head {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #504c48;
  text-transform: uppercase;
  padding: 2px 4px 3px;
  border-bottom: 1px solid var(--bdr);
}
.lo-sc-head--lap {
  text-align: right;
}
.lo-sc-head--laps {
  text-align: center;
}
.lo-sc-head--left {
  text-align: left;
}
.lo-sc-head--center {
  text-align: center;
}
.lo-sc-pos {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
}
.lo-sc-laps {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: #7a7168;
  text-align: center;
  padding: 3px 4px;
  white-space: nowrap;
}
.lo-sc-sector {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  color: #7a7168;
  text-align: center;
  padding: 3px 4px;
  white-space: nowrap;
}
.lo-sc-sector.lo-sc-head {
  color: #504c48;
  text-align: center;
}
.lo-sc-sector.lo-sc-best {
  color: #b48cff;
  font-weight: 700;
}
.lo-sc-lap {
  color: #a09a93;
  width: 99%;
}
.lo-sc-best-lap {
  color: #b48cff;
  font-weight: 700;
}
.lo-sc-tyre {
  padding: 3px 3px;
  text-align: center;
}
.lo-sc-driver {
  white-space: nowrap;
}
.lo-sc-driver-name {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.lo-sc-team {
  padding: 3px 4px;
  white-space: nowrap;
}
.lo-sc-team-name {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 0.72rem;
  color: #968e85;
}

/* Responsive column visibility — always: Pos · Driver · Best Lap · Tyre
   Team appears at 320 px, S1/S2/S3 at 360 px, Laps at 480 px */
.lo-sc-team,
.lo-sc-sector,
.lo-sc-laps {
  display: none;
}
@container (min-width: 320px) {
  .lo-sc-team {
    display: table-cell;
  }
}
@container (min-width: 360px) {
  .lo-sc-sector {
    display: table-cell;
  }
}
@container (min-width: 480px) {
  .lo-sc-laps {
    display: table-cell;
  }
}

/* ── Session card expanded-only columns ──────────────────────────────────── */
.lo-sc-expand {
  display: none;
}
.lo-session-card--expanded .lo-sc-expand {
  display: table-cell !important;
}

.lo-sc-grid,
.lo-sc-pg,
.lo-sc-pits {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-dim);
  text-align: center;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-pg--up {
  color: #4dbb6e;
  font-weight: 700;
}
.lo-sc-pg--down {
  color: #e85c5c;
  font-weight: 700;
}

.lo-sc-racetime {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-mid);
  text-align: right;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-pts {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-amber);
  text-align: center;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-pen {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-dim);
  text-align: center;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-pen--active {
  color: #e85c5c;
  font-weight: 700;
}

.lo-sc-fl {
  text-align: center;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-fl-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--c-purple);
  letter-spacing: 0.04em;
}
.lo-sc-topspeed {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-mid);
  text-align: center;
  padding: 3px 5px;
  white-space: nowrap;
}
.lo-sc-topspeed.lo-sc-ts--best {
  color: var(--c-amber);
  font-weight: 700;
}
.lo-sc-ts-unit {
  font-size: 0.58rem;
  color: var(--txt-dim);
}

/* ── Leaderboard sector columns (non-race sessions) ─────────────────────── */
.lb-sector {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  color: #a39b90;
  font-variant-numeric: tabular-nums;
}
.lb-sector.lo-sc-best {
  color: #b48cff;
  font-weight: 700;
}
.lb-topspeed {
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--txt-mid);
  text-align: center;
  white-space: nowrap;
}
.lb-topspeed.lo-sc-ts--best {
  color: var(--c-amber);
  font-weight: 700;
}

/* ── Qualifying / practice tail — Best Lap · Tyre · S1 S2 S3 · Laps ───────────
   Width, alignment, and padding all come from the .race-inline-detail .lb-table
   block earlier in this file. Here we only add per-column minimums, fonts, and
   colors that are unique to the qualifying layout. */
.lb-table--quali .lb-best-lap {
  min-width: 96px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ddd5ca;
  font-variant-numeric: tabular-nums;
}
.lb-table--quali .lb-best-lap.lb-fastest {
  color: var(--c-purple);
  font-weight: 700;
}
.lb-table--quali .lb-tyre {
  min-width: 48px;
}
.lb-table--quali .lb-tyre .lo-tyre-img {
  vertical-align: middle;
}
.lb-table--quali .lb-sector {
  min-width: 60px;
}
.lb-table--quali .lb-topspeed {
  min-width: 64px;
}
.lb-table--quali .lb-laps {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: #7a7168;
  min-width: 42px;
}

/* Legacy Gap / Top Speed columns (only rendered in some layouts) */
.lb-table--quali .lb-gap {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: #a09a93;
  min-width: 80px;
  font-variant-numeric: tabular-nums;
}
.lb-gap-leader {
  color: var(--c-purple);
  font-weight: 700;
}

/* ── Standings: podium row tints (uses :has on the pos cell) ─────────────── */
#lo-detail-wrap .lb-table tbody tr:has(.pos-gold) {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent 70%);
}
#lo-detail-wrap .lb-table tbody tr:has(.pos-silver) {
  background: linear-gradient(
    90deg,
    rgba(192, 192, 192, 0.08),
    transparent 70%
  );
}
#lo-detail-wrap .lb-table tbody tr:has(.pos-bronze) {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent 70%);
}
#lo-detail-wrap .lb-table tbody tr {
  transition: background 0.12s;
}
#lo-detail-wrap .lb-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Empty state */
#lo-detail-wrap .tm-detail-empty {
  border-radius: 12px;
}

/* ── Responsive: stack bookmark card under filter on narrow screens ──────── */
@media (max-width: 720px) {
  .lo-selector-top-row {
    flex-direction: column;
  }
  .lo-bm-card {
    width: 100%;
  }
  .lo-track-map {
    width: 143px;
    height: 143px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DRIVERS TAB — VISUAL UPGRADE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Selector / filter bar ───────────────────────────────────────────────── */
.drv-selector-wrap {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-table));
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.drv-selector-filter-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.16);
}
.drv-chip {
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.drv-chip:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
}
.drv-chip--active {
  background: linear-gradient(
    90deg,
    rgba(0, 212, 170, 0.18),
    rgba(0, 212, 170, 0.04)
  ) !important;
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, 0.32),
    0 0 14px rgba(0, 212, 170, 0.16);
}
.drv-chip--active .drv-chip-abbr {
  text-shadow: 0 0 8px rgba(0, 212, 170, 0.6);
}

/* ── Detail card shell ───────────────────────────────────────────────────── */
.drv-detail-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-table) 100%);
  border-radius: 12px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

/* ── Profile banner: team-color hero ─────────────────────────────────────── */
.drv-profile-banner {
  background:
    radial-gradient(
      760px circle at 0% 0%,
      color-mix(in srgb, var(--team-color, #00d4aa) 24%, transparent),
      transparent 58%
    ),
    linear-gradient(120deg, var(--bg-panel), var(--bg-card)) !important;
}
.drv-banner-accent {
  width: 4px !important;
  box-shadow: 0 0 16px var(--team-color, #00d4aa);
  animation: drv-accent-glow 3s ease-in-out infinite;
}
@keyframes drv-accent-glow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.drv-avatar {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--team-color, #00d4aa) 55%, transparent),
    0 0 20px color-mix(in srgb, var(--team-color, #00d4aa) 35%, transparent);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.drv-avatar:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--team-color, #00d4aa),
    0 0 28px color-mix(in srgb, var(--team-color, #00d4aa) 55%, transparent);
}
.drv-banner-name {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Career stats strip */
.drv-career-stats {
  background: linear-gradient(
    160deg,
    var(--bg-card),
    var(--bg-table)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.35);
}
.drv-stat {
  transition: background 0.15s;
  position: relative;
}
.drv-stat:hover {
  background: rgba(255, 255, 255, 0.045);
}
.drv-stat-val {
  text-shadow: 0 0 14px color-mix(in srgb, currentColor 30%, transparent);
}

/* ── Card grid: ambient backdrop + separated glassy cards ────────────────── */
.drv-grid {
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(
      620px circle at 14% 0%,
      rgba(0, 212, 170, 0.055),
      transparent 55%
    ),
    radial-gradient(
      600px circle at 90% 28%,
      rgba(74, 158, 255, 0.05),
      transparent 50%
    ),
    radial-gradient(
      720px circle at 50% 100%,
      rgba(184, 127, 255, 0.045),
      transparent 60%
    );
}
.drv-card {
  border: 1px solid var(--bdr) !important;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--card-color, #888) 7%, var(--bg-card)) 0%,
    var(--bg-table) 72%
  );
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  animation: drv-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.drv-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--card-color, #888), transparent 82%);
  opacity: 0.85;
}
.drv-card:nth-child(1) {
  animation-delay: 0.04s;
}
.drv-card:nth-child(2) {
  animation-delay: 0.1s;
}
.drv-card:nth-child(3) {
  animation-delay: 0.16s;
}
.drv-card:nth-child(4) {
  animation-delay: 0.22s;
}
.drv-card:nth-child(5) {
  animation-delay: 0.28s;
}
.drv-card:nth-child(6) {
  animation-delay: 0.34s;
}
.drv-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(
    in srgb,
    var(--card-color, #888) 45%,
    var(--bdr)
  ) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.52),
    0 0 0 1px color-mix(in srgb, var(--card-color, #888) 25%, transparent),
    0 8px 30px color-mix(in srgb, var(--card-color, #888) 18%, transparent);
}
@keyframes drv-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Card header: accent-tinted wash + glowing indicator dot */
.drv-card-header {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--card-color, #888) 13%, transparent),
    transparent 72%
  ) !important;
}
.drv-card-indicator {
  box-shadow: 0 0 8px var(--card-color, #888);
}

@media (max-width: 720px) {
  .drv-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAPTIMES TAB — VISUAL UPGRADE + INSIGHTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ambient backdrop ────────────────────────────────────────────────────── */
.lt-wrap {
  position: relative;
  isolation: isolate;
}
.lt-wrap::before {
  content: "";
  position: absolute;
  inset: -30px -20px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      720px circle at 8% 0%,
      rgba(184, 127, 255, 0.1),
      transparent 55%
    ),
    radial-gradient(
      640px circle at 95% 8%,
      rgba(0, 212, 170, 0.07),
      transparent 50%
    ),
    radial-gradient(
      820px circle at 50% 100%,
      rgba(74, 158, 255, 0.05),
      transparent 60%
    );
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.lt-title {
  background: linear-gradient(92deg, #ffffff 30%, #d9c9ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 26px rgba(184, 127, 255, 0.18);
}
.lt-eyebrow {
  text-shadow: 0 0 12px rgba(184, 127, 255, 0.4);
}

/* ── Chips: lift + glow ──────────────────────────────────────────────────── */
.lt-chip {
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s,
    transform 0.13s ease,
    box-shadow 0.13s ease;
}
.lt-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.lt-chip--active {
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.3),
    0 0 14px rgba(167, 139, 250, 0.18);
}
.lt-track-select:focus {
  box-shadow: 0 0 0 3px rgba(184, 127, 255, 0.16);
}

/* ── Insights strip ──────────────────────────────────────────────────────── */
.lt-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.lt-insight {
  --tone: var(--c-purple);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 18px 22px;
  border-radius: 16px;
  border: 1px solid
    color-mix(in srgb, var(--tone) 18%, rgba(255, 255, 255, 0.04));
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--tone) 13%, #1d1b19) 0%,
    var(--bg-base) 88%
  );
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: lt-insight-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}
.lt-insight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone);
  box-shadow: 0 0 14px var(--tone);
}
.lt-insight:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone) 45%, var(--bdr));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 24px color-mix(in srgb, var(--tone) 22%, transparent);
}
.lt-insight--gold {
  --tone: #ffd700;
}
.lt-insight--purple {
  --tone: var(--c-purple);
}
.lt-insight--blue {
  --tone: var(--c-blue);
}
.lt-insight--teal {
  --tone: var(--c-teal);
}
.lt-insight--sectors {
  --tone: var(--c-amber);
}
.lt-insight:nth-child(1) {
  animation-delay: 0.04s;
}
.lt-insight:nth-child(2) {
  animation-delay: 0.1s;
}
.lt-insight:nth-child(3) {
  animation-delay: 0.16s;
}
.lt-insight:nth-child(4) {
  animation-delay: 0.22s;
}
.lt-insight:nth-child(5) {
  animation-delay: 0.28s;
}
@keyframes lt-insight-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lt-insight-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(
    0 0 10px color-mix(in srgb, var(--tone) 60%, transparent)
  );
}
.lt-insight-body {
  min-width: 0;
}
.lt-insight-label {
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--txt-muted);
  margin-bottom: 3px;
}
.lt-insight-value {
  font-family: "Courier New", monospace;
  font-size: 1.28rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 16px color-mix(in srgb, var(--tone) 35%, transparent);
}
.lt-insight-value small {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--txt-muted);
  margin-left: 3px;
  text-shadow: none;
}
.lt-insight-sub {
  font-size: 0.66rem;
  margin-top: 4px;
  color: color-mix(in srgb, var(--tone) 70%, var(--txt-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Best Sectors card ───────────────────────────────────────────────────── */
.lt-insight--sectors {
  --tone: var(--c-amber);
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.lt-sectors-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lt-sectors-header .lt-insight-label {
  margin-bottom: 0;
}

.lt-sectors-combined {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-amber);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.lt-insight-sectors {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.lt-sector-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  gap: 6px;
  text-align: center;
}

.lt-sector-label {
  font-family: "Courier New", monospace;
  font-size: 1.56rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  color: var(--c-amber);
  text-transform: uppercase;
}

.lt-sector-time {
  font-family: "Courier New", monospace;
  font-size: 1.65rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 20px rgba(245, 166, 35, 0.22);
}

.lt-sector-driver {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt-muted);
}

.lt-sector-div {
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
  align-self: stretch;
  margin: 18px 0;
}

/* ── Table polish ────────────────────────────────────────────────────────── */
.lt-table-wrap {
  animation: lt-insight-in 0.4s ease backwards;
}
.lt-table-caption {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-teal) 13%, var(--bg-panel)),
    var(--bg-panel) 70%
  ) !important;
}
.lt-table thead tr {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-purple) 15%, var(--bg-panel)),
    var(--bg-panel) 65%
  ) !important;
}

/* Podium row tints (override zebra striping; appended later = wins) */
.lt-row {
  transition: background 0.12s;
}
.lt-row:has(.lt-pos--gold) {
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.11),
    transparent 72%
  ) !important;
}
.lt-row:has(.lt-pos--silver) {
  background: linear-gradient(
    90deg,
    rgba(192, 192, 192, 0.08),
    transparent 72%
  ) !important;
}
.lt-row:has(.lt-pos--bronze) {
  background: linear-gradient(
    90deg,
    rgba(205, 127, 50, 0.08),
    transparent 72%
  ) !important;
}
.lt-row:has(.lt-pos--gold) .lt-time-cell {
  color: #ffd700;
  text-shadow: 0 0 11px rgba(255, 215, 0, 0.4);
}
.lt-row[data-has-setup="1"]:hover {
  background: color-mix(in srgb, var(--c-purple) 8%, transparent) !important;
}

/* ── Empty / loading states ──────────────────────────────────────────────── */
.lt-empty-icon {
  filter: drop-shadow(0 0 16px rgba(184, 127, 255, 0.35));
}

/* ── Standings: spotlight + stats glow ───────────────────────────────────── */
.lt-st-stats {
  background: linear-gradient(
    160deg,
    var(--bg-card),
    var(--bg-table)
  ) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.lt-st-stat-num--gold {
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}
.lt-st-tier-fill {
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-purple) 60%, transparent);
}
.lt-st-spot {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.lt-st-spot:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.lt-st-row {
  transition:
    transform 0.14s ease,
    background 0.14s ease;
}
.lt-st-row:hover {
  transform: translateX(3px);
}
.lt-st-record {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* ── My Laps: section headers ────────────────────────────────────────────── */
.lt-ml-track-row td {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-teal) 13%, var(--bg-panel)),
    var(--bg-panel) 68%
  ) !important;
}

@media (max-width: 640px) {
  .lt-insight--sectors {
    grid-column: 1 / -1;
  }
  .lt-insight-sectors {
    grid-template-columns: 1fr;
  }
  .lt-sector-div {
    width: 100%;
    height: 1px;
    margin: 0 18px;
    align-self: auto;
  }
}

/* ── Drivers card: all-time hall of fame (Overview dashboard) ─────────────── */
.ov-card--hof {
  margin-top: 16px;
}
.ov-hof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 12px;
}
.ov-hof-tile {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 11px 8px;
}
.ov-hof-tile-h {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ov-hof-tile-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--txt-bright, #e8e3db);
}
.ov-hof-note {
  margin-left: auto;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--txt-faint, #6b6560);
  white-space: nowrap;
  cursor: help;
}
.ov-hof-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ov-hof-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.ov-hof-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ov-hof-pos {
  flex: 0 0 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #14120f;
  background: #4a453e;
}
/* Gold / silver / bronze, matching the podium treatment used elsewhere. */
.ov-hof-row--p1 .ov-hof-pos { background: #f6c945; }
.ov-hof-row--p2 .ov-hof-pos { background: #cbd1d8; }
.ov-hof-row--p3 .ov-hof-pos { background: #cd8544; }
.ov-hof-av {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.07);
}
.ov-hof-av--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--txt-faint, #6b6560);
}
.ov-hof-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--txt-bright, #e8e3db);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-hof-row--p1 .ov-hof-name {
  font-weight: 700;
}
.ov-hof-val {
  flex: 0 0 auto;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--txt-bright, #e8e3db);
}
.ov-hof-unit {
  margin-left: 3px;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-faint, #6b6560);
}
.ov-hof-empty {
  padding: 10px 4px;
  font-size: 0.72rem;
  color: var(--txt-faint, #6b6560);
}

/* ══════════════════════════════════════════════════════════════════════════
   Driver Performance board  (RaceAnalysis/race_analysis.js)
   A port of the desktop app's ratings matrix. The app's semantic colours are
   kept exactly — the red→amber→green score ramp, gold/silver/bronze podium
   tints, purple for the fastest lap of the race, green/red for places gained
   and lost — while the chrome follows this site's carbon + league accent.
   ══════════════════════════════════════════════════════════════════════════ */
.ra-wrap {
  margin-top: 10px;
  background: #131211;
  border: 1px solid #2a2622;
  border-radius: 10px;
  padding: 16px 18px 14px;
  white-space: normal;
  /* Match the final-classification table's typeface. */
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
}
.ra-loading,
.ra-empty {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.74rem;
  color: #6b6560;
  padding: 18px 2px;
}
/* Shown when the quick-select filter leaves the board with no rows. */
.ra-empty--sel {
  text-align: center;
  padding: 26px 2px;
}
.ra-empty--sel b {
  color: #cfc9c1;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.ra-head {
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  padding-bottom: 7px;
  margin-bottom: 12px;
}
.ra-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f3efe9;
  text-shadow: 0 0 14px color-mix(in srgb, var(--league-accent, #e05c2a) 55%, transparent);
}
.ra-subject {
  margin-top: 2px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: #6b6560;
}

/* ── Driver of the race ──────────────────────────────────────────────────── */
.ra-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(100deg, #1f1512, #121117);
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  border-radius: 8px;
  padding: 8px 15px;
  margin-bottom: 10px;
}
.ra-hero-bar {
  width: 7px;
  height: 36px;
  border-radius: 2px;
  flex: none;
}
.ra-hero-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ra-hero-eyebrow {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffd700;
}
.ra-hero-name {
  font-size: 1.26rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-hero-label {
  margin-left: auto;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9a9aaa;
}

/* ── Category leaders ────────────────────────────────────────────────────── */
.ra-leaders {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.ra-leader {
  background: #191715;
  border: 1px solid #2a2622;
  border-bottom: 3px solid;
  border-radius: 6px;
  padding: 7px 9px 6px;
  min-width: 0;
}
.ra-leader-cat {
  display: block;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6b6560;
}
.ra-leader-drv {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #f3efe9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ra-leader-drv i {
  width: 4px;
  height: 15px;
  border-radius: 2px;
  flex: none;
}
.ra-leader-score {
  display: block;
  margin-top: 1px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

/* ── Matrix ──────────────────────────────────────────────────────────────── */
/* The board is deliberately wide: 15 columns of numbers that only mean
   anything side by side. It scrolls horizontally rather than wrapping. */
.ra-matrix-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.ra-matrix {
  min-width: 1230px;
}
.ra-row {
  display: grid;
  grid-template-columns:
    42px minmax(150px, 1fr) 44px 56px 48px 88px 88px 62px
    repeat(6, 92px) 100px;
  align-items: center;
  column-gap: 0;
  height: 30px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.76rem;
  color: #e8e3db;
}
.ra-row--even {
  background: #17161a;
}
.ra-row--unrated .ra-name {
  color: #6b6560;
}
.ra-row--head {
  height: 24px;
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  margin-bottom: 2px;
  background: none;
}
.ra-row > div {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ra-th {
  position: relative;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #6b6560;
  cursor: pointer;
  user-select: none;
}
.ra-th:hover,
.ra-th:focus-visible {
  color: #c9c3bb;
  outline: none;
}
.ra-th.is-sorted {
  color: #fff;
}
.ra-th.ra-c-driver,
.ra-row > .ra-c-driver {
  text-align: left;
}
.ra-th.ra-c-driver {
  padding-left: 18px;
}

.ra-c-pos,
.ra-c-perf {
  font-weight: 700;
}
.ra-c-driver {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 8px;
  min-width: 0;
}
.ra-team {
  width: 5px;
  height: 18px;
  border-radius: 2px;
  flex: none;
}
.ra-name {
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-dim {
  color: #6b6560;
}
.ra-up {
  color: #3acb5a;
  font-weight: 700;
}
.ra-down {
  color: #e03a3a;
  font-weight: 700;
}
.ra-c-best.is-fastest {
  color: #b87fff;
  font-weight: 700;
}
.ra-note {
  color: #e8a33d;
  font-weight: 700;
}

/* Score chips — the colour is set inline from the rating itself. */
.ra-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 19px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
}
.ra-chip--na {
  background: #2a2a33;
  color: #6b6560;
  box-shadow: none;
}
.ra-chip--overall {
  width: 86px;
  height: 21px;
  font-size: 0.8rem;
}
.ra-chip--hero {
  width: 76px;
  height: 34px;
  font-size: 1.05rem;
}

/* ── Header tooltips ─────────────────────────────────────────────────────── */
.ra-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 300px;
  text-align: left;
  white-space: normal;
  background: #17161a;
  border: 1px solid #2a2622;
  border-radius: 6px;
  padding: 10px 13px 9px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.ra-th.has-tip:hover .ra-tip,
.ra-th.has-tip:focus-visible .ra-tip {
  display: block;
}
/* Near the right-hand edge the card would overflow the scroller. */
.ra-th:nth-last-child(-n + 3) .ra-tip {
  left: auto;
  right: 0;
  transform: none;
}
.ra-tip-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--league-accent, #e05c2a);
}
.ra-tip-lead {
  display: block;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #c9c3bb;
}
.ra-tip-pt {
  display: block;
  position: relative;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #8a847c;
  margin-top: 5px;
  padding-left: 11px;
}
.ra-tip-pt::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--league-accent, #e05c2a);
}
.ra-tip-foot {
  display: block;
  margin-top: 8px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #57524c;
}

.ra-foot {
  margin-top: 9px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.62rem;
  line-height: 1.5;
  color: #6b6560;
}
.ra-note-sep {
  margin: 0 4px;
}

/* Phones: the leader strip stacks rather than squeezing six cards into 320px. */
@media (max-width: 720px) {
  .ra-wrap {
    padding: 13px 11px 11px;
  }
  .ra-leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ra-tip {
    width: 240px;
  }
}

/* ── Board rows are interactive: hover shows insights, click opens Stats ──── */
.ra-row:not(.ra-row--head) {
  cursor: pointer;
}
.ra-row:not(.ra-row--head):hover,
.ra-row:not(.ra-row--head):focus-visible {
  background: #24211f;
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Race Insights — the floating card for a board row
   ══════════════════════════════════════════════════════════════════════════ */
.ra-ins-card {
  position: fixed;
  z-index: 2200;
  width: 428px;
  max-width: calc(100vw - 24px);
  background: #17161a;
  border: 1px solid #2a2622;
  border-radius: 7px;
  padding: 11px 15px 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.66);
  pointer-events: none; /* never steals the hover from the row underneath */
}
.ra-ins-head {
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  padding-bottom: 6px;
  margin-bottom: 7px;
}
.ra-ins-name {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}
.ra-ins-eyebrow {
  display: block;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #6b6560;
  margin-top: 1px;
}
.ra-ins-row {
  display: grid;
  grid-template-columns: 126px 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid #221f1d;
}
.ra-ins-row:first-of-type {
  border-top: 0;
}
.ra-ins-label {
  font-size: 0.72rem;
  color: #c9c3bb;
}
.ra-ins-rank {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: right;
}
.ra-ins-detail {
  font-size: 0.66rem;
  line-height: 1.35;
  color: #8a847c;
}
.ra-ins-none {
  font-size: 0.72rem;
  color: #6b6560;
}
.ra-good { color: #3acb5a; }
.ra-mid  { color: #e8c44a; }
.ra-bad  { color: #e05a4a; }

/* ══════════════════════════════════════════════════════════════════════════
   Driver Stats window
   ══════════════════════════════════════════════════════════════════════════ */
.ra-sw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2300;
  background: rgba(6, 5, 5, 0.82);
  backdrop-filter: blur(3px);
  padding: 28px 18px;
}
.ra-sw-modal.is-open {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ra-sw-box {
  width: min(1160px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: #131211;
  border: 1px solid #2a2622;
  border-radius: 12px;
  padding: 0 20px 22px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
}

/* Identity band */
.ra-sw-band {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 -20px 14px;
  padding: 13px 20px;
  background: linear-gradient(100deg, #1f1512, #121117);
  border-bottom: 2px solid var(--league-accent, #e05c2a);
  border-radius: 12px 12px 0 0;
}
.ra-sw-pos {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.ra-sw-bar {
  width: 7px;
  height: 38px;
  border-radius: 2px;
  flex: none;
}
.ra-sw-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ra-sw-id b {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-sw-id i {
  font-style: normal;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.68rem;
  color: #8a847c;
  margin-top: 2px;
}
.ra-sw-nav {
  margin-left: auto;
  display: flex;
  gap: 7px;
  flex: none;
}
.ra-sw-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1c1a17;
  border: 1px solid #3a352f;
  color: #e8e3db;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ra-sw-nav button:hover:not(:disabled) {
  background: #2c2824;
  border-color: var(--league-accent, #e05c2a);
}
.ra-sw-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Rating strip */
.ra-sw-ratings {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}
.ra-sw-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ra-sw-rating i {
  font-style: normal;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #6b6560;
  text-align: center;
}
.ra-sw-rating--hero i {
  color: #ffd700;
}
.ra-sw-unrated {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.7rem;
  color: #6b6560;
  margin-bottom: 14px;
}

/* Sections */
.ra-sw-box h5 {
  margin: 0 0 6px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #6b6560;
}
.ra-sw-sec {
  margin-top: 18px;
}
.ra-sw-cols {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 14px;
}

/* Benchmarks */
.ra-sw-bench {
  background: #191715;
  border: 1px solid #2a2622;
  border-radius: 7px;
  overflow: hidden;
}
.ra-sw-bench-row {
  display: grid;
  grid-template-columns: 108px repeat(4, minmax(0, 1fr));
  align-items: center;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  height: 30px;
  text-align: center;
}
.ra-sw-bench-row:nth-of-type(even) {
  background: #1d1a18;
}
.ra-sw-bench-head {
  height: 44px;
  background: #201d1a;
  border-bottom: 2px solid var(--league-accent, #e05c2a);
}
.ra-sw-bench-head b {
  display: block;
  font-size: 0.7rem;
  color: #fff;
}
.ra-sw-bench-head i {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: #b87fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
}
.ra-sw-bench-cap {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: left;
  padding-left: 11px;
}
.ra-sw-purple { color: #b87fff; }
.ra-sw-green  { color: #3acb5a; }

/* KPI cards */
.ra-sw-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ra-sw-kpi {
  background: #191715;
  border: 1px solid #2a2622;
  border-bottom: 3px solid;
  border-radius: 6px;
  padding: 7px 5px 6px;
  text-align: center;
  cursor: help;
}
.ra-sw-kpi-cap {
  display: block;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #6b6560;
}
.ra-sw-kpi-val {
  display: block;
  margin-top: 3px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.ra-sw-insights {
  background: #191715;
  border: 1px solid #2a2622;
  border-radius: 7px;
  padding: 6px 14px 8px;
}
.ra-sw-insights .ra-ins-row {
  grid-template-columns: 150px 60px minmax(0, 1fr);
}
.ra-sw-insights .ra-ins-detail {
  white-space: normal;
}

/* Tyre strategy */
.ra-sw-stints {
  display: flex;
  gap: 7px;
  align-items: stretch;
}
.ra-sw-stint {
  flex: 1 1 0;
  min-width: 128px;
  background: #191715;
  border: 1px solid #2a2622;
  border-radius: 7px;
  overflow: hidden;
  padding-bottom: 7px;
}
.ra-sw-stint-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 9px;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
}
/* Lap range sits at the far right; the tyre image + compound name stay left. */
.ra-sw-stint-top span {
  margin-left: auto;
}
.ra-sw-stint-body {
  margin: 0;
  padding: 7px 9px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
}
.ra-sw-stint-body div {
  min-width: 0;
}
.ra-sw-stint-body dt {
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b6560;
}
.ra-sw-stint-body dd {
  margin: 0;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #e8e3db;
}
.ra-sw-wear {
  height: 6px;
  margin: 8px 9px 0;
  background: #241f1c;
  border-radius: 3px;
  overflow: hidden;
}
.ra-sw-wear span {
  display: block;
  height: 100%;
}
.ra-sw-wear-val {
  display: block;
  padding: 3px 9px 0;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.55rem;
  color: #6b6560;
}

/* Lap log */
.ra-sw-log-scroll {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #2a2622;
  border-radius: 7px;
}
.ra-sw-log {
  width: 100%;
  border-collapse: collapse;
  font-family: "Segoe UI", "Formula1", "Arial", sans-serif;
  font-size: 0.72rem;
}
.ra-sw-log th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #201d1a;
  color: #8a847c;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
  padding: 6px 5px;
  border-bottom: 1px solid #2a2622;
  white-space: nowrap;
}
.ra-sw-log td {
  padding: 3px 5px;
  text-align: center;
  color: #e8e3db;
  white-space: nowrap;
}
.ra-sw-log tbody tr:nth-child(even) {
  background: #17161a;
}
.ra-sw-log tbody tr:hover {
  background: #24211f;
}
/* Best-time markers must out-specify `.ra-sw-log td` (which sets the default
   cell colour), otherwise every cell stays off-white and nothing is marked.
   Overall (session) best = purple, personal best = green, invalid = red. */
.ra-sw-log td.ra-lg-session { color: #b87fff; font-weight: 700; }
.ra-sw-log td.ra-lg-personal { color: #3acb5a; font-weight: 700; }
.ra-sw-log td.ra-lg-inv { color: #e05a4a; }
.ra-sw-log tr.is-invalid td:first-child {
  border-left: 2px solid #e05a4a;
}
.ra-sw-tyre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
}
/* F1 tyre compound images (Assets/Tyres/Tyre-*.svg). In the lap log they sit on
   the dark table cell and read as-is. */
.ra-sw-tyre-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}
/* In the stint header the bar is already the compound colour, so the (same-
   colour) tyre silhouette needs a neutral disc behind it to stay visible. */
.ra-sw-stint-tyre {
  width: 20px;
  height: 20px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .ra-sw-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .ra-sw-ratings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ra-sw-stints {
    flex-wrap: wrap;
  }
  .ra-sw-modal {
    padding: 12px 8px;
  }
  .ra-sw-box {
    padding: 0 12px 16px;
  }
  .ra-sw-band {
    margin: 0 -12px 12px;
    padding: 11px 12px;
  }
}

/* ── Drivers · career performance row (Drivers tab hero banner) ───────────────
   Second row under the career stats: the six Driver Performance categories
   averaged over every rated race, with a radar of the same values. Injected
   after the telemetry loads, so it fades in rather than popping. */
.drv-perf-row {
  display: flex;
  align-items: stretch;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 18px 14px 22px;
  padding: 8px 16px 14px;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 100% 50%,
      color-mix(in srgb, var(--team-color, #00d4aa) 12%, transparent) 0%,
      transparent 62%),
    var(--bg-card);
  animation: drvPerfIn 0.42s ease both;
}
@keyframes drvPerfIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drv-perf-row { animation: none; }
}
/* Column so the tile grid can take the leftover height and finish level with
   the radar beside it. */
.drv-perf-main {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.drv-perf-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.drv-perf-title {
  font-size: 1.02rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e8e3db;
  border-bottom: 2px solid var(--team-color, #00d4aa);
  padding-bottom: 2px;
}
.drv-perf-meta {
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6560;
}

/* Category tiles — abbreviation, score, and a bar of the same colour ramp the
   race board uses, so a 7.4 reads the same everywhere in the app. */
.drv-perf-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  flex: 1;
}
.drv-perf-tile {
  display: flex;
  flex-direction: column;
  padding: 8px 9px 7px;
  border: 1px solid var(--bdr);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
  cursor: help;
  transition:
    border-color 0.16s,
    transform 0.16s;
}
.drv-perf-tile:hover {
  border-color: color-mix(in srgb, var(--team-color, #00d4aa) 55%, transparent);
  transform: translateY(-2px);
}
.drv-perf-tile-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.drv-perf-abbr {
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8a847d;
}
.drv-perf-val {
  font-family: "Courier New", monospace;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.drv-perf-track {
  height: 3px;
  margin: 6px 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.drv-perf-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.drv-perf-name {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: #6b6560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Radar + the overall score sitting in its middle. */
.drv-perf-radar {
  position: relative;
  flex: 0 0 196px;
  width: 196px;
  min-height: 196px;
}
.drv-rad {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.drv-rad-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.drv-rad-ring--out {
  stroke: rgba(255, 255, 255, 0.16);
}
.drv-rad-spoke {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.drv-rad-area {
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--team-color, #00d4aa) 60%, transparent));
}
.drv-rad-lab {
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #8a847d;
}
.drv-perf-ovr {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.72);
  pointer-events: none;
}
.drv-perf-ovr-val {
  font-family: "Courier New", monospace;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.drv-perf-ovr-lbl {
  font-family: "Courier New", monospace;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  color: #8a847d;
}

@media (max-width: 900px) {
  .drv-perf-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .drv-perf-row {
    gap: 14px;
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Per-race rating pills on a Race History row (Drivers tab). Injected with the
   telemetry, so rows without lap data keep their original two lines. */
.drv-rh-perf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}
.drv-rh-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 0 4px;
  border: 1px solid var(--bdr);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  font-family: "Courier New", monospace;
  line-height: 1.5;
  cursor: help;
}
.drv-rh-pill i {
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: #6b6560;
}
.drv-rh-pill b {
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The overall score leads the strip and carries the accent. */
.drv-rh-pill--ovr {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
.drv-rh-pill--ovr i {
  color: #9b9590;
}
.drv-rh-pill--ovr b {
  font-size: 0.72rem;
}

/* Evolution sparkline inside each performance tile — the trend sits directly
   under the value it belongs to, so the two always line up. */
.drv-perf-spark {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Fill whatever height the stretched tile leaves, so the chart uses the
     space rather than floating as a thin strip at the bottom. */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.drv-evo-svg {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 42px;
  height: auto;
}
.drv-evo-avg {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.drv-evo-area {
  opacity: 0.16;
}
.drv-evo-line {
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.drv-perf-spark-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  margin-top: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  color: #6b6560;
}
.drv-perf-spark-last b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.drv-evo-trend {
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  font-weight: 700;
  white-space: nowrap;
}
.drv-evo-trend--up { color: #3acb5a; }
.drv-evo-trend--down { color: #e05a4a; }
.drv-evo-trend--flat { color: #6b6560; }
}