.total-card { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; } .total-card span, .total-card small { color: rgba(255, 255, 255, 0.75); } .total-card h3 { color: white; } .total-card .text-accent { color: #6EE7B7; } .revenue-grid { display: grid; grid-template-columns: 400px 1fr; gap: 1.5rem; } /* Chart Mockup */ .donut-chart-simulation { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; } .chart-mock { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( var(--secondary) 0% 18%, var(--accent) 18% 68%, #6366F1 68% 100% ); position: relative; margin-bottom: 2rem; } .chart-mock::after { content: ''; position: absolute; width: 140px; height: 140px; background: white; top: 30px; left: 30px; border-radius: 50%; } .chart-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; } .legend-item { font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot.op { background: var(--secondary); } .dot.phar { background: var(--accent); } .dot.lab { background: #6366F1; } .status-pill.paid { background: #DCFCE7; color: #166534; }