:root { --mon-bar: 44px; }

#mon-bar {
  display: flex; align-items: center; gap: 4px; height: var(--mon-bar); padding: 0 16px;
  background: #0b101a; border-bottom: 1px solid #26324a; box-sizing: border-box;
  font: 600 13px/1 'Segoe UI', Tahoma, Arial, sans-serif;
}
#mon-bar .mon-brand { color: #e7ecf5; font-weight: 700; letter-spacing: .3px; margin-right: 14px; }
#mon-bar .mon-tab, #mon-bar .mon-out {
  display: inline-flex; align-items: center; height: 100%; padding: 0 14px; box-sizing: border-box;
  color: #8d9bb3; text-decoration: none; border-bottom: 2px solid transparent;
}
#mon-bar .mon-tab:hover, #mon-bar .mon-out:hover { color: #e7ecf5; }
#mon-bar .mon-tab.active { color: #e7ecf5; border-bottom-color: #3d8bfd; }
#mon-bar .mon-spacer { flex: 1; }
#mon-bar .mon-asof { color: #8d9bb3; font-weight: 500; font-size: 12px; margin-right: 16px; }
#mon-bar .mon-asof.stale { color: #f0883e; }
#mon-bar .mon-chip {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 5px 0 14px; margin-right: 10px; box-sizing: border-box;
  background: #1d2638; border: 1px solid #26324a; border-radius: 17px;
}
#mon-bar .mon-chip-info { text-align: right; line-height: 1.2; }
#mon-bar .mon-chip-name { font-weight: 700; font-size: 12px; color: #e7ecf5; }
#mon-bar .mon-chip-title { font-weight: 400; font-size: 10px; color: #8d9bb3; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mon-bar .mon-chip-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #3d8bfd; color: #06121e; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}
/* The bar carries the user pill on every page; CFM's own copy would repeat it. */
html[data-mon-app="cfm"] #userChip { display: none; }
#mon-bar .mon-out { font-weight: 500; font-size: 12px; }

/* The monitors size their main area from the viewport; take the bar height off. */
html[data-mon-app="cfm"] .layout { height: calc(100vh - 45px - var(--mon-bar)); }
html[data-mon-app="pfm"] .payer-list { max-height: calc(100vh - 160px - var(--mon-bar)); }

#mon-block {
  position: fixed; inset: var(--mon-bar) 0 0 0; z-index: 9999; background: #0f1420; color: #e7ecf5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center;
  font: 14px/1.5 'Segoe UI', system-ui, sans-serif;
}
#mon-block h2 { margin: 0 0 8px; font-size: 20px; }
#mon-block p { margin: 0; max-width: 520px; color: #9fb0c3; }