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

html, body {
  background: #ffffff; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a18;
  padding: 20px;
}

h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; color: #222; }
.subtitle { font-size: 0.9rem; color: #73726c; margin-bottom: 1.5rem; }

.controls-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 15px; 
  margin-bottom: 25px; 
}

.ctrl-card { 
  background: #f8f9fa; 
  border-radius: 8px; 
  padding: 1.25rem; 
  border: 1px solid #e9ecef; 
}

.section-label { 
  font-size: 0.75rem; 
  font-weight: 800; 
  text-transform: uppercase; 
  color: #999; 
  margin-bottom: 12px; 
  border-bottom: 1px solid #eee; 
  padding-bottom: 4px; 
}
.ctrl-label { font-size: 0.8rem; color: #444; margin-top: 10px; margin-bottom: 4px; }
.ctrl-row { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; margin-bottom: 8px; }
.ctrl-val { font-weight: 700; min-width: 65px; text-align: right; color: #007BFF; }
input[type=range] { flex: 1; cursor: pointer; }

.main-layout { 
  display: grid; 
  grid-template-columns: 3fr 1fr; 
  gap: 20px; 
  align-items: start;
}

/* FIX: Explicit height and relative positioning for Chart.js */
.chart-box { 
  position: relative;
  background: #fff; 
  border-radius: 12px; 
  padding: 1.5rem; 
  border: 1px solid #dee2e6; 
  height: 550px; /* Adjust this value to your preferred chart height */
}

/* Ensure canvas takes up full container space */
.chart-box canvas {
    width: 100% !important;
    height: 100% !important;
}

.sc-card { 
  background: #fff; 
  border: 1px solid #dee2e6; 
  border-radius: 12px; 
  padding: 1.25rem; 
}

.sc-title { font-weight: 700; border-bottom: 1px solid #eee; margin-bottom: 12px; padding-bottom: 8px; }
.sc-row { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 10px; }

@media (max-width: 1000px) {
  .main-layout { 
    grid-template-columns: 1fr; 
  }
  .chart-box {
      height: 400px;
  }
}

.disabled-ctrl {
    opacity: 0.4;
    pointer-events: none; /* Prevents interaction even if disabled attr fails */
    filter: grayscale(1);
}