body { overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
header { gap: 20px; }
#main { display: flex; flex: 1; min-height: 0; }
#map { flex: 1; height: 100%; }
#charts, #coasting-charts, #mean-charts, #theoretical-charts { width: 50%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; flex-shrink: 0; }
.chart-row { flex: 1; min-height: 0; position: relative; border-bottom: 1px solid #222; }
.chart-row canvas { width: 100%; height: 100%; display: block; }
.chart-label { position: absolute; top: 4px; left: 8px; font-size: 10px; color: #ccc; pointer-events: none; z-index: 1; }
.chart-range { position: absolute; top: 4px; right: 8px; font-size: 10px; color: #ccc; pointer-events: none; z-index: 1; }
#cursor-line, #coast-cursor-line, #fric-cursor-line, #mean-cursor-line, #theo-cursor-line, #cmp-cursor-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.3); pointer-events: none; display: none; z-index: 2; }
#friction-charts { width: 50%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; flex-shrink: 0; }
.friction-circle-row { flex: 3; }
.cursor-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1px solid #000; pointer-events: none; display: none; z-index: 3; transform: translate(-4px, -4px); }
.cursor-label { position: absolute; font-size: 10px; color: #fff; background: #000; padding: 1px 4px; border-radius: 2px; pointer-events: none; display: none; z-index: 3; white-space: nowrap; }
#all-laps-table { width: 100%; height: 100%; overflow-y: auto; overflow-x: auto; }
#all-laps-table table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: monospace; }
#all-laps-table th { position: sticky; top: 0; background: #1a1a1a; color: #aaa; font-weight: 600; text-align: right; padding: 6px 10px; border-bottom: 2px solid #333; }
#all-laps-table td { text-align: right; padding: 4px 10px; border-bottom: 1px solid #222; color: #ccc; }
#all-laps-table tr:hover td { background: #1a1a1a; }
#all-laps-table tr.best-lap td { color: #4f4; }
#progress-chart { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 50px; }
#progress-chart canvas { width: 100%; height: 100%; }
#compare-row-a, #compare-row-b { padding: 6px 16px; display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid #333; flex-shrink: 0; }
#compare-row-a .stat, #compare-row-a .stat b { color: #ff4444; }
#compare-row-b .stat, #compare-row-b .stat b { color: #44ff44; }
#compare-row-a select { background: #222; border: 1px solid #555; border-radius: 4px; padding: 3px 6px; font-size: 12px; font-family: inherit; cursor: pointer; color: #ff4444; }
#compare-row-b select { background: #222; border: 1px solid #555; border-radius: 4px; padding: 3px 6px; font-size: 12px; font-family: inherit; cursor: pointer; color: #44ff44; }
#compare-charts { width: 50%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; flex-shrink: 0; }