.sales-demo-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-medium);
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.24);
  border-radius: var(--radius-lg);
}

.sales-demo-note i {
  color: var(--primary-dark);
  margin-top: 0.2rem;
}

.sales-demo-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sales-demo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sales-demo-kpi {
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.sales-demo-kpi__label,
.sales-demo-kpi__delta {
  display: block;
  color: var(--text-medium);
  font-size: var(--fs-sm);
}

.sales-demo-kpi__value {
  display: block;
  margin: var(--space-xs) 0;
  color: var(--text-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

.sales-demo-kpi__delta[data-direction="up"] { color: var(--forest-green); }
.sales-demo-kpi__delta[data-direction="down"] { color: var(--error); }

.sales-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.85fr);
  gap: var(--space-xl);
  align-items: start;
}

.sales-demo-panel {
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.sales-demo-panel + .sales-demo-panel { margin-top: var(--space-xl); }

.sales-demo-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.sales-demo-panel__header h2,
.sales-demo-panel__header p { margin: 0; }

.sales-demo-chart {
  width: 100%;
  min-height: 310px;
}

.sales-demo-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sales-demo-chart .grid-line { stroke: var(--sand-beige); stroke-width: 1; }
.sales-demo-chart .axis-label { fill: var(--text-medium); font-size: 12px; }
.sales-demo-chart .area { fill: rgba(6, 182, 212, 0.12); }
.sales-demo-chart .line { fill: none; stroke: var(--primary-dark); stroke-width: 3; }
.sales-demo-chart .point { fill: var(--white); stroke: var(--primary-dark); stroke-width: 2; }

.sales-demo-bars { display: grid; gap: var(--space-lg); }
.sales-demo-bar__header { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); }
.sales-demo-bar__track { height: 0.65rem; overflow: hidden; background: var(--sand-beige); border-radius: var(--radius-full); }
.sales-demo-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--tech-cyan)); border-radius: inherit; transition: width var(--transition-base); }

.sales-demo-insight {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  color: var(--cloud-white);
  background: linear-gradient(135deg, var(--deep-slate), var(--stone-gray));
  border-radius: var(--radius-xl);
}

.sales-demo-insight h2 { color: var(--white); font-size: var(--fs-lg); }
.sales-demo-insight p { margin-bottom: 0; color: var(--sand-beige); }

.sales-demo-table-wrap { overflow-x: auto; }
.sales-demo-table { width: 100%; border-collapse: collapse; }
.sales-demo-table th,
.sales-demo-table td { padding: var(--space-sm); border-bottom: 1px solid var(--sand-beige); text-align: left; }
.sales-demo-table th { color: var(--text-medium); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sales-demo-table td:not(:first-child),
.sales-demo-table th:not(:first-child) { text-align: right; }

@media (max-width: 900px) {
  .sales-demo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-demo-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sales-demo-controls,
  .sales-demo-kpis { grid-template-columns: 1fr; }
  .sales-demo-panel { padding: var(--space-lg); }
  .sales-demo-panel__header { display: block; }
  .sales-demo-panel__header p { margin-top: var(--space-xs); }
  .sales-demo-chart { min-height: 240px; }
}