/* ==========================================
   MEAN CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* Hover States */
.number-input:hover { border-color: #cbd5e1; }

/* Focus Transitions */
.number-input { transition: all 0.2s ease; }

/* Primary Result Transitions */
.primary-result { transition: all 0.3s ease; }

/* Formula Box (Compact, single unified background) */
.formula-box { 
    animation: fadeIn 0.3s ease; 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 10px; 
    padding: 12px 16px; 
    margin-bottom: 10px; 
}
.formula-box h3 { 
    font-size: 0.8125rem; 
    font-weight: 700; 
    color: #5b21b6; 
    margin-bottom: 4px; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}
.formula-box .formula-container { 
    text-align: center; 
    margin-bottom: 4px; 
    padding: 4px 0; 
    background: transparent; 
    font-size: 1.125rem; 
}
.formula-box .parameters { 
    font-size: 0.75rem; 
    color: #475569; 
    line-height: 1.4; 
    text-align: center; 
}
.formula-box .parameters strong { 
    color: #5b21b6; 
    font-weight: 600; 
}

/* Metric Card Animation */
.metric-card { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Steps Box Animation */
.steps-box { animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .number-input { min-height: 150px; font-size: 0.9375rem; }
    .formula-box .formula-container { font-size: 1rem; }
    .formula-box .parameters { font-size: 0.75rem; }
}