.dashboard-hero {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--color-primary-soft) 55%, var(--color-surface)) 0%, var(--color-surface) 62%),
    var(--pattern-geo);
  background-size: auto, 40px 40px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.dashboard-hero h1 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.dashboard-hero p { margin: 0.35rem 0 0; color: var(--color-text-muted); }
.quick-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0.25rem 0 1.25rem;
}
.chart-panel {
  min-height: 16rem;
  display: grid;
  gap: 1rem;
}
.chart-canvas {
  width: 100%;
  min-height: 14rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, #fffcf8, #f1ebe3),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgba(26, 61, 43, 0.04) 23px,
      rgba(26, 61, 43, 0.04) 24px
    );
  border: 1px dashed color-mix(in srgb, var(--color-border) 85%, var(--color-primary));
  display: grid;
  place-items: center;
}
.chart-canvas svg { width: 100%; height: auto; max-height: 16rem; }
.activity-list { list-style: none; display: grid; gap: 0.65rem; }
.activity-item {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.925rem;
}
.activity-item:last-child { border-bottom: 0; }
.activity-item time { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.panel-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 960px) {
  .panel-grid.dashboard-main { grid-template-columns: 1.4fr 1fr; }
}