.performance-controls { margin-bottom:0; align-items:center; }
.performance-sync { display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--muted); font-size:12px; margin:-3px 0 18px; min-height:18px; }
[data-performance-status]::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#16a078; }
[data-performance-status][data-mode="error"]::before, [data-performance-status][data-mode="polling"]::before { background:#d59729; }
.performance-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.performance-metrics .metric-card { min-width:0; }
.performance-metrics .metric-value { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.performance-metrics .metric-note { line-height:1.6; }
.performance-panel { padding:20px; }
.performance-panel .panel-header { flex-wrap:wrap; gap:8px; }
.performance-table { min-width:790px; }
.performance-table td, .performance-table th { padding:18px 16px; }
.performance-table td:nth-child(n+3), .performance-table th:nth-child(n+3) { text-align:right; font-variant-numeric:tabular-nums; }
.performance-place { font-weight:700; color:#667085; }
.performance-top { color:#9a6700; }
.performance-table .performance-me td { background:#eff6ff; }
.performance-me td:first-child { box-shadow:inset 3px 0 #2563eb; }
.performance-self { display:inline-block; margin-left:8px; padding:2px 7px; background:#dbeafe; color:#1d4ed8; border-radius:6px; font-size:11px; font-weight:700; }
.performance-note { color:var(--muted); font-size:12px; line-height:1.9; margin:16px 1px 0; }
[data-performance-error]:not(:empty) { background:#fff7e5; color:#865b10; border-radius:7px; padding:12px; margin-bottom:14px; line-height:1.6; }
.performance-heading p { line-height:1.7; }
@media(max-width:1050px) { .performance-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) { .performance-metrics { grid-template-columns:minmax(0,1fr); gap:10px; } .performance-panel { padding:14px; } .performance-controls { width:100%; } .performance-controls .filter { flex:1; min-width:120px; } .performance-controls .date-range-control { max-width:100%; } .performance-metrics .metric-value { font-size:26px; } }
@media(max-width:720px) { .performance-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; min-width:0; } .performance-controls .filter { min-width:0; width:100%; } .performance-controls .date-range-trigger { grid-column:1/-1; grid-row:2; gap:8px; font-size:12px; } .performance-controls .secondary-button { grid-column:2; grid-row:1; } }