/* AquariumCalc Custom Styles */
html { scroll-behavior: smooth; }
.calc-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s;
}
.calc-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; }
.calc-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
}
.calc-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; }
.result-card { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.info-box { background-color: #dbeafe; border-left: 4px solid #3b82f6; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
.warning-box { background-color: #fef3c7; border-left: 4px solid #f59e0b; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
.danger-box { background-color: #fee2e2; border-left: 4px solid #ef4444; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
.success-box { background-color: #d1fae5; border-left: 4px solid #10b981; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
.fish-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-bottom: 1px solid #e5e7eb; transition: background-color 0.2s; }
.fish-item:hover { background-color: #f9fafb; }
.fish-item:last-child { border-bottom: none; }
.stocking-meter { width: 100%; height: 24px; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.stocking-fill { height: 100%; border-radius: 9999px; transition: width 0.5s ease-out, background-color 0.3s; }
.stocking-fill.understocked { background: linear-gradient(90deg, #10b981, #34d399); }
.stocking-fill.optimal { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stocking-fill.moderate { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stocking-fill.overstocked { background: linear-gradient(90deg, #ef4444, #f87171); }
.tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: #1f2937; color: #fff; text-align: center; border-radius: 6px; padding: 8px 12px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; font-size: 0.875rem; }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
.calc-button { width: 100%; padding: 1rem; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; font-weight: 600; font-size: 1.125rem; border: none; border-radius: 0.75rem; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.calc-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); }
.reset-button { padding: 0.75rem 1.5rem; background-color: #f3f4f6; color: #374151; font-weight: 500; border: none; border-radius: 0.5rem; cursor: pointer; }
.reset-button:hover { background-color: #e5e7eb; }