.mirror-muted { color:var(--muted); font-size:12px; }
.mirror-filter-grid, .mirror-replay-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.mirror-wide { grid-column:span 2; }
.mirror-notice { color:var(--muted); margin-top:16px; line-height:1.7; }
.mirror-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.mirror-summary > div { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.mirror-summary dt { color:var(--muted); font-size:12px; }
.mirror-summary dd { font-size:24px; font-weight:650; margin-top:6px; overflow-wrap:anywhere; }
.mirror-bars { display:flex; align-items:flex-end; gap:4px; height:130px; padding-top:22px; border-bottom:1px solid var(--border); }
.mirror-bars > div { flex:1; min-width:2px; background:var(--accent); border-radius:3px 3px 0 0; position:relative; opacity:.8; }
.mirror-bars > div:hover { opacity:1; }
.mirror-bars span { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; color:var(--text); }
.mirror-bars > div:hover span { display:block; }
.mirror-table-wrap { overflow-x:auto; }
.mirror-table-wrap td { white-space:nowrap; }
.mirror-table-wrap td:nth-child(2) { max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.mirror-pagination, .mirror-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.mirror-pagination { justify-content:flex-end; }
.mirror-help { margin-top:16px; line-height:1.8; }
.mirror-dialog { margin:auto; width:min(860px,90vw); max-height:85vh; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.mirror-dialog::backdrop { background:rgba(0,0,0,.35); }
.mirror-dialog pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.6 var(--mono); }
#mirror-traffic-page [hidden] { display:none !important; }
#nav-mirror-traffic { background:transparent; font-family:inherit; border-top:0; border-right:0; border-bottom:0; text-align:left; }
#nav-mirror-traffic.active { background:var(--accent-dim); }
@media(max-width:1100px) { .mirror-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .mirror-filter-grid,.mirror-replay-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .mirror-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .mirror-filter-grid,.mirror-replay-grid { grid-template-columns:1fr; } .mirror-wide { grid-column:span 1; } #mirror-traffic-page .card-header { align-items:flex-start; gap:8px; flex-wrap:wrap; } }