/* ===== 图表组件：饼图 / 柱图 / 水平柱图 / 成员卡片 ===== */

/* 竖柱图 */
.chart-canvas { width: 100%; height: 200px; display: block; }
.chart-bar-wrap { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 0 4px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-bar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); transition: height .4s ease; min-height: 2px; position: relative; }
.chart-bar.green { background: linear-gradient(180deg, var(--green), #389e0d); }
.chart-bar.orange { background: linear-gradient(180deg, var(--orange), #d46b08); }
.chart-bar.red { background: linear-gradient(180deg, var(--red), #cf1322); }
.chart-bar-label { font-size: 10px; color: var(--text3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chart-bar-val { font-size: 10px; font-weight: 700; color: var(--text); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--text2); }
.chart-legend span { display: flex; align-items: center; gap: 4px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* 饼图 */
.chart-pie-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 16px 0; }
.chart-pie { width: 140px; height: 140px; border-radius: 50%; position: relative; }
.chart-pie-info { display: flex; flex-direction: column; gap: 6px; }
.chart-pie-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.chart-pie-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* 水平柱图 */
.chart-hbar-wrap { display: flex; flex-direction: column; gap: 6px; }
.chart-hbar-row { display: flex; align-items: center; gap: 8px; }
.chart-hbar-name { width: 60px; font-size: 11px; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.chart-hbar-track { flex: 1; height: 20px; background: #f0f0f0; border-radius: 4px; overflow: hidden; position: relative; }
.chart-hbar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-size: 10px; font-weight: 700; color: #fff; min-width: 24px; }
.chart-hbar-fill.green { background: linear-gradient(90deg, var(--green), #389e0d); }
.chart-hbar-fill.blue { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.chart-hbar-fill.orange { background: linear-gradient(90deg, var(--orange), #d46b08); }
.chart-hbar-fill.red { background: linear-gradient(90deg, var(--red), #cf1322); }

/* 成员卡片（图表页） */
.chart-person-card { background: var(--primary-light); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all .15s; border: 2px solid transparent; }
.chart-person-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(79, 110, 247, .15); }
.chart-person-card.me { background: #fffbe6; border-color: #faad14; }
.chart-person-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.chart-person-info { flex: 1; min-width: 0; }
.chart-person-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-person-meta { font-size: 11px; color: var(--text3); display: flex; gap: 8px; margin-top: 2px; }
.chart-person-score { font-size: 20px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.chart-person-card.me .chart-person-score { color: #d48806; }