.container { max-width:1100px; margin:auto; padding:20px; }

.top { display:flex; gap:30px; flex-wrap:wrap; }

.inputs { flex:1; }
.chart-box { flex:1; display:flex; justify-content:center; align-items:center; }

.card {
  background:#fff; padding:15px; border-radius:10px; margin-bottom:15px;
}

label { font-weight:bold; }
.value { float:right; color:#2e7d32; }

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

.result, .table-box {
  background:#fff; padding:20px; border-radius:10px; margin-top:20px;
}

table { width:100%; border-collapse:collapse; }
th, td { padding:8px; border-bottom:1px solid #ddd; text-align:center; }

.toggle {
  display:flex; gap:10px; margin-bottom:10px;
}

.toggle button {
  flex:1; padding:8px; border:none; cursor:pointer;
  border-radius:6px; background:#eee;
}

.toggle .active { background:#4caf50; color:#fff; }