/* ==========================================
   AQUARIUM VOLUME CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* === INTERACTIVE STATES === */
.shape-select:hover { border-color: #cbd5e1; }
.standalone-select:hover { border-color: #cbd5e1; }
.input-field { transition: all 0.2s ease; }
.mode-label { transition: background 0.2s; }

/* === TOOLTIP ANIMATION === */
.mode-tooltip {
    animation: tooltipFade 0.2s ease;
}
@keyframes tooltipFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === RESULT BOX === */
.result-box {
    animation: resultFade 0.3s ease;
}
@keyframes resultFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .aquarium-wrapper { padding: 0 8px; }
    .left-panel, .right-panel { padding: 20px; min-height: auto; }
    .diagram-wrapper { min-height: 220px; }
    .mode-tooltip { margin-left: 0; }
}

@media (min-width: 769px) {
    .left-panel, .right-panel { 
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08); 
        transition: box-shadow 0.3s ease;
    }
}