:root {
  --jbs-ink: #17213b;
  --jbs-ink-soft: #5f687d;
  --jbs-navy: #192541;
  --jbs-paper: #fffefa;
  --jbs-line: #d9dce3;
  --jbs-coral: #ee745b;
  --jbs-blue: #4568e8;
  --jbs-green: #2d9b75;
}

jaybee-suite-header { display: block; flex: 0 0 auto; color: var(--jbs-ink); font-family: Inter, Aptos, system-ui, sans-serif; }
.jbs-shell { position: relative; z-index: 80; }
.jbs-header {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: rgba(255, 254, 250, .97);
  border-bottom: 1px solid rgba(187, 193, 206, .68);
  box-shadow: 0 2px 8px rgba(24, 33, 58, .07);
  backdrop-filter: blur(16px);
}
.jbs-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--jbs-ink); font: 700 17px/1 "Manrope", Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.jbs-brand strong { color: var(--jbs-coral); }
.jbs-brand-mark { position: relative; width: 31px; height: 31px; flex: 0 0 31px; }
.jbs-brand-mark i { position: absolute; width: 17px; height: 17px; border: 2px solid var(--jbs-navy); border-radius: 4px; background: var(--jbs-paper); }
.jbs-brand-mark i:nth-child(1) { left: 0; top: 0; }
.jbs-brand-mark i:nth-child(2) { right: 0; top: 7px; background: var(--jbs-coral); border-color: var(--jbs-coral); }
.jbs-brand-mark i:nth-child(3) { left: 4px; bottom: 0; width: 21px; height: 10px; background: var(--jbs-navy); }
.jbs-navigation { min-width: 0; max-width: min(72vw, 980px); justify-self: center; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 4px; background: #eeede8; border: 1px solid #d8d8d4; border-radius: 999px; scrollbar-width: none; }
.jbs-navigation::-webkit-scrollbar { display: none; }
.jbs-nav-link, .jbs-context { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 7px 13px; color: var(--jbs-ink-soft); border-radius: 999px; font: 750 10px/1 "Manrope", Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.jbs-nav-link:hover, .jbs-context:hover { color: var(--jbs-ink); background: rgba(255, 255, 255, .78); }
.jbs-nav-link.is-current { color: #fff; background: var(--jbs-navy); box-shadow: 0 3px 9px rgba(24, 33, 58, .2); }
.jbs-context { max-width: 240px; gap: 7px; overflow: hidden; background: var(--jbs-paper); border: 1px solid var(--jbs-line); }
.jbs-context::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; background: var(--jbs-blue); border-radius: 50%; }
.jbs-context[data-app-id="flowchart"]::before { background: var(--jbs-green); }
.jbs-context span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jbs-context.is-current { color: #fff; background: var(--jbs-navy); border-color: var(--jbs-navy); }
.jbs-context.is-current::before { box-shadow: 0 0 0 2px rgba(255,255,255,.46); }
.jbs-account { position: relative; justify-self: end; display: flex; align-items: center; gap: 9px; }
.jbs-work-status { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #42506b; background: rgba(255,255,255,.72); border: 1px solid #d8dce5; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.jbs-work-status i { width: 7px; height: 7px; flex: 0 0 7px; background: var(--jbs-green); border-radius: 50%; }
.jbs-work-status.is-dirty i,
.jbs-work-status.is-saving i { background: #d4942c; }
.jbs-work-status.is-saving i { animation: jbs-pulse 1s ease-in-out infinite; }
.jbs-work-status.is-offline i { background: #5976c9; }
.jbs-work-status.is-error i,
.jbs-work-status.is-conflict i { background: #c84f55; }
@keyframes jbs-pulse { 50% { opacity: .35; transform: scale(.72); } }
.jbs-local-action { display: none; min-height: 32px; padding: 0 9px; color: #3657d1; background: #edf1ff; border: 1px solid rgba(69, 104, 232, .25); border-radius: 7px; font: 800 9px/1 "Manrope", sans-serif; cursor: pointer; }
.jbs-organization { max-width: 190px; overflow: hidden; color: var(--jbs-ink-soft); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.jbs-avatar { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--jbs-navy); border: 0; border-radius: 50%; font-size: 10px; font-weight: 800; cursor: pointer; }
.jbs-account-menu { position: absolute; z-index: 90; top: 44px; right: 0; width: 230px; padding: 8px; background: var(--jbs-paper); border: 1px solid #c9ced9; border-radius: 11px; box-shadow: 0 18px 42px rgba(24, 33, 58, .2); }
.jbs-account-menu[hidden] { display: none; }
.jbs-account-user { display: grid; gap: 3px; padding: 8px 8px 11px; border-bottom: 1px solid var(--jbs-line); }
.jbs-account-user strong { font-size: 11px; }
.jbs-account-user span { color: var(--jbs-ink-soft); font-size: 9px; }
.jbs-account-menu a, .jbs-account-menu button { width: 100%; display: block; padding: 9px 8px; color: var(--jbs-ink); text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: 7px; font: 650 10px/1.2 inherit; cursor: pointer; }
.jbs-account-menu a:hover, .jbs-account-menu button:hover { background: #f0f0ed; }
.jbs-support { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 16px; color: #714314; background: #fff2cf; border-bottom: 1px solid #e6c77f; font-size: 10px; }
.jbs-support button { padding: 5px 9px; color: #5d3511; background: #fffaf0; border: 1px solid #d49a4d; border-radius: 7px; font-size: 9px; font-weight: 750; cursor: pointer; }

@media (max-width: 1040px) {
  .jbs-header { gap: 10px; padding-inline: 14px; }
  .jbs-organization { display: none; }
  .jbs-navigation { max-width: none; justify-self: stretch; }
  .jbs-context { max-width: 180px; }
  .jbs-work-status span { display: none; }
  .jbs-work-status { min-width: 30px; justify-content: center; padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .jbs-work-status.is-saving i { animation: none; }
}

@media (max-width: 680px) {
  .jbs-header { min-height: 56px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; padding-inline: 10px; }
  .jbs-brand > span:last-child { display: none; }
  .jbs-navigation { min-width: 0; }
  .jbs-nav-link, .jbs-context { min-height: 30px; padding-inline: 9px; font-size: 9px; }
  .jbs-context { max-width: 124px; }
  .jbs-context:not(.is-current) { display: none; }
  .jbs-avatar { width: 32px; height: 32px; }
  .jbs-local-action { display: inline-flex; align-items: center; }
  .jbs-support { justify-content: flex-start; flex-wrap: wrap; }
}