.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:12px}.filters label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}.filter-card{padding:16px}.user-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0}.metric-card{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.metric-card span,.metric-card small{display:block;color:var(--muted);font-size:12px}.metric-card strong{display:block;margin:8px 0;font-size:22px}.trend-card,.detail-card{padding:18px 20px;margin-top:14px}.segmented{display:flex;gap:4px;padding:3px;background:var(--bg);border-radius:6px}.segment{height:28px;padding:0 10px;background:transparent;border:0;border-radius:4px;color:var(--muted);font-size:12px}.segment.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px color-mix(in srgb,var(--fg) 12%,transparent)}.chart-box{height:240px;padding:10px 0}.chart-box svg{width:100%;height:100%;overflow:visible}.gridline{stroke:var(--border);stroke-width:1}.trend-area{fill:color-mix(in srgb,var(--accent) 13%,transparent)}.trend-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}@media(max-width:980px){.filters{grid-template-columns:repeat(2,1fr)}.user-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.filters,.user-metrics{grid-template-columns:1fr}.trend-card,.detail-card{padding:16px}.section-heading{display:grid}.segmented{width:max-content}}