/* User Menu dropdown + preferences overrides */

.user-menu-dropdown {
  /* Colors/border come from the global .card class */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1rem !important;
  padding: 0.6rem !important;
  width: 18rem;
  max-width: min(20rem, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.5);
  text-align: left;
  display: grid;
  gap: 0.5rem;
}
.user-menu-dropdown[hidden] {
  display: none !important;
}
.user-menu-dropdown.card:hover,
.user-menu-dropdown.card:focus-within {
  /* Avoid text blur caused by scaling on hover, and keep the menu static instead of using the .card accent hover */
  transform: none;
  background-color: var(--card-bg);
  border-color: var(--card-border);
}
.user-menu-dropdown,
.user-menu-dropdown * {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.user-menu-dropdown button,
.user-menu-dropdown label,
.user-menu-dropdown select {
  font-size: 0.875rem;
  line-height: 1.2;
}
.user-menu-dropdown * {
  text-align: left;
}

/* Themed segmented control for theme options */
.theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  padding: 0.2rem 0;
}
.menu-group {
  padding: 0.4rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.menu-group:hover { background: rgba(255,255,255,0.04); }
.app-header-performance-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.app-header-performance-meta {
  font-size: 0.72rem;
  line-height: 1.25;
  color: rgba(148, 163, 184, 0.88);
}
.menu-group > .block {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: rgba(203,213,225,0.9);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.65rem;
  border-radius: 0.5rem;
  color: #e5e7eb;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
}
.menu-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-danger { color: #fecaca; }
.menu-danger:hover { background: rgba(239,68,68,0.15); }
.theme-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9999px;
  background: rgba(0, 29, 53, 0.35);
  color: #fff;
  min-width: 0;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.theme-opt[hidden] {
  display: none !important;
}
.theme-opt:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(0, 29, 53, 0.5);
}
.theme-label {
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(226,232,240,0.9);
}
.theme-opt::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e5e7eb;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.theme-opt:hover::before,
.theme-opt:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.theme-opt.active .theme-band {
  box-shadow: 0 0 0 2px rgba(56,189,248,0.6), 0 0 10px rgba(56,189,248,0.35);
}
.theme-opt.active {
  border-color: rgba(56,189,248,0.6);
  background: rgba(0, 67, 70, 0.35);
}
.theme-band {
  width: 2.2rem;
  height: 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.theme-opt:hover .theme-band,
.theme-opt:focus-visible .theme-band {
  transform: scale(1.05);
}
.theme-cosmic .theme-band { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.theme-apex .theme-band { background: linear-gradient(135deg, #4d3308, #f5b642 45%, #fff0b6 100%); }
.theme-ember .theme-band { background: linear-gradient(135deg, #341116, #ff7a3a); }
.theme-verdant .theme-band { background: linear-gradient(135deg, #0d1f19, #47d7ac); }
.theme-slate .theme-band { background: linear-gradient(135deg, #0f151f, #2462ff); }
.theme-system .theme-band {
  background: linear-gradient(90deg, #0b0b0b 0 50%, #f7fafc 50% 100%);
  box-shadow: 0 0 0 2px #9ca3af inset;
}
.theme-high .theme-band { background: #0b0b0b; box-shadow: 0 0 0 2px #111827 inset; }
.swatch-cosmic { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.swatch-high { background: #0b0b0b; box-shadow: 0 0 0 2px #111827 inset; }
.swatch-system {
  background: linear-gradient(90deg, #0b0b0b 0 50%, #f7fafc 50% 100%);
  box-shadow: 0 0 0 2px #9ca3af inset;
}

/* Scrollbar tuning for reliability on narrow screens */
.user-menu-dropdown::-webkit-scrollbar { width: 8px; }
.user-menu-dropdown::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.4);
  border-radius: 9999px;
}
.user-menu-dropdown::-webkit-scrollbar-track { background: transparent; }
/* In reduced motion, remove glint on theme options */
html.reduced-motion .theme-opt::after { display: none !important; content: none !important; }

/* Reduced motion: keep gradients and small element animations, but stop whole-card morphing */
html.reduced-motion .card { transition-property: background-color, border-color, color, opacity !important; }
html.reduced-motion .card:hover,
html.reduced-motion .card:focus-within {
  transform: none !important; /* prevent lift/translate/scale */
}
/* Also neutralize module card hover lifts */
html.reduced-motion .module-card { transition-property: background-color, border-color, color, opacity !important; transform: none !important; }
html.reduced-motion .module-card:hover,
html.reduced-motion .module-card:focus-within { transform: none !important; }
/* Remove button shine/glint in reduced motion */
html.reduced-motion .button::after,
html.reduced-motion .message-type-switcher::after { display: none !important; content: none !important; }

:root {
  --animated-bg-gradient: linear-gradient(25deg, #ffffff 1%, #00e1ff 3%, #122ecf 30%, #000b1b 65%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(0, 212, 255, 0.15)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.2;
  --animated-bg-star-1: #ffffff;
  --animated-bg-star-2: #a2f9ff;
  --animated-bg-star-3: #fff3a2;
  --animated-bg-streak-1: #00b4d8;
  --animated-bg-streak-2: #a2f9ff;
  --animated-bg-streak-3: #bfe8ff;
  --animated-bg-streak-4: #b5fff6;
  --animated-bg-streak-5: #fff3a2;
  --theme-panel-bg: rgba(0, 29, 53, 0.42);
  --theme-panel-hover-bg: rgba(6, 45, 78, 0.68);
  --theme-panel-strong-bg: rgba(0, 29, 53, 0.651);
  --theme-panel-solid-bg: rgb(0, 29, 53);
  --theme-panel-subtle-bg: rgba(255, 255, 255, 0.03);
  --theme-panel-subtle-hover-bg: rgba(255, 255, 255, 0.06);
  --theme-panel-border: rgba(255, 255, 255, 0.12);
  --theme-panel-border-soft: rgba(255, 255, 255, 0.08);
  --theme-panel-border-strong: rgba(125, 211, 252, 0.34);
  --theme-panel-text: rgba(229, 231, 235, 0.94);
  --theme-panel-muted: rgba(209, 213, 219, 0.92);
  --theme-panel-dim: rgba(148, 163, 184, 0.88);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(4, 29, 48, 0.96), rgba(3, 23, 39, 0.94));
  --theme-dropdown-solid-bg: rgba(15, 21, 31, 0.92);
  --theme-dropdown-border: rgba(125, 211, 252, 0.18);
  --theme-panel-shadow: 0 20px 45px rgba(2, 12, 27, 0.42);
  --theme-panel-shadow-soft: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --theme-crumb-bg: rgba(255, 255, 255, 0.06);
  --theme-crumb-bg-hover: rgba(255, 255, 255, 0.09);
  --theme-crumb-current-bg: rgba(255, 255, 255, 0.08);
  --theme-crumb-border: rgba(255, 255, 255, 0.14);
  --theme-crumb-border-hover: rgba(255, 255, 255, 0.22);
  --theme-crumb-text: rgba(255, 255, 255, 0.88);
  --theme-crumb-link: rgba(255, 255, 255, 0.86);
  --theme-crumb-link-hover: #fff;
  --theme-crumb-sep: rgba(255, 255, 255, 0.45);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.12));
  --theme-crumb-edit-border: rgba(59, 130, 246, 0.35);
  --theme-crumb-edit-text: #e6f0ff;
  --theme-card-header-bg: linear-gradient(180deg, rgba(0, 29, 53, 0.85), rgba(0, 29, 53, 0.7));
  --theme-card-header-border: rgba(255, 255, 255, 0.08);
  --theme-landing-header-bg: rgba(0, 29, 53, 0.7);
  --theme-header-solid-bg: rgb(0, 29, 53);
  --theme-landing-header-border: rgba(255, 255, 255, 0.08);
  --theme-landing-overlay: linear-gradient(110deg, rgba(0, 29, 53, 0.96) 0%, rgba(0, 29, 53, 0.96) 45%, rgba(0, 29, 53, 0) 55%, rgba(0, 29, 53, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(0, 29, 53, 0.96) 0%, rgba(0, 29, 53, 0.96) 55%, rgba(0, 29, 53, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0));
  --theme-landing-stat-border: rgba(148, 163, 184, 0.5);
  --theme-landing-stat-shadow: 0 12px 35px rgba(15, 23, 42, 0.65);
  --theme-landing-footer-text: #9ca3af;
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 30%, rgba(15, 23, 42, 0.3) 60%, rgba(15, 23, 42, 0) 85%);
  --theme-landing-button-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="cosmic"] {
  --animated-bg-gradient: linear-gradient(25deg, #ffffff 1%, #00e1ff 3%, #122ecf 30%, #000b1b 65%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(0, 212, 255, 0.15)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.2;
  --animated-bg-star-1: #ffffff;
  --animated-bg-star-2: #a2f9ff;
  --animated-bg-star-3: #fff3a2;
  --animated-bg-streak-1: #00b4d8;
  --animated-bg-streak-2: #a2f9ff;
  --animated-bg-streak-3: #bfe8ff;
  --animated-bg-streak-4: #b5fff6;
  --animated-bg-streak-5: #fff3a2;
}

/* Ensure toggle switches don't visually overflow their bounds */
.toggle-switch-sm, .toggle-switch { overflow: hidden; }
/* Keep the knob visible and contained */
.toggle-switch-sm .toggle-slider, .toggle-switch .toggle-slider { overflow: hidden; position: absolute; inset: 0; }
.toggle-switch-sm .toggle-slider:before, .toggle-switch .toggle-slider:before { z-index: 1; display: block; }
/* Use left for travel to avoid transform clipping on some browsers */
.toggle-switch-sm .toggle-slider:before { left: 0.25rem !important; transform: none !important; transition: left 0.2s ease-in-out !important; }
.toggle-switch-sm input:checked + .toggle-slider:before { left: 1.5rem !important; transform: none !important; }

/* Theme hooks via data-theme on <html> */
html[data-theme="white"] {
  /* Brushed silver daylight theme: cooler surfaces, stronger depth, restrained Apple-leaning blue */
  --animated-bg-gradient: linear-gradient(140deg, #eef3f8 0%, #e6edf5 34%, #dce6f1 68%, #d3dfed 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(40, 86, 173, 0.12)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.13;
  --animated-bg-star-1: #f8fbff;
  --animated-bg-star-2: #d5e4ff;
  --animated-bg-star-3: #b5cdf7;
  --animated-bg-streak-1: #2856ad;
  --animated-bg-streak-2: #4772c9;
  --animated-bg-streak-3: #7097dd;
  --animated-bg-streak-4: #b9cff2;
  --animated-bg-streak-5: #eef4fb;
  --bg: #edf2f7;
  --bg3: #dde6f0;
  --bg2: rgba(244, 248, 252, 0.88);
  --header-bg: rgba(237, 243, 249, 0.86);
  --header-border: rgba(22, 32, 54, 0.12);
  --header-surface: rgba(248, 250, 253, 0.92);
  --header-surface-border: rgba(22, 32, 54, 0.10);
  --secondary: #10233f;
  --primary: #2856ad;
  --accent: #3e76c9;
  --glass-cool: rgba(40, 86, 173, 0.07);
  --glass-warm: rgba(124, 150, 190, 0.06);
  --theme-panel-bg: rgba(244, 247, 251, 0.92);
  --theme-panel-hover-bg: rgba(248, 250, 253, 0.98);
  --theme-panel-strong-bg: rgba(241, 245, 250, 0.96);
  --theme-panel-solid-bg: rgb(241, 245, 250);
  --theme-panel-subtle-bg: rgba(40, 86, 173, 0.07);
  --theme-panel-subtle-hover-bg: rgba(40, 86, 173, 0.10);
  --theme-panel-border: rgba(22, 32, 54, 0.13);
  --theme-panel-border-soft: rgba(22, 32, 54, 0.09);
  --theme-panel-border-strong: rgba(40, 86, 173, 0.26);
  --theme-panel-text: #0f1d33;
  --theme-panel-muted: #42536c;
  --theme-panel-dim: #6a7a92;
  --theme-dropdown-bg: linear-gradient(180deg, rgba(8, 11, 16, 0.985), rgba(15, 19, 27, 0.965));
  --theme-dropdown-solid-bg: rgba(10, 14, 20, 0.985);
  --theme-dropdown-border: rgba(72, 108, 179, 0.34);
  --theme-dropdown-text: #eef4ff;
  --theme-dropdown-muted: #9fb0c8;
  --theme-panel-shadow: 0 24px 48px rgba(32, 52, 84, 0.12);
  --theme-panel-shadow-soft: 0 18px 34px rgba(32, 52, 84, 0.10);
  --theme-light-shadow-xs: 0 8px 18px -14px rgba(32, 52, 84, 0.16), 0 1px 0 rgba(255,255,255,0.72) inset;
  --theme-light-shadow-sm: 0 14px 28px -20px rgba(32, 52, 84, 0.16), 0 1px 0 rgba(255,255,255,0.74) inset, 0 -1px 0 rgba(166, 186, 214, 0.10) inset;
  --theme-light-shadow-md: 0 20px 38px -24px rgba(32, 52, 84, 0.18), 0 1px 0 rgba(255,255,255,0.76) inset, 0 -1px 0 rgba(166, 186, 214, 0.12) inset;
  --theme-light-shadow-lg: 0 26px 52px -28px rgba(32, 52, 84, 0.22), 0 1px 0 rgba(255,255,255,0.78) inset, 0 -1px 0 rgba(166, 186, 214, 0.14) inset;
  --theme-light-shadow-focus: 0 0 0 3px rgba(40, 86, 173, 0.08), 0 22px 40px -24px rgba(40, 86, 173, 0.18), 0 1px 0 rgba(255,255,255,0.78) inset;
  --theme-crumb-bg: rgba(22, 32, 54, 0.055);
  --theme-crumb-bg-hover: rgba(40, 86, 173, 0.09);
  --theme-crumb-current-bg: rgba(22, 32, 54, 0.10);
  --theme-crumb-border: rgba(22, 32, 54, 0.13);
  --theme-crumb-border-hover: rgba(40, 86, 173, 0.22);
  --theme-crumb-text: #10233f;
  --theme-crumb-link: #10233f;
  --theme-crumb-link-hover: #2856ad;
  --theme-crumb-sep: rgba(22, 32, 54, 0.32);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(40, 86, 173, 0.12), rgba(40, 86, 173, 0.05));
  --theme-crumb-edit-border: rgba(40, 86, 173, 0.18);
  --theme-crumb-edit-text: #10233f;
  --theme-card-header-bg: linear-gradient(180deg, rgba(246, 249, 252, 0.99), rgba(238, 243, 249, 0.96));
  --theme-card-header-border: rgba(22, 32, 54, 0.10);
  --theme-landing-header-bg: rgba(239, 245, 250, 0.84);
  --theme-header-solid-bg: rgb(239, 245, 250);
  --theme-landing-header-border: rgba(22, 32, 54, 0.10);
  --theme-landing-overlay: linear-gradient(110deg, rgba(236, 242, 248, 0.94) 0%, rgba(236, 242, 248, 0.94) 44%, rgba(236, 242, 248, 0.14) 63%, rgba(236, 242, 248, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(236, 242, 248, 0.95) 0%, rgba(236, 242, 248, 0.95) 56%, rgba(236, 242, 248, 0.08) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(244, 248, 252, 0.94), rgba(234, 241, 248, 0.72));
  --theme-landing-stat-border: rgba(40, 86, 173, 0.18);
  --theme-landing-stat-shadow: 0 18px 36px rgba(32, 52, 84, 0.12);
  --theme-landing-footer-text: #5a6b83;
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(239, 245, 251, 0.96) 0%, rgba(216, 228, 242, 0.76) 38%, rgba(178, 198, 226, 0.26) 65%, rgba(178, 198, 226, 0) 85%);
  --theme-landing-button-shadow: 0 14px 28px rgba(40, 86, 173, 0.12);
}
html[data-theme="white"] #module-breadcrumb,
html[data-theme="white"] #module-context {
  color: rgba(16, 35, 63, 0.72) !important;
}
html[data-theme="white"] .pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(247,250,254,0.88));
  border-color: rgba(22, 32, 54, 0.10);
  color: #10233f !important;
  box-shadow: var(--theme-light-shadow-xs);
}
html[data-theme="white"] .pill:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(242,247,255,0.92));
  border-color: rgba(23, 95, 230, 0.18);
  color: #175fe6 !important;
}
html[data-theme="white"] .button-secondary,
html[data-theme="white"] #user-menu-button,
html[data-theme="white"] .message-type-switcher {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,249,254,0.90)) !important;
  background-color: transparent !important;
  color: #10233f !important;
  border-color: rgba(22, 32, 54, 0.10) !important;
  box-shadow: var(--theme-light-shadow-sm);
}
html[data-theme="white"] #user-menu-button svg,
html[data-theme="white"] #user-menu-button span {
  color: #10233f !important;
}
html[data-theme="white"] .message-type-switcher h4,
html[data-theme="white"] .message-type-switcher p {
  color: #10233f;
}
html[data-theme="white"] details.card > summary,
html[data-theme="white"] details.method-card > summary {
  background-color: rgba(255, 255, 255, 0.98);
  color: #10233f;
  border-bottom: 1px solid rgba(22, 32, 54, 0.05);
}
html[data-theme="white"] details.card > summary *,
html[data-theme="white"] details.method-card > summary * {
  color: #10233f !important;
}

/* Docs page: show settings-only user menu button and hide logout */
.page-docs #user-menu-button #user-name,
.page-docs #user-menu-button #user-avatar {
  display: none !important;
}
.page-docs #user-menu-button .user-menu-icon--mobile {
  display: none !important;
}
.page-docs #user-menu-button .user-menu-icon--desktop {
  display: inline-flex !important;
}
.page-docs #menu-logout {
  display: none !important;
}
.page-docs #user-menu-button {
  gap: 0.4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.page-docs .card:hover,
.page-docs .card:focus-within {
  transform: none !important;
}
html[data-theme="black"] {
  --animated-bg-gradient: linear-gradient(135deg, #050505 0%, #111111 40%, #1c1c1c 76%, #2b1608 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(255, 123, 0, 0.16)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.18;
  --animated-bg-star-1: #ffffff;
  --animated-bg-star-2: #ffd699;
  --animated-bg-star-3: #ff9d4d;
  --animated-bg-streak-1: #ff7b00;
  --animated-bg-streak-2: #ff9d4d;
  --animated-bg-streak-3: #ffd699;
  --animated-bg-streak-4: #ffffff;
  --animated-bg-streak-5: #ffb066;
  --bg: #0b0b0b;
  --bg3: #0f172a;
  --header-bg: rgba(11, 11, 11, 0.82);
  --header-border: rgba(255, 255, 255, 0.12);
  --header-surface: rgba(11, 11, 11, 0.75);
  --header-surface-border: rgba(255, 255, 255, 0.12);
  --secondary: #e5e7eb;
  --primary: #ff7b00;
  --theme-panel-bg: rgba(11, 11, 11, 0.82);
  --theme-panel-hover-bg: rgba(18, 18, 18, 0.95);
  --theme-panel-strong-bg: rgba(11, 11, 11, 0.9);
  --theme-panel-subtle-bg: rgba(255, 255, 255, 0.04);
  --theme-panel-subtle-hover-bg: rgba(255, 255, 255, 0.08);
  --theme-panel-border: rgba(255, 255, 255, 0.12);
  --theme-panel-border-soft: rgba(255, 255, 255, 0.08);
  --theme-panel-border-strong: rgba(255, 123, 0, 0.34);
  --theme-panel-text: rgba(229, 231, 235, 0.94);
  --theme-panel-muted: rgba(209, 213, 219, 0.92);
  --theme-panel-dim: rgba(148, 163, 184, 0.88);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(10, 10, 10, 0.98), rgba(18, 18, 18, 0.96));
  --theme-dropdown-solid-bg: rgba(10, 10, 10, 0.94);
  --theme-dropdown-border: rgba(255, 123, 0, 0.2);
  --theme-card-header-bg: linear-gradient(180deg, rgba(12, 12, 12, 0.95), rgba(18, 18, 18, 0.82));
  --theme-landing-header-bg: rgba(11, 11, 11, 0.78);
  --theme-landing-header-border: rgba(255, 255, 255, 0.1);
  --theme-landing-overlay: linear-gradient(110deg, rgba(11, 11, 11, 0.96) 0%, rgba(11, 11, 11, 0.96) 45%, rgba(11, 11, 11, 0) 55%, rgba(11, 11, 11, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(11, 11, 11, 0.96) 0%, rgba(11, 11, 11, 0.96) 55%, rgba(11, 11, 11, 0) 100%);
}
/* cosmic/system use existing defaults from Tailwind source */

html[data-theme="apex"] {
  --animated-bg-gradient: linear-gradient(140deg, #120d05 0%, #221607 34%, #5a3a0f 72%, #d7a33e 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(255, 213, 127, 0.22)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.22;
  --animated-bg-star-1: #fff8e3;
  --animated-bg-star-2: #ffe08f;
  --animated-bg-star-3: #f5b642;
  --animated-bg-streak-1: #d08a16;
  --animated-bg-streak-2: #f5b642;
  --animated-bg-streak-3: #fff0b6;
  --animated-bg-streak-4: #ffe6a1;
  --animated-bg-streak-5: #fff8e3;
  --bg: #120d05;
  --bg3: #1a1207;
  --bg2: rgba(26, 18, 7, 0.84);
  --header-bg: rgba(28, 19, 7, 0.86);
  --header-border: rgba(245, 182, 66, 0.22);
  --header-surface: rgba(28, 19, 7, 0.78);
  --header-surface-border: rgba(255, 223, 145, 0.24);
  --secondary: #fff0c7;
  --primary: #f0ad33;
  --accent: #ffd980;
  --apex-line: rgba(245, 182, 66, 0.22);
  --apex-line-strong: rgba(255, 223, 145, 0.42);
  --theme-panel-bg: rgba(27, 18, 7, 0.8);
  --theme-panel-hover-bg: rgba(36, 24, 9, 0.94);
  --theme-panel-strong-bg: rgba(30, 20, 8, 0.9);
  --theme-panel-solid-bg: rgb(30, 20, 8);
  --theme-panel-subtle-bg: rgba(245, 182, 66, 0.08);
  --theme-panel-subtle-hover-bg: rgba(245, 182, 66, 0.14);
  --theme-panel-border: rgba(245, 182, 66, 0.18);
  --theme-panel-border-soft: rgba(245, 182, 66, 0.12);
  --theme-panel-border-strong: rgba(255, 223, 145, 0.36);
  --theme-panel-text: #fff2cf;
  --theme-panel-muted: rgba(255, 232, 180, 0.9);
  --theme-panel-dim: rgba(255, 214, 132, 0.82);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(24, 16, 6, 0.98), rgba(34, 23, 8, 0.96));
  --theme-dropdown-solid-bg: rgba(24, 16, 6, 0.94);
  --theme-dropdown-border: rgba(245, 182, 66, 0.22);
  --theme-panel-shadow: 0 20px 45px rgba(12, 7, 2, 0.52);
  --theme-panel-shadow-soft: 0 22px 40px rgba(12, 7, 2, 0.36);
  --theme-crumb-bg: rgba(245, 182, 66, 0.08);
  --theme-crumb-bg-hover: rgba(245, 182, 66, 0.14);
  --theme-crumb-current-bg: rgba(245, 182, 66, 0.12);
  --theme-crumb-border: rgba(245, 182, 66, 0.18);
  --theme-crumb-border-hover: rgba(255, 223, 145, 0.34);
  --theme-crumb-text: #fff2cf;
  --theme-crumb-link: rgba(255, 242, 207, 0.94);
  --theme-crumb-link-hover: #fff8e3;
  --theme-crumb-sep: rgba(255, 223, 145, 0.45);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(245, 182, 66, 0.24), rgba(245, 182, 66, 0.12));
  --theme-crumb-edit-border: rgba(255, 223, 145, 0.34);
  --theme-crumb-edit-text: #fff8e3;
  --theme-card-header-bg: linear-gradient(180deg, rgba(31, 21, 8, 0.94), rgba(44, 28, 10, 0.8));
  --theme-card-header-border: rgba(245, 182, 66, 0.14);
  --theme-landing-header-bg: rgba(28, 19, 7, 0.8);
  --theme-header-solid-bg: rgb(28, 19, 7);
  --theme-landing-header-border: rgba(245, 182, 66, 0.18);
  --theme-landing-overlay: linear-gradient(110deg, rgba(18, 13, 5, 0.96) 0%, rgba(18, 13, 5, 0.96) 45%, rgba(18, 13, 5, 0) 58%, rgba(18, 13, 5, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(18, 13, 5, 0.96) 0%, rgba(18, 13, 5, 0.96) 55%, rgba(18, 13, 5, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(30, 20, 8, 0.92), rgba(30, 20, 8, 0));
  --theme-landing-stat-border: rgba(255, 223, 145, 0.32);
  --theme-landing-stat-shadow: 0 12px 32px rgba(12, 7, 2, 0.48);
  --theme-landing-footer-text: rgba(255, 232, 180, 0.78);
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(28, 19, 7, 0.98) 0%, rgba(97, 62, 16, 0.78) 38%, rgba(215, 163, 62, 0.18) 65%, rgba(215, 163, 62, 0) 85%);
}

html[data-theme="ember"] {
  --bg: #140b0d;
  --bg3: #1b0f12;
  --bg2: rgba(27, 15, 18, 0.82);
  --header-bg: rgba(30, 13, 16, 0.84);
  --header-border: rgba(255, 122, 58, 0.24);
  --header-surface: rgba(36, 14, 18, 0.76);
  --header-surface-border: rgba(255, 154, 84, 0.26);
  --secondary: #ffd6ba;
  --primary: #ff6a2a;
  --accent: #ff9b54;
  --animated-bg-gradient: linear-gradient(135deg, #12080a 0%, #2a1014 36%, #5a1d16 72%, #a53d1c 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(255, 122, 58, 0.22)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.22;
  --animated-bg-star-1: #fff3e8;
  --animated-bg-star-2: #ffbe8a;
  --animated-bg-star-3: #ff7a3a;
  --animated-bg-streak-1: #ff6a2a;
  --animated-bg-streak-2: #ff9b54;
  --animated-bg-streak-3: #ffd6ba;
  --animated-bg-streak-4: #ffbe8a;
  --animated-bg-streak-5: #fff1e6;
  --ember-line: rgba(255, 122, 58, 0.24);
  --ember-line-strong: rgba(255, 154, 84, 0.44);
  --theme-panel-bg: rgba(36, 14, 18, 0.74);
  --theme-panel-hover-bg: rgba(44, 16, 21, 0.92);
  --theme-panel-strong-bg: rgba(32, 13, 17, 0.84);
  --theme-panel-solid-bg: rgb(32, 13, 17);
  --theme-panel-subtle-bg: rgba(255, 122, 58, 0.08);
  --theme-panel-subtle-hover-bg: rgba(255, 122, 58, 0.14);
  --theme-panel-border: rgba(255, 122, 58, 0.2);
  --theme-panel-border-soft: rgba(255, 122, 58, 0.14);
  --theme-panel-border-strong: rgba(255, 154, 84, 0.38);
  --theme-panel-text: #ffe7dc;
  --theme-panel-muted: rgba(255, 214, 186, 0.88);
  --theme-panel-dim: rgba(255, 186, 146, 0.76);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(29, 10, 14, 0.98), rgba(40, 14, 18, 0.96));
  --theme-dropdown-solid-bg: rgba(30, 11, 14, 0.94);
  --theme-dropdown-border: rgba(255, 122, 58, 0.24);
  --theme-panel-shadow: 0 20px 45px rgba(10, 3, 4, 0.48);
  --theme-panel-shadow-soft: 0 22px 40px rgba(10, 3, 4, 0.36);
  --theme-crumb-bg: rgba(255, 122, 58, 0.08);
  --theme-crumb-bg-hover: rgba(255, 122, 58, 0.14);
  --theme-crumb-current-bg: rgba(255, 122, 58, 0.12);
  --theme-crumb-border: rgba(255, 122, 58, 0.2);
  --theme-crumb-border-hover: rgba(255, 154, 84, 0.34);
  --theme-crumb-text: #ffe7dc;
  --theme-crumb-link: rgba(255, 231, 220, 0.92);
  --theme-crumb-link-hover: #fff1e6;
  --theme-crumb-sep: rgba(255, 214, 186, 0.45);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(255, 122, 58, 0.24), rgba(255, 122, 58, 0.12));
  --theme-crumb-edit-border: rgba(255, 154, 84, 0.34);
  --theme-crumb-edit-text: #fff1e6;
  --theme-card-header-bg: linear-gradient(180deg, rgba(30, 13, 16, 0.92), rgba(42, 16, 21, 0.74));
  --theme-card-header-border: rgba(255, 122, 58, 0.16);
  --theme-landing-header-bg: rgba(30, 13, 16, 0.78);
  --theme-header-solid-bg: rgb(30, 13, 16);
  --theme-landing-header-border: rgba(255, 122, 58, 0.18);
  --theme-landing-overlay: linear-gradient(110deg, rgba(20, 11, 13, 0.96) 0%, rgba(20, 11, 13, 0.96) 45%, rgba(20, 11, 13, 0) 58%, rgba(20, 11, 13, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(20, 11, 13, 0.96) 0%, rgba(20, 11, 13, 0.96) 55%, rgba(20, 11, 13, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(36, 14, 18, 0.92), rgba(36, 14, 18, 0));
  --theme-landing-stat-border: rgba(255, 154, 84, 0.34);
  --theme-landing-stat-shadow: 0 12px 32px rgba(18, 6, 7, 0.48);
  --theme-landing-footer-text: rgba(255, 214, 186, 0.76);
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(36, 14, 18, 0.96) 0%, rgba(76, 26, 20, 0.86) 34%, rgba(165, 61, 28, 0.26) 62%, rgba(165, 61, 28, 0) 85%);
}

html[data-theme="verdant"] {
  --bg: #08130f;
  --bg3: #0d1c17;
  --bg2: rgba(13, 28, 23, 0.82);
  --header-bg: rgba(10, 26, 21, 0.84);
  --header-border: rgba(71, 215, 172, 0.24);
  --header-surface: rgba(12, 32, 26, 0.78);
  --header-surface-border: rgba(131, 247, 213, 0.24);
  --secondary: #d8fff2;
  --primary: #47d7ac;
  --accent: #8af4d3;
  --animated-bg-gradient: linear-gradient(135deg, #06100d 0%, #102520 36%, #17463b 72%, #2e8b73 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(71, 215, 172, 0.2)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.2;
  --animated-bg-star-1: #f3fff9;
  --animated-bg-star-2: #8af4d3;
  --animated-bg-star-3: #47d7ac;
  --animated-bg-streak-1: #47d7ac;
  --animated-bg-streak-2: #8af4d3;
  --animated-bg-streak-3: #c7ffe9;
  --animated-bg-streak-4: #b5fff6;
  --animated-bg-streak-5: #f3fff9;
  --verdant-line: rgba(71, 215, 172, 0.24);
  --verdant-line-strong: rgba(138, 244, 211, 0.42);
  --theme-panel-bg: rgba(12, 32, 26, 0.74);
  --theme-panel-hover-bg: rgba(15, 40, 32, 0.92);
  --theme-panel-strong-bg: rgba(12, 28, 23, 0.82);
  --theme-panel-solid-bg: rgb(12, 28, 23);
  --theme-panel-subtle-bg: rgba(71, 215, 172, 0.08);
  --theme-panel-subtle-hover-bg: rgba(71, 215, 172, 0.14);
  --theme-panel-border: rgba(71, 215, 172, 0.2);
  --theme-panel-border-soft: rgba(71, 215, 172, 0.14);
  --theme-panel-border-strong: rgba(138, 244, 211, 0.34);
  --theme-panel-text: #e6fff7;
  --theme-panel-muted: rgba(216, 255, 242, 0.88);
  --theme-panel-dim: rgba(167, 243, 208, 0.78);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(8, 22, 18, 0.98), rgba(12, 30, 24, 0.96));
  --theme-dropdown-solid-bg: rgba(8, 22, 18, 0.94);
  --theme-dropdown-border: rgba(71, 215, 172, 0.22);
  --theme-panel-shadow: 0 20px 45px rgba(2, 10, 8, 0.48);
  --theme-panel-shadow-soft: 0 22px 40px rgba(2, 10, 8, 0.34);
  --theme-crumb-bg: rgba(71, 215, 172, 0.08);
  --theme-crumb-bg-hover: rgba(71, 215, 172, 0.14);
  --theme-crumb-current-bg: rgba(71, 215, 172, 0.12);
  --theme-crumb-border: rgba(71, 215, 172, 0.2);
  --theme-crumb-border-hover: rgba(138, 244, 211, 0.3);
  --theme-crumb-text: #e6fff7;
  --theme-crumb-link: rgba(230, 255, 247, 0.92);
  --theme-crumb-link-hover: #ffffff;
  --theme-crumb-sep: rgba(216, 255, 242, 0.44);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(71, 215, 172, 0.24), rgba(71, 215, 172, 0.12));
  --theme-crumb-edit-border: rgba(138, 244, 211, 0.32);
  --theme-crumb-edit-text: #f2fffb;
  --theme-card-header-bg: linear-gradient(180deg, rgba(10, 26, 21, 0.94), rgba(14, 34, 28, 0.76));
  --theme-card-header-border: rgba(71, 215, 172, 0.14);
  --theme-landing-header-bg: rgba(10, 26, 21, 0.78);
  --theme-header-solid-bg: rgb(10, 26, 21);
  --theme-landing-header-border: rgba(71, 215, 172, 0.18);
  --theme-landing-overlay: linear-gradient(110deg, rgba(8, 19, 15, 0.96) 0%, rgba(8, 19, 15, 0.96) 45%, rgba(8, 19, 15, 0) 58%, rgba(8, 19, 15, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(8, 19, 15, 0.96) 0%, rgba(8, 19, 15, 0.96) 55%, rgba(8, 19, 15, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(12, 32, 26, 0.92), rgba(12, 32, 26, 0));
  --theme-landing-stat-border: rgba(138, 244, 211, 0.3);
  --theme-landing-stat-shadow: 0 12px 32px rgba(2, 10, 8, 0.44);
  --theme-landing-footer-text: rgba(216, 255, 242, 0.74);
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(10, 26, 21, 0.96) 0%, rgba(20, 71, 61, 0.84) 34%, rgba(47, 138, 114, 0.24) 62%, rgba(47, 138, 114, 0) 85%);
}

/* High contrast theme: strong separation and vivid accents */
html[data-theme="high-contrast"] {
  --animated-bg-gradient: linear-gradient(135deg, #000000 0%, #050505 46%, #04131a 76%, #00394f 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(0, 229, 255, 0.42)" stroke-width="2.2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.28;
  --animated-bg-star-1: #ffffff;
  --animated-bg-star-2: #00e5ff;
  --animated-bg-star-3: #fef08a;
  --animated-bg-streak-1: #00e5ff;
  --animated-bg-streak-2: #ffffff;
  --animated-bg-streak-3: #fef08a;
  --animated-bg-streak-4: #67e8f9;
  --animated-bg-streak-5: #ffffff;
  --bg: #000000;
  --bg3: #0a0a0a;
  --header-bg: rgba(0, 0, 0, 0.9);
  --header-border: rgba(0, 229, 255, 0.45);
  --header-surface: rgba(0, 0, 0, 0.85);
  --header-surface-border: rgba(0, 229, 255, 0.4);
  --secondary: #ffffff;
  --primary: #00e5ff; /* brighter accent */
  --theme-panel-bg: #000000;
  --theme-panel-hover-bg: #111111;
  --theme-panel-strong-bg: #000000;
  --theme-panel-solid-bg: #000000;
  --theme-panel-subtle-bg: #050505;
  --theme-panel-subtle-hover-bg: #111111;
  --theme-panel-border: rgba(255, 255, 255, 0.88);
  --theme-panel-border-soft: rgba(255, 255, 255, 0.72);
  --theme-panel-border-strong: #00e5ff;
  --theme-panel-text: #ffffff;
  --theme-panel-muted: #ffffff;
  --theme-panel-dim: #d1d5db;
  --theme-dropdown-bg: linear-gradient(180deg, #000000, #050505);
  --theme-dropdown-solid-bg: #000000;
  --theme-dropdown-border: #00e5ff;
  --theme-panel-shadow: 0 0 0 1px #ffffff;
  --theme-panel-shadow-soft: 0 0 0 1px #ffffff;
  --theme-crumb-bg: #000000;
  --theme-crumb-bg-hover: #111111;
  --theme-crumb-current-bg: #111111;
  --theme-crumb-border: rgba(255, 255, 255, 0.92);
  --theme-crumb-border-hover: #00e5ff;
  --theme-crumb-text: #ffffff;
  --theme-crumb-link: #ffffff;
  --theme-crumb-link-hover: #00e5ff;
  --theme-crumb-sep: rgba(255, 255, 255, 0.82);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 229, 255, 0.1));
  --theme-crumb-edit-border: #00e5ff;
  --theme-crumb-edit-text: #ffffff;
  --theme-card-header-bg: linear-gradient(180deg, #000000, #0a0a0a);
  --theme-card-header-border: #00e5ff;
  --theme-landing-header-bg: rgba(0, 0, 0, 0.92);
  --theme-header-solid-bg: #000000;
  --theme-landing-header-border: #00e5ff;
  --theme-landing-overlay: linear-gradient(110deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.98) 48%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.98) 58%, rgba(0, 0, 0, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, #000000, rgba(0, 0, 0, 0));
  --theme-landing-stat-border: #00e5ff;
  --theme-landing-stat-shadow: 0 0 0 1px #ffffff;
  --theme-landing-footer-text: #ffffff;
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 229, 255, 0.22) 46%, rgba(0, 229, 255, 0) 82%);
}

/* Slate theme: deep slate base with blue accent */
html[data-theme="slate"] {
  --bg: #0f151f;
  --bg3: #101a27;
  --bg2: rgba(15, 21, 31, 0.75);
  --header-bg: rgba(10, 16, 26, 0.85);
  --header-border: rgba(76, 195, 255, 0.25);
  --header-surface: rgba(12, 19, 30, 0.8);
  --header-surface-border: rgba(76, 195, 255, 0.25);
  --secondary: #c7d2e6;
  --primary: #2462ff;
  --accent: #3f7dff;
  --animated-bg-gradient: linear-gradient(135deg, #0d141f 0%, #1c314a 55%, #2a63b8 100%);
  --animated-bg-hex-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 150"><polygon fill="none" stroke="rgba(76, 195, 255, 0.2)" stroke-width="2" points="43.3,25 86.6,50 86.6,100 43.3,125 0,100 0,50" /></svg>');
  --animated-bg-hex-opacity: 0.2;
  --animated-bg-star-1: #f8fbff;
  --animated-bg-star-2: #9ed8ff;
  --animated-bg-star-3: #dbeafe;
  --animated-bg-streak-1: #2462ff;
  --animated-bg-streak-2: #3f7dff;
  --animated-bg-streak-3: #76c3ff;
  --animated-bg-streak-4: #bfe8ff;
  --animated-bg-streak-5: #f8fbff;
  --slate-ink: #0b111a;
  --slate-plate: rgba(12, 19, 30, 0.78);
  --slate-plate-strong: rgba(10, 16, 26, 0.92);
  --slate-line: rgba(76, 195, 255, 0.22);
  --theme-panel-bg: rgba(12, 19, 30, 0.74);
  --theme-panel-hover-bg: rgba(10, 16, 26, 0.92);
  --theme-panel-strong-bg: rgba(12, 19, 30, 0.82);
  --theme-panel-solid-bg: rgb(12, 19, 30);
  --theme-panel-subtle-bg: rgba(76, 195, 255, 0.08);
  --theme-panel-subtle-hover-bg: rgba(76, 195, 255, 0.12);
  --theme-panel-border: rgba(76, 195, 255, 0.2);
  --theme-panel-border-soft: rgba(76, 195, 255, 0.14);
  --theme-panel-border-strong: rgba(76, 195, 255, 0.42);
  --theme-panel-text: #e8eefc;
  --theme-panel-muted: rgba(199, 210, 230, 0.88);
  --theme-panel-dim: rgba(191, 219, 254, 0.78);
  --theme-dropdown-bg: linear-gradient(180deg, rgba(10, 16, 26, 0.98), rgba(12, 19, 30, 0.96));
  --theme-dropdown-solid-bg: rgba(10, 16, 26, 0.94);
  --theme-dropdown-border: rgba(76, 195, 255, 0.24);
  --theme-panel-shadow: 0 20px 45px rgba(6, 10, 18, 0.45);
  --theme-panel-shadow-soft: 0 22px 40px rgba(6, 10, 18, 0.34);
  --theme-crumb-bg: rgba(76, 195, 255, 0.08);
  --theme-crumb-bg-hover: rgba(76, 195, 255, 0.12);
  --theme-crumb-current-bg: rgba(76, 195, 255, 0.1);
  --theme-crumb-border: rgba(76, 195, 255, 0.22);
  --theme-crumb-border-hover: rgba(76, 195, 255, 0.42);
  --theme-crumb-text: #e8eefc;
  --theme-crumb-link: rgba(232, 238, 252, 0.92);
  --theme-crumb-link-hover: #ffffff;
  --theme-crumb-sep: rgba(199, 210, 230, 0.46);
  --theme-crumb-edit-bg: linear-gradient(180deg, rgba(36, 98, 255, 0.24), rgba(36, 98, 255, 0.12));
  --theme-crumb-edit-border: rgba(76, 195, 255, 0.34);
  --theme-crumb-edit-text: #eef4ff;
  --theme-card-header-bg: linear-gradient(180deg, rgba(10, 16, 26, 0.94), rgba(12, 19, 30, 0.76));
  --theme-card-header-border: rgba(76, 195, 255, 0.14);
  --theme-landing-header-bg: rgba(10, 16, 26, 0.78);
  --theme-header-solid-bg: rgb(10, 16, 26);
  --theme-landing-header-border: rgba(76, 195, 255, 0.18);
  --theme-landing-overlay: linear-gradient(110deg, rgba(11, 17, 26, 0.96) 0%, rgba(11, 17, 26, 0.96) 45%, rgba(11, 17, 26, 0) 58%, rgba(11, 17, 26, 0) 100%);
  --theme-landing-overlay-vg: linear-gradient(0deg, rgba(11, 17, 26, 0.96) 0%, rgba(11, 17, 26, 0.96) 55%, rgba(11, 17, 26, 0) 100%);
  --theme-landing-stat-bg: linear-gradient(90deg, rgba(12, 19, 30, 0.92), rgba(12, 19, 30, 0));
  --theme-landing-stat-border: rgba(76, 195, 255, 0.32);
  --theme-landing-stat-shadow: 0 12px 32px rgba(6, 10, 18, 0.42);
  --theme-landing-footer-text: rgba(199, 210, 230, 0.74);
  --theme-landing-footer-halo: radial-gradient(ellipse at 50% 100%, rgba(10, 16, 26, 0.98) 0%, rgba(17, 40, 76, 0.84) 36%, rgba(42, 99, 184, 0.22) 62%, rgba(42, 99, 184, 0) 85%);
}

/* Slate theme makeover */
html[data-theme="ember"] body {
  background-color: #140b0d;
  background-image: linear-gradient(135deg, #12080a 0%, #2b1014 32%, #5b1d16 70%, #a53d1c 100%);
}
html[data-theme="apex"] body {
  background-color: #120d05;
  background-image: linear-gradient(135deg, #120d05 0%, #241707 34%, #5f3d0f 72%, #d7a33e 100%);
}
html[data-theme="apex"] .overlay,
html[data-theme="apex"] .bg-black\/50 {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="apex"] .card {
  background-color: rgba(29, 19, 8, 0.88) !important;
  border-color: var(--apex-line) !important;
  box-shadow: 0 18px 36px rgba(12, 7, 2, 0.5) !important;
}
html[data-theme="apex"] .card:hover,
html[data-theme="apex"] .card:focus-within {
  background-color: rgba(36, 24, 9, 0.94) !important;
  border-color: var(--apex-line-strong) !important;
  box-shadow: 0 22px 44px rgba(12, 7, 2, 0.6) !important;
}
html[data-theme="apex"] .user-menu-dropdown {
  background-color: rgba(24, 16, 6, 0.95) !important;
  border-color: var(--apex-line) !important;
}
html[data-theme="apex"] .menu-item:hover {
  background: rgba(245, 182, 66, 0.1) !important;
  border-color: rgba(255, 223, 145, 0.24) !important;
}
html[data-theme="apex"] .theme-opt {
  background: rgba(34, 23, 8, 0.66);
  border-color: rgba(245, 182, 66, 0.18);
}
html[data-theme="apex"] .theme-opt.active {
  background: rgba(240, 173, 51, 0.18);
  border-color: rgba(255, 223, 145, 0.6);
}
html[data-theme="apex"] .module-card:hover {
  background-color: rgba(35, 23, 8, 0.82) !important;
}
html[data-theme="apex"] .post-card {
  background-color: rgba(30, 20, 8, 0.78) !important;
  border-color: var(--apex-line) !important;
}
html[data-theme="apex"] .form-input {
  background-color: rgba(33, 22, 8, 0.76) !important;
  border-color: rgba(245, 182, 66, 0.2) !important;
}
html[data-theme="ember"] .overlay,
html[data-theme="ember"] .bg-black\/50 {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="ember"] .card {
  background-color: rgba(28, 12, 16, 0.88) !important;
  border-color: var(--ember-line) !important;
  box-shadow: 0 18px 36px rgba(10, 3, 4, 0.48) !important;
}
html[data-theme="ember"] .card:hover,
html[data-theme="ember"] .card:focus-within {
  background-color: rgba(36, 14, 18, 0.94) !important;
  border-color: var(--ember-line-strong) !important;
  box-shadow: 0 22px 44px rgba(10, 3, 4, 0.58) !important;
}
html[data-theme="ember"] .user-menu-dropdown {
  background-color: rgba(24, 10, 13, 0.95) !important;
  border-color: var(--ember-line) !important;
}
html[data-theme="ember"] .menu-item:hover {
  background: rgba(255, 122, 58, 0.1) !important;
  border-color: rgba(255, 154, 84, 0.24) !important;
}
html[data-theme="ember"] .theme-opt {
  background: rgba(33, 13, 17, 0.66);
  border-color: rgba(255, 122, 58, 0.18);
}
html[data-theme="ember"] .theme-opt.active {
  background: rgba(255, 106, 42, 0.16);
  border-color: rgba(255, 154, 84, 0.58);
}
html[data-theme="ember"] .module-card:hover {
  background-color: rgba(35, 14, 18, 0.82) !important;
}
html[data-theme="ember"] .post-card {
  background-color: rgba(32, 13, 17, 0.78) !important;
  border-color: var(--ember-line) !important;
}
html[data-theme="ember"] .form-input {
  background-color: rgba(33, 13, 17, 0.76) !important;
  border-color: rgba(255, 122, 58, 0.2) !important;
}

html[data-theme="verdant"] body {
  background-color: #08130f;
  background-image: linear-gradient(135deg, #06100d 0%, #112720 34%, #18473d 68%, #2f8a72 100%);
}
html[data-theme="verdant"] .overlay,
html[data-theme="verdant"] .bg-black\/50 {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="verdant"] .card {
  background-color: rgba(10, 24, 20, 0.88) !important;
  border-color: var(--verdant-line) !important;
  box-shadow: 0 18px 36px rgba(2, 10, 8, 0.5) !important;
}
html[data-theme="verdant"] .card:hover,
html[data-theme="verdant"] .card:focus-within {
  background-color: rgba(14, 31, 26, 0.94) !important;
  border-color: var(--verdant-line-strong) !important;
  box-shadow: 0 22px 44px rgba(2, 10, 8, 0.6) !important;
}
html[data-theme="verdant"] .user-menu-dropdown {
  background-color: rgba(8, 22, 18, 0.95) !important;
  border-color: var(--verdant-line) !important;
}
html[data-theme="verdant"] .menu-item:hover {
  background: rgba(71, 215, 172, 0.1) !important;
  border-color: rgba(138, 244, 211, 0.22) !important;
}
html[data-theme="verdant"] .theme-opt {
  background: rgba(10, 28, 22, 0.66);
  border-color: rgba(71, 215, 172, 0.18);
}
html[data-theme="verdant"] .theme-opt.active {
  background: rgba(71, 215, 172, 0.16);
  border-color: rgba(138, 244, 211, 0.56);
}
html[data-theme="verdant"] .module-card:hover {
  background-color: rgba(13, 31, 26, 0.82) !important;
}
html[data-theme="verdant"] .post-card {
  background-color: rgba(12, 28, 23, 0.78) !important;
  border-color: var(--verdant-line) !important;
}
html[data-theme="verdant"] .form-input {
  background-color: rgba(12, 29, 24, 0.76) !important;
  border-color: rgba(71, 215, 172, 0.2) !important;
}

html[data-theme="slate"] body {
  background-color: #0b111a;
  background-image: linear-gradient(135deg, #0f151f 0%, #2462ff 85%);
}
html[data-theme="slate"] .overlay {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="slate"] .bg-black\/50 {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="slate"] .card {
  background-color: #0f151f !important;
  border-color: var(--slate-line) !important;
  box-shadow: 0 18px 36px rgba(6, 10, 18, 0.45) !important;
}
html[data-theme="slate"] .card:hover,
html[data-theme="slate"] .card:focus-within {
  background-color: #0b111a !important;
  border-color: rgba(76,195,255,0.55) !important;
  box-shadow: 0 20px 40px rgba(6, 10, 18, 0.55) !important;
}
html[data-theme="slate"] .user-menu-dropdown {
  background-color: rgba(10, 16, 26, 0.92) !important;
  border-color: rgba(76,195,255,0.25) !important;
}
html[data-theme="slate"] .menu-item:hover {
  background: rgba(76,195,255,0.08) !important;
  border-color: rgba(76,195,255,0.25) !important;
}
html[data-theme="slate"] .theme-opt {
  background: rgba(12, 19, 30, 0.65);
  border-color: rgba(76,195,255,0.18);
}
html[data-theme="slate"] .theme-opt.active {
  background: rgba(36, 98, 255, 0.18);
  border-color: rgba(76,195,255,0.6);
}
html[data-theme="slate"] .module-card:hover {
  background-color: rgba(12, 19, 30, 0.8) !important;
}
html[data-theme="slate"] .post-card {
  background-color: rgba(12, 19, 30, 0.7) !important;
  border-color: rgba(76,195,255,0.2) !important;
}
html[data-theme="slate"] .form-input {
  background-color: rgba(12, 19, 30, 0.7) !important;
  border-color: rgba(76,195,255,0.2) !important;
}

/* Card overrides to better fit themes (since base uses fixed rgba) */
html[data-theme="white"] .card {
  background-image:
    linear-gradient(180deg, rgba(247,250,253,0.96), rgba(236,242,248,0.92));
  background-color: transparent !important;
  backdrop-filter: saturate(1.03) blur(10px);
  color: #10233f;
  border-color: rgba(22, 32, 54, 0.11) !important;
  box-shadow: var(--theme-light-shadow-md);
}
html[data-theme="white"] .card:hover,
html[data-theme="white"] .card:focus-within {
  background-image:
    linear-gradient(180deg, rgba(250,252,254,0.985), rgba(238,244,250,0.96));
  border-color: rgba(40, 86, 173, 0.18) !important;
  box-shadow: var(--theme-light-shadow-lg);
}
/* Module cards in light mode: clearer contrast */
html[data-theme="white"] .module-card {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(22, 32, 54, 0.08) !important;
  color: #10233f !important;
}
html[data-theme="white"] .module-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--theme-light-shadow-focus) !important;
}
html[data-theme="white"] .module-card-content h3 { color: #10233f !important; }
html[data-theme="white"] .module-card-content p { color: #4a5a71 !important; }
/* Legacy light background override no longer needed */
html[data-theme="white"] .post-card { background-color: transparent; }

html[data-theme="black"] .card {
  background-color: rgba(0, 10, 20, 0.85) !important;
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="high-contrast"] .card {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Menu adjusts with theme for readability */
html[data-theme="white"] .user-menu-dropdown,
html[data-theme="white"] #server-list,
html[data-theme="white"] .role-select-dropdown,
html[data-theme="white"] .role-selector-dropdown,
html[data-theme="white"] .wlm-manager-selector-dropdown,
html[data-theme="white"] .wlm-dropdown-menu {
  background: var(--theme-dropdown-bg) !important;
  background-color: var(--theme-dropdown-solid-bg) !important;
  border-color: var(--theme-dropdown-border) !important;
  box-shadow: 0 28px 56px rgba(2, 6, 23, 0.40), 0 1px 0 rgba(255,255,255,0.04) inset !important;
  color: var(--theme-dropdown-text) !important;
}
html[data-theme="white"] .menu-group {
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}
html[data-theme="white"] .menu-group:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
html[data-theme="white"] .menu-item,
html[data-theme="white"] .theme-label,
html[data-theme="white"] .role-dropdown-item,
html[data-theme="white"] .wlm-manager-dropdown-item,
html[data-theme="white"] .wlm-dropdown-option,
html[data-theme="white"] .add-server-item,
html[data-theme="white"] .add-server-item-name {
  color: var(--theme-dropdown-text) !important;
}
html[data-theme="white"] #server-list * {
  color: inherit;
}
html[data-theme="white"] .menu-item:hover,
html[data-theme="white"] .role-dropdown-item:hover,
html[data-theme="white"] .wlm-manager-dropdown-item:hover,
html[data-theme="white"] .wlm-dropdown-option:hover,
html[data-theme="white"] .add-server-item:hover {
  background: rgba(61, 122, 240, 0.14) !important;
  border-color: rgba(61, 122, 240, 0.22) !important;
}
html[data-theme="white"] .theme-opt {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.08);
  color: var(--theme-dropdown-text);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
html[data-theme="white"] .theme-opt:hover {
  border-color: rgba(92,134,219,0.28);
  background: linear-gradient(180deg, rgba(55, 96, 173, 0.18), rgba(32, 60, 112, 0.12));
}
html[data-theme="white"] .theme-opt.active {
  border-color: rgba(92,134,219,0.34);
  background: linear-gradient(180deg, rgba(57, 110, 203, 0.26), rgba(35, 72, 136, 0.18));
}
html[data-theme="white"] .theme-label { color: var(--theme-dropdown-text); }
html[data-theme="white"] .theme-opt::before {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--theme-dropdown-text);
}
html[data-theme="white"] .app-header-performance-meta,
html[data-theme="white"] .manager-selector-hint-copy,
html[data-theme="white"] .manager-selector-group,
html[data-theme="white"] .add-server-item-id {
  color: var(--theme-dropdown-muted) !important;
}

html[data-theme="high-contrast"] .user-menu-dropdown { background-color: #000; border-color: #fff; }
html[data-theme="high-contrast"] .menu-item { color: #fff; }
html[data-theme="high-contrast"] .menu-item:hover { background: #111; }

/* -------- Global background + overlay tuning per theme -------- */
/* Default body fallback */
body { background-color: var(--bg3); }

/* Common overlay class */
.overlay { background-color: rgba(0, 29, 53, 0.55); }

/* Tailwind utility override for bg-black/50 so overlays adapt per theme */
/* Note: slash must be escaped in CSS selectors */
html[data-theme="white"] .bg-black\/50 { 
  background-color: rgba(243,246,251,0.74) !important; 
  background-image: linear-gradient(135deg, rgba(243,246,251,0.92), rgba(233,240,250,0.82));
}
html[data-theme="white"] .overlay { 
  background-color: rgba(243,246,251,0.68) !important; 
  background-image: linear-gradient(135deg, rgba(243,246,251,0.88), rgba(231,238,248,0.78));
}

/* Post/updates cards contrast in light mode */
html[data-theme="white"] .post-card {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,251,255,0.95));
  background-color: transparent !important;
  backdrop-filter: saturate(1.02) blur(8px);
  border-color: rgba(22,32,54,0.08) !important;
  box-shadow: var(--theme-light-shadow-md);
}
html[data-theme="white"] .post-card h4 { color: #10233f !important; }
html[data-theme="white"] .post-card p { color: #4a5a71 !important; }

/* Channel dropdowns (selects) frosted in light theme */
html[data-theme="white"] .form-input {
  background-image: linear-gradient(180deg, rgba(241,245,250,0.98), rgba(228,235,244,0.94));
  background-color: transparent !important;
  backdrop-filter: saturate(1.02) blur(6px);
  border-color: rgba(22,32,54,0.10) !important;
  color: #10233f !important;
  box-shadow: var(--theme-light-shadow-xs);
}
html[data-theme="white"] .form-input::-moz-placeholder { color: #7a879b !important; }
html[data-theme="white"] .form-input::placeholder { color: #7a879b !important; }
/* Make light-theme select triggers cooler and the opened option list black */
html[data-theme="white"] select.form-input {
  color: #10233f !important;
  background-image: linear-gradient(180deg, rgba(236,241,247,0.98), rgba(221,229,239,0.94)) !important;
  background-color: rgba(227, 235, 244, 0.92) !important;
  border-color: rgba(83, 101, 127, 0.18) !important;
}
html[data-theme="white"] #dev-feed-channel-select.form-input {
  background-image: linear-gradient(180deg, rgba(236,241,247,0.98), rgba(221,229,239,0.94)) !important;
  background-color: rgba(227, 235, 244, 0.92) !important;
  border: 1px solid rgba(83, 101, 127, 0.18) !important;
  --dl-channel-overlay-bg: rgba(8, 10, 14, 0.98) !important;
}
html[data-theme="white"] select.form-input option,
html[data-theme="white"] select.form-input optgroup {
  color: #eef4ff !important;
  background: #080a0e !important;
}

/* Markdown (developer feed) readability in light mode */
html[data-theme="white"] .markdown-body { color: #213247; }
html[data-theme="white"] .markdown-body h1,
html[data-theme="white"] .markdown-body h2,
html[data-theme="white"] .markdown-body h3,
html[data-theme="white"] .markdown-body h4,
html[data-theme="white"] .markdown-body h5,
html[data-theme="white"] .markdown-body h6 { color: #10233f; }
html[data-theme="white"] .markdown-body a { color: #175fe6; }
html[data-theme="white"] .markdown-body p, 
html[data-theme="white"] .markdown-body li { color: #31445d; }

html[data-theme="black"] .bg-black\/50 { background-color: rgba(0,0,0,0.5) !important; }
html[data-theme="black"] .overlay { background-color: rgba(0,0,0,0.5) !important; }

html[data-theme="high-contrast"] .bg-black\/50 { background-color: rgba(0,0,0,0.85) !important; }
html[data-theme="high-contrast"] .overlay { background-color: rgba(0,0,0,0.85) !important; }

/* -------- Light theme typography adjustments -------- */
/* Use dark greys for text on light backgrounds and tame overly-light grays */
html[data-theme="white"] body {
  color: #1a2940;
  background-color: #edf2f7;
  background-image: radial-gradient(circle at top left, rgba(150, 179, 222, 0.26), transparent 30%), radial-gradient(circle at top right, rgba(202, 216, 236, 0.24), transparent 24%), linear-gradient(180deg, rgba(242, 246, 251, 0.92), rgba(226, 234, 244, 0.96));
}
html[data-theme="white"] .text-white { color: #10233f !important; }
html[data-theme="white"] .text-gray-300 { color: #42536c !important; }
html[data-theme="white"] .text-gray-400 { color: #5a6b83 !important; }
html[data-theme="white"] .text-gray-500 { color: #7a879b !important; }
/* Ensure headings that rely on white are readable */
html[data-theme="white"] h1,
html[data-theme="white"] h2,
html[data-theme="white"] h3,
html[data-theme="white"] h4,
html[data-theme="white"] h5,
html[data-theme="white"] h6 { color: #10233f; }
html[data-theme="white"] .landing-main,
html[data-theme="white"] .landing-section-title,
html[data-theme="white"] .landing-highlight-title,
html[data-theme="white"] .landing-module-title {
  color: #10233f !important;
}
html[data-theme="white"] .landing-hero-title {
  color: #10233f;
  text-shadow: 0 10px 24px rgba(255, 255, 255, 0.72);
}
html[data-theme="white"] .landing-hero-kicker,
html[data-theme="white"] .landing-hero-copy,
html[data-theme="white"] .landing-section-subtitle,
html[data-theme="white"] .landing-highlight-body,
html[data-theme="white"] .landing-module-body,
html[data-theme="white"] .landing-header-nav,
html[data-theme="white"] .landing-header-login {
  color: #5a6b83 !important;
}
html[data-theme="white"] .landing-feature-card,
html[data-theme="white"] .landing-highlight-card,
html[data-theme="white"] .landing-module-card {
  box-shadow: var(--theme-light-shadow-lg);
}

html[data-theme="white"] .button,
html[data-theme="white"] .button-primary,
html[data-theme="white"] .button-danger,
html[data-theme="white"] .button-success,
html[data-theme="white"] .menu-item,
html[data-theme="white"] .theme-opt,
html[data-theme="white"] .post-card,
html[data-theme="white"] .module-card,
html[data-theme="white"] .form-input,
html[data-theme="white"] .pill,
html[data-theme="white"] .dashboard-modal-panel,
html[data-theme="white"] .dashboard-modal-empty,
html[data-theme="white"] .dashboard-confirm-modal,
html[data-theme="white"] .dashboard-server-card,
html[data-theme="white"] .dashboard-modules-card,
html[data-theme="white"] .dashboard-updates-card,
html[data-theme="white"] .dashboard-v2-hero-card,
html[data-theme="white"] .dashboard-v2-server-card,
html[data-theme="white"] .dashboard-v2-modules-card,
html[data-theme="white"] .dashboard-v2-updates-card,
html[data-theme="white"] .dashboard-v2-side-card,
html[data-theme="white"] .dashboard-v2-kpi-card,
html[data-theme="white"] .dashboard-v2-summary-item {
  box-shadow: var(--theme-light-shadow-sm);
}

html[data-theme="white"] .button:hover,
html[data-theme="white"] .button:focus-visible,
html[data-theme="white"] .button-primary:hover,
html[data-theme="white"] .button-danger:hover,
html[data-theme="white"] .button-success:hover,
html[data-theme="white"] .menu-item:hover,
html[data-theme="white"] .theme-opt:hover,
html[data-theme="white"] .post-card:hover,
html[data-theme="white"] .post-card:focus-within,
html[data-theme="white"] .form-input:focus,
html[data-theme="white"] .form-input:focus-visible,
html[data-theme="white"] .dashboard-modal-panel:hover,
html[data-theme="white"] .dashboard-confirm-modal:hover,
html[data-theme="white"] .dashboard-server-card:hover,
html[data-theme="white"] .dashboard-modules-card:hover,
html[data-theme="white"] .dashboard-updates-card:hover,
html[data-theme="white"] .dashboard-v2-hero-card:hover,
html[data-theme="white"] .dashboard-v2-server-card:hover,
html[data-theme="white"] .dashboard-v2-modules-card:hover,
html[data-theme="white"] .dashboard-v2-updates-card:hover,
html[data-theme="white"] .dashboard-v2-side-card:hover,
html[data-theme="white"] .dashboard-v2-kpi-card:hover,
html[data-theme="white"] .dashboard-v2-summary-item:hover {
  box-shadow: var(--theme-light-shadow-lg);
}

html[data-theme="white"] [class$="-card"],
html[data-theme="white"] [class*="-card "],
html[data-theme="white"] [class$="-panel"],
html[data-theme="white"] [class*="-panel "],
html[data-theme="white"] [class$="-dropdown"],
html[data-theme="white"] [class*="-dropdown "],
html[data-theme="white"] [class$="-popup"],
html[data-theme="white"] [class*="-popup "],
html[data-theme="white"] .admin-surface-card,
html[data-theme="white"] .admin-tab-btn,
html[data-theme="white"] .admin-metric-card,
html[data-theme="white"] .admin-table-shell,
html[data-theme="white"] .admin-staff-role-item,
html[data-theme="white"] .staff-directory-item,
html[data-theme="white"] .wlm-config-card,
html[data-theme="white"] .wlm-config-card-main,
html[data-theme="white"] .preview-theme-popup .popup-inner,
html[data-theme="white"] #server-list,
html[data-theme="white"] #add-server-popup,
html[data-theme="white"] #invite-picker-list,
html[data-theme="white"] #export-dialog .card,
html[data-theme="white"] #sidebar,
html[data-theme="white"] #sidebar .card,
html[data-theme="white"] #objectives-list li {
  box-shadow: var(--theme-light-shadow-sm);
}

html[data-theme="white"] [class$="-card"]:hover,
html[data-theme="white"] [class*="-card "]:hover,
html[data-theme="white"] [class$="-panel"]:hover,
html[data-theme="white"] [class*="-panel "]:hover,
html[data-theme="white"] [class$="-dropdown"]:hover,
html[data-theme="white"] [class*="-dropdown "]:hover,
html[data-theme="white"] [class$="-popup"]:hover,
html[data-theme="white"] [class*="-popup "]:hover,
html[data-theme="white"] .admin-surface-card:hover,
html[data-theme="white"] .admin-tab-btn:hover,
html[data-theme="white"] .admin-metric-card:hover,
html[data-theme="white"] .admin-table-shell:hover,
html[data-theme="white"] .admin-staff-role-item:hover,
html[data-theme="white"] .staff-directory-item:hover,
html[data-theme="white"] .wlm-config-card:hover,
html[data-theme="white"] .wlm-config-card-main:hover,
html[data-theme="white"] .preview-theme-popup .popup-inner:hover,
html[data-theme="white"] #server-list:hover,
html[data-theme="white"] #add-server-popup:hover,
html[data-theme="white"] #invite-picker-list:hover,
html[data-theme="white"] #export-dialog .card:hover,
html[data-theme="white"] #sidebar:hover,
html[data-theme="white"] #sidebar .card:hover,
html[data-theme="white"] #objectives-list li:hover {
  box-shadow: var(--theme-light-shadow-md);
}

html[data-theme="white"] .dashboard-page,
html[data-theme="white"] .dashboard-page--v2,
html[data-theme="white"] .page-wlm-dashboard {
  background-image: none !important;
  background-color: transparent !important;
}
html[data-theme="white"] .dashboard-page-overlay,
html[data-theme="white"] .dashboard-page-overlay--v2,
html[data-theme="white"] .page-wlm-dashboard .wlm-dashboard-backdrop {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.20), transparent 28%),
    linear-gradient(180deg, rgba(229, 237, 246, 0.18), rgba(217, 228, 240, 0.36)) !important;
}
html[data-theme="white"] .dashboard-server-card,
html[data-theme="white"] .dashboard-modules-card,
html[data-theme="white"] .dashboard-updates-card,
html[data-theme="white"] .dashboard-v2-hero-card,
html[data-theme="white"] .dashboard-v2-server-card,
html[data-theme="white"] .dashboard-v2-modules-card,
html[data-theme="white"] .dashboard-v2-updates-card,
html[data-theme="white"] .dashboard-v2-side-card,
html[data-theme="white"] .dashboard-v2-kpi-card,
html[data-theme="white"] .dashboard-v2-summary-item,
html[data-theme="white"] .page-wlm-dashboard .wlm-dashboard-sidebar,
html[data-theme="white"] .page-wlm-dashboard .wlm-dashboard-main-panel,
html[data-theme="white"] .page-wlm-dashboard .wlm-dashboard-panel.is-active,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-toggle,
html[data-theme="white"] .page-wlm-dashboard .wlm-lookup-detail-header,
html[data-theme="white"] .page-wlm-dashboard .wlm-lookup-detail-panel {
  background-image: linear-gradient(180deg, rgba(246,249,252,0.94), rgba(233,239,246,0.92)) !important;
  background-color: transparent !important;
  border-color: rgba(22, 32, 54, 0.11) !important;
  box-shadow: 0 22px 42px -30px rgba(32, 52, 84, 0.18), 0 1px 0 rgba(255,255,255,0.76) inset, 0 -1px 0 rgba(166, 186, 214, 0.14) inset !important;
}
html[data-theme="white"] .dashboard-card-title,
html[data-theme="white"] .dashboard-server-name,
html[data-theme="white"] .dashboard-server-stat-value,
html[data-theme="white"] .dashboard-dev-feed-label,
html[data-theme="white"] .dashboard-latency-value,
html[data-theme="white"] .dashboard-v2-title,
html[data-theme="white"] .dashboard-v2-summary-value,
html[data-theme="white"] .dashboard-v2-kpi-value,
html[data-theme="white"] .dashboard-v2-module-toolbar-title,
html[data-theme="white"] .page-wlm-dashboard .wlm-dashboard-main-shell,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-title,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-toggle-title,
html[data-theme="white"] .page-wlm-dashboard .wlm-refresh-title,
html[data-theme="white"] .page-wlm-dashboard .wlm-refresh-value,
html[data-theme="white"] .page-wlm-dashboard .wlm-panel-toolbar-title,
html[data-theme="white"] .page-wlm-dashboard .wlm-lookup-detail-header,
html[data-theme="white"] .page-wlm-dashboard .wlm-lookup-detail-panel {
  color: #10233f !important;
}
html[data-theme="white"] .dashboard-latency-info,
html[data-theme="white"] .dashboard-latency-banner {
  color: #10233f;
}
html[data-theme="white"] .dashboard-latency-banner {
  background: linear-gradient(180deg, rgba(255, 221, 221, 0.95), rgba(255, 238, 238, 0.9));
}
html[data-theme="white"] .dashboard-latency-label,
html[data-theme="white"] .dashboard-server-members,
html[data-theme="white"] .dashboard-server-stat-label,
html[data-theme="white"] .dashboard-dev-feed-help,
html[data-theme="white"] .dashboard-updates-footer,
html[data-theme="white"] .dashboard-v2-kicker,
html[data-theme="white"] .dashboard-v2-section-kicker,
html[data-theme="white"] .dashboard-v2-body,
html[data-theme="white"] .dashboard-v2-inline-copy,
html[data-theme="white"] .dashboard-v2-section-note,
html[data-theme="white"] .dashboard-v2-summary-label,
html[data-theme="white"] .dashboard-v2-kpi-copy,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-kicker,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-copy,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab-subtitle,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-toggle-copy,
html[data-theme="white"] .page-wlm-dashboard .wlm-refresh-label,
html[data-theme="white"] .page-wlm-dashboard .wlm-player-filter-label,
html[data-theme="white"] .page-wlm-dashboard .wlm-search-field-icon {
  color: #5a6b83 !important;
}
html[data-theme="white"] .dashboard-server-stats,
html[data-theme="white"] .dashboard-dev-feed,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-brand,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-footer {
  border-color: rgba(22, 32, 54, 0.08) !important;
}
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-brand-icon,
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab-icon {
  background: linear-gradient(180deg, rgba(247,250,253,0.98), rgba(234,240,246,0.92));
  border-color: rgba(22, 32, 54, 0.10);
  box-shadow: 0 10px 20px -16px rgba(32, 52, 84, 0.18), 0 1px 0 rgba(255,255,255,0.76) inset;
}
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab {
  background: linear-gradient(180deg, rgba(245,249,252,0.92), rgba(231,238,245,0.88));
  border-color: rgba(22, 32, 54, 0.10);
  box-shadow: 0 12px 26px -22px rgba(32, 52, 84, 0.16), 0 1px 0 rgba(255,255,255,0.78) inset;
}
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab:hover {
  background: linear-gradient(180deg, rgba(248,251,254,0.97), rgba(234,241,249,0.94));
  border-color: rgba(40, 86, 173, 0.18);
}
html[data-theme="white"] .page-wlm-dashboard .wlm-sidebar-tab.is-active {
  background: linear-gradient(180deg, rgba(229,238,251,0.98), rgba(219,230,245,0.94));
  border-color: rgba(40, 86, 173, 0.24);
  box-shadow: 0 0 0 3px rgba(40, 86, 173, 0.08), 0 16px 30px -24px rgba(40, 86, 173, 0.22);
  color: #2856ad !important;
}