.as-analytics-grid{
	--as-analytics-accent: #00ff96;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 22px;
	align-items: stretch;
	direction: rtl;
}
.as-analytics-card{
	border-radius: 20px;
	padding: 26px 24px;
	border: 1px solid rgba(255,255,255,.07);
	background: linear-gradient(160deg,#0a0a0a,#0b0b0f);
	display: flex;
	flex-direction: column;
}
.as-analytics-card h3{ font-size: 15px; font-weight: 700; margin: 0 0 18px; color: #f4f2ec; }

.as-line-svg{ width: 100%; height: auto; overflow: visible; }
.as-line-grid line{ stroke: rgba(255,255,255,.06); stroke-dasharray: 3 5; }
.as-line-area{ opacity: .55; }
.as-line-path{
	fill: none; stroke: var(--as-analytics-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--as-analytics-accent) 55%, transparent));
	stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease;
}
.as-line-path.as-in-view{ stroke-dashoffset: 0; }
.as-line-dot{ fill: var(--as-analytics-accent); opacity: 0; transition: opacity .4s ease .9s; }
.as-line-path.as-in-view ~ .as-line-dot{ opacity: 1; }
.as-line-labels{ display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: #93919c; }

.as-donut-card{ align-items: center; text-align: center; }
.as-donut-wrap{ position: relative; width: 150px; height: 150px; margin: 0 auto 18px; }
.as-donut{ width: 100%; height: 100%; transform: rotate(-90deg); }
.as-donut-bg{ fill: none; stroke: rgba(255,255,255,.06); stroke-width: 14; }
.as-donut-seg{ fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray 1.4s ease; }
.as-donut-center{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.as-donut-center strong{ font-size: 22px; font-weight: 800; color: var(--as-analytics-accent); direction: ltr; }
.as-donut-center span{ font-size: 10.5px; color: #93919c; margin-top: 2px; }
.as-donut-legend{ text-align: right; width: 100%; list-style: none; margin: 0; padding: 0; }
.as-donut-legend li{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #93919c; margin-bottom: 8px; }
.as-donut-legend .as-dot{ width: 9px; height: 9px; border-radius: 50%; flex: none; }

.as-bars-card{ justify-content: center; gap: 14px; }
.as-bar-row{ display: flex; align-items: center; gap: 10px; }
.as-bar-row span{ flex: none; width: 52px; font-size: 11.5px; color: #93919c; direction: ltr; text-align: left; }
.as-bar-track{ flex: 1; height: 9px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.as-bar-fill{
	height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--as-analytics-accent), color-mix(in srgb, var(--as-analytics-accent) 60%, white));
	transition: width 1.2s ease;
}
.as-bar-fill.as-in-view{ width: var(--w); }

@media (max-width: 1100px){
	.as-analytics-grid{ grid-template-columns: 1fr 1fr; }
	.as-analytics-card:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
	.as-analytics-grid{ grid-template-columns: 1fr; }
}