/* ════════════════════════════════════════════════════════════════
   PITWALL — F1 Companion · Fresh, vibrant design
   Fonts: Clash Display (headings) · Satoshi (body) · JetBrains Mono (data)
   ════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Surfaces – warm-tinted dark, not cold grey */
  --bg:      #0c0c10;
  --s1:      #13131a;
  --s2:      #1a1a24;
  --s3:      #22222e;
  --s4:      #2a2a38;

  /* Borders */
  --b0: #1e1e2a;
  --b1: #26263a;
  --b2: #34344c;
  --b3: #484860;

  /* Text */
  --t1: #f0f0f8;
  --t2: #9090b0;
  --t3: #505068;
  --t4: #30303f;

  /* Brand */
  --red:    #ff2547;
  --green:  #00e8a8;
  --amber:  #ff8040;
  --blue:   #4898ff;
  --purple: #8b5cf6;
  --gold:   #f0c030;
  --silver: #a8a8c0;
  --bronze: #c07840;

  /* Fonts */
  --fh:   'Rajdhani',   sans-serif;   /* headings – sporty condensed */
  --fb:   'Exo 2',      sans-serif;   /* body – clean geometric */
  --fm:   'JetBrains Mono', monospace; /* data / timing */

  /* Legacy aliases – used by companion_components.js */
  --font-head:    var(--fh);
  --font-display: var(--fh);
  --font-body:    var(--fb);
  --font-data:    var(--fm);
  --font-mono:    var(--fm);

  --accent-red:   var(--red);
  --accent-green: var(--green);
  --accent-amber: var(--amber);
  --accent-blue:  var(--blue);

  --text-primary:   var(--t1);
  --text-secondary: var(--t2);
  --text-muted:     var(--t3);
  --text-dim:       var(--t4);

  --bg-base:     var(--bg);
  --bg-card:     var(--s1);
  --bg-secondary:var(--s1);
  --bg-elevated: var(--s2);

  --border:       var(--b1);
  --border-bright:var(--b2);
  --border-glow:  var(--b3);
  --radius: 8px;

  /* Nav height */
  --nav: 56px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-font-smoothing:antialiased;color-scheme:dark}
body{background:var(--bg);color:var(--t1);font-family:var(--fb);min-height:100vh;overflow-x:hidden;line-height:1.55}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;color:inherit;font:inherit}
input,select{background:none;border:none;color:inherit;font:inherit;outline:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--b3)}

/* ════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav);
  background:rgba(12,12,16,.88);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:center;
  padding:0 18px;gap:2px;
}

.nav-logo{
  display:flex;align-items:center;gap:10px;
  margin-right:18px;flex-shrink:0;
  cursor:pointer;padding:5px 9px;border-radius:8px;
  transition:background .15s var(--ease);
}
.nav-logo:hover{background:var(--s2)}
.nav-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(150deg, #ff4060 0%, #cc0022 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:15px;font-weight:700;color:#fff;
  letter-spacing:.5px;flex-shrink:0;
  box-shadow:0 2px 10px rgba(255,37,71,.4);
}
.nav-wordmark{
  font-family:var(--fh);font-size:20px;font-weight:700;
  letter-spacing:2px;line-height:1;color:var(--t1);
}
.nav-sub{font-size:9px;font-weight:500;letter-spacing:2.5px;color:var(--t3);text-transform:uppercase}

.nav-links{display:flex;align-items:center;gap:1px;flex:1;overflow:hidden}
.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:7px;
  font-family:var(--fb);font-size:13px;font-weight:500;
  color:var(--t3);transition:all .15s var(--ease);
  white-space:nowrap;
}
.nav-link:hover{color:var(--t1);background:var(--s2)}
.nav-link.active{color:var(--t1);background:var(--s3)}
.nav-link.active .ndot{background:var(--red);box-shadow:0 0 8px rgba(255,37,71,.6)}
.ndot{
  width:5px;height:5px;border-radius:50%;
  background:var(--b2);transition:all .2s;flex-shrink:0;
}

.nav-r{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.live-pill{
  display:flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  background:rgba(255,37,71,.1);border:1px solid rgba(255,37,71,.25);
  font-family:var(--fh);font-size:10px;font-weight:700;
  letter-spacing:1.5px;color:var(--red);
}
.live-pill-dot,.live-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--red);animation:blink 1.4s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ════════════════════════════════════════════════════════════════
   SHELL & LAYOUT
   ════════════════════════════════════════════════════════════════ */
.shell{padding-top:var(--nav);min-height:100vh}
.content{max-width:1400px;margin:0 auto;padding:28px 22px}

.g2{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.g2eq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.gcards-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.col{display:flex;flex-direction:column;gap:16px}

/* ════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════ */
.card{
  background:var(--s1);border:1px solid var(--b0);
  border-radius:10px;padding:20px;
  transition:border-color .2s var(--ease);
}
.card:hover{border-color:var(--b1)}
.card-sm{padding:13px 15px}
.card-flush{padding:0;overflow:hidden}
.card-title{
  font-family:var(--fh);font-size:13px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);
  margin-bottom:14px;
}
.card-hdr,.chdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
/* old alias */
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

/* hero card */
.hero-card{
  position:relative;border-radius:12px;overflow:hidden;
  background:var(--s1);border:1px solid var(--b1);min-height:160px;
}
.hero-card-bg,.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-card-content,.hero-body{position:relative;z-index:1;padding:26px}
.hero-card-label,.hero-label{
  font-family:var(--fh);font-size:10px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;
}
.hero-card-name,.hero-name{
  font-family:var(--fh);font-size:40px;font-weight:700;line-height:1;margin-bottom:6px;
}
.hero-sub{font-size:13px;color:var(--t2)}

/* ════════════════════════════════════════════════════════════════
   STATS
   ════════════════════════════════════════════════════════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.stat-cell,.scel{
  background:var(--s2);border:1px solid var(--b0);
  border-radius:8px;padding:12px 13px;
}
.stat-value,.sv{
  font-family:var(--fm);font-size:22px;font-weight:700;
  line-height:1;color:var(--t1);
}
.stat-value.lg,.sv.lg{font-size:28px}
.stat-value.accent,.sv.red{color:var(--red)}
.stat-value.green,.sv.green{color:var(--green)}
.stat-label,.sl{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-top:4px;
}

/* ════════════════════════════════════════════════════════════════
   TABS
   ════════════════════════════════════════════════════════════════ */
.tabs{
  display:flex;gap:2px;flex-wrap:wrap;
  border-bottom:1px solid var(--b1);margin-bottom:18px;
}
.tab,.tab-btn{
  padding:7px 13px;margin-bottom:-1px;
  font-family:var(--fb);font-size:12px;font-weight:500;
  color:var(--t3);border-radius:8px 8px 0 0;
  border:1px solid transparent;border-bottom:none;
  transition:all .15s var(--ease);cursor:pointer;white-space:nowrap;
}
.tab:hover,.tab-btn:hover{color:var(--t2)}
.tab.on,.tab.active,.tab-btn.active{
  color:var(--t1);background:var(--s2);
  border-color:var(--b1);border-bottom-color:var(--s2);
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;border-radius:8px;
  font-family:var(--fb);font-size:13px;font-weight:600;
  transition:all .15s var(--ease);cursor:pointer;white-space:nowrap;
}
.btn-primary,.btn-red{
  background:var(--red);color:#fff;border:1px solid var(--red);
}
.btn-primary:hover,.btn-red:hover{
  background:#e0102e;border-color:#e0102e;
  box-shadow:0 0 24px rgba(255,37,71,.3);
}
.btn-primary:disabled,.btn-red:disabled{opacity:.35;cursor:not-allowed}
.btn-secondary,.btn-ghost{
  background:var(--s2);color:var(--t2);border:1px solid var(--b1);
}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--b2);color:var(--t1)}
.btn-sm{padding:5px 12px;font-size:11px}

/* ════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════ */
.badge,.b-red,.b-green,.b-amber,.b-gold,.b-dim,.b-blue{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:20px;
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
}
.badge-red,.b-red{background:rgba(255,37,71,.1);color:var(--red);border:1px solid rgba(255,37,71,.22)}
.badge-green,.b-green{background:rgba(0,232,168,.08);color:var(--green);border:1px solid rgba(0,232,168,.18)}
.badge-amber,.b-amber{background:rgba(255,128,64,.08);color:var(--amber);border:1px solid rgba(255,128,64,.18)}
.badge-gold,.b-gold{background:rgba(240,192,48,.08);color:var(--gold);border:1px solid rgba(240,192,48,.18)}
.badge-dim,.b-dim{background:var(--s2);color:var(--t3);border:1px solid var(--b1)}
.badge-blue,.b-blue{background:rgba(72,152,255,.08);color:var(--blue);border:1px solid rgba(72,152,255,.18)}
.badge-purple,.b-purple{background:rgba(139,92,246,.08);color:var(--purple);border:1px solid rgba(139,92,246,.18)}

/* ════════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════════ */
.input,.groq-input{
  width:100%;padding:9px 13px;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;color:var(--t1);
  font-family:var(--fb);font-size:13px;
  transition:border-color .15s;
  display:block;
}
.input:focus,.groq-input:focus{border-color:var(--b2);outline:none}
.input::placeholder,.groq-input::placeholder{color:var(--t3)}
.search-wrap{position:relative}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none;font-size:15px}
.search-input{padding-left:36px}

/* ════════════════════════════════════════════════════════════════
   DATA ROWS / TABLES
   ════════════════════════════════════════════════════════════════ */
.data-row,.drow{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--b0);gap:8px;
}
.data-row:last-child,.drow:last-child{border-bottom:none}

.data-table,.tbl{width:100%;border-collapse:collapse}
.data-table th,.tbl th{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);
  padding:7px 11px;text-align:left;
  border-bottom:1px solid var(--b1);white-space:nowrap;
}
.data-table td,.tbl td{
  padding:9px 11px;border-bottom:1px solid var(--b0);
  font-size:13px;color:var(--t2);
}
.data-table tr:last-child td,.tbl tr:last-child td{border-bottom:none}
.data-table tr:hover td,.tbl tr:hover td{background:var(--s2)}
.data-table td.mono,.tbl td.mono{font-family:var(--fm);font-size:12px}
.data-table td.name,.tbl td.bold{color:var(--t1);font-weight:600}
.tbl td.gold{color:var(--gold)}
.tbl td.silver{color:var(--silver)}
.tbl td.bronze{color:var(--bronze)}

/* ════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════════════════ */
.prog,.progress-bar,.rating-bar{
  height:4px;background:var(--b1);border-radius:3px;overflow:hidden;
}
.prog-fill,.progress-fill,.rating-fill{
  height:100%;border-radius:3px;transition:width .6s var(--ease);
}

/* ════════════════════════════════════════════════════════════════
   LOADING / EMPTY
   ════════════════════════════════════════════════════════════════ */
.empty,.empty-state{
  padding:40px 20px;text-align:center;
  font-family:var(--fh);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);
}
.loading,.loading-state{
  padding:36px 20px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fh);font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);
}
.spinner,.spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--b1);border-top-color:var(--t3);
  animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════
   SECTION HEADER
   ════════════════════════════════════════════════════════════════ */
.sec-hdr{
  display:flex;align-items:flex-end;gap:16px;
  margin-bottom:24px;padding-bottom:18px;
  border-bottom:1px solid var(--b1);
}
.sec-title,.section-title{
  font-family:var(--fh);font-size:34px;font-weight:700;
  letter-spacing:1px;line-height:1;
}
.sec-sub,.section-subtitle{font-size:13px;color:var(--t2);padding-bottom:3px}

/* ════════════════════════════════════════════════════════════════
   CIRCUIT CARDS
   ════════════════════════════════════════════════════════════════ */
.circuit-card{
  background:var(--s1);border:1px solid var(--b0);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:all .2s var(--ease);
}
.circuit-card:hover{
  border-color:rgba(0,232,168,.35);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(0,232,168,.1);
}
.cc-map{
  height:140px;display:flex;align-items:center;justify-content:center;
  background:var(--s2);padding:10px;border-bottom:1px solid var(--b0);
  position:relative;overflow:hidden;box-sizing:border-box;
}
.cc-map>div{width:100%;height:100%;}
.cc-map svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;}
.cc-map::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,232,168,.03));
  pointer-events:none;
}
.cc-head{padding:13px 15px 8px}
.cc-country{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-bottom:4px;
}
.cc-name{font-family:var(--fh);font-size:17px;font-weight:700;line-height:1.2}
.cc-body{padding:8px 15px 12px}
.cc-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:12px;color:var(--t2);
  border-bottom:1px solid var(--b0);
}
.cc-row:last-child{border-bottom:none}
.cc-val{font-family:var(--fm);font-size:12px;color:var(--t1);font-weight:500}
/* track SVG */
.trk-bg{fill:none;stroke:var(--b2);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.trk-fg{
  fill:none;stroke:var(--green);stroke-width:3.5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(0,232,168,.45));
}

/* circuit card compat (old class names) */
.circuit-card-header{padding:13px 15px 10px;border-bottom:1px solid var(--b0)}
.circuit-card-country{font-family:var(--fh);font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.circuit-card-name{font-family:var(--fh);font-size:17px;font-weight:700;line-height:1.2}
.circuit-card-body{padding:10px 15px 12px}
.circuit-card-stat{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;color:var(--t2);border-bottom:1px solid var(--b0)}
.circuit-card-stat:last-child{border-bottom:none}
.circuit-card-stat-val{font-family:var(--fm);font-size:12px;color:var(--t1);font-weight:500}

/* ════════════════════════════════════════════════════════════════
   DRIVER CARDS
   ════════════════════════════════════════════════════════════════ */
.driver-card{
  background:var(--s1);border:1px solid var(--b0);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:all .2s var(--ease);
}
.driver-card:hover{
  border-color:var(--b2);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.dc-top{
  padding:17px 16px 12px;
  border-left:4px solid var(--tc,#444);
  position:relative;overflow:hidden;
}
.dc-num{
  position:absolute;right:10px;top:4px;
  font-family:var(--fm);font-size:54px;font-weight:700;
  color:var(--b1);line-height:1;pointer-events:none;
}
.dc-name{
  font-family:var(--fh);font-size:21px;font-weight:700;
  line-height:1.1;position:relative;z-index:1;
}
.dc-team{font-size:11px;color:var(--t2);margin-top:3px;position:relative;z-index:1}
.dc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--b0)}
.dc-stat{padding:10px 10px;text-align:center;border-right:1px solid var(--b0)}
.dc-stat:last-child{border-right:none}
.dc-sv{font-family:var(--fm);font-size:15px;font-weight:700;color:var(--t1)}
.dc-sl{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:2px;
}

/* ════════════════════════════════════════════════════════════════
   CONSTRUCTOR CARDS
   ════════════════════════════════════════════════════════════════ */
.constructor-card,.con-card{
  background:var(--s1);border:1px solid var(--b0);
  border-top:3px solid var(--tc,#444);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:all .2s var(--ease);
}
.constructor-card:hover,.con-card:hover{
  transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.constructor-card-header,.con-head{padding:16px 16px 12px}
.constructor-card-name,.con-name{font-family:var(--fh);font-size:19px;font-weight:700}
.constructor-card-base,.con-base{font-size:11px;color:var(--t2);margin-top:3px}
.constructor-card-body,.con-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--b0)}
.con-stat{padding:11px 12px;text-align:center;border-right:1px solid var(--b0)}
.con-stat:last-child{border-right:none}

/* ════════════════════════════════════════════════════════════════
   TIMING TOWER
   ════════════════════════════════════════════════════════════════ */
.timing-row,.tower-row{
  display:grid;
  grid-template-columns:34px 26px 1fr 78px 68px 40px 26px;
  align-items:center;gap:6px;
  padding:7px 10px;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--b0);
  transition:background .12s;
}
.timing-row:hover,.tower-row:hover{background:var(--s2)}
.tower-hdr{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--b2)!important;padding:5px 10px;
}
.timing-row.up,.tower-row.up{animation:fup .4s}
.timing-row.dn,.tower-row.dn{animation:fdn .4s}
@keyframes fup{0%,100%{background:transparent}50%{background:rgba(0,232,168,.06)}}
@keyframes fdn{0%,100%{background:transparent}50%{background:rgba(255,37,71,.06)}}

/* ════════════════════════════════════════════════════════════════
   AERO / DRS BADGES
   ════════════════════════════════════════════════════════════════ */
.aero,.drs-badge{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:4px;
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;
}
.aero-on,.drs-on{background:rgba(0,232,168,.1);color:var(--green);border:1px solid rgba(0,232,168,.2)}
.aero-avail,.drs-avail{background:rgba(240,192,48,.08);color:var(--gold);border:1px solid rgba(240,192,48,.2)}
.aero-off,.drs-off{color:var(--t3)}

/* ════════════════════════════════════════════════════════════════
   TYRES
   ════════════════════════════════════════════════════════════════ */
.tyre-badge,.tyre{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;border:2px solid;
  font-family:var(--fm);font-size:10px;font-weight:700;
}
.tyre-S{border-color:var(--red);color:var(--red)}
.tyre-M{border-color:var(--gold);color:var(--gold)}
.tyre-H{border-color:#c8c8dc;color:#c8c8dc}
.tyre-I{border-color:var(--blue);color:var(--blue)}
.tyre-W{border-color:#2860ff;color:#2860ff}

/* ════════════════════════════════════════════════════════════════
   STINT BLOCKS
   ════════════════════════════════════════════════════════════════ */
.stint-block{
  display:inline-block;height:22px;border-radius:3px;
  min-width:6px;transition:all .2s;
}

/* ════════════════════════════════════════════════════════════════
   RACE CONTROL
   ════════════════════════════════════════════════════════════════ */
.rc-msg{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 11px;border-radius:8px;
  border-left:3px solid var(--b1);margin-bottom:4px;
  font-size:12px;line-height:1.45;animation:slideIn .25s ease-out;
}
.rc-msg.rc-red,.rc-msg.type-red{border-left-color:var(--red);background:rgba(255,37,71,.05)}
.rc-msg.rc-yellow,.rc-msg.type-yellow{border-left-color:#e0c000;background:rgba(224,192,0,.04)}
.rc-msg.rc-sc,.rc-msg.type-sc{border-left-color:var(--amber);background:rgba(255,128,64,.05)}
.rc-msg.rc-pen,.rc-msg.type-pen{border-left-color:var(--purple);background:rgba(139,92,246,.05)}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════
   TRIVIA / HISTORY
   ════════════════════════════════════════════════════════════════ */
.trivia-card{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;padding:14px 16px;border-left:3px solid var(--purple);
  display:flex;gap:12px;align-items:flex-start;
}
.trivia-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.trivia-text{font-size:13px;line-height:1.7;color:var(--t2)}
.strategy-card,.strat-card{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;padding:13px 15px;
}
.strategy-year-label,.strat-year{
  font-family:var(--fh);font-size:10px;font-weight:600;
  letter-spacing:1.5px;color:var(--t3);margin-bottom:6px;
}
.strategy-winner,.strat-winner{
  font-family:var(--fh);font-size:17px;font-weight:700;margin-bottom:4px;
}

/* ════════════════════════════════════════════════════════════════
   COUNTDOWN
   ════════════════════════════════════════════════════════════════ */
.countdown-wrap,.cd-wrap{display:flex;gap:10px;align-items:center}
.countdown-unit,.cd-unit{text-align:center}
.countdown-num,.cd-num{
  font-family:var(--fm);font-size:28px;font-weight:700;line-height:1;
  color:var(--t1);
}
.countdown-label,.cd-lbl{
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--t3);
}
.countdown-sep,.cd-sep{
  font-family:var(--fm);font-size:24px;color:var(--t3);padding-bottom:12px;
}

/* ════════════════════════════════════════════════════════════════
   STANDINGS
   ════════════════════════════════════════════════════════════════ */
.standings-pos,.std-pos{
  font-family:var(--fm);font-size:12px;font-weight:700;
  width:24px;text-align:center;flex-shrink:0;
}
.standings-pts,.std-pts{font-family:var(--fm);font-size:14px;font-weight:700}

/* ════════════════════════════════════════════════════════════════
   PIT & WEATHER
   ════════════════════════════════════════════════════════════════ */
.pit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:7px}
.pit-card{
  background:var(--s2);border:1px solid var(--b0);
  border-radius:7px;padding:9px 11px;border-left:3px solid var(--b1);
}
.pit-card.warn{border-left-color:var(--amber)}
.wx-strip{
  background:var(--s1);border-bottom:1px solid var(--b0);
  padding:7px 20px;display:flex;align-items:center;gap:18px;
  font-size:11px;flex-wrap:wrap;
}
.wx-lbl{
  font-family:var(--fh);font-size:9px;letter-spacing:2px;
  font-weight:600;text-transform:uppercase;color:var(--t3);
}
.wx-val{color:var(--t1);font-family:var(--fm);font-size:11px;font-weight:600}

/* ════════════════════════════════════════════════════════════════
   TOGGLES
   ════════════════════════════════════════════════════════════════ */
.mode-toggle,.mode-tgl{
  display:flex;background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;overflow:hidden;
}
.mode-btn{
  padding:6px 15px;font-family:var(--fb);font-size:11px;font-weight:600;
  letter-spacing:.3px;color:var(--t3);cursor:pointer;transition:all .15s;
}
.mode-btn.active,.mode-btn.on{background:var(--red);color:#fff}

/* session tabs (weekend selector) */
.session-tab,.sess-tab{
  padding:5px 11px;border-radius:7px 7px 0 0;margin-bottom:-1px;
  font-family:var(--fh);font-size:10px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;
  border:1px solid transparent;border-bottom:none;
  color:var(--t3);transition:all .15s;
}
.session-tab:hover,.sess-tab:hover{color:var(--t2)}
.session-tab.active,.session-tab.on,.sess-tab.on{
  color:var(--green);background:var(--s2);
  border-color:var(--b1);border-bottom-color:var(--s2);
}

/* meeting picker */
.mtg-card{
  padding:11px 15px;border-radius:8px;
  background:var(--s2);border:1px solid var(--b0);
  cursor:pointer;transition:all .15s;min-width:100px;
}
.mtg-card:hover{border-color:var(--b1)}
.mtg-card.sel,.mtg-card.selected{
  border-color:var(--red);background:rgba(255,37,71,.06);
}
.mtg-name{font-family:var(--fh);font-size:14px;font-weight:700}
.mtg-loc{font-size:10px;color:var(--t3);margin-top:2px}

/* ════════════════════════════════════════════════════════════════
   OVERTAKE PANEL
   ════════════════════════════════════════════════════════════════ */
.overtake-row,.ot-row{
  display:flex;gap:10px;align-items:center;
  padding:9px 11px;background:var(--s2);
  border-radius:8px;border:1px solid var(--b0);margin-bottom:6px;
}
.ot-pct{
  font-family:var(--fm);font-size:16px;font-weight:700;
  width:44px;text-align:center;flex-shrink:0;
}
.ot-hi{color:var(--red)}.ot-md{color:var(--amber)}.ot-lo{color:var(--t3)}

/* ════════════════════════════════════════════════════════════════
   AI PANEL
   ════════════════════════════════════════════════════════════════ */
.ai-card{
  padding:13px;background:var(--s2);
  border-radius:8px;margin-bottom:8px;
  border-left:3px solid var(--tc,#444);
}
.conf-badge{
  display:inline-flex;align-items:center;padding:2px 7px;
  border-radius:3px;font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
}
.conf-high,.ai-high{background:rgba(0,232,168,.08);color:var(--green);border:1px solid rgba(0,232,168,.18)}
.conf-medium,.ai-med{background:rgba(255,128,64,.08);color:var(--amber);border:1px solid rgba(255,128,64,.18)}
.conf-speculative,.ai-spec{background:rgba(139,92,246,.08);color:var(--purple);border:1px solid rgba(139,92,246,.18)}

/* ════════════════════════════════════════════════════════════════
   DRIVER PILLS (lap chart filter)
   ════════════════════════════════════════════════════════════════ */
.driver-pill,.dp{
  padding:3px 9px;border-radius:5px;
  font-family:var(--fh);font-size:10px;font-weight:600;letter-spacing:.5px;
  cursor:pointer;transition:all .12s;
  border:1px solid var(--b0);background:var(--s2);color:var(--t3);
}
.driver-pill:hover,.dp:hover{color:var(--t2);border-color:var(--b1)}
.driver-pill.active,.dp.on{
  border-color:rgba(var(--tc-r,0),var(--tc-g,232),var(--tc-b,168),.3)!important;
  color:var(--t1)!important;
}
.dp-all{
  padding:3px 10px;font-family:var(--fh);font-size:10px;font-weight:600;
  letter-spacing:1px;cursor:pointer;border-radius:5px;transition:all .12s;
  border:1px solid var(--b0);background:var(--s2);color:var(--t3);
}
.dp-all.on{border-color:rgba(0,232,168,.3);background:rgba(0,232,168,.06);color:var(--green)}

/* ════════════════════════════════════════════════════════════════
   HOME PAGE
   ════════════════════════════════════════════════════════════════ */
.home-hero{
  padding:40px;
  background:linear-gradient(135deg,rgba(255,37,71,.08) 0%,transparent 50%);
  border:1px solid rgba(255,37,71,.14);border-radius:14px;
  margin-bottom:22px;position:relative;overflow:hidden;
}
.home-hero::before{
  content:'F1';
  position:absolute;right:-10px;top:-20px;
  font-family:var(--fh);font-size:200px;font-weight:700;
  color:rgba(255,37,71,.03);line-height:1;pointer-events:none;
  user-select:none;
}
.hh-eyebrow{
  font-family:var(--fh);font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:8px;
}
.hh-title{
  font-family:var(--fh);font-size:60px;font-weight:700;
  letter-spacing:3px;line-height:1;margin-bottom:10px;color:var(--t1);
}
.hh-sub{font-size:15px;color:var(--t2);margin-bottom:26px;max-width:520px;line-height:1.6}
.hh-btns{display:flex;gap:8px;flex-wrap:wrap}
.hh-btn{
  padding:9px 20px;border-radius:8px;
  background:var(--s1);border:1px solid var(--b1);
  font-size:13px;font-weight:500;color:var(--t2);
  cursor:pointer;transition:all .15s;
}
.hh-btn:hover{background:var(--s2);border-color:var(--b2);color:var(--t1)}

/* quick nav cards */
.qcard{
  background:var(--s1);border:1px solid var(--b0);
  border-radius:10px;padding:20px;cursor:pointer;
  transition:all .2s var(--ease);
}
.qcard:hover{
  border-color:var(--b2);background:var(--s2);
  transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.qcard-icon{font-size:28px;margin-bottom:12px}
.qcard-title{font-family:var(--fh);font-size:17px;font-weight:700;margin-bottom:5px}
.qcard-desc{font-size:12px;color:var(--t3);line-height:1.6}

/* explore list */
.elist{display:flex;flex-direction:column;gap:6px}
.elist-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 15px;border-radius:8px;cursor:pointer;
  background:var(--s2);border:1px solid var(--b0);transition:all .15s;
}
.elist-item:hover{border-color:var(--b1);background:var(--s3)}
.elist-label{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.elist-desc{font-size:11px;color:var(--t3)}
.elist-arrow{color:var(--t3);font-size:18px;transition:transform .15s}
.elist-item:hover .elist-arrow{transform:translateX(3px);color:var(--t2)}

/* ════════════════════════════════════════════════════════════════
   GLOSSARY
   ════════════════════════════════════════════════════════════════ */
.gloss-card{
  background:var(--s2);border:1px solid var(--b0);
  border-radius:8px;padding:13px 15px;margin-bottom:8px;
}
.gloss-term{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}
.gloss-def{font-size:12px;color:var(--t2);line-height:1.65}

/* ════════════════════════════════════════════════════════════════
   TOOLTIP
   ════════════════════════════════════════════════════════════════ */
[data-tooltip]{position:relative;cursor:help}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--s3);border:1px solid var(--b2);color:var(--t2);
  padding:5px 10px;border-radius:7px;font-size:11px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999;
}
[data-tooltip]:hover::after{opacity:1}

/* ════════════════════════════════════════════════════════════════
   SECTOR TABLE
   ════════════════════════════════════════════════════════════════ */
.sec-tbl{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:11px}
.sec-tbl th{
  font-family:var(--fh);font-size:9px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);padding:6px 10px;
  border-bottom:1px solid var(--b1);text-align:right;
}
.sec-tbl th:first-child{text-align:left}
.sec-tbl td{padding:6px 10px;border-bottom:1px solid var(--b0);text-align:right;color:var(--t2)}
.sec-tbl td:first-child{text-align:left}
.sec-tbl tr:hover td{background:var(--s2)}
.s-best{background:rgba(0,232,168,.1);color:var(--green);font-weight:700}
.s-mid{background:rgba(240,192,48,.07);color:var(--gold)}

/* ════════════════════════════════════════════════════════════════
   AERO INFO CARD (2026 explainer)
   ════════════════════════════════════════════════════════════════ */
.aero-badge{
  display:inline-flex;align-items:center;padding:2px 8px;
  border-radius:4px;font-family:var(--fh);font-size:9px;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;
}
.aero-off-badge{color:var(--t3);background:var(--s3);border:1px solid var(--b1)}
.aero-open-badge{background:rgba(0,232,168,.1);color:var(--green);border:1px solid rgba(0,232,168,.2)}
.aero-avail-badge{background:rgba(240,192,48,.1);color:var(--gold);border:1px solid rgba(240,192,48,.2)}
.aero-boost-badge{background:rgba(139,92,246,.1);color:var(--purple);border:1px solid rgba(139,92,246,.2)}

/* ════════════════════════════════════════════════════════════════
   SEASON BADGE
   ════════════════════════════════════════════════════════════════ */
.season-badge{
  font-family:var(--fh);font-size:11px;font-weight:600;
  letter-spacing:2px;color:var(--t3);text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════════ */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.two-col-equal{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.section-header{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--b1)}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .g2,.two-col{grid-template-columns:1fr}
  .g3,.three-col{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .topnav{padding:0 12px}
  .nav-link span{display:none}
  .nav-link{padding:7px 10px}
  .nav-sub{display:none}
  .g2eq,.two-col-equal{grid-template-columns:1fr}
  .g3,.three-col{grid-template-columns:1fr}
  .content{padding:14px}
  .hh-title{font-size:42px}
  .home-hero{padding:24px}
  .sec-title,.section-title{font-size:26px}
}
@media(max-width:480px){
  .gcards{grid-template-columns:1fr}
  .dc-stats>div:last-child{display:none}
  .hh-title{font-size:34px}
}

/* ════════════════════════════════════════════════════════════════
   DRIVER CARD — encyclopedia class names
   ════════════════════════════════════════════════════════════════ */
.driver-card-top {
  padding:16px 16px 12px;
  border-left:4px solid var(--tc,#444);
  position:relative;overflow:hidden;
}
.driver-card-num {
  position:absolute;right:10px;top:4px;
  font-family:var(--fm);font-size:52px;font-weight:700;
  color:var(--b1);line-height:1;pointer-events:none;
}
.driver-card-name {
  font-family:var(--fh);font-size:21px;font-weight:700;
  line-height:1.1;position:relative;z-index:1;
}
.driver-card-team {
  font-size:11px;color:var(--t2);margin-top:3px;position:relative;z-index:1;
}
.driver-card-stats {
  display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--b0);
}
.driver-card-stat {
  padding:10px 10px;text-align:center;border-right:1px solid var(--b0);
}
.driver-card-stat:last-child { border-right:none }
.driver-card-stat-val {
  font-family:var(--fm);font-size:15px;font-weight:700;color:var(--t1);
}
.driver-card-stat-label {
  font-family:var(--fh);font-size:9px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:2px;
}

/* ════════════════════════════════════════════════════════════════
   TYRE STRATEGY — companion_components class names
   ════════════════════════════════════════════════════════════════ */
.strategy-row {
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:6px;
  background:var(--s2);border:1px solid var(--b0);margin-bottom:4px;
}
.strategy-name {
  font-family:var(--fh);font-size:13px;font-weight:700;
  width:90px;flex-shrink:0;color:var(--t1);
}
.strategy-bar {
  flex:1;display:flex;height:24px;border-radius:4px;overflow:hidden;gap:1px;
}
/* stint block colors by compound */
.stint-block {
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:10px;font-weight:700;
  min-width:6px;transition:all .2s;border-radius:2px;
  cursor:default;
}
.stint-S { background:#cc1520;color:#fff }
.stint-M { background:#c8a020;color:#000 }
.stint-H { background:#b0b0c8;color:#000 }
.stint-I { background:#0070cc;color:#fff }
.stint-W { background:#0030cc;color:#fff }
.stint-? { background:var(--s4);color:var(--t3) }

/* tyre badge (inline, circular) */
.tyre-badge {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;border:2px solid;
  font-family:var(--fm);font-size:10px;font-weight:700;
  vertical-align:middle;
}
.tyre-badge.tyre-S, .tyre-S { border-color:#cc1520;color:#cc1520 }
.tyre-badge.tyre-M, .tyre-M { border-color:#c8a020;color:#c8a020 }
.tyre-badge.tyre-H, .tyre-H { border-color:#c8c8dc;color:#c8c8dc }
.tyre-badge.tyre-I, .tyre-I { border-color:var(--blue);color:var(--blue) }
.tyre-badge.tyre-W, .tyre-W { border-color:#2060ff;color:#2060ff }

/* ════════════════════════════════════════════════════════════════
   QUALIFYING ROW
   ════════════════════════════════════════════════════════════════ */
.quali-row {
  display:grid;
  grid-template-columns:32px 1fr 80px 70px 1fr;
  align-items:center;gap:6px;
  padding:8px 10px;border-left:3px solid var(--b1);
  border-bottom:1px solid var(--b0);
  font-size:13px;
}
.quali-row:hover { background:var(--s2) }
.q-team { font-size:10px;color:var(--t3) }
.q-gap  { color:var(--t2) }
.q-p1   { color:#ffd700;font-weight:700 }
.q-p2   { color:var(--silver);font-weight:700 }
.q-p3   { color:var(--bronze);font-weight:700 }

/* ════════════════════════════════════════════════════════════════
   WEATHER STRIP (companion)
   ════════════════════════════════════════════════════════════════ */
.weather-strip {
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:6px 16px;background:var(--s1);border-bottom:1px solid var(--b0);
  font-size:11px;
}
.w-item { display:flex;align-items:center;gap:5px }
.w-label { font-family:var(--fh);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3) }
.w-value { font-family:var(--fm);font-size:11px;font-weight:600;color:var(--t1) }
.w-rain  { color:var(--blue) }

/* ════════════════════════════════════════════════════════════════
   TOWER HEADER (alias)
   ════════════════════════════════════════════════════════════════ */
.tower-header {
  font-family:var(--fh);font-size:9px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--b2)!important;padding:5px 10px;
}

/* ════════════════════════════════════════════════════════════════
   RC FEED
   ════════════════════════════════════════════════════════════════ */
.rc-feed { display:flex;flex-direction:column;gap:4px }

/* ════════════════════════════════════════════════════════════════
   OVERTAKE PROBABILITY
   ════════════════════════════════════════════════════════════════ */
.ot-prob {
  font-family:var(--fm);font-size:15px;font-weight:700;
  width:44px;text-align:right;flex-shrink:0;
}

/* ════════════════════════════════════════════════════════════════
   ERROR STATE
   ════════════════════════════════════════════════════════════════ */
.error-state {
  padding:24px 20px;text-align:center;
  font-size:12px;color:var(--amber);
  border:1px solid rgba(255,128,64,.2);border-radius:8px;
  background:rgba(255,128,64,.04);
}

/* ════════════════════════════════════════════════════════════════
   AI DOTS (thinking animation)
   ════════════════════════════════════════════════════════════════ */
.ai-dots { display:flex;gap:4px;align-items:center }
.ai-dot  {
  width:6px;height:6px;border-radius:50%;background:var(--t3);
  animation:dot-pulse 1.4s infinite;
}
.ai-dot:nth-child(2){animation-delay:.2s}
.ai-dot:nth-child(3){animation-delay:.4s}
@keyframes dot-pulse{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* ════════════════════════════════════════════════════════════════
   SECTOR TABLE (companion uses sector-table class)
   ════════════════════════════════════════════════════════════════ */
.sector-table { width:100%;border-collapse:collapse }
.sector-table th {
  font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);
  padding:6px 10px;border-bottom:1px solid var(--b1);
}
.sector-table td {
  padding:7px 10px;border-bottom:1px solid var(--b0);
  font-family:var(--fm);font-size:12px;color:var(--t2);
}
.sector-table tr:hover td { background:var(--s2) }

/* ════════════════════════════════════════════════════════════════
   GROQ INPUT
   ════════════════════════════════════════════════════════════════ */
.groq-input {
  width:100%;padding:9px 13px;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;color:var(--t1);font-size:13px;
  font-family:var(--fb);transition:border-color .15s;
}
.groq-input:focus{border-color:var(--b2);outline:none}
.groq-input::placeholder{color:var(--t3)}

/* ════════════════════════════════════════════════════════════════
   DRIVER CARD v2 — with photo + career stats
   ════════════════════════════════════════════════════════════════ */
.driver-card {
  background: var(--s1);
  border: 1px solid var(--b0);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.driver-card:hover {
  border-color: var(--b2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.dc-header {
  padding: 14px 14px 10px;
  border-left: 4px solid var(--tc, #444);
  position: relative;
  overflow: hidden;
  min-height: 90px;
}
.dc-photo {
  position: absolute; right: 0; bottom: 0;
  height: 90px; object-fit: contain; object-position: bottom right;
  opacity: .55; pointer-events: none;
}
.dc-number-bg {
  position: absolute; right: 10px; top: 4px;
  font-family: var(--fm); font-size: 52px; font-weight: 700;
  line-height: 1; pointer-events: none; opacity: .25;
}

/* Constructor card v2 */
.constructor-card {
  background: var(--s1);
  border: 1px solid var(--b0);
  border-top: 3px solid var(--tc, #444);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.constructor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}

/* ════════════════════════════════════════════════════════════════
   WEEKEND SESSION BAR — fix tab overflow
   ════════════════════════════════════════════════════════════════ */
.weekend-sessions {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.weekend-sessions::-webkit-scrollbar { display: none }
.sess-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Meeting picker scrollable row */
.meeting-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.meeting-row::-webkit-scrollbar { display: none }

/* ════════════════════════════════════════════════════════════════
   STAT VALUE ALIAS — both 'stat-value' and 'sv' work
   ════════════════════════════════════════════════════════════════ */
.stat-value { font-family: var(--fm); font-size: 22px; font-weight: 700; line-height: 1; color: var(--t1) }
.stat-value.accent { color: var(--red) }
.stat-value.lg { font-size: 28px }

/* ════════════════════════════════════════════════════════════════
   CIRCUIT MAP PANEL
   ════════════════════════════════════════════════════════════════ */
.circuit-map-panel {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.circuit-map-svg-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--s2);
  min-height: 160px;
}
.circuit-map-sectors {
  width: 148px;
  border-left: 1px solid var(--b0);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sector-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--b0);
}
.sector-row:last-of-type { border-bottom: none }
.sector-label {
  font-family: var(--fh); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.sector-time {
  font-family: var(--fm); font-size: 16px; font-weight: 700;
  color: var(--t1); margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════
   ALL-TIME RECORDS TABLE
   ════════════════════════════════════════════════════════════════ */
.records-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--b0);
}
.records-bar:last-child { border-bottom: none }
.records-driver { font-family: var(--fh); font-size: 14px; font-weight: 700; flex: 1 }
.records-val { font-family: var(--fm); font-size: 14px; font-weight: 700; width: 40px; text-align: right }
.records-fill-track { flex: 2; height: 4px; background: var(--b1); border-radius: 3px; overflow: hidden }
.records-fill { height: 100%; border-radius: 3px }