.progress-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem .75rem; align-items: center; font-size: .875rem; }
.progress-row .bar { grid-column: 1 / -1; height: 10px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
@media (min-width: 640px) { .progress-row { grid-template-columns: 12rem 1fr auto; } .progress-row .bar { grid-column: auto; } }
.progress-row .fill { height: 100%; background: #0f172a; border-radius: 9999px; transition: width .4s ease; }
.progress-row.water .fill { background: #0284c7; }