/* Appearance preview: the native host owns the 317px / 72px column width. */
.booster-appearance-menu,
.booster-appearance-menu > .x-panel-body,
.booster-appearance-frame,
.booster-appearance-frame > .x-panel-body {
  background: #172232 !important;
  border-color: #343c48 !important;
}
.bs-sidebar-mount { height:100%; min-height:0; }
.bs-sidebar {
  --bs-ink: #e1e7ef;
  --bs-muted: #a8b4c4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #172232;
  background-image:
    radial-gradient(ellipse at 6% 8%, #4b98de80 0, transparent 58%),
    radial-gradient(ellipse at 96% 78%, #156fde78 0, transparent 62%),
    linear-gradient(158deg, #263e58 0%, #102c48 42%, #123e68 74%, #172b43 100%);
  background-size: 160% 140%, 170% 150%, 140% 140%;
  background-position: 0% 0%, 100% 80%, 35% 35%;
  animation: bs-sidebar-drift var(--bs-drift-duration,53s) ease-in-out var(--bs-drift-delay,-17s) infinite alternate;
  color: var(--bs-ink);
  border-right: 1px solid #748ba52b;
  box-shadow: inset -1px 0 0 #d3e6ff2b, inset 0 1px 0 #c9e5ff24;
  font: 13px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}
.bs-sidebar *, .bs-sidebar *::before, .bs-sidebar *::after { box-sizing: border-box; }
.bs-sidebar[hidden], .bs-sidebar [hidden] { display: none !important; }
.bs-sidebar button { font: inherit; color: inherit; cursor: pointer; }
.bs-sidebar button:disabled { cursor: default; opacity: .55; }
.bs-sidebar button:focus-visible { outline: 2px solid #8bbdff; outline-offset: -3px; }
.bs-brand { display: block; width: 100%; border: 0; background: transparent; text-align: left; flex: none; padding: 27px 23px 25px; min-height: 101px; }
.bs-brand-full, .bs-brand-mark { color: #ffda27; font-size: 29px; line-height: 1.1; font-weight: 850; font-style: italic; letter-spacing: -1.2px; }
.bs-brand-mark { display: none; font-size: 28px; }
.bs-brand-sub { display: block; margin-top: 7px; color: var(--bs-muted); font-size: 10px; letter-spacing: .8px; }
.bs-menu { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 16px; scrollbar-width: thin; scrollbar-color: #526072 transparent; }
.bs-side-link { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 48px; margin: 3px 0; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; }
.bs-sidebar .bs-side-link { font-size: 16px; }
.bs-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 21px; width: 21px; color: #a8b5c7; font-size: 17px; }
.bs-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-side-link:hover:enabled, .bs-profile:hover:enabled, .bs-collapse:hover:enabled { background: #7498c01c; }
.bs-side-link[aria-current="page"] { background: linear-gradient(110deg, #2676d9e8, #2565bcbf 70%, #315f9dab); border-color: #8dc0ff55; color: #fff; box-shadow: inset 0 1px 0 #d7eaff1f, 0 4px 15px #071b3738; }
.bs-side-link[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #6bb8ff; box-shadow: 0 0 9px #469fff66; }
.bs-side-link[aria-current="page"] .bs-icon { color: #fff; }
.bs-badge { display: inline-flex; justify-content: center; align-items: center; flex: none; min-width: 22px; min-height: 20px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(145deg, #b8d4f125, #9cbfe913); border: 1px solid #c1d9f226; box-shadow: inset 0 1px 0 #e4f1ff0c; color: #dbe8f7; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-side-link[aria-current="page"] .bs-badge { background: linear-gradient(145deg, #ffffff24, #d2e6ff13); border-color: #dcf0ff38; color: #fff; }
.bs-divider { height: 1px; margin: 15px 11px; background: linear-gradient(90deg, transparent, #bdd5f029, transparent); border: 0; }
.bs-footer { position: relative; flex: none; min-width: 0; padding: 11px 12px 12px; border-top: 1px solid #a6c1df1f; background: linear-gradient(180deg, #abc9ee04, #0e1b2b14); }
.bs-profile { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 50px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.bs-avatar { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 50%; background: linear-gradient(145deg, #526f92, #344c6b); box-shadow: inset 0 1px 0 #d7eaff21; color: #ecf3fd; font-size: 12px; font-weight: 650; }
.bs-user { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.bs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.bs-user-sub { color: var(--bs-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-profile-menu { position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(100% + 6px); max-height: min(300px, 60dvh); overflow: auto; padding: 5px; border: 1px solid #566171; border-radius: 9px; background: #2d3642; box-shadow: 0 9px 30px #0006; }
.bs-profile-menu button { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; text-align: left; overflow-wrap: anywhere; }
.bs-profile-menu button:hover:enabled { background: #40516a; }
.bs-theme-controls { display: flex; gap: 3px; padding: 4px; margin-top: 10px; border: 1px solid #acc8e523; border-radius: 8px; background: #0b182a38; box-shadow: inset 0 1px 2px #0815251f; }
.bs-theme-controls button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 0; min-height: 32px; padding: 5px 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #b9c4d3; font-size: 10px; }
.bs-theme-controls .bs-label { flex: none; width: 100%; text-align: center; }
.bs-theme-controls button:hover:enabled { background: #303b4a; }
.bs-theme-controls button[aria-pressed="true"] { background: linear-gradient(145deg, #5679a356, #405c803d); border-color: #9cc2ee45; color: #fff; }
.bs-collapse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 34px; margin-top: 8px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #a8b4c4 !important; font-size: 11px !important; }
.bs-sidebar[data-collapsed="true"] .bs-brand { padding: 25px 0 22px; min-height: 94px; text-align: center; }
.bs-sidebar[data-collapsed="true"] :is(.bs-brand-full, .bs-brand-sub, .bs-label, .bs-user) { display: none; }
.bs-sidebar[data-collapsed="true"] .bs-brand-mark { display: inline; }
.bs-sidebar[data-collapsed="true"] .bs-menu { padding-inline: 10px; }
.bs-sidebar[data-collapsed="true"] .bs-side-link { justify-content: center; gap: 0; padding: 10px 0; }
.bs-sidebar[data-collapsed="true"] .bs-divider { margin-inline: 4px; }
.bs-sidebar[data-collapsed="true"] .bs-footer { padding-inline: 8px; }
.bs-sidebar[data-collapsed="true"] .bs-profile > .bs-icon { display: none; }
.bs-sidebar[data-collapsed="true"] .bs-profile { justify-content: center; padding-inline: 0; }
.bs-sidebar[data-collapsed="true"] .bs-theme-controls { flex-direction: column; }
.bs-sidebar[data-collapsed="true"] .bs-theme-controls button { flex: none; font-size: 8px; padding-inline: 0; }
.bs-sidebar[data-collapsed="true"] .bs-profile-menu { left: 3px; right: 3px; }
.bs-sidebar[data-collapsed="true"] .bs-profile-menu button { padding-inline: 4px; font-size: 10px; }
.bs-backdrop { position: fixed; inset: 0; z-index: 999999; background: #080d1599; backdrop-filter: blur(2px); }
.bs-backdrop[hidden] { display: none !important; }
.bs-sidebar[data-overlay="true"] { position: fixed; inset: 0 auto 0 0; z-index: 1000000; width: 264px; max-width: calc(100vw - 20px); height: 100dvh; box-shadow: 10px 0 36px #0006; }
@media (max-height: 500px) {
  .bs-brand, .bs-sidebar[data-collapsed="true"] .bs-brand { min-height: 61px; padding-block: 14px 10px; }
  .bs-brand-full { font-size: 24px; }
  .bs-brand-sub { display: none; }
  .bs-side-link { min-height: 48px; margin-block: 2px; }
  .bs-footer { padding-block: 5px; }
  .bs-profile { min-height: 41px; }
  .bs-theme-controls { margin-top: 4px; }
  .bs-theme-controls button { min-height: 28px; }
  .bs-collapse { min-height: 28px; margin-top: 3px; }
}

.bs-sidebar[data-collapsed="true"] .bs-badge {position:absolute;top:1px;right:0;min-width:18px;min-height:16px;padding:0 3px;font-size:9px}

.bs-icon svg{display:block;width:21px;height:21px;flex:none}

/* Slow layered movement keeps the footer on the same continuous surface. */
@keyframes bs-sidebar-drift {
  0% { background-position: 0% 0%, 100% 80%, 35% 35%; }
  45% { background-position: 65% 25%, 35% 100%, 65% 50%; }
  100% { background-position: 100% 65%, 0% 15%, 15% 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-sidebar { animation: none; }
}

/* Navigation scales independently from the compact footer controls. */
.bs-side-link .bs-icon { flex-basis: 24px; width: 24px; }
.bs-side-link .bs-icon svg { width: 24px; height: 24px; }

.bs-side-link[aria-current="page"] { background: linear-gradient(115deg,#368effcc,#1266cebd 54%,#285a9fa6); border-color:#92c9ff8c; box-shadow:inset 0 1px 0 #e3f4ff66,inset 0 -1px 0 #8dc1ff29,0 5px 22px #0c74ff2b; }