.demo-webapp .reports-filter-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:12px;margin-bottom:12px;flex-wrap:wrap}.demo-webapp .reports-filter-bar__separator{width:1px;height:20px;background:var(--color-border-light);flex-shrink:0}.demo-webapp .reports-metrics{display:flex;gap:24px;margin-bottom:20px}.demo-webapp .reports-metric{display:flex;align-items:center;gap:8px}.demo-webapp .reports-metric__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.demo-webapp .reports-metric__dot--primary{background:var(--drag-primary)}.demo-webapp .reports-metric__dot--secondary{background:#B3DEFF}.demo-webapp .reports-metric__value{font-size:var(--drag-text-base);font-weight:600;color:var(--drag-text-primary)}.demo-webapp .reports-metric__label{font-size:var(--drag-text-sm);color:var(--drag-text-secondary)}.demo-webapp .reports-metric__badge{font-size:var(--drag-text-2xs);font-weight:500;padding:2px 6px;border-radius:4px}.demo-webapp .reports-metric__badge--up{background:rgba(16,185,129,.06);color:#059669}.demo-webapp .reports-metric__badge--down{background:rgba(220,38,38,.06);color:var(--drag-error)}.demo-webapp .reports-metric__badge--neutral{background:var(--color-surface-tertiary);color:var(--color-text-secondary)}.demo-webapp .reports-chart{border:1px solid var(--color-border-light);border-radius:12px;padding:20px;margin-bottom:12px;background:var(--color-surface)}.demo-webapp .reports-chart__legend{display:flex;gap:16px;justify-content:center;margin-bottom:16px}.demo-webapp .reports-chart__legend-item{display:flex;align-items:center;gap:6px;font-size:var(--drag-text-xs);color:var(--drag-text-secondary)}.demo-webapp .reports-chart__legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}.demo-webapp .multiselect-trigger{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--drag-surface-0);border:.5px solid rgba(0,0,0,.1);border-radius:var(--drag-radius-md);font-family:var(--drag-font-family);font-size:var(--drag-text-sm);color:var(--drag-text-primary);cursor:pointer;min-width:140px}.demo-webapp .multiselect-trigger__label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-webapp .period-toggle{display:flex;border:.5px solid rgba(0,0,0,.1);border-radius:var(--drag-radius-md);overflow:hidden}.demo-webapp .period-toggle__btn{padding:7px 14px;font-size:var(--drag-text-sm);font-weight:500;border:none;font-family:var(--drag-font-family);background:var(--drag-surface-0);color:var(--drag-text-secondary)}.demo-webapp .period-toggle__btn+.period-toggle__btn{border-left:.5px solid rgba(0,0,0,.1)}.demo-webapp .period-toggle__btn--active{background:var(--drag-primary);color:#fff}