.monitor-source-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #d0d5dd);
  color: var(--text, #182230);
  font-size: 14px;
}
.monitor-source-bar label { font-weight: 650; }
.monitor-source-bar select {
  min-height: 44px;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--text, #182230);
  font: inherit;
  cursor: pointer;
}
.monitor-source-bar select:hover { border-color: var(--primary, #1867a3); }
.monitor-source-bar select:focus-visible { outline: 2px solid var(--primary, #1867a3); outline-offset: 3px; }
.monitor-source-bar select:disabled { cursor: wait; opacity: .65; }
.monitor-source-bar small { color: var(--muted, #475467); margin-left: auto; font-size: 13px; }
.monitor-source-status[data-error="true"] { color: var(--danger, #b42318); }
.monitor-direct-notice { max-width: 70ch; padding: 24px 0; }
.monitor-direct-notice h2 { margin: 0 0 12px; font-size: 22px; }
.monitor-direct-notice p { color: var(--muted, #475467); line-height: 1.8; margin-bottom: 20px; }
.monitor-direct-notice a { color: var(--primary, #1867a3); text-decoration: underline; text-underline-offset: 4px; }
.monitor-direct-traffic main > :not(.monitor-source-bar):not(.monitor-direct-notice):not(.monitor-toolbar) { display: none !important; }
@media (max-width: 600px) {
  .monitor-source-bar small, .monitor-source-status { width: 100%; margin-left: 0; }
  .monitor-source-bar { gap: 10px; }
}