/* INPUT PANEL STACK */
.input-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

/* INPUT GRID – 4 COL */
.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 16px;
}

/* RESULTS */
.results-box {
  background: #f8fafc;
  padding: 24px;
}

/* SUMMARY GRID */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 24px;
}

.stat-item span {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
}

.stat-item strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

#futureValue {
  color: #2563eb;
}

/* CHART */
#growthChart {
  max-height: 320px;
}

/* EXPANDABLE TABLE */
.year-row.expandable {
  cursor: pointer;
  background: #f8fafc;
}

.year-row.expandable:hover {
  background: #eef2ff;
}

.toggle-icon {
  font-weight: 700;
  margin-right: 6px;
  color: #2563eb;
}

.month-header th {
  background: #f1f5f9;
  font-size: 13px;
  color: #64748b;
}

.month-row td {
  font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .form-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid-2col,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .results-box {
    background: #ffffff;
  }
}