.input-group-custom { margin-bottom: 1rem; }
        .error-note { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 0.5rem 1rem; border-radius: 4px; margin: 1rem 0; }
        .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; }
        .chem-canvas { width: 100%; height: auto; background-color: #fafcfa; border: 1px solid #dde8e4; border-radius: 8px; margin-top: 1.5rem; display: block; }
        .canvas-container { text-align: center; margin-top: 1rem; }
        .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: 2px; }
        .legend-color.teal { background-color: #1a7a6a; }
        .legend-color.orange { background-color: #d97706; }
        .legend-color.gray { background-color: #6c757d; }
        .substance-tag { display: inline-block; background-color: rgba(26, 122, 106, 0.12); border-radius: 4px; padding: 0.2rem 0.6rem; margin: 0.1rem 0.2rem; font-family: 'Courier New', monospace; font-size: 0.95rem; }
        .ratio-badge { font-weight: 600; color: #1a7a6a; font-size: 1.4rem; }
        .bar-container { display: flex; align-items: flex-end; height: 200px; gap: 1.2rem; padding: 1rem 0.5rem; justify-content: center; border-bottom: 2px solid #ccc; margin: 1rem 0; flex-wrap: wrap; }
        .bar-item { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
        .bar { width: 40px; border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 4px; position: relative; }
        .bar-reactant { background-color: #1a7a6a; background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,0.25) 8px, rgba(255,255,255,0.25) 16px); }
        .bar-product { background-color: #d97706; background-image: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(255,255,255,0.25) 8px, rgba(255,255,255,0.25) 16px); }
        .bar-label { margin-top: 6px; font-size: 0.85rem; font-weight: 500; text-align: center; word-break: break-word; max-width: 60px; }
        .bar-value { font-size: 0.75rem; color: #495057; margin-top: 2px; }
        .equation-display { font-size: 1.5rem; font-family: 'Courier New', monospace; background: #f1f5f3; padding: 1rem 1.5rem; border-radius: 8px; text-align: center; margin: 1rem 0; letter-spacing: 1px; }
        .substance-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: center; padding: 0.5rem 0; }
        .substance-item { background: #f8faf9; padding: 0.3rem 0.8rem; border-radius: 20px; border: 1px solid #e0ece7; font-size: 0.95rem; }
        .substance-item .coeff { font-weight: 700; color: #1a7a6a; }
        .substance-item .formula { font-family: 'Courier New', monospace; }
        .arrow-symbol { font-size: 1.8rem; color: #1a7a6a; padding: 0 0.3rem; }
        .tool-header .badge { background-color: #1a7a6a !important; }
        .btn-outline-primary { color: #1a7a6a; border-color: #1a7a6a; }
        .btn-outline-primary:hover { background-color: #1a7a6a; border-color: #1a7a6a; color: #fff; }
        .tool-card .section-title:first-of-type { margin-top: 0; }
        .related-tools-container .nav-link.active, .navbar-brand i { color: #1a7a6a; }
        footer h4 i { color: #1a7a6a; }
        .subscription-form .subscription-form .faq-chem .accordion-button:not(.collapsed) { background-color: rgba(26, 122, 106, 0.08); color: #1a7a6a; }
        .faq-chem .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(26, 122, 106, 0.25); }
        .warning-msg { color: #b02a37; font-weight: 600; }
        @media (max-width: 576px) { .bar-item { min-width: 36px; } .bar { width: 28px; } .bar-label { font-size: 0.7rem; max-width: 40px; } .equation-display { font-size: 1.1rem; padding: 0.6rem 0.8rem; } }