/* ============================================================
   Global color override + surfaced panel inner-surface theme
   Palette source: Teal / Blue / Green / Neutral swatches.
   Loaded after all legacy shards so it can normalize scattered hardcoded colors.
   ============================================================ */

:root {
  --cg-teal-1: #73E6E2;
  --cg-teal-2: #5ECBC8;
  --cg-teal-3: #4AA2A0;
  --cg-teal-4: #387E7C;
  --cg-teal-5: #255957;
  --cg-teal-6: #133332;
  --cg-teal-7: #041211;

  --cg-blue-1: #CFE0F0;
  --cg-blue-2: #95BCE0;
  --cg-blue-3: #5E97CB;
  --cg-blue-4: #48759F;
  --cg-blue-5: #315271;
  --cg-blue-6: #1A2F43;
  --cg-blue-7: #061019;

  --cg-green-1: #77F6B3;
  --cg-green-2: #5ECB92;
  --cg-green-3: #49A173;
  --cg-green-4: #377D58;
  --cg-green-5: #24573C;
  --cg-green-6: #113120;
  --cg-green-7: #030F08;

  --cg-neutral-1: #EDEFF0;
  --cg-neutral-2: #C2C9CC;
  --cg-neutral-3: #9BA3A8;
  --cg-neutral-4: #7B8285;
  --cg-neutral-5: #595F61;
  --cg-neutral-6: #383B3D;
  --cg-neutral-7: #191B1C;

  --panel-body-rgb: 37, 89, 87;
  --panel-body-rgb-deep: 19, 51, 50;
  --panel-section-rgb: 19, 51, 50;
  --panel-section-rgb-deep: 4, 18, 17;
  --panel-button-rgb: 72, 117, 159;
  --panel-button-rgb-deep: 49, 82, 113;
  --panel-void-rgb: 6, 16, 25;
  --panel-void-rgb-deep: 6, 16, 25;
  --panel-accent-rgb: 94, 203, 146;
  --panel-text-color: var(--cg-neutral-1);
  --panel-muted-text-color: var(--cg-blue-1);
  --panel-copy-text-color: #CFE0F0;
  --panel-accent-color: var(--cg-green-2);
  --panel-body-pattern-layer: none;
  --panel-section-pattern-layer: none;
  --panel-button-pattern-layer: none;
  --panel-void-pattern-layer: none;
  --panel-body-pattern-alpha: 0;
  --panel-section-pattern-alpha: 0;
  --panel-button-pattern-alpha: 0;
  --panel-void-pattern-alpha: 0;
}

body.global-color-override {
  --panel-shell-rgb: 19, 51, 50 !important;
  --panel-shell-rgb-deep: 4, 18, 17 !important;
  --panel-header-rgb: 94, 151, 203 !important;
  --panel-header-rgb-deep: 49, 82, 113 !important;
  --panel-body-rgb: 37, 89, 87 !important;
  --panel-body-rgb-deep: 19, 51, 50 !important;
  --panel-section-rgb: 19, 51, 50 !important;
  --panel-section-rgb-deep: 4, 18, 17 !important;
  --panel-button-rgb: 72, 117, 159 !important;
  --panel-button-rgb-deep: 49, 82, 113 !important;
  --panel-void-rgb: 4, 18, 17 !important;
  --panel-void-rgb-deep: 3, 15, 8 !important;
  --panel-accent-rgb: 94, 203, 146 !important;
  --panel-text-color: var(--cg-neutral-1) !important;
  --panel-muted-text-color: var(--cg-blue-1) !important;
  --panel-copy-text-color: var(--cg-blue-1) !important;
  --panel-accent-color: var(--cg-green-2) !important;
  --panel-pattern-layer: none !important;
  --panel-header-pattern-layer: none !important;
  --panel-body-pattern-layer: none !important;
  --panel-section-pattern-layer: none !important;
  --panel-button-pattern-layer: none !important;
  --panel-void-pattern-layer: none !important;
  --panel-pattern-alpha: 0 !important;
  --panel-header-pattern-alpha: 0 !important;
  --panel-body-pattern-alpha: 0 !important;
  --panel-section-pattern-alpha: 0 !important;
  --panel-button-pattern-alpha: 0 !important;
  --panel-void-pattern-alpha: 0 !important;
  --panel-shell-alpha: 0.96 !important;
  --panel-body-alpha: 0.96 !important;
  --panel-header-alpha: 0.96 !important;
  color: var(--panel-text-color);
}

body.global-color-override .panel:not(#garden):not(#darkgarden):not(#herogarden),
body.global-color-override .hub-panel,
body.global-color-override #anchored-sidebar,
body.global-color-override #toolbar-panel,
body.global-color-override :is(#mp-connect-modal, #mp-invite-popup, .racemode-panel, .racecourse-panel, .tmp-wrap) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.58) !important;
  background:
    linear-gradient(180deg, rgba(115, 230, 226, 0.08) 0%, rgba(115, 230, 226, 0.025) 12%, rgba(115, 230, 226, 0.00) 30%),
    linear-gradient(180deg, rgba(var(--panel-shell-rgb), 0.96) 0%, rgba(var(--panel-shell-rgb-deep), 0.98) 100%) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(115, 230, 226, 0.18),
    inset 0 -1px 0 rgba(3, 15, 8, 0.55) !important;
}

body.global-color-override :is(
  .panel:not(#garden):not(#darkgarden):not(#herogarden),
  .hub-panel,
  #toolbar-panel,
  #anchored-sidebar,
  #mp-connect-modal,
  #mp-invite-popup,
  .tmp-wrap
) :is(.panel-header, .hub-panel-header, .mpc-header, .mpip-header, .tmp-header) {
  color: var(--panel-text-color) !important;
  border-color: rgba(207, 224, 240, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(237, 239, 240, 0.16) 0%, rgba(207, 224, 240, 0.055) 18%, rgba(207, 224, 240, 0.00) 100%),
    linear-gradient(180deg, rgba(var(--panel-header-rgb), 0.96) 0%, rgba(var(--panel-header-rgb-deep), 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(237, 239, 240, 0.18),
    inset 0 -1px 0 rgba(6, 16, 25, 0.54) !important;
}

body.global-color-override :is(
  .panel:not(#garden):not(#darkgarden):not(#herogarden),
  .hub-panel,
  #toolbar-panel,
  #anchored-sidebar,
  #mp-connect-modal,
  #mp-invite-popup,
  .tmp-wrap
) :is(.panel-body, .hub-panel-body, .mpc-body, .mpip-body, .tmp-body) {
  color: var(--panel-text-color) !important;
  background:
    linear-gradient(180deg, rgba(115, 230, 226, 0.06) 0%, rgba(115, 230, 226, 0.00) 28%),
    linear-gradient(180deg, rgba(var(--panel-body-rgb), 0.76) 0%, rgba(var(--panel-body-rgb-deep), 0.66) 100%) !important;
}

body.global-color-override .panel > .panel-body::before,
body.global-color-override .panel > .panel-header::before,
body.global-color-override .hub-panel > .panel-body::before,
body.global-color-override .hub-panel > .panel-header::before,
body.global-color-override #toolbar-panel > .panel-body::before,
body.global-color-override #toolbar-panel > .panel-header::before {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Inner panel surfaces: sections, cards, list rows, slots, tabs, and grouped controls. */
body.global-color-override .panel:not(#garden):not(#darkgarden):not(#herogarden) :is(
  section,
  fieldset,
  .ui-options-section,
  .ui-keybinds-section,
  .ui-button-list-section,
  .ui-custom-hubs-section,
  .ui-options-actions,
  .ui-toolbar-actions,
  .ui-audio-grid,
  .ui-audio-row,
  .ui-toolbar-appearance-grid,
  .ui-theme-color-grid,
  .ui-keybinds-list,
  .ui-keybind-row,
  .ui-button-list-topbar,
  .ui-button-list-category-tabs,
  .profile-section,
  .quest-section,
  .quest-card,
  .records-section,
  .stats-section,
  .shop-section,
  .inventory-section,
  .inventory-row,
  .inventory-item,
  .shop-item,
  .shop-card,
  .stat-row,
  .stat-box,
  .sub-panel,
  .subpanel,
  .card,
  .tile,
  .slot,
  .entry,
  .list-row,
  .row-card
),
body.global-color-override .hub-panel :is(.hub-panel-body, .hub-section, .hub-item, .hub-tile) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(119, 246, 179, 0.07) 0%, rgba(119, 246, 179, 0.00) 48%),
    linear-gradient(180deg, rgba(var(--panel-section-rgb), 0.78) 0%, rgba(var(--panel-section-rgb-deep), 0.72) 100%) !important;
}

body.global-color-override :is(.panel:not(#garden):not(#darkgarden):not(#herogarden), .hub-panel, #toolbar-panel, #anchored-sidebar, #mp-connect-modal, #mp-invite-popup) :is(
  button,
  .button,
  .panel-close-x,
  .panel-pin-btn,
  .ui-options-tab,
  .ui-button-list-view-tab,
  .ui-button-list-category-tab,
  .sidebar-text-mini-btn,
  input[type="button"],
  input[type="submit"],
  select
) {
  color: var(--panel-text-color) !important;
  border-color: rgba(207, 224, 240, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(237, 239, 240, 0.13) 0%, rgba(237, 239, 240, 0.02) 38%, rgba(6, 16, 25, 0.08) 100%),
    linear-gradient(180deg, rgba(var(--panel-button-rgb), 0.92) 0%, rgba(var(--panel-button-rgb-deep), 0.96) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(237, 239, 240, 0.16), 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

body.global-color-override :is(.panel:not(#garden):not(#darkgarden):not(#herogarden), .hub-panel, #toolbar-panel, #anchored-sidebar) :is(
  button:hover,
  .button:hover,
  .panel-close-x:hover,
  .panel-pin-btn:hover,
  .ui-options-tab:hover,
  .ui-options-tab.active,
  .ui-button-list-view-tab.active,
  .ui-button-list-category-tab.active
) {
  border-color: rgba(var(--panel-accent-rgb), 0.70) !important;
  background:
    linear-gradient(180deg, rgba(237, 239, 240, 0.16) 0%, rgba(237, 239, 240, 0.04) 32%, rgba(6, 16, 25, 0.04) 100%),
    linear-gradient(180deg, rgba(94, 203, 146, 0.82) 0%, rgba(55, 125, 88, 0.94) 100%) !important;
}

body.global-color-override :is(.panel:not(#garden):not(#darkgarden):not(#herogarden), .hub-panel, #toolbar-panel) :is(input[type="text"], input[type="number"], input[type="search"], textarea) {
  color: var(--panel-text-color) !important;
  border-color: rgba(207, 224, 240, 0.36) !important;
  background: rgba(4, 18, 17, 0.72) !important;
}

body.global-color-override :is(.panel:not(#garden):not(#darkgarden):not(#herogarden), .hub-panel, #toolbar-panel) :is(.panel-title, h1, h2, h3, h4, legend, label, span, p, li, td, th, .ui-options-copy, .ui-keybind-desc) {
  color: inherit;
}

body.global-color-override :is(.ui-keybind-desc, .muted, .hint, .help-text, .secondary-text) {
  color: var(--panel-muted-text-color) !important;
}

body.global-color-override :is(.ui-options-copy, .ui-description-copy, .description-text) {
  color: var(--panel-copy-text-color) !important;
}

body.global-color-override :is(a, .ui-inline-link-btn, .link-like) {
  color: var(--cg-teal-1) !important;
}

body.global-color-override :is(.ui-options-section-title, .ui-keybind-key, .panel-title, .hub-title, .section-title) {
  color: var(--cg-neutral-1) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important;
}

body.global-color-override .ui-global-color-section {
  border-color: rgba(var(--panel-accent-rgb), 0.56) !important;
  background:
    linear-gradient(180deg, rgba(94, 203, 146, 0.14), rgba(94, 203, 146, 0.05)),
    linear-gradient(180deg, rgba(19, 51, 50, 0.82), rgba(4, 18, 17, 0.78)) !important;
}

body.global-color-override .global-color-locked {
  opacity: 0.72;
}

body.global-color-override .global-color-locked::after {
  content: "Global Color Override is active";
  display: block;
  margin-top: 8px;
  color: var(--cg-green-1);
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* Custom surface lane used only when Global Color Override is off. */
body:not(.global-color-override) .panel:not(#garden):not(#darkgarden):not(#herogarden) > .panel-body,
body:not(.global-color-override) .hub-panel > .panel-body {
  color: var(--panel-text-color) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-body-alpha, 1) * 0.045)) 0%, rgba(255,255,255,0.00) 18%),
    var(--panel-body-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-body-rgb), calc(var(--panel-body-alpha, 1) * 0.62)) 0%, rgba(var(--panel-body-rgb-deep), calc(var(--panel-body-alpha, 1) * 0.48)) 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;
}

body:not(.global-color-override) .panel:not(#garden):not(#darkgarden):not(#herogarden) :is(
  .ui-options-section,
  .ui-keybinds-section,
  .ui-button-list-section,
  .ui-custom-hubs-section,
  .profile-section,
  .quest-section,
  .records-section,
  .stats-section,
  .shop-section,
  .inventory-section,
  .sub-panel,
  .subpanel,
  .card,
  .tile,
  .slot,
  .entry,
  .list-row,
  .row-card
) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.32) !important;
  background:
    var(--panel-section-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-section-rgb), 0.70) 0%, rgba(var(--panel-section-rgb-deep), 0.62) 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-position: left top, 0 0 !important;
  background-size: 256px 256px, auto !important;
}

body:not(.global-color-override) .panel:not(#garden):not(#darkgarden):not(#herogarden) :is(button, .button, .ui-options-tab, .ui-button-list-view-tab, .ui-button-list-category-tab, select) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.38) !important;
  background:
    var(--panel-button-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-button-rgb), 0.88) 0%, rgba(var(--panel-button-rgb-deep), 0.94) 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-position: left top, 0 0 !important;
  background-size: 256px 256px, auto !important;
}

.ui-theme-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ui-panel-bg-color-input.is-disabled,
select.is-disabled,
input.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .ui-theme-color-grid {
    grid-template-columns: 1fr;
  }
}


/* Options/Button-list high-specificity theme bridge.
   These rules intentionally beat older ID-scoped hardcoded navy rules such as #061019 / rgba(6,16,25). */
body.global-color-override #ui-options-panel > .panel-body.ui-options-body,
body.global-color-override #ui-button-list-panel > .panel-body.ui-button-list-body {
  color: var(--panel-text-color) !important;
  background:
    linear-gradient(180deg, rgba(115, 230, 226, 0.06) 0%, rgba(115, 230, 226, 0.00) 28%),
    linear-gradient(180deg, rgba(var(--panel-body-rgb), 0.76) 0%, rgba(var(--panel-body-rgb-deep), 0.66) 100%) !important;
}

body.global-color-override #ui-options-panel :is(.ui-options-tabs, .ui-options-actions, .ui-toolbar-actions, .ui-custom-hub-actions),
body.global-color-override #ui-button-list-panel :is(.ui-button-list-topbar, .ui-button-list-category-tabs) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(119, 246, 179, 0.06) 0%, rgba(119, 246, 179, 0.00) 48%),
    linear-gradient(180deg, rgba(var(--panel-void-rgb), 0.92) 0%, rgba(var(--panel-void-rgb-deep), 0.94) 100%) !important;
}

body.global-color-override #ui-options-panel :is(.ui-options-copy, .ui-description-copy),
body.global-color-override #ui-button-list-panel :is(.ui-options-copy, .ui-description-copy) {
  color: var(--panel-copy-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.30) !important;
  background:
    linear-gradient(180deg, rgba(207, 224, 240, 0.06) 0%, rgba(207, 224, 240, 0.00) 42%),
    linear-gradient(180deg, rgba(var(--panel-void-rgb), 0.94) 0%, rgba(var(--panel-void-rgb-deep), 0.96) 100%) !important;
}

body.global-color-override #ui-options-panel :is(.ui-options-section, .ui-audio-row, .ui-keybinds-section),
body.global-color-override #ui-button-list-panel :is(.ui-button-card, .ui-button-row, .ui-button-list-section) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(119, 246, 179, 0.07) 0%, rgba(119, 246, 179, 0.00) 48%),
    linear-gradient(180deg, rgba(var(--panel-section-rgb), 0.78) 0%, rgba(var(--panel-section-rgb-deep), 0.72) 100%) !important;
}

body:not(.global-color-override) #ui-options-panel > .panel-body.ui-options-body,
body:not(.global-color-override) #ui-button-list-panel > .panel-body.ui-button-list-body {
  color: var(--panel-text-color) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,calc(var(--panel-body-alpha, 1) * 0.045)) 0%, rgba(255,255,255,0.00) 18%),
    var(--panel-body-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-body-rgb), calc(var(--panel-body-alpha, 1) * 0.62)) 0%, rgba(var(--panel-body-rgb-deep), calc(var(--panel-body-alpha, 1) * 0.48)) 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;
}

body:not(.global-color-override) #ui-options-panel :is(.ui-options-tabs, .ui-options-actions, .ui-toolbar-actions, .ui-custom-hub-actions),
body:not(.global-color-override) #ui-button-list-panel :is(.ui-button-list-topbar, .ui-button-list-category-tabs) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.26) !important;
  background:
    var(--panel-void-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-void-rgb), 0.94) 0%, rgba(var(--panel-void-rgb-deep), 0.96) 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-position: left top, 0 0 !important;
  background-size: 256px 256px, auto !important;
}

body:not(.global-color-override) #ui-options-panel :is(.ui-options-copy, .ui-description-copy),
body:not(.global-color-override) #ui-button-list-panel :is(.ui-options-copy, .ui-description-copy) {
  color: var(--panel-copy-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.26) !important;
  background:
    var(--panel-void-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-void-rgb), 0.92) 0%, rgba(var(--panel-void-rgb-deep), 0.95) 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-position: left top, 0 0 !important;
  background-size: 256px 256px, auto !important;
}

body:not(.global-color-override) #ui-options-panel :is(.ui-options-section, .ui-audio-row, .ui-keybinds-section),
body:not(.global-color-override) #ui-button-list-panel :is(.ui-button-card, .ui-button-row, .ui-button-list-section) {
  color: var(--panel-text-color) !important;
  border-color: rgba(var(--panel-accent-rgb), 0.32) !important;
  background:
    var(--panel-section-pattern-layer),
    linear-gradient(180deg, rgba(var(--panel-section-rgb), 0.70) 0%, rgba(var(--panel-section-rgb-deep), 0.62) 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-position: left top, 0 0 !important;
  background-size: 256px 256px, auto !important;
}

/* Layout reset for the expanded Options > UI color surface grid. */
#ui-options-panel .ui-panel-bgs-section {
  grid-template-columns: repeat(2, minmax(390px, 1fr)) !important;
}

#ui-options-panel .ui-panel-bgs-section > label:nth-of-type(n),
#ui-options-panel .ui-panel-bgs-section > .ui-theme-color-grid,
#ui-options-panel .ui-panel-bgs-section > .ui-options-copy {
  grid-column: auto !important;
  grid-row: auto !important;
}

#ui-options-panel .ui-panel-bgs-section > .ui-options-section-title,
#ui-options-panel .ui-panel-bgs-section > .ui-options-copy,
#ui-options-panel .ui-panel-bgs-section > .ui-theme-color-grid {
  grid-column: 1 / -1 !important;
}

#ui-options-panel .ui-theme-color-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
  #ui-options-panel .ui-theme-color-grid,
  #ui-options-panel .ui-panel-bgs-section {
    grid-template-columns: 1fr !important;
  }
}