.mesh74-packet-overview {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  background: #1c1916;
  border-bottom: 1px solid #3a342c;
  color: #e4ded2;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.mesh74-overview-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mesh74-packet-overview h2 { margin:0; font:600 14px/1.3 system-ui; color:#d8c6a5; }
.mesh74-periods { display:flex; gap:2px; padding:2px; border:1px solid #463b2b; border-radius:5px; }
.mesh74-periods button,.mesh74-analytics-toggle,.mesh74-overview-error button {
  color:#c8b79a; background:transparent; border:0; cursor:pointer;
  padding:4px 8px; font:500 11px/1.3 system-ui; border-radius:3px; white-space:nowrap;
}
.mesh74-analytics-toggle { border:1px solid #51432d; }
.mesh74-analytics-toggle:hover { background:#30291f; }
.mesh74-periods button[aria-pressed=true] { color:#17130d; background:#c4a574; }
.mesh74-packet-overview button:focus-visible { outline:2px solid #e6c184; outline-offset:2px; }
.mesh74-freshness { margin-left:auto; color:#a8b59f; font:11px/1.4 system-ui; }
.mesh74-freshness.is-stale { color:#ddb56c; }
.mesh74-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:8px 0 6px; }
.mesh74-kpi { display:flex; flex-direction:column; gap:3px; padding:7px 10px; background:#141210; border:1px solid #3a342c; border-radius:5px; min-width:0; }
.mesh74-kpi-label { color:#bdb29f; font:500 11px/1.3 system-ui; }
.mesh74-kpi strong { color:#f0e1c4; font:600 22px/1.1 system-ui; }
.mesh74-kpi small { color:#938b7c; font:10px/1.35 system-ui; overflow-wrap:anywhere; }
.mesh74-kpi.is-critical { background:#4b1323; border-color:#e04d75; }
.mesh74-kpi.is-critical strong { color:#ff7398; }
.mesh74-overview-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#a39784; font:10px/1.4 system-ui; flex-wrap:wrap; }
.mesh74-coverage-note { grid-column:1/-1; margin:0; color:#a39784; font:11px/1.5 system-ui; }
.mesh74-overview-details { display:grid; grid-template-columns:1.15fr 1fr .85fr; gap:16px; padding:12px 0 2px; border-top:1px solid #3c3327; margin-top:10px; }
.mesh74-detail-card { min-width:0; }
.mesh74-detail-card h3 { margin:0; font:600 12px/1.4 system-ui; color:#d6c3a1; }
.mesh74-detail-card p { margin:3px 0 10px; font:10px/1.4 system-ui; color:#958b7a; }
.mesh74-detail-card small { font:10px/1.3 system-ui; color:#958b7a; }
.mesh74-traffic-bars { display:flex; align-items:end; gap:5px; height:80px; border-bottom:1px solid #56462e; }
.mesh74-traffic-bars>div { height:100%; flex:1; display:flex; align-items:end; min-width:0; }
.mesh74-traffic-bars span { width:100%; background:linear-gradient(#cdb483,#80683f); border-radius:3px 3px 0 0; }
.mesh74-chart-axis { display:flex; justify-content:space-between; color:#958b7a; font:10px/1.5 system-ui; margin-top:4px; }
.mesh74-sender-row,.mesh74-type-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid #3a322680; padding:5px 0; font:11px/1.3 system-ui; }
.mesh74-sender-row>span,.mesh74-type-row>span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mesh74-sender-row strong,.mesh74-type-row strong { font-weight:500; white-space:nowrap; }
.mesh74-sender-row small { min-width:28px; text-align:right; }
.mesh74-sender-row.is-flood { color:#ff7997; }
.mesh74-overview-error { padding:10px 0 0; color:#ffc17b; font:12px/1.4 system-ui; }
.mesh74-overview-flood { margin-top:8px; padding:7px 10px; border:1px solid #a63654; border-radius:5px; background:#471322; color:#ffadbe; font:11px/1.4 system-ui; overflow-wrap:anywhere; }
/* Fit the packet route to the available viewport. Only the table scrolls by
   default; neither the whole page nor its parent panel has another scrollbar. */
body:has(.mesh74-packet-overview) { overflow:hidden !important; }
.app:has(.mesh74-packet-overview) { height:100dvh !important; min-height:0 !important; overflow:hidden; }
.app-main:has(.mesh74-packet-overview) {
  box-sizing:border-box;
  height:100dvh !important;
  min-height:0;
  padding:calc(var(--app-header-height,60px) + 12px) 12px 12px !important;
  overflow:hidden;
}
.app-main:has(.mesh74-packet-overview)>div:has(>.packet-monitor-panel) { height:calc(100dvh - var(--app-header-height,60px) - 24px) !important; }
.packet-monitor-panel:has(.mesh74-packet-overview) { min-height:0; overflow:hidden; border:1px solid #3a342c; border-radius:6px; }
.packet-monitor-panel:has(.mesh74-packet-overview)>.packet-monitor-header { padding:8px 14px; min-height:40px; flex-shrink:0; }
.packet-monitor-panel:has(.mesh74-packet-overview) .packet-monitor-header h3 { font-size:14px; }
.packet-monitor-panel:has(.mesh74-packet-overview)>.packet-table-container { min-height:0; flex:1 1 0; overscroll-behavior:contain; scrollbar-color:#6b5a40 #181511; scrollbar-width:thin; }
.packet-monitor-panel:has(.mesh74-packet-overview)>.packet-filters { max-height:120px; overflow:auto; flex-shrink:0; }
.mesh74-packet-overview.is-expanded { max-height:45dvh; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#6b5a40 #181511; }
@media(max-width:768px) {
  .mesh74-packet-overview { padding:8px 10px; }
  .mesh74-overview-heading { gap:6px 8px; }
  .mesh74-packet-overview h2 { font-size:13px; }
  .mesh74-freshness { order:3; width:auto; min-width:calc(100% - 105px); margin:0; flex:1; font-size:10px; white-space:nowrap; }
  .mesh74-analytics-toggle { order:4; }
  .mesh74-periods { margin-left:auto; }
  .mesh74-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:7px 0 6px; }
  .mesh74-kpi { padding:6px 7px; gap:3px; }
  .mesh74-kpi-label { font-size:10px; line-height:12px; }
  .mesh74-kpi strong { font-size:18px; }
  .mesh74-kpi small { display:none; }
  .mesh74-overview-caption { gap:2px 8px; font-size:10px; }
  .mesh74-overview-details { grid-template-columns:1fr; gap:14px; }
  .mesh74-traffic-bars { height:70px; }
  .packet-monitor-panel:has(.mesh74-packet-overview)>.packet-monitor-header { padding:8px 10px; }
}
@media(max-width:640px) {
  .app-main:has(.mesh74-packet-overview) { padding:100px 6px calc(64px + env(safe-area-inset-bottom,0px)) !important; }
  .app-main:has(.mesh74-packet-overview)>div:has(>.packet-monitor-panel) { height:calc(100dvh - 164px - env(safe-area-inset-bottom,0px)) !important; }
  .packet-monitor-panel:has(.mesh74-packet-overview) .packet-monitor-header h3 { font-size:13px; }
}
@media(max-height:550px) and (min-width:641px) {
  .mesh74-kpi small { display:none; }
  .mesh74-packet-overview { padding-top:6px; padding-bottom:6px; }
}
/* Smart controls stay compact; the full journal is filtered before pagination. */
.mesh74-smart-bar {display:flex;align-items:center;gap:10px;padding:7px 14px;flex-shrink:0;border-bottom:1px solid #bda16b25;background:#181611;min-height:38px;box-sizing:border-box;}
.mesh74-smart-presets {display:flex;gap:5px;overflow-x:auto;min-width:0;scrollbar-width:thin;}
.mesh74-smart-chip,.mesh74-smart-reset {font:inherit;font-size:11px;white-space:nowrap;border:1px solid #bda16b33;border-radius:6px;background:transparent;color:#c9bfaa;padding:5px 9px;cursor:pointer;}
.mesh74-smart-chip span {font-variant-numeric:tabular-nums;margin-left:6px;color:#a89b81;font-size:10px;}
.mesh74-smart-chip.is-active {background:#bfa16b;color:#16130e;border-color:#bfa16b;}
.mesh74-smart-chip.is-active span {color:#292117;}
.mesh74-smart-chip.is-flood.is-active {background:#b8224c;color:white;border-color:#f34477;}
.mesh74-smart-chip.is-flood.is-active span {color:white;}
.mesh74-smart-reset {margin-left:auto;flex-shrink:0;}
.mesh74-smart-reset:disabled {opacity:.4;cursor:default;}
.mesh74-smart-chip:focus-visible,.mesh74-smart-reset:focus-visible {outline:2px solid #d6b575;outline-offset:2px;}
.packet-monitor-panel>.mesh74-smart-advanced {max-height:170px;display:flex;gap:10px;align-items:end;padding:10px 14px;flex-wrap:wrap;background:#1b1813;}
.mesh74-smart-advanced label {display:flex;flex-direction:column;gap:4px;font-size:10px;color:#b9ad93;min-width:0;}
.mesh74-smart-advanced input,.mesh74-smart-advanced select {height:29px;box-sizing:border-box;background:#12110e;color:#e3dccd;border:1px solid #bda16b40;border-radius:5px;padding:4px 7px;font:inherit;font-size:11px;max-width:210px;}
.mesh74-smart-advanced input[type=number] {width:86px;}
.mesh74-smart-advanced .mesh74-smart-own {flex-direction:row;align-items:center;white-space:nowrap;padding-bottom:5px;}
.mesh74-smart-help {width:100%;margin:0;font-size:10px;color:#9e9178;line-height:1.5;}
.mesh74-smart-error {padding:8px 14px;color:#ffc1cd;background:#4a1725;flex-shrink:0;font-size:12px;}
@media(max-width:640px) {.mesh74-smart-bar{padding:6px;gap:5px;}.mesh74-smart-chip{padding:5px 7px;font-size:10px;}.mesh74-smart-reset{font-size:10px;padding:5px;}.packet-monitor-panel>.mesh74-smart-advanced{max-height:150px;padding:8px;gap:8px;}}