/* ==========================================
GRAVITATIONAL FORCE CALCULATOR - NON-CRITICAL CSS
========================================== */
.mode-dropdown:hover { border-color: #8b5cf6; }
.mode-dropdown:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }
.formula-display .katex { font-size: 1.4rem; }
.formula-param-symbol { font-family: 'KaTeX_Math', serif; }
.g-constant-header:hover { background: #f1f5f9; }
.g-constant-toggle { transition: transform 0.3s; }
.g-constant-collapsible.expanded .g-constant-toggle { transform: rotate(90deg); }
.g-constant-content { transition: max-height 0.3s ease; }
.g-constant-collapsible.expanded .g-constant-content { max-height: 300px; }
.g-constant-field input:focus { outline: none; }
.g-constant-help { transition: opacity 0.2s; }
.g-constant-help.visible { display: block; }
.input-field input.result-input { font-weight: 600; color: #5b21b6; }
.custom-select-trigger::after { content: '▼'; font-size: 0.6rem; color: #94a3b8; margin-left: 4px; }
.custom-options { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); max-width: 360px; }
.custom-option { transition: background 0.2s; overflow: hidden; text-overflow: ellipsis; }
.custom-option:hover { background: #f5f3ff; color: #5b21b6; }
.custom-option.selected { background: #ede9fe; font-weight: 600; color: #5b21b6; }
.input-help { transition: opacity 0.2s; }
.input-help.visible { display: block; }

/* New Result Equivalent Display */
.result-equivalent {
    font-size: 0.8125rem;
    color: #64748b;
    font-family: 'Courier New', monospace;
    margin-top: 6px;
    padding: 0 4px;
    word-break: break-all;
}

@media (min-width: 769px) {
.left-panel, .right-panel { padding: 24px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08); }
}
@media (max-width: 768px) {
.gf-calc-wrapper { padding: 0 8px; }
.left-panel, .right-panel { padding: 20px; min-height: auto; }
}
.related-calculators-grid a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: white;
border: 1px solid #f1f5f9;
border-radius: 10px;
text-decoration: none;
color: #1e293b;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.related-calculators-grid a:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}