/* ===== Cards, Tables, Grids ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px }
.card { background: #fff; border-radius: 10px; border: 1px solid var(--gray-200); overflow: hidden }
.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 }
.card-title { font-family: "Syne", sans-serif; font-size: 12px; font-weight: 700; color: var(--purple-dark) }
.card-body { padding: 12px 14px }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px }
.data-table th { text-align: left; padding: 7px 9px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-400); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); cursor: pointer; white-space: nowrap }
.data-table th:hover { color: var(--purple) }
.data-table td { padding: 7px 9px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800) }
.data-table tr:hover td { background: var(--gray-50) }
.data-table tr:last-child td { border-bottom: none }
.ind-table { width: 100%; border-collapse: collapse }
.ind-table th { padding: 7px 9px; font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--gray-200); text-align: left; white-space: nowrap }
.ind-table td { padding: 7px 9px; border-bottom: 1px solid var(--gray-100); font-size: 12px; vertical-align: middle }
.ind-table tr:last-child td { border-bottom: none }
.ind-bar-wrap { width: 70px; height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle }
.ind-bar-fill { height: 100%; border-radius: 3px }
.chart-wrap canvas { max-height: 240px }