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%; }
#compare-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; }
#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; }
.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; }
#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; }