:root {
     --pico-font-size: 14px;
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1rem;
     margin: 2rem 0;
 }

 .card {
     background: var(--pico-background-color);
     border: 1px solid var(--pico-border-color);
     border-radius: var(--pico-border-radius);
     padding: 1.5rem;
     text-align: center;
 }

 .card h3 {
     margin: 0 0 0.5rem 0;
     color: var(--pico-muted-color);
     font-size: 0.9rem;
     font-weight: 500;
 }

 .card p {
     margin: 0;
     font-size: 1.5rem;
     font-weight: bold;
     color: var(--pico-primary);
 }

 .chart-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
 }

 .chart-container {
     background: var(--pico-background-color);
     border: 1px solid var(--pico-border-color);
     border-radius: var(--pico-border-radius);
     padding: 1.5rem;
 }

 .chart-container h3 {
     margin: 0 0 1rem 0;
     text-align: center;
     color: var(--pico-color);
 }

 .header {
     text-align: center;
     margin-bottom: 2rem;
 }

 .header h1 {
     margin-bottom: 0.5rem;
 }

 .header p {
     color: var(--pico-muted-color);
 }

 .header-actions {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .header-actions a i {
     margin-right: 0.5rem;
 }