.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}
h2{text-align:center;}

.top{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}
.inputs,.charts{
  flex:1;
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

label{font-weight:bold;}
.slider-value{
  float:right;
  font-weight:bold;
}

input[type=range]{
  width:100%;
  cursor:pointer;
}

.result div{
  margin:8px 0;
  font-size:18px;
}

canvas{
  max-width:280px;
  margin:15px auto;
  display:block;
}

/* Table */
.table-container{
  margin-top:30px;
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:10px;
  text-align:center;
  border-bottom:1px solid #ddd;
}
th{
  background:#4CAF50;
  color:#fff;
}