/* ============================================================
   Panel theme — extracted from 03-panel-contract.css
   Shared panel theme vars + pattern-active shell/body/header overlays.
   Pattern-active ownership migrated out of 99-legacy-overrides-b.css.
   ============================================================ */

:root {
  --panel-header-h: 52px;
  --panel-header-pad-x: 14px;
  --panel-header-gap: 12px;
  --panel-shell-radius: 22px;
  --panel-shell-bg: rgba(12, 21, 34, 0.96);
  --panel-shell-border: rgba(100, 134, 173, 0.92);
  --panel-shell-border-soft: rgba(170, 208, 246, 0.18);
  --panel-shell-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 4px 14px rgba(0, 0, 0, 0.22);
  --panel-header-top: #466789;
  --panel-header-bottom: #22384f;
  --panel-header-divider: rgba(131, 182, 232, 0.38);
  --panel-body-top-highlight: rgba(255, 255, 255, 0.04);
  --panel-pattern-layer: none;
  --panel-header-pattern-layer: none;
  --panel-pattern-alpha: 0;
  --panel-header-pattern-alpha: 0;
  --panel-shell-alpha: 1;
  --panel-body-alpha: 1;
  --panel-header-alpha: 1;
}

body.panel-bg-pattern-active .panel-shell-list,
body.panel-bg-pattern-active .panel-shell-sidecard,
body.panel-bg-pattern-active .panel-shell-modal,
body.panel-bg-pattern-active .panel-shell-setup-lg,
body.panel-bg-pattern-active .panel-shell-rpg,
body.panel-bg-pattern-active .panel-shell-editor,
body.panel-bg-pattern-active .panel-shell-gameplay-wide,
body.panel-bg-pattern-active .panel-shell-gameplay-xl,
body.panel-bg-pattern-active .panel-shell-canvas,
body.panel-bg-pattern-active #friends-panel,
body.panel-bg-pattern-active #ui-options-panel,
body.panel-bg-pattern-active #ui-button-list-panel,
body.panel-bg-pattern-active #controls-panel,
body.panel-bg-pattern-active #records-panel,
body.panel-bg-pattern-active #quest-log-panel,
body.panel-bg-pattern-active #quest-board-panel,
body.panel-bg-pattern-active #inventory-panel,
body.panel-bg-pattern-active #stats-panel,
body.panel-bg-pattern-active #shop-panel,
body.panel-bg-pattern-active #paperdoll-panel,
body.panel-bg-pattern-active #changelog-panel,
body.panel-bg-pattern-active #story-panel,
body.panel-bg-pattern-active #music-tracklist-panel,
body.panel-bg-pattern-active #party-status-panel,
body.panel-bg-pattern-active #profile-panel,
body.panel-bg-pattern-active #lobby-search-panel,
body.panel-bg-pattern-active #matchmake-panel,
body.panel-bg-pattern-active #dm-panel,
body.panel-bg-pattern-active #tutorial-info-panel,
body.panel-bg-pattern-active #global-results-panel,
body.panel-bg-pattern-active #trackmaker2-panel,
body.panel-bg-pattern-active #chaoracemaker-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-shell-alpha) * 0.045)) 0%, rgba(255,255,255,calc(var(--panel-shell-alpha) * 0.018)) 9%, rgba(255,255,255,0.00) 16%),
    linear-gradient(180deg, rgba(var(--panel-shell-rgb, 16,26,40),calc(var(--panel-shell-alpha) * 0.98)) 0%, rgba(var(--panel-shell-rgb-deep, 11,19,31),calc(var(--panel-shell-alpha) * 0.98)) 100%);
}

body.panel-bg-pattern-active .panel-shell-list::after,
body.panel-bg-pattern-active .panel-shell-sidecard::after,
body.panel-bg-pattern-active .panel-shell-modal::after,
body.panel-bg-pattern-active .panel-shell-setup-lg::after,
body.panel-bg-pattern-active .panel-shell-rpg::after,
body.panel-bg-pattern-active .panel-shell-editor::after,
body.panel-bg-pattern-active .panel-shell-gameplay-wide::after,
body.panel-bg-pattern-active .panel-shell-gameplay-xl::after,
body.panel-bg-pattern-active .panel-shell-canvas::after,
body.panel-bg-pattern-active #friends-panel::after,
body.panel-bg-pattern-active #ui-options-panel::after,
body.panel-bg-pattern-active #ui-button-list-panel::after,
body.panel-bg-pattern-active #controls-panel::after,
body.panel-bg-pattern-active #records-panel::after,
body.panel-bg-pattern-active #quest-log-panel::after,
body.panel-bg-pattern-active #quest-board-panel::after,
body.panel-bg-pattern-active #inventory-panel::after,
body.panel-bg-pattern-active #stats-panel::after,
body.panel-bg-pattern-active #shop-panel::after,
body.panel-bg-pattern-active #paperdoll-panel::after,
body.panel-bg-pattern-active #changelog-panel::after,
body.panel-bg-pattern-active #story-panel::after,
body.panel-bg-pattern-active #music-tracklist-panel::after,
body.panel-bg-pattern-active #party-status-panel::after,
body.panel-bg-pattern-active #profile-panel::after,
body.panel-bg-pattern-active #lobby-search-panel::after,
body.panel-bg-pattern-active #matchmake-panel::after,
body.panel-bg-pattern-active #dm-panel::after,
body.panel-bg-pattern-active #tutorial-info-panel::after,
body.panel-bg-pattern-active #global-results-panel::after,
body.panel-bg-pattern-active #trackmaker2-panel::after,
body.panel-bg-pattern-active #chaoracemaker-panel::after,
body.panel-bg-pattern-active #toolbar-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--panel-pattern-layer);
  background-repeat: repeat;
  background-position: left top;
  background-size: 256px 256px;
  opacity: calc(var(--panel-shell-alpha) * var(--panel-pattern-alpha));
  z-index: 0;
}

body.panel-bg-pattern-active .panel-shell-list > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-modal > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-editor > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-header::before,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-header::before,
body.panel-bg-pattern-active #friends-panel > .panel-header::before,
body.panel-bg-pattern-active #ui-options-panel > .panel-header::before,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-header::before,
body.panel-bg-pattern-active #controls-panel > .panel-header::before,
body.panel-bg-pattern-active #records-panel > .panel-header::before,
body.panel-bg-pattern-active #quest-log-panel > .panel-header::before,
body.panel-bg-pattern-active #quest-board-panel > .panel-header::before,
body.panel-bg-pattern-active #inventory-panel > .panel-header::before,
body.panel-bg-pattern-active #stats-panel > .panel-header::before,
body.panel-bg-pattern-active #shop-panel > .panel-header::before,
body.panel-bg-pattern-active #paperdoll-panel > .panel-header::before,
body.panel-bg-pattern-active #changelog-panel > .panel-header::before,
body.panel-bg-pattern-active #story-panel > .panel-header::before,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-header::before,
body.panel-bg-pattern-active #party-status-panel > .panel-header::before,
body.panel-bg-pattern-active #profile-panel > .panel-header::before,
body.panel-bg-pattern-active #lobby-search-panel > .panel-header::before,
body.panel-bg-pattern-active #matchmake-panel > .panel-header::before,
body.panel-bg-pattern-active #dm-panel > .panel-header::before,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-header::before,
body.panel-bg-pattern-active #global-results-panel > .panel-header::before,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-header::before,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-header::before,
body.panel-bg-pattern-active #toolbar-panel > .panel-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--panel-header-pattern-layer);
  background-repeat: repeat;
  background-position: left top;
  background-size: 256px 256px;
  opacity: calc(var(--panel-header-alpha) * var(--panel-header-pattern-alpha));
  z-index: 0;
}

body.panel-bg-pattern-active .panel-shell-list > .panel-body,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-body,
body.panel-bg-pattern-active .panel-shell-modal > .panel-body,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-body,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-body,
body.panel-bg-pattern-active .panel-shell-editor > .panel-body,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-body,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-body,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-body,
body.panel-bg-pattern-active #friends-panel > .panel-body,
body.panel-bg-pattern-active #ui-options-panel > .panel-body,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-body,
body.panel-bg-pattern-active #controls-panel > .panel-body,
body.panel-bg-pattern-active #records-panel > .panel-body,
body.panel-bg-pattern-active #quest-log-panel > .panel-body,
body.panel-bg-pattern-active #quest-board-panel > .panel-body,
body.panel-bg-pattern-active #inventory-panel > .panel-body,
body.panel-bg-pattern-active #stats-panel > .panel-body,
body.panel-bg-pattern-active #shop-panel > .panel-body,
body.panel-bg-pattern-active #paperdoll-panel > .panel-body,
body.panel-bg-pattern-active #changelog-panel > .panel-body,
body.panel-bg-pattern-active #story-panel > .panel-body,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-body,
body.panel-bg-pattern-active #party-status-panel > .panel-body,
body.panel-bg-pattern-active #profile-panel > .panel-body,
body.panel-bg-pattern-active #lobby-search-panel > .panel-body,
body.panel-bg-pattern-active #matchmake-panel > .panel-body,
body.panel-bg-pattern-active #dm-panel > .panel-body,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-body,
body.panel-bg-pattern-active #global-results-panel > .panel-body,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-body,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-body {
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-body-alpha) * 0.05)) 0%, rgba(255,255,255,0.00) 18%),
    linear-gradient(180deg, rgba(8,12,19,calc(var(--panel-body-alpha) * 0.36)) 0%, rgba(8,12,19,calc(var(--panel-body-alpha) * 0.18)) 100%);
}

body.panel-bg-pattern-active .panel-shell-list > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-modal > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-editor > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-body::before,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-body::before,
body.panel-bg-pattern-active #friends-panel > .panel-body::before,
body.panel-bg-pattern-active #ui-options-panel > .panel-body::before,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-body::before,
body.panel-bg-pattern-active #controls-panel > .panel-body::before,
body.panel-bg-pattern-active #records-panel > .panel-body::before,
body.panel-bg-pattern-active #quest-log-panel > .panel-body::before,
body.panel-bg-pattern-active #quest-board-panel > .panel-body::before,
body.panel-bg-pattern-active #inventory-panel > .panel-body::before,
body.panel-bg-pattern-active #stats-panel > .panel-body::before,
body.panel-bg-pattern-active #shop-panel > .panel-body::before,
body.panel-bg-pattern-active #paperdoll-panel > .panel-body::before,
body.panel-bg-pattern-active #changelog-panel > .panel-body::before,
body.panel-bg-pattern-active #story-panel > .panel-body::before,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-body::before,
body.panel-bg-pattern-active #party-status-panel > .panel-body::before,
body.panel-bg-pattern-active #profile-panel > .panel-body::before,
body.panel-bg-pattern-active #lobby-search-panel > .panel-body::before,
body.panel-bg-pattern-active #matchmake-panel > .panel-body::before,
body.panel-bg-pattern-active #dm-panel > .panel-body::before,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-body::before,
body.panel-bg-pattern-active #global-results-panel > .panel-body::before,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-body::before,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-body::before,
body.panel-bg-pattern-active #toolbar-panel > .panel-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--panel-pattern-layer);
  background-repeat: repeat;
  background-position: left top;
  background-size: 256px 256px;
  opacity: calc(var(--panel-body-alpha) * var(--panel-pattern-alpha));
  z-index: 0;
}

body.panel-bg-pattern-active .panel-shell-list > .panel-header,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-header,
body.panel-bg-pattern-active .panel-shell-modal > .panel-header,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-header,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-header,
body.panel-bg-pattern-active .panel-shell-editor > .panel-header,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-header,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-header,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-header,
body.panel-bg-pattern-active #friends-panel > .panel-header,
body.panel-bg-pattern-active #ui-options-panel > .panel-header,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-header,
body.panel-bg-pattern-active #controls-panel > .panel-header,
body.panel-bg-pattern-active #records-panel > .panel-header,
body.panel-bg-pattern-active #quest-log-panel > .panel-header,
body.panel-bg-pattern-active #quest-board-panel > .panel-header,
body.panel-bg-pattern-active #inventory-panel > .panel-header,
body.panel-bg-pattern-active #stats-panel > .panel-header,
body.panel-bg-pattern-active #shop-panel > .panel-header,
body.panel-bg-pattern-active #paperdoll-panel > .panel-header,
body.panel-bg-pattern-active #changelog-panel > .panel-header,
body.panel-bg-pattern-active #story-panel > .panel-header,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-header,
body.panel-bg-pattern-active #party-status-panel > .panel-header,
body.panel-bg-pattern-active #profile-panel > .panel-header,
body.panel-bg-pattern-active #lobby-search-panel > .panel-header,
body.panel-bg-pattern-active #matchmake-panel > .panel-header,
body.panel-bg-pattern-active #dm-panel > .panel-header,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-header,
body.panel-bg-pattern-active #global-results-panel > .panel-header,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-header,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-header,
body.panel-bg-pattern-active .panel-shell-list > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-modal > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-editor > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-header > *,
body.panel-bg-pattern-active .panel-shell-list > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-sidecard > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-modal > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-setup-lg > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-rpg > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-editor > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-gameplay-wide > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-gameplay-xl > .panel-body > *,
body.panel-bg-pattern-active .panel-shell-canvas > .panel-body > *,
body.panel-bg-pattern-active #friends-panel > .panel-header > *,
body.panel-bg-pattern-active #friends-panel > .panel-body > *,
body.panel-bg-pattern-active #ui-options-panel > .panel-header > *,
body.panel-bg-pattern-active #ui-options-panel > .panel-body > *,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-header > *,
body.panel-bg-pattern-active #ui-button-list-panel > .panel-body > *,
body.panel-bg-pattern-active #controls-panel > .panel-header > *,
body.panel-bg-pattern-active #controls-panel > .panel-body > *,
body.panel-bg-pattern-active #records-panel > .panel-header > *,
body.panel-bg-pattern-active #records-panel > .panel-body > *,
body.panel-bg-pattern-active #quest-log-panel > .panel-header > *,
body.panel-bg-pattern-active #quest-log-panel > .panel-body > *,
body.panel-bg-pattern-active #quest-board-panel > .panel-header > *,
body.panel-bg-pattern-active #quest-board-panel > .panel-body > *,
body.panel-bg-pattern-active #inventory-panel > .panel-header > *,
body.panel-bg-pattern-active #inventory-panel > .panel-body > *,
body.panel-bg-pattern-active #stats-panel > .panel-header > *,
body.panel-bg-pattern-active #stats-panel > .panel-body > *,
body.panel-bg-pattern-active #shop-panel > .panel-header > *,
body.panel-bg-pattern-active #shop-panel > .panel-body > *,
body.panel-bg-pattern-active #paperdoll-panel > .panel-header > *,
body.panel-bg-pattern-active #paperdoll-panel > .panel-body > *,
body.panel-bg-pattern-active #changelog-panel > .panel-header > *,
body.panel-bg-pattern-active #changelog-panel > .panel-body > *,
body.panel-bg-pattern-active #story-panel > .panel-header > *,
body.panel-bg-pattern-active #story-panel > .panel-body > *,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-header > *,
body.panel-bg-pattern-active #music-tracklist-panel > .panel-body > *,
body.panel-bg-pattern-active #party-status-panel > .panel-header > *,
body.panel-bg-pattern-active #party-status-panel > .panel-body > *,
body.panel-bg-pattern-active #profile-panel > .panel-header > *,
body.panel-bg-pattern-active #profile-panel > .panel-body > *,
body.panel-bg-pattern-active #lobby-search-panel > .panel-header > *,
body.panel-bg-pattern-active #lobby-search-panel > .panel-body > *,
body.panel-bg-pattern-active #matchmake-panel > .panel-header > *,
body.panel-bg-pattern-active #matchmake-panel > .panel-body > *,
body.panel-bg-pattern-active #dm-panel > .panel-header > *,
body.panel-bg-pattern-active #dm-panel > .panel-body > *,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-header > *,
body.panel-bg-pattern-active #tutorial-info-panel > .panel-body > *,
body.panel-bg-pattern-active #global-results-panel > .panel-header > *,
body.panel-bg-pattern-active #global-results-panel > .panel-body > *,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-header > *,
body.panel-bg-pattern-active #trackmaker2-panel > .panel-body > *,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-header > *,
body.panel-bg-pattern-active #chaoracemaker-panel > .panel-body > *,
body.panel-bg-pattern-active #toolbar-panel > .panel-header > *,
body.panel-bg-pattern-active #toolbar-panel > .panel-body > * {
  position: relative;
  z-index: 1;
}

/* Toolbar must remain fully decoupled from the global panel background/header skinning. */
body.panel-bg-pattern-active #toolbar-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 9%, rgba(255,255,255,0.00) 16%),
    linear-gradient(180deg, rgba(var(--toolbar-shell-rgb), calc(var(--toolbar-alpha) * 0.98)) 0%, rgba(var(--toolbar-shell-rgb), calc(var(--toolbar-alpha) * 0.98)) 100%),
    var(--toolbar-pattern-layer),
    url("../assets/ui/toolbar_bg.png") repeat left top !important;
  background-size: auto, auto, 256px 256px, cover !important;
}

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

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 > .panel-title,
:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header .fp-title,
:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header .profile-title,
:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header .dm-title,
:is(#quest-board-panel,
    #trash-panel,
    #garden-editor-panel,
    #trackmaker2-panel,
    #chaoracemaker-panel,
    #friends-panel,
    #profile-panel,
    #dm-panel,
    #profile-favpicker-panel) > .panel-header .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;
}