.chart-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 22px; box-shadow: 0 2px 12px rgba(107,66,38,.06); cursor: pointer; }
.chart-card-title { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--c-his-mid); margin-bottom: 6px; font-weight: 700; }
.chart-card-subtitle { font-size: 11px; color: var(--c-text3); margin-bottom: 16px; font-style: italic; }
.chart-container { position: relative; width: 100%; overflow-x: auto; }
.chart-donut-wrap { width: 100%; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 14px; }
.charts-stack { display: flex; flex-direction: column; gap: 16px; }
.chart-fs-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.chart-fs-overlay.active { opacity: 1; pointer-events: auto; }
.chart-fs-panel { background: var(--c-bg); border-radius: 20px; padding: 24px; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.25); }
.chart-fs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.chart-fs-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--c-his-mid); flex: 1; }
.chart-fs-close { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 10px; padding: 6px 14px; font-size: 12px; color: var(--c-text2); cursor: pointer; white-space: nowrap; }
.chart-fs-close:hover { background: var(--c-border); }
.chart-fs-body { width: 100%; }