.dn-chart-shell {
	--dn-primary: #05509c;
	--dn-secondary: #2586db;
	--dn-text: #475569;
	--dn-border: #eaf4ff;
	--dn-surface: #ffffff;
	--dn-muted-surface: #f5faff;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.dn-chart-shell *,
.dn-chart-shell *::before,
.dn-chart-shell *::after {
	box-sizing: border-box;
}

.dn-chart-content {
	position: relative;
	width: 100%;
	min-width: 0;
}

.dn-chart-post-header {
	margin: 0 0 18px;
}

.dn-chart-post-title {
	margin: 0 0 10px;
	color: #073b70;
	font: 700 28px/1.25 Inter, Arial, sans-serif;
}

.dn-chart-post-description {
	margin: 22px 0 0;
	color: var(--dn-text);
	font: 400 15px/1.55 Inter, Arial, sans-serif;
}

.dn-chart-post-description > :first-child { margin-top: 0; }
.dn-chart-post-description > :last-child { margin-bottom: 0; }

.dn-chart-content img,
.dn-chart-content svg,
.dn-chart-content canvas {
	max-width: 100%;
}

.dn-chart-error {
	padding: 12px 16px;
	border: 1px solid #fecaca;
	background: #fef2f2;
	color: #991b1b;
}

.dn-chart-toast {
	position: fixed;
	z-index: 100000;
	right: 20px;
	bottom: 20px;
	max-width: min(360px, calc(100vw - 40px));
	padding: 11px 15px;
	border-radius: 8px;
	background: #1d2327;
	color: #ffffff;
	font: 500 14px/1.4 Inter, Arial, sans-serif;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 160ms ease, transform 160ms ease;
	pointer-events: none;
}

.dn-chart-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}