/* Global top bar shared by /, /integrate/ and /admin/. NTU Blue #181C62 with the NTU Red #D71440 rule. */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 58px;
  width: 100%; background: #181C62; color: #fff; border-bottom: 3px solid #D71440; box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
.topbar .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; color: #fff; text-decoration: none; }
.topbar .brand img { height: 32px; background: #fff; border-radius: 4px; padding: 3px 6px; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { padding: 6px 10px; border-radius: 6px; color: rgba(255,255,255,.75); font-weight: 500; text-decoration: none; }
.topbar nav a.active, .topbar nav a:hover { color: #fff; background: rgba(255,255,255,.14); }
.topbar .user { color: rgba(255,255,255,.75); white-space: nowrap; }
.topbar .user button { font: inherit; border: none; background: none; color: #fff; padding: 4px 6px; cursor: pointer; }

/* Console section tabs, directly under the top bar */
.subnav { position: sticky; top: 58px; z-index: 4; display: flex; gap: 2px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e3e6ee; overflow-x: auto; }
.subnav a { padding: 11px 12px; color: #667085; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a.active, .subnav a:hover { color: #181C62; border-bottom-color: #D71440; }

@media (max-width: 900px) { .topbar { gap: 10px; overflow-x: auto; } }