.example-btn:hover, .example-btn:focus { background:rgba(0,120,80,0.18); transform:translateY(-2px); outline:2px solid #007850; outline-offset:1px; }
        .input-group-custom { margin-bottom:1rem; }
        .result-value.blue { color:#0d6efd; }
        .warning-note.extreme-rate { background:#f8d7da; border-color:#f5c6cb; color:#721c24; }
        .deep-dive { margin:1.8rem 0; }
        .deep-dive p { text-align:justify; }
        .unit-note { font-size:0.9rem; color:#6c757d; }
        .coord-input { margin-bottom:0.5rem; }
        .geometry-canvas { width:100%; height:auto; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; margin-top:1.5rem; display:block; touch-action:none; cursor:crosshair; }
        .canvas-container { text-align:center; margin-top:1rem; position:relative; }
        #chartHoverInfo { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.8); color:#fff; padding:6px 14px; border-radius:20px; font-size:0.85rem; pointer-events:none; opacity:0; transition:opacity 0.2s ease; white-space:nowrap; z-index:10; font-weight:500; letter-spacing:0.3px; }
        #chartHoverInfo.visible { opacity:1; }
        .legend { display:flex; justify-content:center; gap:2rem; margin:0.5rem 0; font-size:0.9rem; flex-wrap:wrap; }
        .legend-item { display:flex; align-items:center; gap:0.3rem; }
        .legend-color { width:16px; height:16px; border-radius:50%; display:inline-block; }
        .legend-color.green { background:#007850; }
        .legend-color.blue { background:#0d6efd; }
        .legend-color.gray { background:#6c757d; }
        .legend-color.orange { background:#e67e22; }
        .result-breakdown { margin-top:1.5rem; padding:1rem; background:#f8f9fa; border-radius:6px; max-height:200px; overflow-y:auto; }
        .result-breakdown::-webkit-scrollbar { width:6px; height:6px; }
        .result-breakdown::-webkit-scrollbar-track { background:#f1f1f1; border-radius:3px; }
        .result-breakdown::-webkit-scrollbar-thumb { background:#007850; border-radius:3px; }
        .result-breakdown::-webkit-scrollbar-thumb:hover { background:#005f3e; }
        .result-breakdown table { width:100%; font-size:0.9rem; }
        .result-breakdown th, .result-breakdown td { padding:0.3rem 0.5rem; border-bottom:1px solid #eee; }
        .result-breakdown th { background:#f0f0f0; position:sticky; top:0; z-index:2; }
        .badge-compound { background:#007850; color:#fff; padding:0.2rem 0.6rem; border-radius:12px; font-size:0.75rem; font-weight:600; }
        .rate-display { font-size:1.1rem; } 
        .btn-outline-primary { color:#007850; border-color:#007850; }
        .btn-outline-primary:hover { background:#007850; border-color:#007850; color:#fff; } 
        .chart-hover-dot { display:none; }
        @media (max-width:576px) { #chartHoverInfo { font-size:0.7rem; padding:4px 10px; top:5px; } }