.bnc-chart-panel,
.bnc-perf-chart-wrap,
.bnc-chart-wrap,
.bnc-theme-chart-wrap,
[data-bnc-chart-shell="1"] {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(var(--bnc-primary-rgb), .10);
  background:
    radial-gradient(circle at top right, rgba(var(--bnc-primary-rgb), .10), transparent 42%),
    linear-gradient(180deg, rgba(var(--bnc-primary-rgb), .04), rgba(var(--bnc-accent-rgb), .04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  overflow: hidden;
}

.bnc-chart-panel::before,
.bnc-perf-chart-wrap::before,
.bnc-chart-wrap::before,
.bnc-theme-chart-wrap::before,
[data-bnc-chart-shell="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%);
  opacity: .85;
}

.bnc-perf-chart-wrap,
.bnc-chart-wrap,
.bnc-theme-chart-wrap,
[data-bnc-chart-shell="1"] {
  padding: .7rem;
  min-height: 220px;
}

.bnc-perf-chart-wrap canvas,
.bnc-chart-wrap canvas,
.bnc-theme-chart-wrap canvas,
canvas[data-bnc-chart="1"] {
  position: relative;
  z-index: 1;
}

.bnc-chart-wrap.bnc-chart-wrap-sm,
.bnc-perf-chart-wrap.bnc-perf-chart-wrap-sm {
  min-height: 190px;
}

.card .card-body > [style*="height:"] {
  border-radius: 18px;
}

.card .card-body > [style*="height:"] canvas[data-bnc-chart="1"] {
  min-height: 100%;
}

.bnc-chart-legend-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--bnc-text-soft);
  font-size: .82rem;
}

.bnc-chart-legend-note::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bnc-primary), var(--bnc-accent));
  box-shadow: 0 0 0 4px rgba(var(--bnc-primary-rgb), .10);
}

html[data-bnc-motion="lively"] .bnc-perf-chart-wrap,
html[data-bnc-motion="lively"] .bnc-chart-wrap,
html[data-bnc-motion="lively"] .bnc-theme-chart-wrap,
html[data-bnc-motion="lively"] [data-bnc-chart-shell="1"] {
  animation: bncChartGlow 8s ease-in-out infinite;
}

@keyframes bncChartGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px rgba(var(--bnc-primary-rgb), .10); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 18px 32px rgba(var(--bnc-primary-rgb), .16); }
}

html[data-bnc-motion="none"] .bnc-perf-chart-wrap,
html[data-bnc-motion="none"] .bnc-chart-wrap,
html[data-bnc-motion="none"] .bnc-theme-chart-wrap,
html[data-bnc-motion="none"] [data-bnc-chart-shell="1"] {
  animation: none !important;
}

html[data-theme-mode="dark"] .bnc-chart-panel,
html[data-theme-mode="dark"] .bnc-perf-chart-wrap,
html[data-theme-mode="dark"] .bnc-chart-wrap,
html[data-theme-mode="dark"] .bnc-theme-chart-wrap,
html[data-theme-mode="dark"] [data-bnc-chart-shell="1"] {
  border-color: rgba(var(--bnc-primary-rgb), .18);
  background:
    radial-gradient(circle at top right, rgba(var(--bnc-primary-rgb), .16), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-theme-mode="dark"] .bnc-chart-panel::before,
html[data-theme-mode="dark"] .bnc-perf-chart-wrap::before,
html[data-theme-mode="dark"] .bnc-chart-wrap::before,
html[data-theme-mode="dark"] .bnc-theme-chart-wrap::before,
html[data-theme-mode="dark"] [data-bnc-chart-shell="1"]::before {
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%);
}

html[data-theme-mode="dark"] .bnc-chart-legend-note::before {
  box-shadow: 0 0 0 4px rgba(var(--bnc-primary-rgb), .18);
}

@media (max-width: 767.98px) {
  .bnc-perf-chart-wrap,
  .bnc-chart-wrap,
  .bnc-theme-chart-wrap,
  [data-bnc-chart-shell="1"] {
    padding: .6rem;
    min-height: 200px;
  }
}