.brand-copy{display:inline-flex;align-items:baseline;gap:10px;min-width:0}
.brand-title{white-space:nowrap}
.brand-subtitle{padding-left:10px;border-left:1px solid #34414b;color:#74818b;font:8px 'DM Mono',monospace;letter-spacing:.14em;white-space:nowrap}
@media(max-width:520px){.brand-copy{gap:0}.brand-subtitle{display:none}}

/* 2.1 — one authenticated top bar across monitor, detail, directory and settings. */
.xhub-topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding-inline:max(24px,calc((100% - 1580px)/2));
  border-bottom:1px solid #d7e1e6;background:rgba(255,255,255,.94);
  box-shadow:0 4px 18px rgba(45,65,76,.045);position:sticky;top:0;z-index:20;
  backdrop-filter:blur(16px);
}
.xhub-topbar .monitor-nav{display:flex;align-items:center;gap:8px}
.xhub-topbar .monitor-nav a,.xhub-topbar .monitor-nav button{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  padding:0 12px;border:1px solid #bfcdd3;border-radius:5px;
  background:#eef3f5;color:#314751;font-size:12px;font-weight:600;
  line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 2px 6px rgba(44,65,76,.04);
}
.xhub-topbar .monitor-nav a[aria-current="page"]{
  border-color:#078f82;background:#078f82;color:#fff;box-shadow:0 5px 14px rgba(7,143,130,.16)
}
.xhub-topbar .monitor-nav a:not([aria-current="page"]){border-color:#bfcdd3;background:#eef3f5;color:#314751;box-shadow:0 2px 6px rgba(44,65,76,.04)}
.xhub-topbar .monitor-nav :is(a,button):hover{border-color:#087f75;background:#087f75;color:#fff}
.xhub-topbar .monitor-nav form{margin:0}
.xhub-topbar .monitor-nav button{font-family:inherit}
@media(max-width:640px){
  .xhub-topbar{padding-inline:12px}
  .xhub-topbar .monitor-nav{gap:5px}
  .xhub-topbar .monitor-nav a,.xhub-topbar .monitor-nav button{min-height:34px;padding:0 8px;font-size:10px}
}
@media(max-width:430px){.xhub-topbar .monitor-nav form{display:none}}