body.panel-bg-pattern-active #toolbar-panel > .panel-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 12%, rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg, rgba(var(--toolbar-header-rgb), calc(var(--toolbar-alpha) * 0.98)) 0%, rgba(var(--toolbar-header-rgb), calc(var(--toolbar-alpha) * 0.98)) 100%),
    var(--toolbar-header-pattern-layer) !important;
  background-size: auto, auto, 256px 256px !important;
}

body.panel-bg-pattern-active #toolbar-panel > .panel-header::before {
  background-image: var(--toolbar-header-pattern-layer) !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: 256px 256px !important;
  opacity: calc(var(--toolbar-alpha) * var(--toolbar-header-pattern-alpha)) !important;
}

body.panel-bg-pattern-active #toolbar-panel > .panel-body {
  background: transparent !important;
}

body.panel-bg-pattern-active #toolbar-panel > .panel-body::before {
  background: none !important;
  opacity: 0 !important;
}


/* ============================================================
   Theme system restoration — requested shell/header/body panels
   Purpose: keep these panels on the same live project chrome lane,
   make panel/header pattern dropdowns visible again, and stop
   bespoke hardcoded backgrounds from drifting away from the rest.
   ============================================================ */
 :is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) {
  color: #eef6ff !important;
  border-color: var(--panel-shell-border) !important;
  border-radius: var(--panel-shell-radius) !important;
  box-shadow: var(--panel-shell-shadow) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-shell-alpha, 1) * 0.045)) 0%, rgba(255,255,255,calc(var(--panel-shell-alpha, 1) * 0.018)) 9%, rgba(255,255,255,0.00) 16%),
    var(--panel-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-shell-rgb, 16,26,40),calc(var(--panel-shell-alpha, 1) * 0.98)) 0%, rgba(var(--panel-shell-rgb-deep, 11,19,31),calc(var(--panel-shell-alpha, 1) * 0.98)) 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-position: 0 0, left top, 0 0 !important;
  background-size: auto, 256px 256px, auto !important;
}

:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header,
body.panel-bg-pattern-active :is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header {
  position: relative;
  overflow: hidden;
  min-height: var(--panel-header-h, 52px) !important;
  height: var(--panel-header-h, 52px) !important;
  padding: 0 var(--panel-header-pad-x, 14px) !important;
  gap: var(--panel-header-gap, 12px) !important;
  border-bottom: 1px solid var(--panel-header-divider, rgba(131, 182, 232, 0.38)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-header-alpha, 1) * 0.12)) 0%, rgba(255,255,255,calc(var(--panel-header-alpha, 1) * 0.03)) 12%, rgba(255,255,255,0.00) 100%),
    var(--panel-header-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-header-rgb, 70,103,137),var(--panel-header-alpha, 1)) 0%, rgba(var(--panel-header-rgb-deep, 34,56,79),var(--panel-header-alpha, 1)) 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-position: 0 0, left top, 0 0 !important;
  background-size: auto, 256px 256px, auto !important;
}

:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-body,
body.panel-bg-pattern-active :is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-body {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-body-alpha, 1) * 0.05)) 0%, rgba(255,255,255,0.00) 18%),
    var(--panel-pattern-layer),
    linear-gradient(180deg, rgba(8,12,19,calc(var(--panel-body-alpha, 1) * 0.36)) 0%, rgba(8,12,19,calc(var(--panel-body-alpha, 1) * 0.18)) 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-position: 0 0, left top, 0 0 !important;
  background-size: auto, 256px 256px, auto !important;
}

:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header > *,
:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-body > * {
  position: relative;
  z-index: 1;
}

:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header :is(.panel-title, .fp-title, .profile-title, .dm-title, .favpicker-title) {
  color: #eef6ff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.26) !important;
  font-weight: 800 !important;
  letter-spacing: 0.35px !important;
}

/* Ensure header/body pattern overlays are anchored to the actual surfaces. */
body.panel-bg-pattern-active :is(.panel-shell-list,
    .panel-shell-sidecard,
    .panel-shell-modal,
    .panel-shell-setup-lg,
    .panel-shell-rpg,
    .panel-shell-editor,
    .panel-shell-gameplay-wide,
    .panel-shell-gameplay-xl,
    .panel-shell-canvas,
    #friends-panel,
    #ui-options-panel,
    #ui-button-list-panel,
    #controls-panel,
    #records-panel,
    #quest-log-panel,
    #quest-board-panel,
    #inventory-panel,
    #stats-panel,
    #shop-panel,
    #paperdoll-panel,
    #changelog-panel,
    #story-panel,
    #music-tracklist-panel,
    #party-status-panel,
    #profile-panel,
    #lobby-search-panel,
    #matchmake-panel,
    #dm-panel,
    #tutorial-info-panel,
    #global-results-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #trash-panel,
    #garden-editor-panel,
    #profile-favpicker-panel,
    #toolbar-panel) > :is(.panel-header, .panel-body) {
  position: relative;
}

/* Trail utility panel controls intentionally use the global .std-panel-controls contract. */