.hydro-input-section { background: var(--mm-bg-light); padding: 16px; border-radius: var(--mm-radius); border: 1px solid var(--mm-border-light); margin-bottom: 20px; }
.hydro-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.hydro-row:last-child { margin-bottom: 0; }
.hydro-col { flex: 1 1 calc(50% - 15px); min-width: 140px; }
.hydro-col label { display: block; font-size: 0.95em; margin-bottom: 6px; color: var(--mm-text-heading); font-weight: 600; }
.hydro-col label small { font-weight: normal; font-size: 0.85em; color: var(--mm-text-muted); display: block; margin-top: 2px; }
.hydro-col input { width: 100%; padding: 10px; border: 1px solid var(--mm-border-input); border-radius: var(--mm-radius); box-sizing: border-box; font-family: inherit; font-size: 0.95em; color: var(--mm-text-dark); }
.hydro-col input:focus { outline: 2px solid var(--mm-primary); border-color: transparent; }
.hydro-result-box { background: #ffffff; padding: 20px; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); text-align: center; font-size: 1em; color: var(--mm-text-dark); }
.hydro-result-box span { font-size: 2.5em; font-weight: bold; color: var(--mm-primary); display: block; margin-top: 5px; line-height: 1.1; }
@media (max-width: 600px) { .hydro-row { flex-direction: column; gap: 10px; } .hydro-col { flex: 1 1 100%; } }