.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.gauge-area {
background: #dfe6e9;
border-radius: 8px;
height: 280px;
position: relative;
overflow: hidden;
border: 1px solid #b2bec3;
}
.water-layer {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to top, #0984e3, #74b9ff);
transition: height 1.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.controls { display: flex; flex-direction: column; gap: 20px; }
.input-group label { 
font-size: 0.75rem; 
font-weight: 700; 
color: #636e72;
text-transform: uppercase;
}
input, select {
width: 100%;
padding: 12px;
border-radius: 4px;
border: 1px solid #ced4da;
margin-top: 6px;
background: white;
}
.summary {
margin-top: 30px;
padding: 20px;
background: #f1f2f6;
border-radius: 8px;
border-left: 6px solid #636e72;
color: #636e72;
}
.big-num { font-size: 1.8rem; color: red; font-weight: 800; }
.note1 { font-size: 0.85rem; margin-top: 10px; color: #636e72; font-style: italic; }