.chart-box { width: 100%; height: 340px; }
.chart-box-lg { height: 400px; }

.multiselect { position: relative; }

.ms-trigger.open { border-color: oklch(var(--p)); box-shadow: 0 0 0 2px oklch(var(--p) / 0.1); }
.ms-dropdown { display: none; }
.ms-dropdown.open { display: block !important; }

.ms-options .ms-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; transition: background 0.1s; }
.ms-options .ms-option:hover { background: oklch(var(--b2)); }
.ms-options .ms-option input[type=checkbox] { accent-color: oklch(var(--p)); }

.mini-ms-trigger.open { border-color: oklch(var(--p)); box-shadow: 0 0 0 2px oklch(var(--p) / 0.1); }
.mini-ms-dropdown { display: none; }
.mini-ms-dropdown.open { display: block !important; }
.mini-ms-label.has-value { color: oklch(var(--bc)) !important; }
.mini-ms-options .ms-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: 12px; transition: background 0.1s; }
.mini-ms-options .ms-option:hover { background: oklch(var(--b2)); }
.mini-ms-options .ms-option input[type=checkbox] { accent-color: oklch(var(--p)); }

.ms-arrow { transition: transform .2s; }
.ms-trigger.open .ms-arrow { transform: rotate(180deg); }
.mini-ms-trigger.open .ms-arrow { transform: rotate(180deg); }

.detail-pagination button { min-width: 34px; height: 32px; }
.detail-pagination button.active { background: oklch(var(--p)); color: oklch(var(--pc)); }

.kpi-placeholder { text-align: center; padding: 40px 20px; margin-bottom: 24px; color: oklch(var(--bc) / 0.5); font-size: 16px; }

.rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(var(--b2)); }
.rank-item:last-child { border-bottom: none; }
.rank-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.rank-badge.gold { background: #f5a623; }
.rank-badge.silver { background: #a0a4a8; }
.rank-badge.bronze { background: #cd7f32; }
.rank-badge.normal { background: oklch(var(--p)); }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 600; font-size: 14px; color: oklch(var(--bc)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-detail { font-size: 12px; color: oklch(var(--bc) / 0.5); }
.rank-value { font-weight: 700; font-size: 14px; color: oklch(var(--p)); white-space: nowrap; }