/* ===== Charts Page ===== */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 14px; margin-bottom: 14px }
.chart-card { background: #fff; border-radius: 10px; border: 1px solid var(--gray-200); overflow: hidden; transition: box-shadow .15s }
.chart-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1) }
.chart-card-header { padding: 10px 14px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.chart-card-title { font-family: "Syne", sans-serif; font-size: 12px; font-weight: 700; color: var(--purple-dark) }
.chart-card-body { padding: 14px; position: relative }
.chart-card-body canvas { max-height: 220px }
.chart-toggle-row { display: flex; gap: 5px; flex-wrap: wrap }
.chart-actions { display: flex; gap: 5px; align-items: center }