/* ===================================================================
   UkuTabs -- Theme (color-scheme) tokens + toggle UI

   Phase 1 (foundation):
	 * Light/dark color tokens at :root level (CSS variables).
	 * Body bg + text adopt the tokens so the dark-mode swap is
	   immediately visible WITHOUT touching every existing template.
	 * Floating sun/moon toggle (bottom-right) -- temporary placement
	   so you can verify the toggle works end-to-end. Phase 2 will
	   move it into the main header next to login/account.

   Phase 3 (incremental audit, not in this file yet):
	 * Replace hard-coded colors in templates with these tokens.
	 * Chord-diagram SVGs use `currentColor` / token vars so they
	   adapt cleanly per theme.

   Token naming:
	 * --uku-bg          page background
	 * --uku-text        primary body text
	 * --uku-text-muted  secondary / meta text
	 * --uku-surface-N   raised surfaces (1 = lowest, 3 = highest)
	 * --uku-border      hard 1px borders
	 * --uku-border-soft separators / dividers
	 * --uku-brick       brand accent (was #a2321b)
	 * --uku-brick-soft  brick tint for hover/highlight bg
	 * --uku-accent      secondary gold accent (was #a78e46)
	 * --uku-accent-soft gold tint
   =================================================================== */

/* --- LIGHT defaults (always applied) -----------------------------
   IMPORTANT: --uku-body-bg / --uku-body-text are kept at the current
   site colors (#121212 dark frame, #77756e muted text) so light mode
   is visually IDENTICAL to today's design. Theme switching lives in
   the CONTENT SURFACES -- cards, notepad, popovers -- which flip
   between cream (light) and dark gray (dark). The dark "frame" stays
   constant in light mode, becomes part of the unified dark page in
   dark mode. */
:root {
	/* Outer body (page frame) -kept as the current dark gray in light
	   mode to preserve the existing UkuTabs aesthetic. */
	--uku-body-bg: #121212;
	--uku-body-text: #77756e;

	/* #content wrapper -the cream/paper page background visible
	   between header and footer, behind all content cards. */
	--uku-page-bg: #fafaf1;

	/* Sitewide footer bg (the .footer block). */
	--uku-footer-bg: #d6d5ca;

	/* Content surfaces (the cards / notepad / popovers that overlay
	   the body frame). Light mode = warm cream paper. */
	--uku-bg: #fdfcf5;             /* primary content bg (cards) */
	--uku-text: #2a1f12;           /* primary text on content surfaces */
	--uku-text-muted: #6a5e48;
	--uku-surface-1: #ffffff;
	--uku-surface-2: #f2f2e9;
	--uku-surface-3: #fdfcf5;
	--uku-border: #e8e2c8;
	--uku-border-soft: #f0e8d4;
	--uku-brick: #a2321b;
	--uku-brick-soft: rgba(162, 50, 27, .10);
	--uku-accent: #a78e46;
	--uku-accent-soft: rgba(167, 142, 70, .12);

	/* Helps the browser render native UI (form controls, scrollbars)
	   in the chosen scheme -- small but important detail. */
	color-scheme: light;
}

/* ===================================================================
   Chord-diagram colors as variables (--ukc-*)
   -------------------------------------------------------------------
   Theming used to depend on per-element class selectors
   (.uku-chord-svg__note { fill } etc.). Freestar/Blockthrough scrambles
   a random sample of class names site-wide to defeat ad-block cosmetic
   filters, which would otherwise drop a scrambled element to its light
   inline color in dark mode (e.g. white finger numbers on light dots).
   The renderers mirror each element's color onto itself as inline
   style:var(--ukc-X, fallback), so the diagram themes correctly no
   matter which class names survive. Values are the literals the old
   class rules produced (dark ones mirror --uku-brick / --uku-text* in
   the dark theme). =================================================== */
:root {
	--ukc-title:  #690000;
	--ukc-wm:     #9a9a90;
	--ukc-pos:    #4c4c42;
	--ukc-grid:   #98988d;
	--ukc-dot:    #4c4c42;
	--ukc-open:   #4c4c42;
	--ukc-mute:   #98988d;
	--ukc-finger: #ffffff;
	--ukc-note:   #4c4c42;
}
:root[data-theme="dark"] {
	--ukc-title:  #d96a52;   /* --uku-brick      */
	--ukc-wm:     #a8a39a;   /* --uku-text-muted */
	--ukc-pos:    #ebe9e2;   /* --uku-text       */
	--ukc-grid:   #969289;
	--ukc-dot:    #d4cfc4;   /* --uku-text-soft  */
	--ukc-open:   #d4cfc4;
	--ukc-mute:   #d4cfc4;
	--ukc-finger: #1c1b19;
	--ukc-note:   #a8a39a;   /* --uku-text-muted */
}

/* ===================================================================
   SHARED COMPONENT: hero language switcher (Weglot)
   Used by every notepad-hero tool page (tuner, converter, chord
   diagrams rebuild, scales rebuild). Sits inside the <header>, as a
   sibling of the .notepad div, absolutely positioned top-left.
   Requires the parent <header> to be position: relative.
   --- Mirrors the guides hub's .uku-guides__hero-lang styling so all
   tool pages share an identical language-switcher chip.
   =================================================================== */
.uku-hero-lang {
	position: absolute;
	top: 10px;
	left: 35px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	min-width: 130px;
	height: 18px;
	z-index: 5;
}
.uku-hero-lang > i { color: #a2321b; font-size: 13px; margin: 0; }
.uku-hero-lang .country-selector,
.uku-hero-lang .wg-drop {
	position: relative;
	display: inline-block !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1 !important;
}
.uku-hero-lang .country-selector ul,
.uku-hero-lang .wg-drop > ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.uku-hero-lang .country-selector li,
.uku-hero-lang .wg-drop > ul > li { margin: 0; padding: 0; display: block; }
.uku-hero-lang .country-selector > ul > li:not(.wgcurrent),
.uku-hero-lang .wg-drop > ul > li:not(.wgcurrent) { display: none !important; }
.uku-hero-lang:hover .country-selector > ul > li:not(.wgcurrent),
.uku-hero-lang:focus-within .country-selector > ul > li:not(.wgcurrent),
.uku-hero-lang.is-open .country-selector > ul > li:not(.wgcurrent),
.uku-hero-lang:hover .wg-drop > ul > li:not(.wgcurrent),
.uku-hero-lang:focus-within .wg-drop > ul > li:not(.wgcurrent),
.uku-hero-lang.is-open .wg-drop > ul > li:not(.wgcurrent) { display: block !important; }
.uku-hero-lang:hover .country-selector > ul,
.uku-hero-lang:focus-within .country-selector > ul,
.uku-hero-lang.is-open .country-selector > ul,
.uku-hero-lang:hover .wg-drop > ul,
.uku-hero-lang:focus-within .wg-drop > ul,
.uku-hero-lang.is-open .wg-drop > ul {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	min-width: 150px;
	padding: 8px 4px 4px !important;
	background: #fff !important;
	border: 1px solid #e8e2c8 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 20px rgba(75, 50, 20, .15) !important;
	z-index: 50;
	text-align: left;
}
.uku-hero-lang:hover .country-selector > ul::before,
.uku-hero-lang:focus-within .country-selector > ul::before,
.uku-hero-lang.is-open .country-selector > ul::before,
.uku-hero-lang:hover .wg-drop > ul::before,
.uku-hero-lang:focus-within .wg-drop > ul::before,
.uku-hero-lang.is-open .wg-drop > ul::before {
	content: "";
	position: absolute;
	top: -10px; left: 0; right: 0;
	height: 10px;
	background: transparent;
}
.uku-hero-lang .wgcurrent,
.uku-hero-lang .wg-li.wgcurrent,
.uku-hero-lang .wgcurrent > a {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #6a5e48 !important;
	cursor: pointer;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	transition: color .15s ease;
}
.uku-hero-lang .wgcurrent:hover,
.uku-hero-lang .wgcurrent:focus,
.uku-hero-lang .wgcurrent > a:hover,
.uku-hero-lang .wgcurrent > a:focus { color: #a2321b !important; }
/* Hide every decorative element Weglot might inject in the trigger
   or list items so only the language text shows. Different Weglot
   versions emit different combinations of <img>, <svg>, flag
   placeholders, and input/checkbox markers; this catches all of
   them in one rule. */
.uku-hero-lang img,
.uku-hero-lang svg,
.uku-hero-lang input,
.uku-hero-lang [class*="wg-flag"],
.uku-hero-lang [class*="flag-icon"],
.uku-hero-lang [class*="flag-vertical"],
.uku-hero-lang [class*="flag-horizontal"] { display: none !important; }
.uku-hero-lang li {
	list-style: none !important;
	list-style-type: none !important;
}
.uku-hero-lang li::marker { content: "" !important; }
.uku-hero-lang .country-selector > ul > li:not(.wgcurrent) > a,
.uku-hero-lang .wg-drop > ul > li:not(.wgcurrent) > a {
	display: block !important;
	padding: 7px 12px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #4a3a2a !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	transition: background .12s ease, color .12s ease;
}
.uku-hero-lang .country-selector > ul > li:not(.wgcurrent) > a:hover,
.uku-hero-lang .wg-drop > ul > li:not(.wgcurrent) > a:hover {
	background: rgba(162, 50, 27, .08) !important;
	color: #a2321b !important;
}
.uku-hero-lang::after {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 2px;
	border-right: 1.5px solid #6a5e48;
	border-bottom: 1.5px solid #6a5e48;
	transform: rotate(45deg) translateY(-2px);
	transition: border-color .15s ease, transform .2s ease;
	flex-shrink: 0;
}
.uku-hero-lang:hover::after,
.uku-hero-lang:focus-within::after {
	border-right-color: #a2321b;
	border-bottom-color: #a2321b;
}
.uku-hero-lang:hover::after,
.uku-hero-lang:focus-within::after,
.uku-hero-lang.is-open::after {
	transform: rotate(225deg) translateY(2px);
}
@media (max-width: 700px) {
	.uku-hero-lang {
		position: static;
		display: flex;
		justify-content: flex-start;
		margin: 12px 0 0 0;
	}
}

/* ===================================================================
   DARK MODE CSS LIVES IN A SEPARATE FILE: inc/uku-theme-dark.css

   The ~4,500 lines of dark-mode variable redefinitions and per-template
   overrides used to live here. They were extracted to a sibling file
   so that LIGHT-mode visitors (the majority of traffic) don't have to
   download + parse rules they'll never apply. Saved ~180 KB raw / ~25 KB
   gzipped + ~600ms render-blocking time per pageview for light-mode users.

   The dark file is injected SYNCHRONOUSLY by the head script in
   header.php (~line 74) -- only when the user's theme choice resolves to
   'dark'. Synchronous injection in <head> before first paint means
   browsers treat it as a regular render-blocking stylesheet, so dark-mode
   users see correct colors from frame one (no FOUC).

   To edit dark mode styles: open inc/uku-theme-dark.css.
   =================================================================== */



/* ===================================================================
   MODE-AGNOSTIC CSS (kept here so it loads in BOTH light and dark modes)

   These rules were originally placed AFTER the dark override block in
   the monolithic uku-theme.css. They use bare selectors (not scoped to
   :root[data-theme="dark"]) so they apply in both modes -- moving them
   to uku-theme.css (light + shared) is the correct destination after
   the split.

   Contents:
   - Theme picker (sun/moon toggle): floating dropdown, mobile rules
   - @media print: print-safe token rebinding + chord-SVG print colors
   =================================================================== */

/* ===================================================================
   Theme picker: trigger button + 3-option dropdown (Auto/Light/Dark)

   Placement: fixed dark square in the TOP-LEFT corner of viewport
   -- same visual style as the legacy .side-menu-open block from the
   left vertical panel (which the site no longer renders, but the
   look was familiar / wanted back).

   The trigger shows the CURRENTLY APPLIED theme (sun = light,
   moon = dark). The dropdown menu opens to the RIGHT of the square
   with all three choices and a check next to the active one -- so
   'auto' is always reachable in one click, not hidden behind a
   multi-state cycle.
   =================================================================== */
/* ===================================================================
   Youzify popup-login -- hide sitewide
   -------------------------------------------------------------------
   Youzify still injects its hidden popup-login HTML into every page
   even though we switched the login flow to the dedicated /user-login/
   page. The plugin's own CSS (which used to take this element out of
   flow) is now scoped via Perfmatters to login/member pages only, so
   on every other page only the inline "visibility: hidden" remained --
   which still reserves the popup's 367px of layout, leaving a giant
   blank gap at the bottom of the page. display:none takes it out of
   the flow entirely. The login/member pages don't render this popup
   container anyway (Youzify suppresses it there), so this rule has no
   effect on pages that actually want the popup.
   =================================================================== */
.youzify-popup-login { display: none !important; }

/* position: absolute (NOT fixed) -- the toggle scrolls with the page
   rather than sticking to the viewport. Anchored top-left of the
   document via the initial containing block. */
.uku-theme-toggle {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}

/* Reserve space on the left of the top utility bar so the toggle
   sits FLUSH against the search bar instead of covering its first
   characters. uku-theme.css only loads on gated pages, so this
   doesn't affect non-dark-mode pages.
   The header.header-content-wrapper from templates/header/general-
   social.php is the dark utility row containing the search form +
   user menu. */
.header .header-content-wrapper {
	padding-left: 88px !important;          /* 70px toggle + 18px breathing room */
}
@media (max-width: 700px) {
	.header .header-content-wrapper {
		padding-left: 50px !important;      /* mobile sits flush; no extra gap */
	}
}

/* -- Trigger button ----------------------------------------------
   Square block matching the user-avatar square on the right side of
   the search bar -- UkuTabs brand gold so it pops against the black
   search-bar bg (dark-on-dark was too easy to miss). 70x70 desktop,
   50x50 mobile (set in @media block below).

   font-size sizes the FA-injected SVG inside (FA uses 1em for SVG
   width/height -- setting font-size on the parent is the canonical
   way to scale FA icons, more reliable than per-icon !important
   widths which lose to FA's inline-style sizing). */
.uku-theme-toggle__trigger {
	width: 70px;
	height: 70px;
	font-size: 25px;                              /* FA icon size on desktop */
	line-height: 1;
	border-radius: 0;
	border: 0;
	background: #a78e46;                          /* UkuTabs brand gold */
	color: #fafaf2;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background .15s ease;
	box-sizing: border-box;
	padding: 0;
	font-family: inherit;
	outline: 0;
}
.uku-theme-toggle__trigger:hover {
	background: #c4a655;                          /* gold lightened on hover */
}
.uku-theme-toggle__trigger:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}
/* -- Trigger icons (sun = light applied, moon = dark applied) ----
   Size comes from font-size on .uku-theme-toggle__trigger above --
   FA auto-injected SVG is 1em wide/tall. Here we only handle the
   show/hide swap based on the resolved theme. !important needed
   because FA's .svg-inline--fa { display: inline-block } is
   injected after our CSS and would otherwise win. */
.uku-theme-toggle__moon { display: none !important; }                 /* light is default */
:root[data-theme="dark"] .uku-theme-toggle__sun  { display: none !important; }
:root[data-theme="dark"] .uku-theme-toggle__moon { display: inline-block !important; }

/* -- Dropdown menu ----------------------------------------------- */
/* Trigger is at the left edge -- menu opens to the RIGHT of it
   (a top:100% downward menu would slide off the left edge and look
   awkward beside / under the search bar). */
.uku-theme-toggle__menu {
	position: absolute;
	top: 0;
	left: calc(100% + 6px);
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--uku-surface-2, #fff);
	border: 1px solid var(--uku-border, #d8d2bd);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	z-index: 50;
}
.uku-theme-toggle__menu[hidden] { display: none; }
.uku-theme-toggle__menu li { margin: 0; padding: 0; list-style: none; }

/* -- Menu options ------------------------------------------------ */
.uku-theme-toggle__option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--uku-text, #2a1f12);
	font-family: inherit;
	font-size: 16px;                              /* FA icon size (1em) */
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.uku-theme-toggle__option:hover,
.uku-theme-toggle__option:focus-visible {
	background: var(--uku-surface-3, #f3eed8);
	outline: 0;
}
.uku-theme-toggle__option[aria-checked="true"] {
	color: var(--uku-brick, #a2321b);
}
/* FA icons inherit size from parent font-size (set on the option
   button above to 16px). Label stays slightly smaller for tighter
   menu rows. */
.uku-theme-toggle__option-icon {
	flex-shrink: 0;
	color: currentColor;
	width: 1em;
	text-align: center;
}
.uku-theme-toggle__option-label {
	flex: 1;
	font-size: 14px;
}
.uku-theme-toggle__option-check {
	flex-shrink: 0;
	color: currentColor;
	font-size: 14px;                              /* slightly smaller than icon */
	width: 1em;
	text-align: center;
	visibility: hidden;     /* reserves space so labels don't shift on active */
}
.uku-theme-toggle__option[aria-checked="true"] .uku-theme-toggle__option-check {
	visibility: visible;
}

/* -- Mobile tweaks ----------------------------------------------- */
@media (max-width: 700px) {
	.uku-theme-toggle__trigger { width: 50px; height: 50px; font-size: 20px; }
	/* Cap menu width so the right-opening dropdown doesn't overflow
	   the viewport edge on narrow screens. */
	.uku-theme-toggle__menu {
		max-width: calc(100vw - 60px);
	}
}
:root[data-theme="dark"] .uku-theme-toggle__menu {
	background: var(--uku-surface-2);
	border-color: var(--uku-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .uku-theme-toggle__option {
	color: var(--uku-text);
}
:root[data-theme="dark"] .uku-theme-toggle__option:hover,
:root[data-theme="dark"] .uku-theme-toggle__option:focus-visible {
	background: var(--uku-surface-3);
}
:root[data-theme="dark"] .uku-theme-toggle__option[aria-checked="true"] {
	color: var(--uku-brick);
}

/* Sticky-chords close (X) button. Light-mode base uses rgba(0,0,0,*)
   on the chip background + glyph -- both vanish on the dark strip.
   Invert to translucent white so the X reads against the dark card. */
:root[data-theme="dark"] .sticky-chords-close {
	background: rgba(255, 255, 255, 0.10) !important;
	color: rgba(255, 255, 255, 0.75) !important;
}
:root[data-theme="dark"] .sticky-chords-close:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
}

/* ===================================================================
   PRINT -- force light theme regardless of <html data-theme>.

   Why this exists: when a visitor on dark mode hits print/Save-as-PDF,
   the dark tokens flow into print (dark surface bgs, light cream text,
   chord SVG dots fill with light cream). The page-level print stylesheet
   in content-classic-test.php sets html/body to white but doesn't reset
   the token cascade. We rebind every dark token to a print-safe light
   value here so the chord diagrams and any tokenised surfaces print
   correctly, and explicitly hide the theme picker chrome.
   =================================================================== */
@media print {
	#uku-theme-toggle,
	.uku-theme-toggle { display: none !important; }

	:root,
	:root[data-theme="dark"] {
		--uku-body-bg:    #ffffff;
		--uku-page-bg:    #ffffff;
		--uku-surface-1:  #ffffff;
		--uku-surface-2:  #ffffff;
		--uku-surface-3:  #ffffff;
		--uku-text:       #000000;
		--uku-text-muted: #555555;
		--uku-text-soft:  #333333;
		--uku-border:     #98988d;
		--uku-border-soft:#cccccc;
		--uku-brick:      #963a25;
		--uku-brick-soft: rgba(150, 58, 37, .12);
		--uku-brick-hover:#963a25;
		--uku-accent:     #a78e46;
		--uku-accent-soft:rgba(167, 142, 70, .12);
		color-scheme: light;
	}

	/* Print chord colors via the same variables, forced black-on-white
	   regardless of the visitor's screen theme. !important so they beat
	   the screen :root[data-theme="dark"] --ukc-* values above. */
	:root, :root[data-theme="dark"] {
		--ukc-title:  #963a25 !important;
		--ukc-wm:     #B7B7AB !important;
		--ukc-pos:    #4c4c42 !important;
		--ukc-grid:   #98988d !important;
		--ukc-dot:    #4c4c42 !important;
		--ukc-open:   #4c4c42 !important;
		--ukc-mute:   #98988d !important;
		--ukc-finger: #ffffff !important;
		--ukc-note:   #4c4c42 !important;
	}

	/* Chord-diagram SVG fills -- must beat the dark-mode rules whose
	   selectors are `:root[data-theme="dark"] .uku-chord-svg__*`
	   (specificity 0,2,1). Mirror the prefix in print so we win on
	   both `:root` and `:root[data-theme="dark"]` documents. */
	:root .uku-chord-svg-title,
	:root[data-theme="dark"] .uku-chord-svg-title       { fill: #963a25 !important; }
	:root .uku-chord-svg__watermark,
	:root[data-theme="dark"] .uku-chord-svg__watermark  { fill: #B7B7AB !important; }
	:root .uku-chord-svg__pos,
	:root[data-theme="dark"] .uku-chord-svg__pos        { fill: #4c4c42 !important; }
	:root .uku-chord-svg__nut,
	:root .uku-chord-svg__fret,
	:root .uku-chord-svg__string,
	:root[data-theme="dark"] .uku-chord-svg__nut,
	:root[data-theme="dark"] .uku-chord-svg__fret,
	:root[data-theme="dark"] .uku-chord-svg__string     { fill: #98988d !important; }
	:root .uku-chord-svg__barre,
	:root .uku-chord-svg__dot,
	:root[data-theme="dark"] .uku-chord-svg__barre,
	:root[data-theme="dark"] .uku-chord-svg__dot        { fill: #4c4c42 !important; }
	:root .uku-chord-svg__open,
	:root[data-theme="dark"] .uku-chord-svg__open       { stroke: #4c4c42 !important; }
	:root .uku-chord-svg__mute,
	:root[data-theme="dark"] .uku-chord-svg__mute       { stroke: #98988d !important; }
	:root .uku-chord-svg__barre-finger,
	:root .uku-chord-svg__dot-finger,
	:root[data-theme="dark"] .uku-chord-svg__barre-finger,
	:root[data-theme="dark"] .uku-chord-svg__dot-finger { fill: #ffffff !important; }
	:root .uku-chord-svg__note,
	:root[data-theme="dark"] .uku-chord-svg__note       { fill: #4c4c42 !important; }

	/* Chord card wrapper (.cits-c-b) -- dark-mode paints it #3d3933 with
	   a black drop shadow + 1px white border. Strip all of it for print. */
	:root .cits-c-b,
	:root[data-theme="dark"] .cits-c-b {
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}
	:root .uku-chord-svg,
	:root[data-theme="dark"] .uku-chord-svg {
		box-shadow: none !important;
	}

	/* Lyrics + chord notepad (pre.qoate-code) -- dark adds a hard black
	   drop shadow that prints as a grey halo around the entire song
	   body. Kill it. */
	:root pre.qoate-code,
	:root[data-theme="dark"] pre.qoate-code {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		border: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}
}