.interactive-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.compact-metrics.interactive-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric-inspect { font:inherit; text-align:left; cursor:pointer; min-width:0; border:1px solid var(--line); background:#fff; border-radius:14px; }
.metric-inspect.free-budget { background:#edf4e3; }
.metric-inspect strong { overflow-wrap:anywhere; }
.metric-hint { display:block; margin-top:9px; color:var(--muted); font-size:10px; }
.metric-inspect.is-selected { outline:2px solid var(--green,#164d3b); outline-offset:-2px; }
.plan-event-tools { margin-bottom:15px; }
.plan-event-tools > p { margin-top:12px; }
.plan-event-filters { display:flex; flex-wrap:wrap; gap:7px; }
.plan-filter { padding:8px 12px; border:1px solid var(--line); border-radius:20px; background:white; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.plan-filter.is-selected { background:#164d3b; border-color:#164d3b; color:white; }
.plan-search-row { display:flex; align-items:center; gap:16px; margin-top:16px; }
.plan-search { flex:1; max-width:420px; margin:0; }
.plan-search input { width:100%; }
.metric-inspect:focus-visible,.plan-filter:focus-visible { outline:2px solid #164d3b; outline-offset:3px; }
@media(hover:hover) { .metric-inspect:hover { background:#f1f5eb; } .plan-filter:not(.is-selected):hover { background:#f1f5eb; color:#164d3b; } }
@media(max-width:600px) { .interactive-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .plan-search-row { align-items:flex-start; flex-direction:column; gap:8px; } .plan-search { width:100%; max-width:none; } .plan-filter { min-height:40px; } }