/* SVG Circle Progress */
.circle-progress-container { position: relative; width: 120px; height: 120px; margin: 0 auto 1rem; }
.circle-progress-bg { fill: none; stroke: var(--border-subtle); stroke-width: 8; }
.circle-progress-bar { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1); }
.circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 800; color: var(--primary); }

/* Bar Chart */
.bar-chart-container { display: flex; align-items: flex-end; justify-content: center; height: 120px; gap: 10px; margin-bottom: 1rem; }
.bar { width: 20px; background: var(--primary); border-radius: 4px 4px 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.bar:nth-child(1) { height: 60%; transition-delay: 0.1s; opacity: 0.6; }
.bar:nth-child(2) { height: 80%; transition-delay: 0.2s; opacity: 0.8; }
.bar:nth-child(3) { height: 100%; transition-delay: 0.3s; opacity: 1; }

/* Line Graph */
.line-graph-container { height: 120px; margin-bottom: 1rem; position: relative; }
.line-path { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-in-out; }
.line-point { fill: var(--primary); r: 4; opacity: 0; transition: opacity 0.5s ease-in-out 1.5s; }

/* Donut Chart */
.donut-chart { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1rem; background: conic-gradient(var(--primary) 0deg, var(--border-subtle) 0deg); display: flex; align-items: center; justify-content: center; position: relative; transition: --angle 2s; }
.donut-inner { width: 90px; height: 90px; background: white; border-radius: 50%; position: absolute; z-index: 2; }
.donut-text { z-index: 3; font-weight: 800; color: var(--primary); font-size: 1.5rem; }

/* Hub Nodes */
.hub-center { width: 120px; height: 120px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(39, 174, 96, 0.2); z-index: 10; position: relative; }
.orbit-container { position: relative; width: 600px; height: 600px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.orbit-ring { position: absolute; width: 500px; height: 500px; border: 1px dashed var(--border-subtle); border-radius: 50%; }
.orbit-icon { position: absolute; width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: transform 0.3s; z-index: 5; }
.orbit-icon:hover { transform: scale(1.2); z-index: 20; }
.orbit-icon img { width: 45px; height: 45px; object-fit: contain; }