:root {
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #1c2230;
  --border: #262d3d;
  --text: #e6e9f2;
  --muted: #8b93a8;
  --accent: #f43127;       /* Supercars red */
  --accent-2: #ffb21a;     /* race amber */
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #11141c 0%, #0b0d12 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand .logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--mono);
  font-weight: 800;
}
.brand small { color: var(--muted); font-weight: 500; letter-spacing: 0.06em; }

nav.role-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
nav.role-nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border-radius: 7px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
nav.role-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
nav.role-nav a.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* On medium screens, drop the decorative brand sub-tagline so the full nav
   keeps to a single, uncrowded row instead of wrapping. */
@media (max-width: 1400px) {
  .brand small { display: none; }
}
@media (max-width: 1120px) {
  nav.role-nav a { padding: 7px 8px; font-size: 12px; letter-spacing: 0; }
}

main.layout {
  max-width: 100%;
  margin: 0;
  padding: 24px;
}

.grid {
  display: grid;
  gap: 18px;
}
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.sidebar { grid-template-columns: 320px 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.sidebar { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kpis { display: flex; flex-wrap: wrap; gap: 14px; }
.kpi {
  flex: 1 1 140px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.kpi .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.kpi .value { font-size: 22px; font-weight: 700; margin-top: 4px; font-family: var(--mono); }
.kpi .value.warn { color: var(--warn); }
.kpi .value.bad { color: var(--bad); }
.kpi .value.good { color: var(--good); }
.kpi .value.accent { color: var(--accent-2); }

button.btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.2s ease;
}
button.btn:hover { opacity: 0.9; }
button.btn:active { transform: translateY(1px); }
button.btn.secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }

label.field {
  display: block;
  margin-bottom: 10px;
}
label.field span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
label.field input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
}

pre.report {
  background: #0a0c11;
  color: #d4dbed;
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 480px;
  overflow: auto;
}

table.lap-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.lap-list th, table.lap-list td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.lap-list th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }
table.lap-list tr:hover td { background: rgba(0, 212, 255, 0.04); cursor: pointer; }
table.lap-list tr.selected td { background: rgba(225, 6, 0, 0.08); }
table.lap-list .mono { font-family: var(--mono); }

.bus-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
}
.bus-bar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
  display: inline-block;
}
.bus-bar strong { color: var(--text); font-family: var(--mono); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge.info { background: rgba(0, 212, 255, 0.12); color: var(--accent-2); }
.badge.warn { background: rgba(245, 158, 11, 0.16); color: var(--warn); }
.badge.bad { background: rgba(239, 68, 68, 0.16); color: var(--bad); }
.badge.good { background: rgba(34, 197, 94, 0.16); color: var(--good); }

.chart-wrap {
  position: relative;
  height: 240px;
}
.chart-wrap.tall { height: 320px; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-size: 13px;
  z-index: 100;
  animation: fadein 0.2s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Landing */
.hero {
  text-align: center;
  padding: 50px 16px 30px;
}
.hero h1 {
  font-size: 38px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.hero h1 .accent { color: var(--accent); }
.hero p {
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}

.role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1100px;
  margin: 30px auto 60px;
  padding: 0 16px;
}
@media (max-width: 860px) { .role-cards { grid-template-columns: 1fr; } }

.role-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.role-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; }
.role-card .tag {
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.role-card h2 {
  font-size: 22px;
  margin: 8px 0 12px;
}
.role-card p { color: var(--muted); }
.role-card ul { color: var(--muted); padding-left: 20px; margin: 14px 0 0; }
.role-card .cta {
  margin-top: 18px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.shared-note {
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 18px 22px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(0, 212, 255, 0.03);
}
.shared-note strong { color: var(--accent-2); font-family: var(--mono); }

/* ============= Australian Supercars landing ============= */
.supercars-home { background:#090909; }
.supercars-home .supercars-nav { background:rgba(8,8,8,.88); border-bottom-color:rgba(255,255,255,.12); backdrop-filter:blur(14px); padding:18px clamp(20px,5vw,80px); }
.supercars-nav .brand { color:#fff; text-decoration:none; }
.supercars-nav .brand strong { color:var(--accent); }
.supercars-mark { width:48px !important; transform:skew(-10deg); font-style:italic; }
.supercars-hero { min-height:680px; position:relative; display:flex; align-items:center; overflow:hidden; background:linear-gradient(90deg,rgba(70,6,3,.96) 0%,rgba(32,7,6,.75) 37%,rgba(5,5,5,.2) 72%),radial-gradient(circle at 78% 58%,#4f5660 0,#202329 25%,#080808 68%); }
.supercars-hero::before { content:""; position:absolute; inset:auto -7% -27% 38%; height:78%; transform:skewX(-15deg); background:linear-gradient(145deg,transparent 12%,rgba(255,255,255,.12) 13%,transparent 14%),linear-gradient(18deg,#0d0e11 0 28%,#a81410 29% 34%,#20242a 35% 54%,#e5e6e7 55% 62%,#181b20 63%); clip-path:polygon(5% 42%,30% 8%,87% 13%,100% 72%,77% 92%,7% 91%,0 65%); filter:drop-shadow(0 30px 30px #000); opacity:.94; }
.supercars-hero::after { content:"THE BEND"; position:absolute; right:4%; top:5%; color:rgba(255,255,255,.08); font-size:clamp(70px,12vw,190px); font-weight:900; letter-spacing:-.07em; white-space:nowrap; }
.hero-copy { position:relative; z-index:2; width:min(720px,90%); margin-left:clamp(24px,10vw,180px); padding-bottom:80px; }
.event-pill { display:inline-block; padding:9px 13px; background:var(--accent); color:#fff; border-radius:4px; font-size:12px; font-weight:800; letter-spacing:.12em; }
.eyebrow { color:#ffaaa5; font-size:12px; font-weight:800; letter-spacing:.2em; margin:24px 0 6px; }
.hero-copy h1 { margin:0; font-size:clamp(52px,6vw,92px); line-height:.92; letter-spacing:-.055em; text-transform:uppercase; }
.hero-copy h1 span { font-weight:300; color:#f1f1f1; }
.hero-lead { max-width:580px; color:#d4d4d4; font-size:18px; margin:26px 0 30px; }
.hero-actions { display:flex; align-items:center; gap:24px; }
.hero-btn { background:var(--accent); color:white; padding:14px 20px; border-radius:4px; font-weight:800; }
.hero-link { color:white; border-bottom:1px solid white; padding-bottom:3px; font-weight:700; }
.hero-stats { position:absolute; z-index:3; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(6,6,6,.84); backdrop-filter:blur(8px); padding:18px 8%; border-top:1px solid rgba(255,255,255,.14); }
.hero-stats div { display:flex; align-items:baseline; justify-content:center; gap:10px; border-right:1px solid #333; }
.hero-stats div:last-child { border:0; }.hero-stats strong { font:800 28px var(--mono); }.hero-stats span { color:#999; font-size:11px; letter-spacing:.16em; }
.championship-strip { display:flex; justify-content:center; align-items:center; gap:25px; padding:17px; color:#888; border-bottom:1px solid #242424; font-weight:800; font-size:12px; letter-spacing:.16em; }
.championship-strip i { width:4px; height:4px; border-radius:50%; background:var(--accent); }
.feature-shell { max-width:1240px; margin:auto; padding:70px 24px 90px; }.section-heading h2 { font-size:36px; margin:0 0 30px; }.section-heading .eyebrow { color:var(--accent); }
.supercars-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.supercars-card { position:relative; min-height:300px; padding:30px; background:#121212; border:1px solid #292929; color:white; overflow:hidden; transition:.2s ease; }
.supercars-card:hover { transform:translateY(-5px); border-color:var(--accent); text-decoration:none; }.supercars-card.featured { background:linear-gradient(145deg,#7c110e,#e32a22); border-color:#f9564f; }
.supercars-card .card-number { position:absolute; right:18px; top:4px; font-size:80px; font-weight:900; color:rgba(255,255,255,.035); }.supercars-card .tag { color:var(--accent); font:700 11px var(--mono); letter-spacing:.15em; }.supercars-card.featured .tag { color:#fff; }
.supercars-card h3 { font-size:24px; margin:28px 0 14px; }.supercars-card p { color:#9c9c9c; min-height:95px; }.supercars-card.featured p { color:#ffd9d7; }.supercars-card b { font-size:12px; letter-spacing:.1em; }.live-dot { float:right; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; }
.supercars-card.systems-home-card{grid-column:1/-1;min-height:220px;background:linear-gradient(100deg,#121212,#1d1715)}.supercars-card.systems-home-card p{min-height:50px;max-width:780px}
@media(max-width:800px){.supercars-nav{align-items:flex-start!important}.supercars-nav nav{display:none}.supercars-hero{min-height:720px}.hero-copy{margin-left:24px}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats div{margin:5px}.supercars-cards{grid-template-columns:1fr}.supercars-card.systems-home-card{grid-column:auto}.championship-strip{flex-wrap:wrap}.supercars-hero::before{inset:auto -35% 0 20%;opacity:.5}}

/* ============= Data & Systems Engineering ============= */
.systems-layout{background:linear-gradient(180deg,#111319,#0b0d12 420px);min-height:calc(100vh - 62px)}
.systems-banner{display:flex;align-items:flex-end;justify-content:space-between;padding:30px 34px;margin-bottom:18px;border:1px solid #342723;background:linear-gradient(105deg,rgba(244,49,39,.19),transparent 55%),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.012) 19px 20px);border-radius:10px}
.systems-banner h1{font-size:32px;margin:2px 0}.systems-banner p{color:var(--muted);margin:0;max-width:720px}.systems-banner .eyebrow{color:var(--accent);margin:0}.preflight-btn{padding:14px 22px!important;white-space:nowrap}.systems-kpis{display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:18px}.systems-kpis .kpi{min-width:0}.systems-kpis .value{font-size:19px;overflow:hidden;text-overflow:ellipsis}.systems-tabs{display:flex;gap:4px;margin-bottom:18px;background:#10131a;border:1px solid var(--border);padding:5px;border-radius:8px}.systems-tabs .tab-btn{flex:1}.panel-title-row{display:flex;align-items:center;justify-content:space-between}.panel-title-row h2{margin:0}
.check-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border)}.check-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-weight:900;background:#28303c}.check-icon.ready{color:var(--good);background:rgba(34,197,94,.1)}.check-icon.warning{color:var(--warn);background:rgba(245,158,11,.1)}.check-icon.blocked{color:var(--bad);background:rgba(239,68,68,.1)}.check-copy{display:flex;flex:1;flex-direction:column}.check-copy span{font-size:11px;color:var(--muted);margin-top:2px}.mini-action{border:1px solid #71403d;background:#2a1718;color:#ff9b96;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.08em}.systems-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}.systems-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.systems-status.ready,.systems-status.ok,.systems-status.valid,.systems-status.verified,.systems-status.released{color:var(--good)}.systems-status.warning,.systems-status.expired,.systems-status.superseded{color:var(--warn)}.systems-status.blocked,.systems-status.fault,.systems-status.critical,.systems-status.failed{color:var(--bad)}.systems-status.archived{color:#777}
.systems-table-wrap{width:100%;overflow:auto}.systems-table{width:100%;border-collapse:collapse;font-size:12px}.systems-table th{text-align:left;padding:8px 10px;color:#747d91;font-size:10px;letter-spacing:.08em;border-bottom:1px solid var(--border);white-space:nowrap}.systems-table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle}.systems-table small{color:var(--muted)}.systems-table code{color:#a9d8e8;font-size:11px}.delivery{display:inline-block;width:64px;height:5px;background:#2a303b;margin-right:7px;border-radius:4px;overflow:hidden}.delivery span{display:block;height:100%;background:var(--good)}.fault-card{border-left:3px solid var(--warn);background:#1b1d24;padding:13px;margin-bottom:10px}.fault-card.critical{border-color:var(--bad)}.fault-card h3{color:var(--text);margin:8px 0 2px}.fault-card p{color:var(--muted);font-size:12px;margin:3px 0 10px}.fault-card strong{font-size:9px;color:#70798b;letter-spacing:.12em}.empty-state{border:1px dashed var(--border);padding:24px;color:var(--muted);text-align:center}.audit-title{margin-top:24px!important}.audit-log>div{display:grid;grid-template-columns:80px 110px 1fr;gap:8px;padding:8px;border-bottom:1px solid var(--border);font-size:11px}.audit-log time,.audit-log span{color:var(--muted)}.preflight-card{padding:28px;display:flex;flex-direction:column;border-left:4px solid var(--good);background:rgba(34,197,94,.07)}.preflight-card.fail{border-color:var(--bad);background:rgba(239,68,68,.07)}.preflight-card strong{font-size:22px}.preflight-card span{color:var(--muted);margin-top:5px}.good-text{color:var(--good)}
.systems-tabs a.tab-btn{display:grid;place-items:center;text-decoration:none}.transfer-page{padding-bottom:60px}.transfer-grid{grid-template-columns:2fr 1fr!important;margin:18px 0}.panel-subtitle{margin:5px 0 0;color:var(--muted);font-size:12px}.schematic-panel{overflow:hidden}.source-selector{display:flex;gap:6px;margin:18px 0 4px}.source-btn{flex:1;padding:10px;border:1px solid var(--border);border-radius:5px;background:#1b202b;color:#8992a4;font:800 10px var(--mono);letter-spacing:.08em;cursor:pointer}.source-btn.active{border-color:var(--accent);background:rgba(244,49,39,.13);color:#fff}.transfer-schematic{width:100%;min-height:270px;background:#0c0f15;border:1px solid #262c38;border-radius:8px}.schematic-grid path{stroke:#1b202a;stroke-width:1;fill:none}.schematic-node rect,.schematic-node ellipse{fill:#151a23;stroke:#485266;stroke-width:2}.schematic-node path{fill:none;stroke:#aab3c3;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.schematic-node circle{fill:#1f2937;stroke:#22c55e;stroke-width:3}.schematic-node text,.route-label text{fill:#f2f4f8;text-anchor:middle;font:800 13px var(--mono);letter-spacing:.08em}.schematic-node text.sub{fill:#727c90;font-size:9px}.data-line{fill:none;stroke:#f43127;stroke-width:3;stroke-dasharray:9 7;filter:url(#glow)}.active-line.pulse{animation:line-pulse .7s ease}.packet circle{fill:#fff;filter:url(#glow)}@keyframes line-pulse{50%{stroke-width:8;stroke:#fff}}.transfer-dropzone{width:100%;min-height:170px;margin:20px 0 12px;border:1px dashed #495267;border-radius:8px;background:linear-gradient(145deg,rgba(244,49,39,.04),rgba(28,34,45,.45));color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}.transfer-dropzone:hover,.transfer-dropzone.dragging{border-color:var(--accent);background:rgba(244,49,39,.09)}.transfer-dropzone small{color:var(--muted)}.transfer-upload-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(244,49,39,.13);color:var(--accent);font-size:28px}.transfer-file{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#10131a;border:1px solid var(--border);border-radius:6px;font:11px var(--mono)}.transfer-file span{display:flex;flex-direction:column;gap:3px}.transfer-file small,.transfer-file.empty{color:var(--muted)}.transfer-actions{display:flex;gap:8px;margin-top:12px}.transfer-actions .btn:disabled{opacity:.38;cursor:not-allowed}.transfer-progress{height:3px;background:#252b36;margin-top:12px;overflow:hidden}.transfer-progress span{display:block;width:38%;height:100%;background:var(--accent)}.transfer-progress.running span{animation:transfer-progress 1s infinite ease-in-out}@keyframes transfer-progress{from{transform:translateX(-100%)}to{transform:translateX(300%)}}.transfer-result{margin-top:12px}.transfer-result.success,.transfer-result.failed{padding:16px;border-left:3px solid var(--good);background:rgba(34,197,94,.07)}.transfer-result.failed{border-color:var(--bad);background:rgba(239,68,68,.07)}.transfer-result>div{display:flex;gap:28px;margin:12px 0}.transfer-result span{display:flex;flex-direction:column}.transfer-result b{font:800 18px var(--mono)}.transfer-result small{color:var(--muted);font-size:9px}.transfer-result p{color:var(--muted);font-size:11px}.link-status>div{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border)}.link-status span:first-child{display:flex;flex-direction:column}.link-status b{font-size:11px}.link-status small{color:var(--muted);font-size:9px}.pipeline-rule{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:11px}.pipeline-rule b{color:var(--accent-2)}.pipeline-rule span{color:var(--muted)}.download-action{text-decoration:none;white-space:nowrap}.muted-action{color:#60697a;font-size:9px;font-weight:800}
@media(max-width:1100px){.systems-kpis{grid-template-columns:repeat(3,1fr)}.systems-layout .grid[style],.transfer-grid{grid-template-columns:1fr!important}}@media(max-width:700px){.systems-banner{align-items:flex-start;flex-direction:column;gap:20px}.systems-kpis{grid-template-columns:1fr 1fr}.systems-tabs{overflow:auto}.systems-tabs .tab-btn{min-width:140px}.systems-layout{padding:12px}.audit-log>div{grid-template-columns:1fr}.source-selector{display:grid;grid-template-columns:1fr 1fr}.transfer-schematic{min-width:900px}.schematic-panel{overflow:auto}}

/* ============= Persistent configuration ============= */
.settings-layout{min-height:calc(100vh - 60px);background:#0d1016}.settings-hero{display:flex;align-items:flex-end;justify-content:space-between;padding:28px 30px;margin-bottom:18px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(110deg,rgba(244,49,39,.13),transparent 48%)}.settings-hero .eyebrow{color:var(--accent);margin:0}.settings-hero h1{font-size:30px;margin:3px 0}.settings-hero p{color:var(--muted);margin:0}.settings-actions{display:flex;align-items:center;gap:14px}.settings-actions span{font-size:11px;color:var(--muted)}.settings-actions span.dirty{color:var(--warn)}.settings-actions span.saved{color:var(--good)}.settings-shell{display:grid;grid-template-columns:245px minmax(440px,1fr) 270px;gap:18px;align-items:start}.settings-nav{position:sticky;top:86px;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:6px}.settings-nav-item{display:flex;width:100%;gap:11px;padding:11px;border:0;border-radius:6px;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.settings-nav-item:hover,.settings-nav-item.active{background:var(--panel-2);color:var(--text)}.settings-nav-item.active{box-shadow:inset 3px 0 var(--accent)}.settings-nav-item i{display:grid;place-items:center;width:25px;height:25px;border-radius:5px;background:#292f3b;color:var(--accent);font-style:normal;font-weight:800}.settings-nav-item span{display:flex;flex-direction:column}.settings-nav-item b{font-size:12px}.settings-nav-item small{font-size:9px;color:#687084;margin-top:2px}.settings-section{display:none;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:22px}.settings-section.active{display:block}.settings-section-head{display:flex;gap:13px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}.settings-section-head>span{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:rgba(244,49,39,.12);color:var(--accent);font-size:18px;font-weight:800}.settings-section-head h2{margin:0;font-size:18px}.settings-section-head p{margin:2px 0 0;color:var(--muted);font-size:12px}.settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-field{display:flex;flex-direction:column;gap:6px}.setting-field>span{font-size:10px;color:#8c95a9;text-transform:uppercase;letter-spacing:.09em}.setting-field input,.setting-field select{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:10px;font-family:var(--mono)}.setting-field.error input,.setting-field.error select{border-color:var(--bad)}.setting-field>small{color:var(--bad);min-height:14px;font-size:10px}.toggle{display:flex;align-items:center;gap:9px;height:40px}.toggle input{display:none}.toggle span{position:relative;width:39px;height:21px;border-radius:12px;background:#303747;cursor:pointer}.toggle span::after{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;border-radius:50%;background:#8790a2;transition:.15s}.toggle input:checked+span{background:rgba(34,197,94,.3)}.toggle input:checked+span::after{transform:translateX(18px);background:var(--good)}.toggle b{font-size:11px;color:var(--muted)}.settings-health{position:sticky;top:86px;display:grid;gap:14px}.health-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.health-row i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:800;background:rgba(34,197,94,.12);color:var(--good)}.health-row i.bad{color:var(--bad);background:rgba(239,68,68,.12)}.health-row span{display:flex;flex-direction:column}.health-row b{font-size:11px}.health-row small{color:var(--muted);font-size:9px}.config-info code{display:block;overflow-wrap:anywhere;color:var(--accent-2);font-size:10px}.config-info p,.restart-note{color:var(--muted);font-size:11px}.restart-note{border-left:3px solid var(--warn);background:rgba(245,158,11,.07);padding:10px;margin-top:15px}.validation-box{display:flex;justify-content:space-between;border-left:3px solid var(--bad);background:rgba(239,68,68,.09);padding:12px;margin-bottom:14px;color:#ff9797}.validation-box span{font-size:11px}
@media(max-width:1150px){.settings-shell{grid-template-columns:220px 1fr}.settings-health{grid-column:1/-1;position:static;grid-template-columns:1fr 1fr}}@media(max-width:760px){.settings-hero{align-items:flex-start;flex-direction:column;gap:20px}.settings-actions{align-items:stretch;flex-direction:column;width:100%}.settings-shell{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow:auto}.settings-nav-item{min-width:170px}.settings-health{grid-template-columns:1fr}.settings-fields{grid-template-columns:1fr}}

/* ============= Track picker grid ============= */
.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.track-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.track-card:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.track-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.track-card-svg,
.track-card-photo {
  background: #0A0C11;
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 8px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.track-card-svg svg, .track-card-photo svg { width: 100%; height: 100%; }
.track-card-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1.05) contrast(1.05);
}
.track-card-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.track-card-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}

/* ============= Track summary list ============= */
.track-summary {
  margin: 6px 0 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.ts-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: var(--muted);
}
.ts-row strong { color: var(--text); font-family: var(--mono); }

/* ============= Select styled ============= */
.select-f1 {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 13px;
  appearance: none;
}
.select-f1:focus { outline: none; border-color: var(--accent-2); }

/* ============= Live page: big KPIs ============= */
.live-bigvals {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .live-bigvals { grid-template-columns: 1fr 1fr; } }

.big-kpi {
  background: linear-gradient(180deg, #1a1e2a 0%, #14171f 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.big-kpi.big-speed { background: linear-gradient(180deg, #1a0507 0%, #0e1014 100%); border-color: rgba(225,6,0,0.35); }
.big-kpi.big-gear { background: linear-gradient(180deg, #061018 0%, #0e1014 100%); border-color: rgba(0,212,255,0.35); }
.big-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
}
.big-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.05;
  color: #fff;
}
.big-speed .big-value { color: #ff3a30; }
.big-gear .big-value { color: var(--accent-2); font-size: 44px; }
.big-unit { font-size: 14px; color: var(--muted); margin-left: 6px; font-weight: 500; }

.rpm-bar {
  margin-top: 8px;
  height: 6px;
  background: #0a0c11;
  border-radius: 3px;
  overflow: hidden;
}
#rpm-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444 95%);
  transition: width 0.08s linear;
}
#rpm-fill.rpm-red { box-shadow: 0 0 8px var(--accent); }

.drs-off { color: var(--muted); }
.drs-on { color: var(--good); text-shadow: 0 0 10px var(--good); }

/* ============= Live page: pedals ============= */
.pedal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.pedal {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.pedal-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.pedal-bar {
  height: 7px;
  background: #0a0c11;
  border-radius: 4px;
  overflow: hidden;
}
.pedal-fill {
  height: 100%;
  width: 0%;
  transition: width 0.08s linear;
}
.pedal-thr { background: linear-gradient(90deg, #16a34a, #22c55e); }
.pedal-brk { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.pedal-value {
  margin-top: 6px;
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
  font-size: 13px;
}

/* ============= Progress bar (lap distance) ============= */
.progress-row { margin-top: 6px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: var(--mono);
}
.progress-bar {
  height: 5px;
  background: #0a0c11;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.1s linear;
}

/* Live lap delta vs best lap — time turns green when ahead, white when level,
   red when behind. */
.lap-delta { font-family: var(--mono); font-weight: 700; margin-left: 8px; }
.tt-faster { color: #22c55e !important; }
.tt-slower { color: #ef4444 !important; }
.tt-equal  { color: #ffffff !important; }

/* ============= Circuit map (live) ============= */
.circuit-map {
  background: #0A0C11;
  border-radius: 6px;
  padding: 8px;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.circuit-svg { width: 100%; height: 220px; }
.circuit-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* match 1:1 FIA photo */
  max-height: 320px;
  margin: 0 auto;
  display: block;
}
.circuit-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.05);
}
.circuit-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#circuit-dot {
  filter: drop-shadow(0 0 3px rgba(0,212,255,0.9))
          drop-shadow(0 0 1px rgba(0,212,255,1));
  animation: dot-pulse 1.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}
.now-at {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--mono);
}
.now-at-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
}
.now-at-name {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-2);
  letter-spacing: 0.02em;
  transition: opacity 0.15s ease;
}
.track-physics {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ============= Sensitivity bars (YANK 2) ============= */
.sens-bars { margin: 8px 0; }
.sens-row {
  display: grid;
  grid-template-columns: 130px 1fr 140px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.sens-row:last-child { border-bottom: 0; }
.sens-label {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.sens-bar {
  position: relative;
  height: 14px;
  background: #0a0c11;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.sens-center {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.sens-fill {
  position: absolute;
  top: 0; bottom: 0;
}
.sens-fill.bar-pos { background: linear-gradient(90deg, transparent, var(--accent)); }
.sens-fill.bar-neg { background: linear-gradient(270deg, transparent, var(--good)); }
.sens-fill.sens-right { left: 50%; }
.sens-fill.sens-left  { right: 50%; }
.sens-value {
  font-size: 12px;
  text-align: right;
  color: var(--text);
}

/* ============= Per-track offsets ============= */
.track-offsets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.to-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

/* Tabs */
.tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.tab-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.2s ease;
}
.tab-btn:hover { border-color: var(--accent-2); color: var(--text); }
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadein 0.3s ease; }

/* Digital Pit Wall 2026 */
.pitwall-tab-button{border-color:rgba(244,49,39,.45)!important;color:#fff!important;background:linear-gradient(110deg,rgba(244,49,39,.24),transparent)!important}
.pitwall-command{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 4px 18px;border-bottom:1px solid var(--border);margin-bottom:18px}.pitwall-overline,.pitwall-panel-head span{font:700 10px var(--mono);letter-spacing:.18em;color:var(--accent)}.pitwall-command h1{font-size:clamp(28px,4vw,58px);letter-spacing:-.05em;margin:4px 0;line-height:1}.pitwall-command h1 em{font-style:normal;color:var(--accent)}.pitwall-command p{margin:8px 0 0;color:var(--muted);max-width:760px}.pitwall-live{display:grid;grid-template-columns:auto auto;gap:0 9px;align-items:center;font:700 10px var(--mono);letter-spacing:.12em}.pitwall-live i{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 16px var(--good)}.pitwall-live b{color:#fff;font-size:14px}
.pitwall-controls{display:grid;grid-template-columns:1.1fr 1.25fr 1.25fr 1fr auto auto;gap:12px;align-items:end}.pitwall-controls .field{margin:0}.pitwall-controls .btn{height:39px;white-space:nowrap}.pitwall-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.pit-kpi{position:relative;overflow:hidden;padding:16px 18px;background:linear-gradient(145deg,#181d27,#11141b);border:1px solid var(--border);border-left:3px solid var(--accent)}.pit-kpi:after{content:"";position:absolute;width:70px;height:70px;right:-25px;top:-28px;border:1px solid rgba(244,49,39,.18);transform:rotate(45deg)}.pit-kpi span,.pit-kpi small{display:block;color:var(--muted);font:700 10px var(--mono);letter-spacing:.1em}.pit-kpi strong{display:block;font:800 25px var(--mono);margin:5px 0;color:#fff}.pit-kpi small{font-weight:400;letter-spacing:.04em}
.pitwall-main-grid{display:grid;grid-template-columns:minmax(600px,1.7fr) minmax(280px,.65fr);gap:18px}.pitwall-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.pitwall-panel-head h2{margin:2px 0 0!important;color:#fff!important}.pitwall-map-stage{height:520px;position:relative;background:radial-gradient(circle at 50% 50%,#1a202c,#080a0e 70%);border:1px solid #252b37;overflow:hidden}.pitwall-map-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px}.pitwall-map-stage canvas{position:absolute;width:100%;height:100%;inset:0}.pitwall-legend{display:flex;align-items:center;gap:7px;font:10px var(--mono);color:var(--muted)}.pitwall-legend i,.pitwall-legend b{width:28px;height:5px;background:#38bdf8}.pitwall-legend b{background:#f43127}.pitwall-car{position:absolute;width:24px;height:24px;border-radius:50%;display:none;align-items:center;justify-content:center;font:800 10px var(--mono);border:2px solid #fff;transform:translate(-50%,-50%);z-index:3;box-shadow:0 0 16px currentColor}.pitwall-car.car-a{background:#38bdf8;color:#38bdf8}.pitwall-car.car-b{background:#f43127;color:#f43127}.pitwall-cursor-readout{position:absolute;left:12px;bottom:12px;background:rgba(5,7,10,.86);border-left:2px solid var(--accent);padding:7px 10px;color:#ccd2dd;font:11px var(--mono)}.pitwall-replay{display:grid;grid-template-columns:38px 1fr 90px 70px;gap:10px;align-items:center;margin-top:12px}.replay-button{width:36px;height:36px;border:1px solid var(--border);background:var(--panel-2);color:#fff;cursor:pointer}.pitwall-replay input{accent-color:var(--accent);width:100%}.pitwall-replay span{font:12px var(--mono);text-align:center}.webgl-badge{color:#ff8a22;font:800 9px var(--mono);letter-spacing:.12em}.pitwall-legend.thermal i,.pitwall-legend.thermal b{height:7px}.pitwall-legend.thermal i{background:#225cff;box-shadow:12px 0 12px #c92fff}.pitwall-legend.thermal b{background:#fff1a8;box-shadow:-12px 0 12px #ff3b18}
.pitwall-coaching{display:grid;gap:10px;max-height:555px;overflow:auto}.coach-card{padding:13px;border:1px solid var(--border);background:#10141b}.coach-card.good{border-left:3px solid var(--good)}.coach-card.warn{border-left:3px solid var(--warn)}.coach-card.bad{border-left:3px solid var(--bad)}.coach-card b{display:block;font:700 11px var(--mono);letter-spacing:.08em;margin-bottom:5px}.coach-card p{margin:0;color:#aeb6c7;font-size:12px}.coach-card strong{color:#fff}.pitwall-traces-panel,.pitwall-micro-panel{margin-top:18px}.pitwall-traces{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.pitwall-traces>div{height:220px;background:#0b0e14;border:1px solid var(--border);padding:8px}.trace-key{font:11px var(--mono);color:var(--muted)}.trace-key i{display:inline-block;width:18px;height:3px;vertical-align:middle}.trace-key i.a{background:#38bdf8}.trace-key i.b{background:#f43127}.microsector-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.microsector{padding:10px 5px;background:#11151c;border:1px solid var(--border);text-align:center;font:10px var(--mono);cursor:pointer}.microsector b{display:block;font-size:13px;margin-top:3px}.microsector.a-win{border-bottom:3px solid #38bdf8}.microsector.b-win{border-bottom:3px solid #f43127}.microsector:hover{background:#202633}
@media(max-width:1200px){.pitwall-controls{grid-template-columns:repeat(3,1fr)}.pitwall-main-grid{grid-template-columns:1fr}.pitwall-traces{grid-template-columns:1fr}.pitwall-traces>div{height:240px}}@media(max-width:700px){.pitwall-command{align-items:flex-start;gap:18px;flex-direction:column}.pitwall-controls,.pitwall-kpis{grid-template-columns:1fr 1fr}.pitwall-map-stage{height:390px}.microsector-grid{grid-template-columns:repeat(4,1fr)}}