.canvas-container { text-align: center; margin-top: 1rem; }
        .coord-canvas { width: 100%; height: auto; background-color: #f8fafc; border: 1px solid #ccc; border-radius: 12px; margin-top: 0.5rem; background-image: radial-gradient(circle, #d4d9df 1px, transparent 1px); background-size: 20px 20px; }
        .legend { display: flex; justify-content: center; gap: 1.5rem; margin: 0.6rem 0; font-size: 0.85rem; }
        .legend-color { width: 16px; height: 16px; display: inline-block; border-radius: 50%; margin-right: 5px; }
        .legend-color.marker { background-color: #e74c3c; border: 2px solid white; box-shadow: 0 0 2px black; }
        .conversion-card { border-left: 5px solid #2c7da0; transition: 0.2s; }
        .conversion-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
        .accuracy-badge { font-size: 0.75rem; background: #f0f0f0; border-radius: 20px; padding: 2px 8px; display: inline-block; margin-left: 10px; }