.fd-container{max-width:1000px;margin:auto;padding:20px}
.top-section{display:flex;gap:30px;flex-wrap:wrap}
.fd-inputs{flex:1}
.fd-chart{flex:1;display:flex;justify-content:center;align-items:center;max-width:230px;margin:auto}

label{display:block;margin-top:15px;font-weight:600}
input[type=range], select{width:100%}
.value{font-weight:bold;margin-top:5px}

.results-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.box {
  background: #f5f7fa;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
}

.box p {
  font-size: 14px;
  margin-bottom: 6px;
  color: #666;
}

.box h3 {
  font-size: 18px;
  font-weight: 600;
}

table{width:100%;border-collapse:collapse;min-width:600px}
th,td{padding:10px;border-bottom:1px solid #ddd}
th{background:#f5f7fa}

.toggle{display:flex;gap:10px;margin-bottom:20px}
.toggle button{flex:1;padding:10px;border:none;border-radius:8px;background:#eee;cursor:pointer}
.toggle button.active{background:#00b386;color:#fff}

.table-wrapper{overflow-x:auto}
.line-chart{margin-top:40px}

@media(max-width:768px){
.top-section{flex-direction:column}
.results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .box h3 {font-size:16px;}
}