/* READABILITY: shell chrome (sidebar/topbar/nav/paint). Glass→lux-tokens; CTA sheen→lux-controls.
 * §1 layout/nav · §2 topbar structure · §3 soft-chrome paint (edit visuals here) · §4 bare helpers
 * !important z-index: keep in sync with mobile-shell-core drawer overlay. */
/* ── §1 layout tokens / shell / nav ── */
/* Shell paint is isolated here — do NOT use --lux-panel-surface (dashboard panels). */
:root {
  --lux-sidebar-width: 220px;
  --lux-sidebar-gutter: 12px;
  --lux-sidebar-offset: calc(var(--lux-sidebar-width) + var(--lux-sidebar-gutter) * 2);
  /* Soft bloom — same family as droplist (spring open / quicker close); transform-only for GPU */
  --lux-shell-slide-duration: 0.3s;
  --lux-shell-slide-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lux-shell-slide-close-duration: 0.18s;
  --lux-shell-slide-ease-out: cubic-bezier(0.4, 0, 1, 1);
  --lux-shell-scale-closed: 0.92;
  --lux-shell-stagger-base: 0.04s;
  /* ~75% transparent fill — neutral frost; Glow Density drives rim/halo only */
  --lux-shell-sidebar-alpha: 0.25;
  --lux-shell-sidebar-radius: 22px;
  --lux-shell-sidebar-blur: blur(20px) saturate(160%);
  --lux-shell-sidebar-border: color-mix(
    in srgb,
    rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.95)) 55%,
    rgba(255, 255, 255, 0.10)
  );
  --lux-shell-sidebar-fill: rgba(8, 12, 21, var(--lux-shell-sidebar-alpha));
  --lux-shell-sidebar-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
    linear-gradient(165deg,
      rgba(10, 15, 24, calc(var(--lux-shell-sidebar-alpha) * 0.55)),
      rgba(8, 12, 21, var(--lux-shell-sidebar-alpha)) 55%,
      rgba(6, 9, 16, calc(var(--lux-shell-sidebar-alpha) * 0.92)) 100%);
  --lux-shell-sidebar-shadow:
    0 0 0 1px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.70)),
    0 0 28px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.50)),
    0 0 56px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.22)),
    0 24px 58px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.lux-light-mode {
  --lux-shell-sidebar-alpha: 0.28;
  --lux-shell-sidebar-border: color-mix(
    in srgb,
    rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.85)) 48%,
    rgba(48, 34, 22, 0.10)
  );
  --lux-shell-sidebar-fill: rgba(255, 255, 255, var(--lux-shell-sidebar-alpha));
  --lux-shell-sidebar-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(165deg,
      rgba(255, 255, 255, calc(var(--lux-shell-sidebar-alpha) * 0.85)),
      rgba(255, 255, 255, var(--lux-shell-sidebar-alpha)) 55%,
      rgba(247, 241, 232, calc(var(--lux-shell-sidebar-alpha) * 0.9)) 100%);
  --lux-shell-sidebar-shadow:
    0 0 0 1px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.60)),
    0 0 24px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.40)),
    0 0 48px rgba(var(--lux-accent-rgb, 185, 68, 71), calc(var(--lux-panel-glow, 0.22) * 0.16)),
    0 22px 48px rgba(107, 91, 62, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
body.lux-sidebar-collapsed { --lux-sidebar-offset: 0px; }
/* Floating glassmorph sidebar — paint wins over FOUC/HT (shell-only, not panel surface) */
#lux-shell {
  position: fixed;
  top: var(--lux-sidebar-gutter, 12px);
  bottom: var(--lux-sidebar-gutter, 12px);
  left: var(--lux-sidebar-gutter, 12px);
  width: var(--lux-sidebar-width, 220px);
  height: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: var(--lux-text, #f8fafc);
  border-radius: var(--lux-shell-sidebar-radius, 22px);
  border: 1px solid var(--lux-shell-sidebar-border);
  background-color: var(--lux-shell-sidebar-fill) !important;
  background-image: var(--lux-shell-sidebar-image) !important;
  box-shadow: var(--lux-shell-sidebar-shadow);
  backdrop-filter: var(--lux-shell-sidebar-blur) !important;
  -webkit-backdrop-filter: var(--lux-shell-sidebar-blur) !important;
  background-clip: padding-box;
  transform-origin: left center;
  transition: transform var(--lux-shell-slide-duration) var(--lux-shell-slide-ease);
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
  contain: layout style;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
html.lux-shell-chrome-motion #lux-shell {
  will-change: transform;
}
body.lux-sidebar-collapsed {
  #lux-shell {
    transform: translate3d(calc(-100% - var(--lux-sidebar-gutter, 12px) - 12px), 0, 0) scale(var(--lux-shell-scale-closed));
    transition: transform var(--lux-shell-slide-close-duration) var(--lux-shell-slide-ease-out);
    pointer-events: none;
  }
}
.lux-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 14px;
  min-height: 0;
}
.lux-nav::-webkit-scrollbar { width: 0; }
.lux-nav-group {
  padding: 14px 12px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lux-text-soft, rgba(248, 250, 252, 0.55));
}
.lux-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 6px;
  padding: 10px 14px;
  border-radius: 14px;
  color: color-mix(in srgb, var(--lux-text, #fff) 72%, transparent);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: none;
}
.lux-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--lux-panel-control-soft, rgba(255, 255, 255, 0.08)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--lux-panel-border-soft, rgba(255, 255, 255, 0.1)) 70%, transparent);
  transition: opacity 0.18s ease;
}
.lux-nav-item > * { position: relative; z-index: 1; }
.lux-nav-item:hover:not(.is-active) {
  color: var(--lux-text, #fff);
}
.lux-nav-item:hover:not(.is-active)::before {
  opacity: 1;
}
.lux-nav-item.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--lux-accent) 34%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--lux-accent) 42%, var(--lux-panel-border, transparent));
  box-shadow: var(--lux-elev-2, var(--lux-panel-shadow-soft));
}
.lux-nav-item i { width: 16px; text-align: center; flex-shrink: 0; }
body.lux-light-mode #lux-shell {
  color: var(--lux-text, #1a2433);
  /* fill/image/border come from body.lux-light-mode shell vars above */
}
body.lux-light-mode #lux-shell .lux-nav-item { color: color-mix(in srgb, var(--lux-text, #1a2433) 78%, transparent); }
body.lux-light-mode #lux-shell .lux-nav-group { color: var(--lux-text-muted, rgba(26, 36, 51, 0.55)); }
body.lux-light-mode #lux-shell .lux-nav-item::before {
  background: rgba(26, 36, 51, 0.05);
  border-color: rgba(26, 36, 51, 0.08);
}
body.lux-light-mode #lux-shell .lux-nav-item:hover:not(.is-active) {
  color: var(--lux-text, #1a2433);
}
body.lux-light-mode #lux-shell .lux-nav-item.is-active {
  color: #fff8ef;
  background: color-mix(in srgb, var(--lux-accent) 78%, #fff 8%);
  border-color: color-mix(in srgb, var(--lux-accent) 55%, transparent);
}
#lux-topbar {
  position: fixed;
  top: 0;
  left: var(--lux-sidebar-offset, var(--lux-sidebar-width, 220px));
  right: 0;
  z-index: 55;
  display: block;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
body.lux-sidebar-collapsed {
  #lux-topbar { left: 0 !important; }
}
#lux-topbar .lux-topbar-shell {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 0;
  overflow: visible;
}
#lux-topbar {
  .lux-topbar-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .lux-topbar-spacer {
    flex: 1 1 auto;
    min-width: 8px;
    height: 1px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .lux-topbar-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .lux-utility-wrap, .lux-picker-wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .lux-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 4px;
  }
  .lux-breadcrumb strong { font-weight: 700; }
  .lux-picker-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 132px;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    cursor: pointer;
    text-align: left;
  }
  .lux-picker-caption {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .lux-picker-btn strong { display: block; font-size: 12px; font-weight: 700; }
  .lux-icon-btn {
    display: inline-grid;
    place-items: center !important;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .lux-sidebar-toggle-btn, .lux-topbar-editor-btn, .lux-secondary-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .lux-user-chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .lux-user-chip-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    line-height: 1.2;
  }
  .lux-user-chip-copy small { font-size: 10px; }
  .lux-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    background: var(--lux-accent, #7c5cff);
    color: #fff;
    border: 1.5px solid color-mix(in srgb, var(--lux-accent, #7c5cff) 40%, transparent);
  }
}
.lux-sidebar-toggle-btn, .lux-sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--lux-shell-slide-close-duration, 0.18s) var(--lux-shell-slide-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.lux-sidebar-toggle-btn:active, .lux-sidebar-close-btn:active {
  transform: scale(0.97);
}
.lux-sidebar-toggle-btn i, .lux-sidebar-close-btn i {
  display: inline-block;
  transition: transform var(--lux-shell-slide-duration, 0.3s) var(--lux-shell-slide-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
@media (prefers-reduced-motion: reduce) {
  #lux-shell,
  body.lux-sidebar-collapsed #lux-shell,
  .lux-sidebar-toggle-btn,
  .lux-sidebar-close-btn,
  .lux-sidebar-toggle-btn i,
  .lux-sidebar-close-btn i {
    transition: none;
  }
}
@media (max-width: 1100px) {
  #lux-topbar .lux-picker-btn { min-width: 110px; }
}
@media (max-width: 820px) {
  #lux-topbar .lux-topbar-shell { flex-wrap: wrap; align-items: flex-start; }
  #lux-topbar {
    .lux-topbar-main, .lux-topbar-actions { flex-wrap: wrap; }
    .lux-topbar-spacer { display: none; }
  }
}
#app-content { margin-left: var(--lux-sidebar-offset, calc(var(--lux-sidebar-width, 220px) + 24px)); min-width: 0; box-sizing: border-box; }
body.lux-sidebar-collapsed {
  #app-content { margin-left: 0; padding-left: 16px; padding-right: 16px; }
}
/* Bare routes keep the same glass shell (do not strip blur/radius) */
.lux-shell-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}
.lux-shell-head .lux-sidebar-close-btn {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  border-radius: 14px;
}
body.lux-sidebar-collapsed {
  #lux-sidebar-close { display: none; }
}
/* Keep toggle slot so breadcrumb/actions do not reflow when nav opens */
body:not(.lux-sidebar-collapsed) #lux-topbar .lux-sidebar-toggle-btn {
  visibility: hidden;
  pointer-events: none;
}
body.lux-sidebar-collapsed {
  #lux-topbar { z-index: 1000 !important; }
}
body:not(.lux-unified-shell) #lux-topbar { z-index: 1000 !important; }
@media (min-width: 1181px) {
  body.lux-unified-shell #app-content { margin-left: 0; width: 100%; }
  body.lux-unified-shell #lux-shell { z-index: 70; }
  body.lux-unified-shell:not(.lux-sidebar-collapsed)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 65;
    pointer-events: none;
    background: transparent;
  }
  body.lux-unified-shell:not(.lux-sidebar-collapsed) #lux-shell { z-index: 70 !important; }
  body.lux-unified-shell:not(.lux-sidebar-collapsed) #lux-topbar { z-index: 60 !important; }
}
.only-admin { display: none; }
.role-admin .only-admin { display: block; }
.role-admin .only-student { display: none; }
.role-professor .only-student, .role-ta .only-student, .role-student_service .only-student { display: none; }
/* ── §3 shared paint: TOPBAR SOFT-CHROME SSOT (same material as panels) ── */
body.lux-full-paint.lux-unified-shell #lux-topbar .lux-topbar-shell {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--lux-topbar-shell-min-height, 76px);
  padding: var(--lux-topbar-shell-padding, 12px 16px);
  border-radius: 0;
  border: 1px solid var(--lux-soft-chrome-border, var(--lux-focus-border, var(--lux-panel-border)));
  background-color: var(--home-glass-fill, rgba(8, 12, 21, var(--lux-transparency-alpha, 0.70)));
  background-image: var(--lux-soft-chrome-surface, var(--lux-focus-fill, var(--lux-panel-surface-soft)));
  box-shadow: var(--lux-soft-chrome-shadow, var(--lux-focus-shadow, var(--lux-elev-2)));
  /* fill-only soft-chrome — live frost stays on #lux-shell + merged desk (gpuperf4i) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-clip: padding-box;
  color: var(--lux-text);
}
body.lux-full-paint.lux-unified-shell #lux-topbar {
  .lux-topbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .lux-topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lux-breadcrumb {
    padding: 0 6px;
    font-size: 12px;
    color: var(--lux-text-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .lux-breadcrumb strong { color: var(--lux-text); font-weight: 700; }
  .lux-breadcrumb i { font-size: 9px; opacity: 0.55; margin: 0 6px; }
  .lux-sidebar-toggle-btn, .lux-topbar-editor-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    contain: paint;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    border-width: var(--lux-btn-frame-width, 3.5px);
    border-style: solid;
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    min-height: 42px;
    padding: 0 16px;
    gap: 8px;
    color: var(--lux-btn-ghost-label, var(--lux-btn-label, #f7fbff));
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-origin: padding-box;
    background-clip: padding-box;
    box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.18s ease;
  }
  .lux-sidebar-toggle-btn::before, .lux-topbar-editor-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 48%);
    opacity: 1;
  }
  .lux-sidebar-toggle-btn::after, .lux-topbar-editor-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: var(--lux-btn-sheen);
    transform: translateX(-130%) skewX(-14deg);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }
  .lux-sidebar-toggle-btn > *, .lux-topbar-editor-btn > * { position: relative; z-index: 1; }
  .lux-sidebar-toggle-btn:hover, .lux-sidebar-toggle-btn:focus-visible, .lux-topbar-editor-btn:hover, .lux-topbar-editor-btn:focus-visible {
    transform: translateY(-1px);
    color: var(--lux-btn-ghost-label, var(--lux-btn-label, #f7fbff));
    box-shadow: var(--lux-btn-ghost-shadow-hover, var(--lux-btn-frame-shadow-hover));
    background: var(--lux-btn-ghost-well-hover, var(--lux-btn-well-hover, var(--lux-btn-ghost-well, var(--lux-btn-well))));
  }
  .lux-sidebar-toggle-btn:hover::before, .lux-sidebar-toggle-btn:focus-visible::before, .lux-topbar-editor-btn:hover::before, .lux-topbar-editor-btn:focus-visible::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 28%, transparent 48%);
  }
  .lux-sidebar-toggle-btn:hover::after, .lux-sidebar-toggle-btn:focus-visible::after, .lux-topbar-editor-btn:hover::after, .lux-topbar-editor-btn:focus-visible::after {
    will-change: transform;
    transform: translateX(130%) skewX(-14deg);
    opacity: 1;
  }
  .lux-sidebar-toggle-btn.is-active { box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow)), 0 0 0 1px color-mix(in srgb, var(--lux-accent) 35%, transparent); }
  /* Framed CTA family: pickers + icon buttons share ghost well + fade + sheen */
  .lux-picker-btn, .lux-icon-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    contain: paint;
    transition: transform 0.18s ease;
  }
  .lux-picker-btn > *, .lux-icon-btn > * { position: relative; z-index: 1; }
  .lux-picker-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 8px 14px;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    border-width: var(--lux-btn-frame-width, 3.5px);
    border-style: solid;
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    background: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-origin: padding-box;
    background-clip: padding-box;
    box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--lux-btn-ghost-label, var(--lux-text));
  }
  .lux-picker-btn::before, .lux-icon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 48%);
    opacity: 1;
  }
  .lux-picker-btn::after, .lux-icon-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: var(--lux-btn-sheen);
    transform: translateX(-130%) skewX(-14deg);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }
  .lux-picker-btn:hover, .lux-picker-btn.is-active, .lux-picker-btn[aria-expanded="true"], .lux-picker-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    box-shadow: var(--lux-btn-ghost-shadow-hover, var(--lux-btn-frame-shadow-hover));
    background: var(--lux-btn-ghost-well-hover, var(--lux-btn-well-hover, var(--lux-btn-ghost-well, var(--lux-btn-well))));
  }
  .lux-picker-btn:hover::before, .lux-picker-btn.is-active::before, .lux-picker-btn[aria-expanded="true"]::before, .lux-picker-btn:focus-visible::before,
  .lux-icon-btn:hover::before, .lux-icon-btn:focus-visible::before, .lux-icon-btn.is-active::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 28%, transparent 48%);
  }
  .lux-picker-btn:hover::after, .lux-picker-btn.is-active::after, .lux-picker-btn[aria-expanded="true"]::after, .lux-picker-btn:focus-visible::after,
  .lux-icon-btn:hover::after, .lux-icon-btn:focus-visible::after, .lux-icon-btn.is-active::after {
    will-change: transform;
    transform: translateX(130%) skewX(-14deg);
    opacity: 1;
  }
  .lux-picker-caption { color: var(--lux-text-soft, var(--lux-text-muted)); }
  .lux-picker-btn strong { color: var(--lux-btn-ghost-label, var(--lux-text)); }
  .lux-picker-btn i { color: var(--lux-text-muted); }
  .lux-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    border-width: var(--lux-btn-frame-width, 3.5px);
    border-style: solid;
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    background: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-origin: padding-box;
    background-clip: padding-box;
    color: var(--lux-btn-ghost-label, var(--lux-text-muted));
    box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lux-icon-btn:hover, .lux-icon-btn:focus-visible, .lux-icon-btn.is-active {
    color: var(--lux-btn-ghost-label, var(--lux-text));
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    transform: translateY(-1px);
    box-shadow: var(--lux-btn-ghost-shadow-hover, var(--lux-btn-frame-shadow-hover));
    background: var(--lux-btn-ghost-well-hover, var(--lux-btn-well-hover, var(--lux-btn-ghost-well, var(--lux-btn-well))));
  }
  .lux-icon-badge:not(.is-zero) {
    background: linear-gradient(135deg, var(--lux-accent), var(--lux-accent-2, var(--lux-accent)));
    color: #fff;
  }
  .lux-user-chip {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid color-mix(
      in srgb,
      rgba(var(--lux-accent-rgb), calc(var(--lux-panel-glow, 0.22) * 0.90)) 48%,
      var(--lux-soft-chrome-border, var(--lux-panel-border-soft))
    );
    background-color: color-mix(in srgb, var(--home-glass-fill, rgba(8, 12, 21, 0.55)) 72%, transparent);
    background-image: var(--lux-soft-chrome-surface, var(--lux-panel-surface-soft));
    box-shadow: var(--lux-soft-chrome-chip-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--lux-text);
    padding: 5px 12px 5px 6px;
    min-height: 44px;
    transition: transform 0.18s ease;
  }
  .lux-user-chip::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--lux-accent-rgb), calc(var(--lux-panel-glow, 0.22) * 0.65)), transparent 72%);
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .lux-user-chip > * { position: relative; z-index: 1; }
  .lux-user-chip:hover, .lux-user-chip[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--lux-accent) 48%, var(--lux-soft-chrome-border, transparent));
    transform: translateY(-1px);
  }
  .lux-user-chip:hover::after, .lux-user-chip[aria-expanded="true"]::after {
    opacity: 1;
  }
  .lux-avatar {
    border: 1.5px solid color-mix(in srgb, var(--lux-accent) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lux-soft-chrome-surface, transparent) 80%, transparent);
  }
}
body.lux-full-paint.lux-unified-shell.lux-light-mode #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn)::before,
html.lux-light-mode body.lux-full-paint.lux-unified-shell #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn)::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 30%, transparent 52%);
}
body.lux-full-paint.lux-unified-shell.lux-light-mode #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn):is(:hover, .is-active, [aria-expanded="true"], :focus-visible)::before,
html.lux-light-mode body.lux-full-paint.lux-unified-shell #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn):is(:hover, .is-active, [aria-expanded="true"], :focus-visible)::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 30%, transparent 52%);
}
@media (prefers-reduced-motion: reduce) {
  body.lux-full-paint.lux-unified-shell #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn)::after {
    display: none;
  }
  body.lux-full-paint.lux-unified-shell #lux-topbar :is(.lux-picker-btn, .lux-icon-btn, .lux-sidebar-toggle-btn, .lux-topbar-editor-btn):is(:hover, .is-active, [aria-expanded="true"], :focus-visible) {
    transform: none;
  }
}
body.lux-full-paint.lux-unified-shell.lux-light-mode #lux-topbar .lux-topbar-shell,
html.lux-light-mode body.lux-full-paint.lux-unified-shell #lux-topbar .lux-topbar-shell {
  background-color: var(--home-glass-fill, rgba(250, 246, 240, calc(var(--lux-transparency-alpha, 0.70) * 0.82)));
  background-image: var(--lux-soft-chrome-surface, var(--lux-focus-fill, var(--lux-panel-surface-soft)));
  border-color: var(--lux-soft-chrome-border, var(--lux-focus-border, var(--lux-panel-border)));
  box-shadow: var(--lux-soft-chrome-shadow, var(--lux-focus-shadow, var(--lux-elev-2)));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.lux-full-paint.lux-unified-shell {
  #lux-topbar .lux-user-chip,
    &:not(.lux-light-mode) #lux-topbar .lux-user-chip {
    background: var(--lux-soft-chrome-surface, var(--lux-panel-surface-soft));
    border-color: var(--lux-soft-chrome-border, var(--lux-panel-border-soft));
    box-shadow: var(--lux-soft-chrome-shadow, var(--lux-elev-2));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--lux-text);
  }
  #lux-topbar .lux-picker-btn,
  #lux-topbar .lux-icon-btn {
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    border-width: var(--lux-btn-frame-width, 3.5px);
    border-style: solid;
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    background: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-origin: padding-box;
    background-clip: padding-box;
    box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #lux-topbar .lux-picker-btn {
    min-height: 48px;
    color: var(--lux-btn-ghost-label, var(--lux-text));
  }
  #lux-topbar .lux-picker-btn:hover, #lux-topbar .lux-picker-btn.is-active, #lux-topbar .lux-picker-btn[aria-expanded="true"] {
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    box-shadow: var(--lux-btn-ghost-shadow-hover, var(--lux-btn-frame-shadow-hover));
    background: var(--lux-btn-ghost-well-hover, var(--lux-btn-well-hover, var(--lux-btn-ghost-well, var(--lux-btn-well))));
  }
  #lux-topbar .lux-picker-btn strong { color: var(--lux-btn-ghost-label, var(--lux-text)); }
  #lux-topbar .lux-picker-caption { color: var(--lux-text-muted); }
  #lux-topbar .lux-icon-btn {
    width: 44px;
    height: 44px;
    color: var(--lux-btn-ghost-label, var(--lux-text-muted));
  }
  #lux-topbar .lux-icon-btn:hover, #lux-topbar .lux-icon-btn.is-active {
    color: var(--lux-btn-ghost-label, var(--lux-text));
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    box-shadow: var(--lux-btn-ghost-shadow-hover, var(--lux-btn-frame-shadow-hover));
    background: var(--lux-btn-ghost-well-hover, var(--lux-btn-well-hover, var(--lux-btn-ghost-well, var(--lux-btn-well))));
  }
  #lux-topbar .lux-user-chip,
  #lux-user-chip {
    display: none !important;
  }
  #lux-topbar .lux-user-chip:hover, #lux-topbar .lux-user-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--lux-accent) 40%, var(--lux-soft-chrome-border, transparent)); }
  #lux-topbar .lux-avatar { border: 1.5px solid color-mix(in srgb, var(--lux-accent) 45%, transparent); }
  #lux-topbar .lux-sidebar-toggle-btn, #lux-topbar .lux-topbar-editor-btn, &:not(.lux-light-mode) #lux-topbar .lux-topbar-editor-btn, &:not(.lux-light-mode) #lux-topbar .lux-sidebar-toggle-btn {
    border-radius: var(--lux-btn-pill-radius, 0 22px 0 22px);
    border-width: var(--lux-btn-frame-width, 3.5px);
    border-style: solid;
    border-color: var(--lux-btn-border-solid, var(--lux-accent));
    min-height: 42px;
    padding: 0 16px;
    color: var(--lux-btn-ghost-label, var(--lux-btn-label, #f7fbff));
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-image: var(--lux-btn-ghost-well, var(--lux-btn-well));
    background-origin: padding-box;
    background-clip: padding-box;
    box-shadow: var(--lux-btn-ghost-shadow, var(--lux-btn-frame-shadow));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #lux-topbar .lux-sidebar-toggle-btn:hover, #lux-topbar .lux-topbar-editor-btn:hover {
    color: var(--lux-btn-ghost-label, var(--lux-btn-label, #f7fbff));
  }
  #lux-topbar .lux-breadcrumb {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--lux-text-muted);
  }
  #lux-topbar .lux-breadcrumb strong { color: var(--lux-text); }
}
body.lux-full-paint.lux-unified-shell.lux-light-mode #lux-topbar :is(.lux-sidebar-toggle-btn, .lux-topbar-editor-btn),
html.lux-light-mode body.lux-full-paint.lux-unified-shell #lux-topbar :is(.lux-sidebar-toggle-btn, .lux-topbar-editor-btn) {
  text-shadow: none;
}
body.lux-full-paint {
  #lux-shell { contain: layout style; }
  .lux-card, .lux-quick-btn, .lux-stat, .lux-alert, .lux-nav-item, .lux-pill, .lux-picker-panel, .lux-utility-panel { isolation: auto; }
  &.lux-light-mode #lux-shell .lux-nav-group, &.lux-light-mode #lux-shell .lux-user-role { color: var(--lux-text-muted); }
  :is(&.lux-light-mode #lux-shell .lux-nav-item, &.lux-light-mode #lux-shell .lux-nav-item:hover) { color: var(--lux-text); }
  &.lux-light-mode #lux-shell .lux-nav-item i { color: currentColor; }
  &.lux-light-mode #lux-shell .lux-nav-item.is-active { color: #fff8ef; }
  .lux-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--lux-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 9px;
    font-weight: 700;
  }
}
.lux-shell-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--lux-panel-border-soft, var(--lux-border));
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  flex-shrink: 0;
}
.lux-user-name { font-size: 12px; font-weight: 600; color: var(--lux-text); }
.lux-user-role {
  font-size: 10px;
  color: var(--lux-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.lux-full-paint {
  /* Overlay shell: keep topbar chrome pinned — do not shove pickers/actions when nav opens */
  --lux-topbar-shift: 0;
  #lux-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lux-topbar-height);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    background: linear-gradient(180deg, rgba(var(--lux-topbar-tint-rgb), 0.88), rgba(var(--lux-topbar-tint-rgb), 0.74));
    border-bottom: 1px solid var(--lux-border);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    z-index: 45;
    contain: layout style;
    transform: translate3d(var(--lux-topbar-shift, 0), 0, 0);
  }
  /* Unified shell: host is transparent — only .lux-topbar-shell paints soft-chrome */
  &.lux-unified-shell #lux-topbar {
    height: auto;
    min-height: 0;
    display: block;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  .lux-topbar select {
    background: rgba(var(--lux-glass-tint-rgb), 0.34);
    border: 1px solid var(--lux-border);
    border-radius: 12px;
    color: var(--lux-text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
  }
  .lux-topbar select { height: 38px; padding: 0 12px; }
  .lux-topbar select:focus {
    border-color: rgba(var(--lux-accent-rgb), 0.28);
    background: rgba(var(--lux-glass-tint-rgb), 0.44);
  }
  .lux-topbar-spacer { flex: 1; }
  .lux-topbar-actions { display: flex; align-items: center; gap: 8px; }
  &.lux-sidebar-collapsed #lux-shell {
    transform: translate3d(calc(-100% - var(--lux-sidebar-gutter, 12px) - 12px), 0, 0) scale(var(--lux-shell-scale-closed));
    pointer-events: none;
    transition: transform var(--lux-shell-slide-close-duration) var(--lux-shell-slide-ease-out);
  }
  &:not(.lux-sidebar-collapsed) #lux-shell {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    transition: transform var(--lux-shell-slide-duration) var(--lux-shell-slide-ease);
  }
  &.lux-sidebar-collapsed #app-content {
    margin-left: 0;
    padding-left: 18px;
    padding-right: 18px;
    transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1), padding 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  &:not(.lux-sidebar-collapsed) #app-content { transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1), padding 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
  &.lux-sidebar-collapsed .page-section { max-width: none; width: 100%; margin: 0; }
  &.lux-sidebar-collapsed { --lux-sidebar-offset: 0px; }
  #lux-shell, .lux-picker-panel {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  .lux-nav-item, .lux-quick-btn, .lux-stat, .lux-alert, .lux-pill, .lux-user-menu, .lux-breadcrumb {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #lux-shell {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  #lux-topbar { z-index: 1000 !important; }
  #lux-topbar, .lux-card-head, .lux-nav-item { overflow: visible; }
  &.lux-studio-open #lux-topbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: translateY(-14px);
  }
  &.lux-studio-open #lux-topbar .lux-topbar-shell { pointer-events: none !important; }
}
@keyframes luxShellNavEnter {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lux-nav-item::before { display: none; }
}
@media (min-width: 1181px) {
  body.lux-unified-shell #lux-shell .lux-nav-item { opacity: 0; }
  body.lux-unified-shell:not(.lux-sidebar-collapsed) #lux-shell .lux-nav-item {
    animation: luxShellNavEnter 0.32s ease both;
    animation-delay: calc(var(--lux-shell-stagger-base) + var(--lux-nav-stagger, 0s));
    opacity: 1;
  }
  body.lux-unified-shell.lux-sidebar-collapsed #lux-shell .lux-nav-item { animation: none; opacity: 0; }
}
/* ── §4 bare-portal chrome helpers + focus-within ── */
body.lux-page-bare .lux-page-shell {
  background-color: var(--lux-panel-fill);
  background-image: var(--lux-panel-surface);
  border: 1px solid var(--lux-panel-host-border);
  border-radius: var(--lux-panel-radius, 22px);
  box-shadow: var(--lux-panel-host-shadow);
  backdrop-filter: var(--lux-panel-blur-filter);
  -webkit-backdrop-filter: var(--lux-panel-blur-filter);
  background-clip: padding-box;
}
body.lux-page-bare .page-hero { display: grid; gap: 12px; padding: 12px 0; }
body.lux-page-bare .page-hero p { color: var(--lux-text-muted, rgba(248, 250, 252, 0.65)); line-height: 1.5; margin: 0; }
body.lux-page-bare .lux-empty-state {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 24px 16px;
  text-align: center;
  color: var(--lux-text-muted, rgba(248, 250, 252, 0.65));
}
body.lux-page-bare #lux-topbar .lux-topbar-shell, body.lux-page-bare #lux-topbar .lux-topbar-main, body.lux-page-bare #lux-topbar .lux-topbar-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.lux-page-bare #lux-topbar .lux-topbar-shell { flex-wrap: nowrap; }
body.lux-page-bare #lux-topbar :is( .lux-picker-btn,
  .lux-icon-btn,
  .lux-user-chip,
  .lux-sidebar-toggle-btn,
  .lux-topbar-editor-btn,
  .lux-secondary-btn,
  .lux-utility-wrap,
  .lux-picker-wrap,
  .lux-breadcrumb ) {
  width: auto;
  max-width: none;
}
body.lux-page-bare #lux-topbar .lux-icon-btn { width: 40px; height: 40px; }
/* Open / focus-within panels rise above siblings (was index-home-dashboard unscoped tail). */
body.lux-full-paint {
  :is(.lux-card, .lux-panel, .lux-subcard, .lux-section-card, .lux-hero, .lux-timetable-stage, .page-section, .lux-page-shell):focus-within, :is(.lux-card, .lux-panel, .lux-subcard, .lux-section-card):has(.is-open) {
    overflow: visible;
    contain: layout style;
    z-index: 900;
  }
}