:root {
      --ink: #f7f2dc;
      --muted: #9fa9b5;
      --panel: #111821;
      --panel-2: #182331;
      --line: #334454;
      --red: #ff4f51;
      --cyan: #4de1df;
      --yellow: #ffd45e;
      --green: #69ed82;
      --pink: #ff73dc;
      --shadow: rgba(0, 0, 0, .38);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% -20%, #26394d 0, transparent 42%),
        #080b10;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }
    body.motogp-demo {
      background:
        radial-gradient(circle at 50% -20%, #4a2f1d 0, transparent 42%),
        #080b10;
    }
    body.motogp-demo .pixel-mark { color: #071016; background: #ff8b35; }
    body.motogp-demo .demo-badge,
    body.motogp-demo .live-state { color: #ffb15e; }
    button, select { font: inherit; }
    .app { max-width: 1500px; margin: 0 auto; padding: 18px; }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .pixel-mark {
      width: 42px; height: 42px; display: grid; place-items: center;
      color: #071016; background: var(--yellow); border: 3px solid #111;
      box-shadow: 4px 4px 0 #000; font-weight: 900; font-size: 19px;
    }
    h1 { font-size: 18px; letter-spacing: .08em; margin: 0; }
    .sub { color: var(--muted); font-size: 11px; margin-top: 3px; }
    .demo-badge { color: #0e1217; background: var(--yellow); padding: 7px 9px; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .calendar-open { color: var(--cyan); background: #111d29; border-color: #3f5b70; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
    .calendar-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(2, 5, 9, .88); backdrop-filter: blur(4px); }
    .calendar-overlay[hidden] { display: none; }
    .calendar-modal { width: min(1180px, 96vw); max-height: 91vh; overflow: auto; padding: 16px; background: linear-gradient(180deg, #162230, #090e14); border: 1px solid #486174; box-shadow: 0 30px 100px rgba(0,0,0,.72); }
    .calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
    .calendar-head h2 { margin: 0; color: var(--cyan); font-size: 17px; letter-spacing: .08em; }
    .calendar-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
    .calendar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .race-card { min-height: 96px; padding: 10px; text-align: left; border-color: #304457; background: #101923; }
    .race-card:hover { background: #162535; }
    .race-card.ready { border-color: var(--green); }
    .race-card.demo { border-color: #a68b38; }
    .race-card.cancelled { border-color: #bb5660; opacity: .88; }
    .race-card.selected { color: #091116; background: var(--yellow); border-color: var(--yellow); }
    .race-round { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .08em; }
    .race-card.selected .race-round { color: #25414b; }
    .race-name { display: block; margin-top: 7px; font-size: 12px; font-weight: 900; }
    .race-meta { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
    .race-card.selected .race-meta { color: #4e5149; }
    .race-data-state { display: inline-block; margin-top: 8px; padding: 2px 5px; color: #111; background: #6d7985; font-size: 8px; font-weight: 900; }
    .race-card.ready .race-data-state { background: var(--green); }
    .race-card.demo .race-data-state { background: var(--yellow); }
    .race-card.cancelled .race-data-state { color: #fff; background: #9a3e4b; }
    .race-card.selected .race-data-state { background: #111; color: var(--yellow); }
    .calendar-status { min-height: 30px; margin-top: 12px; padding: 8px 10px; color: var(--muted); background: #080d13; border-left: 3px solid #405465; font-size: 10px; }
    .calendar-status.ready { color: var(--green); border-left-color: var(--green); }
    .large-view-overlay { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 9, .82); backdrop-filter: blur(3px); }
    .large-view-overlay[hidden] { display: none; }
    .large-view-modal { width: min(1220px, 94vw); max-height: 92vh; padding: 12px; background: linear-gradient(180deg, #182634, #090e14); border: 1px solid #486174; box-shadow: 0 30px 100px rgba(0,0,0,.76); }
    .large-view-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .large-view-title { color: var(--cyan); font-size: 12px; letter-spacing: .1em; }
    .large-view-note { margin-top: 3px; color: var(--muted); font-size: 9px; }
    .large-view-close { color: var(--yellow); border-color: #6b633c; background: #171a1c; font-size: 10px; font-weight: 900; }
    #largeRaceCanvas { width: 100%; max-height: calc(92vh - 76px); aspect-ratio: 8 / 5; object-fit: contain; image-rendering: pixelated; }
    #largeRaceCanvas.dual { aspect-ratio: 16 / 5; }
    #largeRaceCanvas.quad { aspect-ratio: 8 / 5; }
    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
    .screen-shell, .panel {
      background: linear-gradient(180deg, rgba(25, 35, 48, .96), rgba(12, 17, 24, .96));
      border: 1px solid var(--line); box-shadow: 0 18px 55px var(--shadow);
    }
    .screen-shell { padding: 12px; }
    .screen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
    .screen-title { font-size: 12px; color: var(--cyan); letter-spacing: .1em; }
    .screen-note { color: var(--muted); font-size: 10px; text-align: right; }
    .session-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
    .session-strip button { padding: 6px 9px; font-size: 9px; letter-spacing: .06em; }
    .session-strip button.session-active { color: #091116; background: var(--yellow); border-color: var(--yellow); font-weight: 900; }
    .phase-controls { display: none; align-items: center; gap: 5px; margin-left: 5px; padding-left: 10px; border-left: 1px solid var(--line); }
    .phase-controls.visible { display: flex; }
    .phase-controls button.phase-active { color: #091116; background: var(--cyan); border-color: var(--cyan); font-weight: 900; }
    .qualifying-dual-controls { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; padding: 7px 8px; background: #0a1017; border: 1px solid #2b3d4c; }
    .qualifying-dual-controls[hidden] { display: none; }
    .qualifying-dual-controls span { margin-right: auto; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
    .qualifying-dual-controls button { padding: 6px 9px; font-size: 9px; }
    .qualifying-dual-controls button.active { color: #091116; background: var(--cyan); border-color: var(--cyan); font-weight: 900; }
    .live-state { margin-left: auto; color: var(--green); font-size: 9px; letter-spacing: .07em; }
    .live-state.waiting { color: var(--yellow); }
    canvas {
      display: block; width: 100%; height: auto; image-rendering: pixelated;
      background: #3d83ed; border: 4px solid #090d12;
    }
    .view-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .view-grid.dual-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .view-grid.quad-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .view-pane { min-width: 0; }
    .view-pane[hidden], .compare-select[hidden] { display: none; }
    .view-pane-label { display: none; padding: 5px 8px; color: var(--cyan); background: #080d13; border: 1px solid #263746; border-bottom: 0; font-size: 9px; letter-spacing: .07em; }
    .view-grid.dual-active .view-pane-label, .view-grid.quad-active .view-pane-label { display: block; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    button, select {
      border: 1px solid #43566c; color: var(--ink); background: #162231;
      padding: 8px 10px; cursor: pointer; border-radius: 0;
    }
    button:hover, select:hover { border-color: var(--cyan); }
    button.active { color: #091116; background: var(--cyan); border-color: var(--cyan); font-weight: 900; }
    button.play { color: #0c1512; background: var(--green); border-color: var(--green); font-weight: 900; }
    button.sound { color: var(--cyan); border-color: #3f6471; background: #101d27; font-weight: 900; }
    button.sound.active { color: #091116; background: var(--yellow); border-color: var(--yellow); }
    button.export { color: #0b1017; background: var(--yellow); border-color: var(--yellow); font-weight: 900; }
    button.export.recording { color: #fff; background: var(--red); border-color: var(--red); }
    button.large-view-open { color: var(--cyan); border-color: #3f6471; background: #11202a; font-weight: 900; }
    button:disabled { cursor: wait; opacity: .78; }
    .export-status { align-self: center; min-width: 82px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }
    .export-status.ready { color: var(--green); }
    .export-status.error { color: var(--red); }
    .controls .spacer { flex: 1; }
    .range { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
    .sound-volume { padding: 0 3px; }
    .sound-volume input[type="range"] { width: 68px; }
    .sound-volume span { min-width: 30px; color: var(--yellow); }
    input[type="range"] { accent-color: var(--cyan); width: 100px; }
    .timeline { margin-top: 10px; padding: 9px 11px 8px; background: #0a1017; border: 1px solid #2b3d4c; }
    .timeline-head, .timeline-scale { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .timeline-head { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
    .timeline-head strong { color: var(--ink); font-size: 11px; letter-spacing: 0; }
    .race-status { min-width: 72px; color: #091116; background: var(--green); padding: 3px 6px; text-align: center; font-weight: 900; }
    .race-status.red { background: var(--red); color: #fff; }
    .race-status.finished { background: var(--yellow); }
    .race-status.break { background: #708091; color: #fff; }
    #timeline { width: 100%; margin: 8px 0 4px; cursor: ew-resize; }
    .timeline-scale { color: #68798a; font-size: 8px; }
    .timeline-scale span:nth-child(2) { color: var(--cyan); font-size: 9px; font-weight: 900; }
    .panel { padding: 12px; }
    .panel + .panel { margin-top: 14px; }
    .section-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; font-size: 11px; letter-spacing: .08em; }
    .section-title span:last-child { color: var(--muted); font-size: 9px; }
    .driver-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .driver-picker button { padding: 7px 3px; font-size: 10px; }
    .driver-picker button.selected { color: #091116; background: var(--yellow); border-color: var(--yellow); font-weight: 900; }
    .driver-picker button[data-slot] { position: relative; padding-left: 14px; }
    .driver-picker button[data-slot]::before { content: attr(data-slot); position: absolute; left: 3px; top: 3px; font-size: 7px; color: rgba(9, 17, 22, .72); }
    .driver-picker button.slot-2 { background: var(--cyan); border-color: var(--cyan); }
    .driver-picker button.slot-3 { background: var(--green); border-color: var(--green); }
    .driver-picker button.slot-4 { background: var(--pink); border-color: var(--pink); }
    .driver-picker button.next-slot { outline: 2px solid #fff; outline-offset: 1px; }
    .leaderboard { width: 100%; border-collapse: collapse; font-size: 10px; }
    .leaderboard th { color: var(--muted); font-weight: 400; text-align: left; padding: 5px 3px; border-bottom: 1px solid var(--line); }
    .leaderboard td { padding: 6px 3px; border-bottom: 1px solid rgba(51, 68, 84, .45); white-space: nowrap; }
    .leaderboard tr.focus { background: rgba(255, 212, 94, .13); color: var(--yellow); }
    .driver-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; }
    .tyre { font-weight: 900; }
    .tyre-S { color: #ff5757; }
    .tyre-M { color: #ffd45e; }
    .tyre-H { color: #f5f5f5; }
    .commentary { color: #d6e5ee; min-height: 48px; line-height: 1.55; font-size: 11px; padding: 9px; background: #0b1017; border-left: 3px solid var(--red); }
    .footer { color: #778797; font-size: 10px; margin-top: 12px; line-height: 1.6; }
    @media (max-width: 900px) {
      .layout { grid-template-columns: 1fr; }
      .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      .panel + .panel { margin-top: 0; }
      .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .view-grid.dual-active, .view-grid.quad-active { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 580px) {
      .app { padding: 10px; }
      .side { display: block; }
      .panel + .panel { margin-top: 10px; }
      .topbar { align-items: flex-start; }
      .top-actions { flex-direction: column-reverse; align-items: flex-end; }
      .demo-badge { font-size: 9px; }
      .calendar-grid { grid-template-columns: 1fr; }
      .large-view-overlay { padding: 8px; }
      .large-view-modal { width: 98vw; padding: 8px; }
    }
    .bootstrap-error { max-width: 680px; margin: 18vh auto; padding: 24px; border: 2px solid #ff5964; background: #080d13; color: #f7f2dc; font: 900 16px monospace; }