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%; }
#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; }
#mean-cursor-line, #theo-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; }
.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; }