.interface-focus[hidden] { display:none; }
.interface-focus { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 0; margin-bottom:16px; border-bottom:1px solid var(--line); scroll-margin-top:12px; }
.interface-focus button { display:flex; align-items:center; gap:8px; min-height:42px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:5px; font-size:13px; }
.interface-focus button img { transform:rotate(180deg); }
.interface-focus label { font-size:12px; color:var(--muted); margin-left:auto; }
.interface-focus select { width:min(600px,65%); min-width:0; height:42px; font-size:14px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:5px; }
.interface-focus-link { font:inherit; font-weight:inherit; line-height:inherit; text-align:left; display:inline; padding:0; margin:0; border:0; background:none; color:inherit; overflow-wrap:anywhere; }
.interface-focus-link:hover { color:var(--accent); }
.interface-focus-link img { display:inline-block; margin-left:7px; vertical-align:middle; opacity:.65; }
body.theme-dark .interface-focus img,body.theme-dark .interface-focus-link img { filter:brightness(0) invert(1); }
body.interface-focused .mobile-overview,body.interface-focused #topTraffic { display:none; }
body.traffic-view.interface-focused #cards { grid-template-columns:minmax(0,1fr); }
body.traffic-view.interface-focused #cards > .card { grid-column:1/-1; padding:20px 0; border:0; border-radius:0; background:transparent; }
body.traffic-view.interface-focused .card-head { min-height:0; margin-bottom:18px; }
body.traffic-view.interface-focused .card-head .site { font-size:20px; }
body.interface-focused .interface-focus-link { pointer-events:none; }
body.interface-focused .interface-focus-link img { display:none; }
body.traffic-view.interface-focused .traffic { max-width:680px; }
body.traffic-view.interface-focused .traffic-value { font-size:26px; }
body.traffic-view.interface-focused .rt-plot,body.traffic-view.interface-focused .rt-axis,body.traffic-view.interface-focused .rt-chart svg { height:320px; }
body.interface-focused .rt-frame { grid-template-columns:56px minmax(0,1fr); }
body.interface-focused .rt-axis,body.interface-focused .rt-times,body.interface-focused .rt-heading,body.interface-focused .rt-legend { font-size:12px; }
body.interface-focused .rt-stats { padding:18px 0; font-size:13px; }
body.interface-focused .rt-extreme { font-size:11px; line-height:15px; }
body.interface-focused .details { grid-template-columns:90px minmax(0,1fr) 90px minmax(0,1fr); gap:10px 18px; font-size:12px; }
@media(max-width:650px) {
  .interface-focus { gap:10px; }
  .interface-focus label { margin-left:0; }
  .interface-focus select { width:100%; font-size:16px; }
  body.traffic-view.interface-focused #cards > .card { padding:10px 0; }
  body.traffic-view.interface-focused .rt-plot,body.traffic-view.interface-focused .rt-axis,body.traffic-view.interface-focused .rt-chart svg { height:240px; }
  body.interface-focused .rt-frame { grid-template-columns:42px minmax(0,1fr); }
  body.interface-focused .details { grid-template-columns:70px minmax(0,1fr); }
  body.traffic-view.interface-focused .card-head .site { font-size:17px; }
  body.interface-focused .rt-extreme { font-size:9px; line-height:12px; }
}