/* analytics.css */
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.chart-card { background: var(--dark2); border: 1px solid var(--dark4); border-radius: var(--radius-lg); padding: var(--space-lg); }
.chart-card-title { font-size: 0.84rem; font-weight: 600; color: var(--grey2); margin-bottom: var(--space-lg); }
.bar-chart  { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-bottom: var(--space-sm); }
.bar-col    { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar        { width: 100%; background: var(--dark3); border-radius: 3px 3px 0 0; position: relative; cursor: pointer; transition: background 0.18s; }
.bar:hover  { background: rgba(232,160,32,0.2); }
.bar-fill   { position: absolute; bottom: 0; left: 0; right: 0; background: var(--amber); border-radius: 3px 3px 0 0; transition: height 1s cubic-bezier(0.4,0,0.2,1); }
.bar-label  { font-size: 0.62rem; color: var(--grey); text-align: center; white-space: nowrap; }
.donut-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto var(--space-md); }
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.donut-num  { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.donut-sub  { font-size: 0.65rem; color: var(--grey); }
.legend { display: flex; flex-direction: column; gap: var(--space-sm); }
.legend-item { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.8rem; color: var(--grey2); }
.legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.audience-highlight { background: var(--dark2); border: 1px solid var(--dark4); border-radius: var(--radius-md); padding: var(--space-md); font-size: 0.85rem; }
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .metrics-grid { grid-template-columns: 1fr; } }