:root {
  --sw-space-ink: #285795;
  --sw-space-soft: #e9f2fc;
  --sw-space-line: #c8dced;
  --sw-space-accent: #5588bd;
}

:root[data-sw-role="bbp_employee"] {
  --sw-space-ink: #17695f;
  --sw-space-soft: #e5f3ed;
  --sw-space-line: #badbd0;
  --sw-space-accent: #378b7a;
}

:root[data-sw-role="dragonlord"] {
  --sw-space-ink: #654285;
  --sw-space-soft: #f0eafa;
  --sw-space-line: #dac9e9;
  --sw-space-accent: #9872b8;
}

:root[data-sw-role="champion"] {
  --sw-space-ink: #8a5c20;
  --sw-space-soft: #fbf1dc;
  --sw-space-line: #e8d8ad;
  --sw-space-accent: #bf974b;
}

.sw-space-host { flex: 0 0 auto; min-width: 0; }

.sw-space-trigger,
.sw-space-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  max-width: 320px;
  padding: 8px 13px 8px 9px;
  border: 1px solid var(--sw-space-line);
  border-radius: 18px;
  background: var(--sw-space-soft);
  color: var(--sw-space-ink);
  box-shadow: 0 3px 12px #23466506, inset 0 1px 0 #ffffffb5;
  text-align: left;
  line-height: 1.25;
}

.sw-space-trigger { transition: border-color .15s, box-shadow .15s, transform .15s; }
.sw-space-trigger:hover { border-color: var(--sw-space-accent); box-shadow: 0 5px 18px #23466512; }
.sw-space-trigger:active { transform: translateY(1px); }
.sw-space-trigger:disabled { cursor: progress; opacity: .7; }
.sw-space-trigger:focus-visible,
.sw-space-picker button:focus-visible,
.sw-space-stale button:focus-visible { outline: 3px solid #679ace; outline-offset: 4px; }
.sw-space-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #ffffff91; font-size: 21px; flex: 0 0 auto; }
.sw-space-symbol svg { width: 23px; height: 23px; display: block; }
.sw-space-copy { display: grid; gap: 3px; min-width: 0; }
.sw-space-copy strong { font-size: 13px; font-weight: 800; }
.sw-space-copy small { display: block; max-width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; opacity: .79; font-weight: 550; }
.sw-space-chevron { margin-left: 7px; font-size: 17px; opacity: .7; }
.sw-space-trigger[aria-expanded="true"] .sw-space-chevron { transform: rotate(180deg); }

.sw-space-picker,
.sw-space-stale {
  box-sizing: border-box;
  color: #243449;
  border: 1px solid #d3dfeb;
  background: #fcfdfefa;
  box-shadow: 0 24px 70px #21354c35, 0 4px 16px #21354c0c;
  font-family: inherit;
}

.sw-space-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  border-radius: 22px;
  padding: 22px;
  max-height: calc(100dvh - 24px);
  max-width: calc(100vw - 24px);
  overflow: auto;
}

.sw-space-picker::backdrop { background: #233d581b; }
.sw-space-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sw-space-eyebrow { color: #8290a1; letter-spacing: .17em; font-size: 9px; font-weight: 750; margin: 0 0 8px; }
.sw-space-picker h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.025em; margin: 0; font-weight: 760; }
.sw-space-picker .sw-space-close { display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 10px; width: 30px; height: 30px; padding: 0; color: #758398; background: #eef2f7; font-size: 23px; font-weight: 400; }
.sw-space-caption { margin: 13px 0 19px; font-size: 12px; line-height: 1.55; color: #728095; }
.sw-space-options { display: grid; gap: 8px; }
.sw-space-option { --choice-ink: #285795; --choice-bg: #e9f2fc; --choice-line: #c8dced; display: flex; gap: 12px; align-items: center; width: 100%; border: 1px solid #e3e9ef; border-radius: 14px; padding: 12px; background: #fff; color: #28374c; text-align: left; min-height: 75px; }
.sw-space-option[data-space-role="bbp_employee"] { --choice-ink: #17695f; --choice-bg: #e5f3ed; --choice-line: #badbd0; }
.sw-space-option[data-space-role="dragonlord"] { --choice-ink: #654285; --choice-bg: #f0eafa; --choice-line: #dac9e9; }
.sw-space-option[data-space-role="champion"] { --choice-ink: #8a5c20; --choice-bg: #fbf1dc; --choice-line: #e8d8ad; }
.sw-space-option:hover,
.sw-space-option.is-active { border-color: var(--choice-line); background: var(--choice-bg); }
.sw-space-option:disabled { cursor: progress; opacity: .65; }
.sw-space-option-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; flex: 0 0 auto; background: var(--choice-bg); font-size: 22px; }
.sw-space-option-icon svg { width: 24px; height: 24px; display: block; color: var(--choice-ink); }
.sw-space-option.is-active .sw-space-option-icon { background: #ffffffb3; }
.sw-space-option-copy { display: grid; gap: 5px; min-width: 0; }
.sw-space-option-copy strong { color: var(--choice-ink); font-size: 13px; line-height: 1.25; font-weight: 800; }
.sw-space-option-copy small { font-size: 10px; color: #728095; line-height: 1.45; }
.sw-space-option-state { margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--choice-ink); white-space: nowrap; }
.sw-space-footer { padding-top: 16px; margin: 17px 0 0; border-top: 1px solid #e4eaf0; font-size: 10px; color: #8691a0; line-height: 1.6; }
.sw-space-error { margin: 14px 0 0; padding: 11px 13px; background: #fff0e9; color: #995038; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.sw-space-error[hidden] { display: none; }
.sw-space-loading { color: #728095; font-size: 12px; padding: 25px 0; text-align: center; }
.sw-space-retry { color: #285795; border: 1px solid #c8dced; background: #e9f2fc; border-radius: 11px; padding: 12px; }

.sw-space-stale { border-radius: 24px; width: min(410px, calc(100vw - 32px)); padding: 30px; text-align: center; }
.sw-space-stale::backdrop { background: #253c5361; backdrop-filter: blur(3px); }
.sw-space-stale-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 20px; place-items: center; background: #edf3fa; color: #5c83ac; border-radius: 16px; font-size: 30px; }
.sw-space-stale h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 12px; }
.sw-space-stale p { color: #728095; font-size: 13px; line-height: 1.65; }
.sw-space-reload { border: 0; border-radius: 12px; background: #2f5f91; color: white; width: 100%; padding: 14px; font-size: 13px; font-weight: 700; margin-top: 6px; }
.sw-workspace-locked #appShell,
.sw-workspace-locked #quickShell,
.sw-workspace-locked #clientShell { pointer-events: none; }

.sw-account-active .topbar { position: sticky; top: 8px; z-index: 35; align-items: center; flex-wrap: wrap; row-gap: 12px; padding: 13px 17px; margin: -13px -17px 24px; border-radius: 18px; background: #f3f7fbe8; box-shadow: 0 6px 20px #21354c08; backdrop-filter: blur(14px); }
.sw-account-active .topbar > div:first-child { flex: 1 1 300px; min-width: 0; }
.sw-account-active .topbar > .sw-space-host { max-width: 100%; }
.sw-account-active .topbar h1 { font-size: clamp(28px, 3vw, 40px); }
.sw-account-active .topbar p { max-width: 680px; font-size: 13px; line-height: 1.45; }
.sw-account-active .pipeline-zone-nav { top: 118px; }
.sw-account-active .pipeline-zone,
.sw-account-active .control-focus-group { scroll-margin-top: 180px; }
.sw-account-active .yu-app .yu-syllabus { top: 128px; }
.sw-account-active .yu-app .yu-training.is-editing .yu-toolbar { top: 118px; }
.sw-account-active .sw-client-header { position: sticky; top: 0; z-index: 35; background: #f3f7fbf5; backdrop-filter: blur(14px); }
.sw-quick-spacebar { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; top: 10px; z-index: 35; padding: 10px 14px; margin: -10px -14px 25px; border-radius: 17px; background: #f3f7fbf2; backdrop-filter: blur(12px); }
.sw-quick-spacebar .quick-topline { margin: 0; }
.sw-space-mobilebar { display: none; }

:root:not([data-sw-role="owner"]) .nav-item.active { background: var(--sw-space-soft); border-color: var(--sw-space-line); color: var(--sw-space-ink); }

@media (max-width: 1280px) {
  /* The account picker needs the full header width beside the sidebar. */
  body.sw-account-active .topbar::after { display: none; }
}

@media (max-width: 760px) {
  .sw-account-active { padding-top: 76px; }
  .sw-space-mobilebar { display: flex; position: fixed; inset: 0 0 auto; z-index: 60; min-height: 76px; padding: 10px 14px; background: #f7fafdf2; border-bottom: 1px solid #dbe4ee; backdrop-filter: blur(18px); align-items: center; justify-content: space-between; gap: 10px; }
  .sw-space-mobilebrand { font-size: 9px; letter-spacing: .13em; font-weight: 800; color: #758aa3; max-width: 75px; line-height: 1.6; }
  .sw-space-mobilebar .sw-space-trigger,
  .sw-space-mobilebar .sw-space-badge { max-width: min(280px, calc(100vw - 110px)); min-height: 48px; padding: 7px 10px 7px 7px; border-radius: 16px; gap: 8px; }
  .sw-space-mobilebar .sw-space-copy small { max-width: 155px; }
  .sw-space-mobilebar .sw-space-copy strong { font-size: 12px; }
  .sw-space-mobilebar .sw-space-symbol { width: 31px; height: 31px; font-size: 19px; }
  .topbar > .sw-space-host,
  .sw-client-account > .sw-space-host,
  .sw-quick-spacebar > .sw-space-host { display: none; }
  .sw-account-active .topbar { position: relative; top: auto; z-index: auto; padding: 0; margin: 0 0 22px; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .sw-account-active .pipeline-zone-nav { top: 82px; z-index: 30; }
  .sw-account-active .pipeline-zone,
  .sw-account-active .control-focus-group { scroll-margin-top: 158px; }
  .sw-account-active .yu-app .yu-syllabus { top: 85px; }
  .sw-account-active .yu-app .yu-training.is-editing .yu-toolbar { top: 83px; }
  .sw-account-active .sw-client-header { position: relative; top: auto; z-index: auto; }
  .sw-quick-spacebar { position: static; padding: 0; margin: 0 0 20px; background: none; }
  .sw-space-picker { padding: 19px; border-radius: 20px; }
  .sw-space-option { padding: 11px; gap: 10px; }
  .sw-space-option-copy small { font-size: 10px; }
  .sw-space-option-state { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-space-trigger { transition: none; }
}