/* ========================================================================
FILE : /assets/01-mstr-tmplet/02-jzn-topbar/css/jzn-bgthemecolor.css
PURPOSE : THE COLOR ENGINE - 18 Global Palettes & Font Roots
VERSION: v3.0 - DATE MODIFIED: 2026-03-16 - ADDED DROPDOWN UI STYLES
VERSION: v3.5 - DATE MODIFIED: 2026-03-26 - Added Text Color Picker H2/H3 Tags + container border+thickness + fonts+size
VERSION: v4.0 - DATE MODIFIED: 2026-03-27 - Implementing the 10 Variables
VERSION: v5.0 - DATE MODIFIED: 2026-03-29 - Implementing the Typography in root for Mob+Dsktp
VERSION: v5.5 - DATE MODIFIED: 2026-03-30 - Separating Typography into individual controls
VERSION: v6.0 - DATE MODIFIED: 2026-04-01 - Added the Default Theme Colors for All 18 Palettes
VERSION: v6.5 - DATE MODIFIED: 2026-04-02 - Remapping the Typography for SEO - H1-H4 + Micro
==================================================== */

:root {
  /* --- FONT ASSIGNMENTS --- */
  --jzn-font-brand: 'jzn-Orbitron', sans-serif;
  --jzn-font-body: 'jzn-Noto', sans-serif;
  --jzn-font-ui: 'jzn-Inter', sans-serif;
  --jzn-font-mono: 'jzn-JetBrains', monospace;
  --jzn-font-roboto: 'jzn-Roboto', sans-serif; /* <-- ADDED: Classic Roboto */

  /* ======================================================== */
  /* 🛠️ BRAT TWEAK: THE JUXY-TYPE ENGINE (TYPOGRAPHY STUDIO)  */
  /* ======================================================== */

  /* --- FONT ROUTING LOGIC --- */
  /* Desktop defaults to the Studio Modal choice */
  --jzn-active-font: var(--jzn-font-ui);
  /* We define the specific Header Font separately so we can hijack it on mobile */
  --jzn-active-heading-font: var(--jzn-font-brand);

  /* --- THE GRANULAR WEIGHTS (DESKTOP MASTER) --- */
  --jzn-font-weight-heading: 700; /* <-- Brat Tweak: Default Heading Weight */
  --jzn-font-weight-body: 400;    /* <-- Brat Tweak: Default Body Weight */
  --jzn-font-weight-sub: 300;     /* <-- NEW: Independent Subtext Weight */

  --jzn-heading-color: #ffffff; /* <-- Brat Tweak: Default H1/H2 Color */
  --jzn-subtext-color: #a0aec0; /* <-- Brat Tweak: Default Subtext Color */

  /* --- 7-TIER FLUID TYPOGRAPHY (DESKTOP MASTER SIZING) --- */
  --jzn-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);       /* <-- Massive Titles */
  --jzn-size-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);     /* <-- Section Headings */
  --jzn-size-h3: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);     /* <-- Card/Widget Headings */
  --jzn-size-h4: clamp(1rem, 0.9rem + 0.8vw, 1.25rem);      /* <-- NEW: Sub-Tabs/Footers */
  --jzn-size-text: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);   /* <-- Standard Body Text */
  --jzn-size-sub: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* <-- Tiny Helper Text */
  --jzn-size-micro: 0.6rem;                                 /* <-- NEW: Trust Pills (Static Size) */

  --jzn-line-height-heading: 1.2;                           /* <-- Global Heading Spacing */
  --jzn-line-height-body: 1.6;                              /* <-- Global Text Spacing */
  --jzn-letter-spacing-micro: 1px;                          /* <-- NEW: Tracking for tiny pills */

  /* ======================================================== */
  /* 🛠️ BRAT TWEAK: MASTER FALLBACK THEME (DEFAULT ON LOAD)    */
  /* ======================================================== */
  --jzn-bg: #0f172a; /* <-- Brat Tweak: Default Background */
  --jzn-container: #1e1e1e; /* <-- Brat Tweak: Default Glass Container */
  --jzn-text: #eaeaea; /* <-- Brat Tweak: Default Text Color */
  --jzn-hover: #4fc3f7; /* <-- Brat Tweak: Default Hover/Accent Color */

  /* --- GLASS & EFFECTS --- */
  --jzn-glass-op: 0.95;
  --jzn-glass-border: rgba(255, 255, 255, 0.1);
  --jzn-rgb-speed: 3s;

  /* --- GLASS BORDER COLOR & THICKNESS --- */
  --jzn-container-border-c: #ffffff; /* <-- Brat Tweak: Default Glass Border Color */
  --jzn-container-border-w: 2px; /* <-- Brat Tweak: Default Glass Border Thickness */
}

/* ======================================================== */
/* 🛠️ BRAT TWEAK: TABLET ONLY OVERRIDES (Below 1024px)       */
/* ======================================================== */
@media (max-width: 1024px) {
  :root {
    /* --- TABLET SIZING --- */
    --jzn-size-h1: 2.2rem !important;
    --jzn-size-h2: 1.8rem !important;
    --jzn-size-h3: 1.4rem !important;
    --jzn-size-h4: 1.1rem !important;    /* <-- NEW */
    --jzn-size-text: 0.95rem !important;
    --jzn-size-sub: 0.8rem !important;

    /* --- TABLET WEIGHTS --- */
    --jzn-font-weight-heading: 600 !important;
    --jzn-font-weight-body: 400 !important;
    --jzn-font-weight-sub: 300 !important;

    --jzn-line-height-heading: 1.25;
    --jzn-line-height-body: 1.55;
  }
}

/* ======================================================== */
/* 🛠️ BRAT TWEAK: MOBILE ONLY OVERRIDES (Below 767px)        */
/* ======================================================== */
@media (max-width: 767px) {
  :root {
    /* --- THE MOBILE DICTATOR (FONT ROUTING) --- */
    /* Hijacks Orbitron and forces Roboto (with Noto as fallback) */
    --jzn-active-heading-font: 'jzn-Roboto', 'jzn-Noto', sans-serif !important;
    --jzn-active-font: 'jzn-Roboto', 'jzn-Noto', sans-serif !important;

    /* --- MOBILE SIZING --- */
    --jzn-size-h1: 1.4rem !important;   /* <-- Pushed up slightly since Roboto isn't as wide as Orbitron */
    --jzn-size-h2: 1.20rem !important;
    --jzn-size-h3: 1.00rem !important;
    --jzn-size-h4: 0.9rem !important;   /* <-- NEW */
    --jzn-size-text: 0.85rem !important;
    --jzn-size-sub: 0.75rem !important;  /* <-- Bumped slightly for legibility */
    --jzn-size-micro: 0.55rem !important; /* <-- NEW */

    /* --- MOBILE WEIGHTS (THE VISIBILITY FIX) --- */
    --jzn-font-weight-heading: 600 !important; /* <-- Roboto looks amazing at 600 on mobile */
    --jzn-font-weight-body: 400 !important;
    --jzn-font-weight-sub: 400 !important;

    --jzn-line-height-heading: 1.3;
    --jzn-line-height-body: 1.5;
  }
}

/* ======================================================== */
/* 🛠️ BRAT TWEAK: MOBILE ONLY OVERRIDES (Below 767px)        */
/* ======================================================== */
@media (max-width: 767px) {
  :root {
    /* --- MOBILE SIZING --- */
    --jzn-size-h1: 1.30rem !important;   /* <-- Brat Tweak: Forces H1 much smaller */
    --jzn-size-h2: 1.20rem !important;   /* <-- Brat Tweak: Forces H2 to fit in widgets */
    --jzn-size-h3: 1.00rem !important;   /* <-- Brat Tweak: Card Headings */
    --jzn-size-text: 0.85rem !important; /* <-- Brat Tweak: Body text */
    --jzn-size-sub: 0.7rem !important;   /* <-- Brat Tweak: Tiny subtext */

    /* --- MOBILE WEIGHTS (THE VISIBILITY FIX) --- */
    /* Bumped up! Weights 100/200 are too thin and cause colors to look washed out */
    --jzn-font-weight-heading: 500 !important; /* <-- Restores bold headings on mobile */
    --jzn-font-weight-body: 400 !important;    /* <-- Standard regular text for reading */
    --jzn-font-weight-sub: 300 !important;     /* <-- Bumped up so tiny footers don't vanish */

    --jzn-line-height-heading: 1.3;
    --jzn-line-height-body: 1.5;
  }
}

/* ========================================================================
   SECTION 1: THE 18 PALETTES (DATA ATTRIBUTES & PROFILE DEFAULTS)
   ======================================================================== */

/* ============================ */
/* --- DARK THEME PALETTES --- */
/* ============================ */

/* --- PALETTE 01 - MIDNIGHT BLUE (Currently matches default) --- */
html[data-palette='1'] {
  --jzn-bg: #142a60;
  --jzn-container: #0e1c48;
  --jzn-text: #eaeaea;
  --jzn-hover: #00b3ff;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400; /* <-- Injected to support new Granular Weights */
  --jzn-font-weight-sub: 300;  /* <-- Injected to support new Granular Weights */
}

/* --- PALETTE 02 - BLACK OUT --- */
html[data-palette='2'] {
  --jzn-bg: #141414;
  --jzn-container: #222222;
  --jzn-text: #f5f5f5;
  --jzn-hover: #ff9800;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 03 - DEEP SAPPHIRE --- */
html[data-palette='3'] {
  --jzn-bg: #0f172a;
  --jzn-container: #1e293b;
  --jzn-text: #e2e8f0;
  --jzn-hover: #0f63a3;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 04 - EMERALD LUXE --- */
html[data-palette='4'] {
  --jzn-bg: #0f2a1d;
  --jzn-container: #1b4332;
  --jzn-text: #d8f3dc;
  --jzn-hover: #52b788;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 05 - CYBER GOLD --- */
html[data-palette='5'] {
  --jzn-bg: #101820;
  --jzn-container: #1f2833;
  --jzn-text: #fee715;
  --jzn-hover: #66fcf1;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 06 - ROYAL PLUM --- */
html[data-palette='6'] {
  --jzn-bg: #2d132c;
  --jzn-container: #4a1942;
  --jzn-text: #f7f7ff;
  --jzn-hover: #ff99c8;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 07 - CRIMSON CORE --- */
html[data-palette='7'] {
  --jzn-bg: #2b0f0f;
  --jzn-container: #3e1c1c;
  --jzn-text: #f8edeb;
  --jzn-hover: #ff4d4d;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 08 - BURGUNDY PRIME --- */
html[data-palette='8'] {
  --jzn-bg: #3d0c11;
  --jzn-container: #6a040f;
  --jzn-text: #ffe5e5;
  --jzn-hover: #ff6b6b;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 09 - DEEP AQUA --- */
html[data-palette='9'] {
  --jzn-bg: #041f24;
  --jzn-container: #083a40;
  --jzn-text: #e0fbfc;
  --jzn-hover: #00f5d4;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 10 - NEON GROVE --- */
html[data-palette='10'] {
  --jzn-bg: #0b2e13;
  --jzn-container: #14532d;
  --jzn-text: #d1fae5;
  --jzn-hover: #22c55e;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 11 - DARK COCOA --- */
html[data-palette='11'] {
  --jzn-bg: #2e1f14;
  --jzn-container: #4a2e1e;
  --jzn-text: #f3e9dc;
  --jzn-hover: #ffb703;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 12 - IMPERIAL MUSTARD --- */
html[data-palette='12'] {
  --jzn-bg: #3a2f0b;
  --jzn-container: #5c4b15;
  --jzn-text: #fff6cc;
  --jzn-hover: #ffd60a;
  --jzn-container-border-c: rgba(255, 255, 255, 0.9);
  --jzn-container-border-w: 2px;
  --jzn-heading-color: #ffffff;
  --jzn-subtext-color: rgba(255, 255, 255, 0.6);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* ============================ */
/* --- LIGHT THEME PALETTES --- */
/* ============================ */

/* --- PALETTE 13 - SOFT EARTH --- */
html[data-palette='13'] {
  --jzn-bg: #f4f1ea;
  --jzn-container: #e6dccf;
  --jzn-text: #3b2f2f;
  --jzn-hover: #c2a878;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 14 - LAVENDER STEEL --- */
html[data-palette='14'] {
  --jzn-bg: #b8c0ff;
  --jzn-container: #ccd5ff;
  --jzn-text: #1b1f3b;
  --jzn-hover: #5a189a;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 15 - COOL MINT --- */
html[data-palette='15'] {
  --jzn-bg: #d1f2eb;
  --jzn-container: #a3e4d7;
  --jzn-text: #0e6251;
  --jzn-hover: #1abc9c;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 16 - COOL MIST --- */
html[data-palette='16'] {
  --jzn-bg: #a8dadc;
  --jzn-container: #f1faee;
  --jzn-text: #1d3557;
  --jzn-hover: #457b9d;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 17 - SOFT CLAY --- */
html[data-palette='17'] {
  --jzn-bg: #c9ada7;
  --jzn-container: #f2e9e4;
  --jzn-text: #22223b;
  --jzn-hover: #9a031e;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* --- PALETTE 18 - LIGHT AQUA --- */
html[data-palette='18'] {
  --jzn-bg: #cde7f0;
  --jzn-container: #a9d6e5;
  --jzn-text: #1f2933;
  --jzn-hover: #0077b6;
  --jzn-container-border-c: rgba(0, 0, 0, 0.9);
  --jzn-container-border-w: 3px;
  --jzn-heading-color: #000000;
  --jzn-subtext-color: rgba(0, 0, 0, 0.9);
  --jzn-active-font: var(--jzn-font-brand);
  --jzn-font-weight-heading: 700;
  --jzn-font-weight-body: 400;
  --jzn-font-weight-sub: 300;
}

/* ========================================================================
   SECTION 2: DROPDOWN UI STYLES (TOGGLES & FILTERS)
   ======================================================================== */

/* The Filter Bar Buttons */
.jzn-palette-filter-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.4;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border-radius: 4px;
}
.jzn-palette-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.8;
}
.jzn-palette-filter-btn.active {
  color: #00f5d4; /* <-- Brat Tweak: Active Filter Color */
  opacity: 1;
  font-weight: bold;
}

/* ========================================================================
   SECTION 3: DROPDOWN UI (THE RESTORED TOGGLE PILL)
   ======================================================================== */
.jzn-custom-toggle {
  width: 32px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.jzn-custom-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* When Breathing is Active */
.jzn-mode-breathing .jzn-custom-toggle {
  background: #00ff00; /* <-- Brat Tweak: Toggle Switch Active Color */
}
.jzn-mode-breathing .jzn-custom-toggle::after {
  transform: translateX(16px);
}

/* ========================================================================
   SECTION 4: PARENT WRAPPER LOCKDOWN (STATIC HEADER FIX)
   ======================================================================== */
#desktopThemeDropdown,
#mobileThemeDropdown {
  overflow: hidden !important; /* Kills the outer wrapper scroll */
  padding: 0 !important; /* Lets the static header touch the glass edges */
  display: flex;
  flex-direction: column;
}

#jzn-theme-list-desktop,
#jzn-theme-list-mobile {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 450px; /* <-- Brat Tweak: Total max height of the entire dropdown menu */
}

/* ========================================================================
   SECTION 5: THE 3-LAYER STACK (SPECIFICITY ENFORCED) [2026-03-20]
   Purpose: Forces W02/W03 to respect the Ghost Layer without inline styles.
   ======================================================================== */

/* 1. Global Page Background & Text */
body,
html {
  background-color: var(--jzn-bg) !important;
  color: var(--jzn-text) !important;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}

/* LAYER 1: THE GLASS FRAME (The outermost layer with the border) */
/* We add 'body' and 'div' to ensure we beat Elementor's internal CSS */
body div.jzn-container {
  position: relative;
  z-index: 10 !important; /* Matches your working W01 inline logic */
  border-radius: 16px;
  overflow: visible !important;

  /* THE UNKILLABLE WIRE */
  background-color: var(--jzn-container, #ff0000) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* THE CUSTOM BORDER (Wired to the Studio Engine natively) */
  border-width: var(--jzn-container-border-w) !important;
  border-style: solid !important;
  border-color: var(--jzn-container-border-c) !important;

  transition:
    background-color 0.5s ease,
    border-color 0.5s ease;
}

/* LAYER 0: THE UNDERGLOW (Pushed BELOW the Frame) */
body div.jzn-container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;

  /* THE WORKING UNDERGLOW (Surgically taken from your W01 code) */
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3) !important; /* <-- Brat Tweak: Dark Mode Underglow Intensity */

  transition: box-shadow 0.5s ease;
  pointer-events: none;
}

/* LAYER 2: THE CONTENT WRAPPER (Ensures text sits on top) */
body div.jzn-container > * {
  position: relative;
  z-index: 2;
}

/* ========================================================================
   LIGHT MODE OVERRIDES (Palettes 13-18)
   Fixed HTML Selectors so the shadow maps perfectly to light themes!
   ======================================================================== */
html[data-palette='13'] body div.jzn-container::before,
html[data-palette='14'] body div.jzn-container::before,
html[data-palette='15'] body div.jzn-container::before,
html[data-palette='16'] body div.jzn-container::before,
html[data-palette='17'] body div.jzn-container::before,
html[data-palette='18'] body div.jzn-container::before {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important; /* <-- Brat Tweak: Light Mode Shadow Intensity */
}