.wi-container{
  max-width:600px;
  margin:40px auto;
  background:#fff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.wi-title{
  text-align:center;
  font-size:28px;
  font-weight:bold;
  margin-bottom:10px;
}

.wi-subtitle{
  text-align:center;
  margin-bottom:30px;
  color:#666;
}

.wi-row{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.wi-col{
  flex:1;
  min-width:220px;
}

.wi-input{
  width:100%;
  padding:12px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:16px;
}

.wi-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:6px;
  background:#007bff;
  color:#fff;
  font-size:17px;
  cursor:pointer;
  transition:0.3s;
}

.wi-btn:hover{
  background:#0056b3;
}

.wi-result{
  margin-top:60px;
  padding:30px;
  background:#f8f9fa;
  border-radius:10px;
  display:none;
}

.wi-highlight{
  font-size:22px;
  font-weight:bold;
  color:#007bff;
  margin:15px 0;
}

.wi-water-visual{
  width:100%;
  max-width:200px;
  height:300px;
  border:3px solid #007bff;
  border-radius:12px;
  margin:20px auto;
  position:relative;
  overflow:hidden;
}

.wi-water-fill{
  position:absolute;
  bottom:0;
  width:100%;
  background:#00aaff;
  height:0%;
  transition:height 1.5s ease;
}

@media(max-width:768px){
  .wi-row{
    flex-direction:column;
  }
}