.analytics-controls { display: flex; align-items: end; gap: 12px; margin-bottom: 14px; }
.analytics-controls label { display: grid; gap: 5px; color: var(--muted); font-weight: 800; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chart-card { padding: 16px; min-height: 300px; }
.chart-card.wide { grid-column: 1 / -1; min-height: 340px; }
.chart-wrap { width: 100%; min-height: 250px; position: relative; }
.chart-wrap canvas { width: 100%; display: block; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(130px, 1fr) 3fr auto; gap: 10px; align-items: center; }
.bar-row .mini { grid-column: 2 / -1; color: var(--muted); margin-top: -6px; }
.bar-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 12px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.bar-fill { height: 100%; min-width: 4px; border-radius: inherit; background: var(--blue); }
.bar-fill.warn { background: var(--amber); }
.bar-fill.red { background: var(--red); }
.manager-table { display: grid; gap: 8px; }
.manager-table .row { display: grid; grid-template-columns: 1.4fr repeat(4, .8fr); gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #fbfdff; }
.manager-table .row.head { color: var(--muted); font-weight: 900; background: white; }
.insights { display: grid; gap: 10px; }
.insight { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.insight b { color: var(--blue); }
@media (max-width: 980px) { .analytics-grid { grid-template-columns: 1fr; } .analytics-controls { flex-direction: column; align-items: stretch; } }