@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #05070c;
  --bg-1: #0a0e17;
  --panel: #0d121d;
  --panel-2: #121a29;
  --panel-3: #18233a;
  --line: #1f2a40;
  --line-2: #2b3956;
  --text: #e6ecf7;
  --text-2: #a3b0c8;
  --text-3: #66738d;
  --accent: #e10600;          /* race-control red */
  --accent-2: #ff3b30;
  --green: #00d26a;
  --yellow: #ffd400;
  --red: #ff2d2d;
  --sc: #ffb000;
  --blue: #2f7bff;
  --purple: #b44cff;
  --pb: #19e36a;
  --orange: #ff8a00;
  --white: #f5f7fb;
  --font: 'Titillium Web', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r: 6px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Panel chrome used by every view */
.rc-panel { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.rc-panel > .rc-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: var(--text-2); flex: none; }
.rc-panel > .rc-head::before { content: ''; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }
.rc-panel > .rc-head .sp { flex: 1; }
.rc-panel > .rc-body { flex: 1; min-height: 0; overflow: auto; position: relative; }

.btn { appearance: none; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); padding: 6px 12px; border-radius: 5px; font-weight: 600; font-size: 12.5px; letter-spacing: .03em; cursor: pointer; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: var(--panel-3); border-color: #3c4d73; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); }
.btn.yellow { background: #3a3000; border-color: var(--yellow); color: var(--yellow); }
.btn.sc { background: #3a2700; border-color: var(--sc); color: var(--sc); }
.btn.red { background: #3a0606; border-color: var(--red); color: #ff6b6b; }
.btn.green { background: #00341b; border-color: var(--green); color: var(--green); }
.btn.blue { background: #0a1f45; border-color: var(--blue); color: #7aa8ff; }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; }

.tyre { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; font: 700 9px var(--mono); color: var(--text); background: #111; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #243150; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes rc-blink { 50% { opacity: .25; } }
.blink { animation: rc-blink 1s steps(2) infinite; }