*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}



.inv-container{
  max-width:600px;
  margin:50px auto;
  background:#fff;
  padding:35px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  margin-top:0
}

.inv-container h1{
  text-align:center;
  margin-bottom:30px;
}
/*
.inv-form{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.inv-form > div{
  flex:1 1 260px;
  display:flex;
  flex-direction:column;
}
*/
.inv-form label{
  font-weight:600;
  margin-bottom:6px;
}

.inv-form input,
.inv-form select{
  padding:12px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:15px;
}

.inv-btn{
  margin:30px auto 10px;
  display:block;
  padding:14px 30px;
  font-size:16px;
  background:#2e7d32;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:0.3s;
}

.inv-btn:hover{
  background:#1b5e20;
}

.inv-results{
  margin-top:30px;
  padding:25px;
  background:#f1f3f6;
  border-radius:10px;
}

.inv-results div{
  margin-bottom:12px;
  font-size:16px;
}

.inv-highlight{
  font-size:22px;
  font-weight:700;
  color:#2e7d32;
}
.tt-form-row {
  display: flex;
  gap: 20px; /* space between inputs */
  margin-bottom: 15px;
  flex-wrap: wrap; /* makes it responsive */
}

.tt-form-group {
  flex: 1; /* each input takes equal width */
  min-width: 200px; /* ensures it doesn't get too small on mobile */
  display: flex;
  flex-direction: column;
}

.tt-form-group label {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}

.tt-form-group input,
.tt-form-group select {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .tt-form-row {
    flex-direction: column; /* stack on small screens */
  }
}

@media(max-width:768px){
  .inv-form > div{
    flex:1 1 100%;
  }
  .inv-container{
  max-width:95%;
  width:95%;
  margin:20px auto;
  
}
}