.dashboard { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
    .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
    .kpi-card { background: white; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #667eea; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .kpi-card.alt1 { border-left-color: #10b981; }
    .kpi-card.alt2 { border-left-color: #f59e0b; }
    .kpi-card.alt3 { border-left-color: #ef4444; }
    .kpi-label { color: #666; font-size: 0.9rem; margin-bottom: 0.5rem; }
    .kpi-value { font-size: 2rem; font-weight: 700; color: #1f2937; }
    .kpi-subtext { font-size: 0.85rem; color: #999; margin-top: 0.5rem; }
    .section { background: white; padding: 2rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .section-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; color: #1f2937; }
    table { width: 100%; border-collapse: collapse; }
    th { background: #f9fafb; padding: 1rem; text-align: left; font-weight: 600; color: #1f2937; border-bottom: 1px solid #e5e7eb; }
    td { padding: 1rem; border-bottom: 1px solid #e5e7eb; }
    tr:hover { background: #f9fafb; }
    .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
    .badge-active { background: #d1fae5; color: #065f46; }
    .badge-pending { background: #fed7aa; color: #92400e; }
    .badge-paid { background: #dbeafe; color: #0c4a6e; }
    .chart { height: 300px; background: #f9fafb; border-radius: 8px; display: flex; align-items: flex-end; justify-content: space-around; gap: 1rem; padding: 1rem; }
    .bar { flex: 1; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 4px 4px 0 0; position: relative; }
    .bar-label { position: absolute; bottom: -1.5rem; left: 0; right: 0; text-align: center; font-size: 0.85rem; color: #666; }