/*
 * Dark mode. Loaded on every page (includes/dark.php), active when <html>
 * carries data-theme="dark" — set before first paint by the inline script in
 * dark.php from the visitor's choice, or from the system setting if they have
 * not chosen.
 *
 * The site's stylesheets set their colours directly (white cards, #111 text)
 * rather than through variables, so this is an override layer: the Kadence
 * palette variables, then each surface family. Gradients themselves — cards'
 * previews, swatches, tool canvases — are never touched.
 */

html[data-theme="dark"] {
	color-scheme: dark;
	--dk-bg: #0C0C11;
	--dk-s1: #15151D;   /* cards */
	--dk-s2: #1D1D27;   /* inputs, chips, code */
	--dk-s3: #262633;   /* hover */
	--dk-line: rgba(255, 255, 255, .09);
	--dk-line2: rgba(255, 255, 255, .16);
	--dk-text: #EDEDF2;
	--dk-text2: #B9B9C6;
	--dk-text3: #9393A3;
	--dk-link: #A99BFF;

	/* Kadence */
	--global-palette1: #EDEDF2;
	--global-palette2: #A99BFF;
	--global-palette3: #EDEDF2;
	--global-palette4: #D4D4DE;
	--global-palette5: #B9B9C6;
	--global-palette6: #9393A3;
	--global-palette7: #1D1D27;
	--global-palette8: #15151D;
	--global-palette9: #0C0C11;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #inner-wrap,
html[data-theme="dark"] .site,
html[data-theme="dark"] .content-bg,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .entry-content-wrap,
html[data-theme="dark"] .entry.single-entry,
html[data-theme="dark"] .content-area { background: var(--dk-bg) !important; color: var(--dk-text2); }

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--dk-text) !important; }
html[data-theme="dark"] p, html[data-theme="dark"] li { color: var(--dk-text2); }
html[data-theme="dark"] a { color: var(--dk-link); }
html[data-theme="dark"] hr, html[data-theme="dark"] .ga-sec-hd { border-color: var(--dk-line) !important; }
html[data-theme="dark"] ::selection { background: #4B3CC9; color: #fff; }

/* ─── Header pill, menus, drawer ─────────────────────────────── */
html[data-theme="dark"] #masthead .site-main-header-inner-wrap,
html[data-theme="dark"] .tg-hero #masthead .site-main-header-inner-wrap {
	background: rgba(21, 21, 29, .78) !important;
	border-color: var(--dk-line) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}
html[data-theme="dark"] #site-navigation .menu > li > a,
html[data-theme="dark"] .site-branding .site-title,
html[data-theme="dark"] .menu-toggle-open { color: var(--dk-text) !important; }
html[data-theme="dark"] #site-navigation .menu > li > a:hover,
html[data-theme="dark"] #site-navigation .menu > li:focus-within > a { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] #site-navigation .menu > li.current-menu-item > a,
html[data-theme="dark"] #site-navigation .menu > li.current-menu-ancestor > a { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] #site-navigation .sub-menu { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .55) !important; }
html[data-theme="dark"] #site-navigation .sub-menu li > a { background: transparent !important; color: var(--dk-text) !important; }
html[data-theme="dark"] #site-navigation .sub-menu li > a:hover,
html[data-theme="dark"] #site-navigation .sub-menu li.current-menu-item > a { background: var(--dk-s3) !important; }
html[data-theme="dark"] #mobile-drawer .drawer-inner,
html[data-theme="dark"] #mobile-drawer .drawer-content,
html[data-theme="dark"] #mobile-drawer .drawer-header { background: var(--dk-s1) !important; }
html[data-theme="dark"] #mobile-drawer .mobile-navigation ul li > a,
html[data-theme="dark"] #mobile-drawer #mobile-menu > li > a { background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] #mobile-drawer .drawer-header .menu-toggle-close { background: var(--dk-s2) !important; color: var(--dk-text) !important; }
html[data-theme="dark"] #mobile-drawer .toggle-close-bar { background: var(--dk-text) !important; }

/* ─── Heroes ─────────────────────────────────────────────────── */
html[data-theme="dark"] .ga-hero,
html[data-theme="dark"] .tg-phero { background: #101018 !important; }
html[data-theme="dark"] .ga-mesh { background: #101018 !important; }
html[data-theme="dark"] .ga-mesh span { opacity: .42 !important; }

/* The logo image has dark lettering; flip it, keeping the icon's hues. */
html[data-theme="dark"] .site-branding img,
html[data-theme="dark"] .custom-logo { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
html[data-theme="dark"] .ga-mesh::before {
	background: radial-gradient(ellipse 56% 50% at 50% 44%, rgba(12, 12, 17, .82) 0%, rgba(12, 12, 17, .45) 55%, rgba(12, 12, 17, 0) 100%) !important;
}
html[data-theme="dark"] .ga-hero h1,
html[data-theme="dark"] .tg-phero h1,
html[data-theme="dark"] .tg-hero .tg-phero h1,
html[data-theme="dark"] .home .ga-hero h1 { color: var(--dk-text) !important; }
html[data-theme="dark"] .ga-hero h1 em { color: var(--dk-text2) !important; }
/* The accent's ink is darkened for contrast on white (tgc_hero_ink); on dark
   the raw palette colours are the readable ones. */
html[data-theme="dark"] .ga-hero h1 span,
html[data-theme="dark"] .tg-phero h1 span { background-image: linear-gradient(100deg, var(--m1, #FF9A3D), var(--m2, #FF4D8D) 50%, var(--m3, #7B5CFF)) !important; }
/* hero.css and home.css set these as .tg-hero .tg-phero .tg-phero-lede and
   .home .ga-hero p, so match that specificity. */
html[data-theme="dark"] .ga-hero > p,
html[data-theme="dark"] .home .ga-hero p,
html[data-theme="dark"] .tg-phero-lede,
html[data-theme="dark"] .tg-hero .tg-phero .tg-phero-lede { color: #CFCFDA !important; }
html[data-theme="dark"] .tg-crumbs,
html[data-theme="dark"] .tg-stat span,
html[data-theme="dark"] .ga-eyebrow { background: rgba(30, 30, 40, .72) !important; color: var(--dk-text2) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-crumbs a { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-crumbs span { color: var(--dk-text3); }
html[data-theme="dark"] .ga-eyebrow b { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .ga-hero .ga-search input,
html[data-theme="dark"] .tg-hero .ga-hero .ga-search input { background: var(--dk-s1) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .4) !important; }
html[data-theme="dark"] .ga-pill:not(.on),
html[data-theme="dark"] .tg-hero .ga-hero .ga-pill:not(.on) { background: rgba(30, 30, 40, .72) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .ga-pill.on { background: #fff !important; color: #111 !important; border-color: #fff !important; }

/* Brand strip */
html[data-theme="dark"] .ga-strip { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .ga-strip-item { color: var(--dk-text2) !important; }
html[data-theme="dark"] .ga-strip-label { color: var(--dk-text3) !important; }

/* ─── Cards, chips, sections ─────────────────────────────────── */
html[data-theme="dark"] .gc,
html[data-theme="dark"] .ga-hue,
html[data-theme="dark"] .ga-tool,
html[data-theme="dark"] .ga-explore-card,
html[data-theme="dark"] .ga-feature,
html[data-theme="dark"] .tg-daily,
html[data-theme="dark"] .tg-pair-tile,
html[data-theme="dark"] .tg-share {
	background: var(--dk-s1) !important;
	border-color: var(--dk-line) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4) !important;
}
html[data-theme="dark"] .gc:hover,
html[data-theme="dark"] .ga-tool:hover,
html[data-theme="dark"] .tg-pair-tile:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .55) !important; }
html[data-theme="dark"] .gc-title a,
html[data-theme="dark"] .ga-hue-name,
html[data-theme="dark"] .ga-tool h3,
html[data-theme="dark"] .tg-daily h2 a,
html[data-theme="dark"] .tg-pair-tile,
html[data-theme="dark"] .tg-pair-name { color: var(--dk-text) !important; }
html[data-theme="dark"] .gc-brand,
html[data-theme="dark"] .gc-hex,
html[data-theme="dark"] .ga-hue-n,
html[data-theme="dark"] .ga-tool p,
html[data-theme="dark"] .ga-explore-card h3,
html[data-theme="dark"] .ga-sec-hd span,
html[data-theme="dark"] .tg-pair-n,
html[data-theme="dark"] .tg-daily-brand,
html[data-theme="dark"] .tg-daily-eyebrow,
html[data-theme="dark"] .tg-daily-next { color: var(--dk-text3) !important; }
html[data-theme="dark"] .ga-sec-hd h2 { color: var(--dk-text) !important; }
html[data-theme="dark"] .ga-sec-link,
html[data-theme="dark"] .tg-daily-open,
html[data-theme="dark"] .cs-image-link { color: var(--dk-text2) !important; }
html[data-theme="dark"] .gc-stop:hover { background: var(--dk-s3) !important; }
html[data-theme="dark"] .gc-swatch { border-color: rgba(255, 255, 255, .25); }
html[data-theme="dark"] .gc-copy { background: var(--dk-s2) !important; border-color: var(--dk-line) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .gc-copy:hover { background: var(--dk-s3) !important; color: var(--dk-text) !important; }
html[data-theme="dark"] .gc-copy.ok { background: #12301F !important; border-color: #1F5133 !important; color: #8BE3A9 !important; }
html[data-theme="dark"] .tg-daily .tg-daily-copy { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .gc-fav { background: rgba(21, 21, 29, .8) !important; color: var(--dk-text) !important; }

html[data-theme="dark"] .ga-chip { background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .ga-chip:hover { background: var(--dk-s3) !important; }
html[data-theme="dark"] .ga-chip[aria-current="page"] { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .ga-chip .ga-chip-n { background: var(--dk-s3); color: var(--dk-text2); }
html[data-theme="dark"] .ga-tool-new,
html[data-theme="dark"] .ga-tool.ga-tool-new { background: linear-gradient(135deg, #1B1830, #15151D) !important; }

html[data-theme="dark"] .ga-pgbtn { background: var(--dk-s1) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .ga-pgbtn.on { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .ga-empty, html[data-theme="dark"] .tg-saved-empty { color: var(--dk-text3); }

/* Home "about" block */
html[data-theme="dark"] .ga-about,
html[data-theme="dark"] .ga-about-intro { background: transparent !important; }
html[data-theme="dark"] .ga-about-note { color: var(--dk-text3) !important; }

/* ─── Guide panels ───────────────────────────────────────────── */
html[data-theme="dark"] .tg-guide { background: linear-gradient(135deg, #14141C, #17141F) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-guide h2, html[data-theme="dark"] .tg-guide h3 { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-guide p, html[data-theme="dark"] .tg-guide li { color: var(--dk-text2); }
html[data-theme="dark"] .tg-guide ul li { background: var(--dk-s1); border-color: var(--dk-line); }
html[data-theme="dark"] .tg-guide code { background: var(--dk-s2); border-color: var(--dk-line); color: #C9BFFF; }
html[data-theme="dark"] .tg-guide pre, html[data-theme="dark"] .tg-guide .wp-block-code { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-guide pre code { color: var(--dk-text); background: none; }
html[data-theme="dark"] .tg-guide a { color: var(--dk-link) !important; text-decoration-color: rgba(169, 155, 255, .4); }

/* ─── Forms (Kadence boxes every input) ──────────────────────── */
html[data-theme="dark"] input[type="text"]:not(.bd-el), html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select {
	background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dk-text3) !important; }
html[data-theme="dark"] label { color: var(--dk-text2); }

/* ─── Gradient pages ─────────────────────────────────────────── */
html[data-theme="dark"] .gs-wrap,
html[data-theme="dark"] .gs-title { color: var(--dk-text) !important; }
html[data-theme="dark"] .gs-back,
html[data-theme="dark"] .gs-breadcrumb,
html[data-theme="dark"] .gs-brand-label,
html[data-theme="dark"] .gs-brand-label a,
html[data-theme="dark"] .gs-note,
html[data-theme="dark"] .gs-contrast-label { color: var(--dk-text3) !important; }
html[data-theme="dark"] .gs-swatch-item code { color: var(--dk-text2) !important; background: none !important; }
html[data-theme="dark"] .gs-tag { background: var(--dk-s2) !important; color: var(--dk-text2) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .gs-code-block,
html[data-theme="dark"] .gs-fmt,
html[data-theme="dark"] .gs-fmt-panel,
html[data-theme="dark"] .gs-section,
html[data-theme="dark"] .gs-table-wrap,
html[data-theme="dark"] .gs-brand-notice,
html[data-theme="dark"] .gs-faq details { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .gs-code-block pre,
html[data-theme="dark"] .gs-fmt-panel pre { color: var(--dk-text) !important; }
html[data-theme="dark"] .gs-code-label { color: var(--dk-text3) !important; }
html[data-theme="dark"] .gs-copy-btn,
html[data-theme="dark"] .gs-download button,
html[data-theme="dark"] .gs-fmt-tabs [role="tab"],
html[data-theme="dark"] .gs-fav { background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .gs-copy-btn:hover,
html[data-theme="dark"] .gs-download button:hover,
html[data-theme="dark"] .gs-fmt-tabs [role="tab"][aria-selected="true"] { background: #fff !important; color: #111 !important; border-color: #fff !important; }
html[data-theme="dark"] .gs-fav[aria-pressed="true"] { background: #3A1424 !important; border-color: #6B2440 !important; color: #FF9EB9 !important; }
html[data-theme="dark"] .gs-table th { background: var(--dk-s2) !important; color: var(--dk-text3) !important; }
html[data-theme="dark"] .gs-table td { border-color: var(--dk-line) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .gs-faq summary { color: var(--dk-text) !important; }
html[data-theme="dark"] .gs-wp-link a { color: var(--dk-link) !important; }
html[data-theme="dark"] .gs-pv-card, html[data-theme="dark"] .gs-var { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; color: var(--dk-text3) !important; }
html[data-theme="dark"] .gs-pv-card strong, html[data-theme="dark"] .gs-var-label { color: var(--dk-text) !important; }
html[data-theme="dark"] .gs-table td code, html[data-theme="dark"] .gs-wrap td code { color: var(--dk-text2) !important; background: none !important; }
html[data-theme="dark"] .gs-back:hover, html[data-theme="dark"] .tg-grain-how:hover { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-daily-eyebrow b { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .ga-chip b { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .ga-about-lede, html[data-theme="dark"] .ga-about h2, html[data-theme="dark"] .ga-about strong { color: var(--dk-text) !important; }

/* Grain control */
html[data-theme="dark"] .tg-grain { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .tg-grain-track { background: #3A3A48 !important; }
html[data-theme="dark"] .tg-grain-switch input:checked + .tg-grain-track { background: #8E7CFF !important; }
html[data-theme="dark"] .tg-grain-size { border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-grain-size button { background: var(--dk-s2) !important; color: var(--dk-text2) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-grain-size button.on { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .tg-grain-value, html[data-theme="dark"] .tg-grain-how { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-grain-new { background: #2A2350 !important; color: #C9BFFF !important; }

/* ─── Tools ──────────────────────────────────────────────────── */
/* Cards and panels: every tool names them <prefix>-card / -panel / -card-p. */
html[data-theme="dark"] .tg-tool [class$="-card"], html[data-theme="dark"] .tg-tool [class*="-card "],
html[data-theme="dark"] .tg-tool .gb-card-p, html[data-theme="dark"] .tg-tool .gg-panel,
html[data-theme="dark"] .tg-tool .tg-panel, html[data-theme="dark"] .tg-tool .tg-card,
html[data-theme="dark"] .tg-tool .gi-card, html[data-theme="dark"] .tg-tool .wp-card {
	background: var(--dk-s1) !important; border-color: var(--dk-line) !important; box-shadow: none !important; color: var(--dk-text2);
}
/* Code outputs */
html[data-theme="dark"] .tg-tool .gg-output, html[data-theme="dark"] .tg-tool .mg-output, html[data-theme="dark"] .tg-tool .ag-output,
html[data-theme="dark"] .tg-tool .tg-output, html[data-theme="dark"] .tg-tool .gb-output, html[data-theme="dark"] .tg-tool .gt-output,
html[data-theme="dark"] .tg-tool .gi-output, html[data-theme="dark"] .gg-share-box { background: var(--dk-s2) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-tool pre { color: var(--dk-text) !important; }
/* Labels and quiet text */
html[data-theme="dark"] .tg-tool [class*="-label"], html[data-theme="dark"] .tg-tool [class*="card-title"],
html[data-theme="dark"] .tg-tool [class*="-title-p"], html[data-theme="dark"] .tg-tool .gi-hint,
html[data-theme="dark"] .tg-tool .gi-privacy, html[data-theme="dark"] .tg-tool .wp-meta,
html[data-theme="dark"] .tg-tool [class*="slider-val"], html[data-theme="dark"] .tg-tool .wp-size-group > span { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool [class*="slider-val"] { background: var(--dk-s2) !important; }
/* Names, hex readouts, hints and units the tools colour individually */
html[data-theme="dark"] .tg-tool [class*="slider-label"] span:first-child,
html[data-theme="dark"] .tg-tool [class*="-name"] { color: var(--dk-text2) !important; }
html[data-theme="dark"] .tg-tool [class*="-hex"]:not(input),
html[data-theme="dark"] .tg-tool [class*="-hint"],
html[data-theme="dark"] .tg-tool [class*="-unit"],
html[data-theme="dark"] .tg-tool [class*="panel-title"],
html[data-theme="dark"] .tg-tool [class*="-empty"],
html[data-theme="dark"] .tg-tool [id$="-val"],
html[data-theme="dark"] .tg-tool #gt-fallback-hex { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool b, html[data-theme="dark"] .tg-guide b, html[data-theme="dark"] .entry-content b { color: inherit !important; }
html[data-theme="dark"] .gs-field label span, html[data-theme="dark"] .gs-color-input label span { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool .wp-meta #wp-name, html[data-theme="dark"] .tg-tool .wp-angle-row label,
html[data-theme="dark"] .tg-tool .wp-custom label { color: var(--dk-text) !important; }
/* Secondary buttons, copy buttons, small controls */
html[data-theme="dark"] .tg-tool [class*="btn-secondary"], html[data-theme="dark"] .tg-tool [class*="btn-share"],
html[data-theme="dark"] .tg-tool [class*="btn-ghost"], html[data-theme="dark"] .tg-tool [class*="copy-btn"],
html[data-theme="dark"] .tg-tool .tg-copy-all, html[data-theme="dark"] .tg-tool .gi-copy,
html[data-theme="dark"] .tg-tool [class*="add-stop"], html[data-theme="dark"] .tg-tool .mg-add-point, html[data-theme="dark"] .tg-tool .gt-add,
html[data-theme="dark"] .tg-tool [class*="-remove"], html[data-theme="dark"] .tg-tool [class*="-delete"], html[data-theme="dark"] .tg-tool .gt-stop-del,
html[data-theme="dark"] .tg-tool .tg-scale-copy, html[data-theme="dark"] .tg-tool .gi-preset, html[data-theme="dark"] .tg-tool .wp-size, html[data-theme="dark"] .tg-tool .wp-loop-btn,
html[data-theme="dark"] .tg-tool .ag-style-btn, html[data-theme="dark"] .tg-tool .gb-border-btn, html[data-theme="dark"] .tg-tool .tg-mode-btn,
html[data-theme="dark"] .tg-tool .gg-preset, html[data-theme="dark"] .tg-tool .gt-btn-download, html[data-theme="dark"] .tg-tool .mg-btn-download {
	background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important;
}
html[data-theme="dark"] .tg-tool [class*="copy-btn"]:hover, html[data-theme="dark"] .tg-tool .tg-copy-all:hover, html[data-theme="dark"] .tg-tool .gi-copy:hover,
html[data-theme="dark"] .tg-tool .wp-size[aria-pressed="true"], html[data-theme="dark"] .tg-tool .wp-loop-btn[aria-pressed="true"], html[data-theme="dark"] .tg-tool .gi-preset.on,
html[data-theme="dark"] .tg-tool .ag-style-btn.on, html[data-theme="dark"] .tg-tool .gb-border-btn.on, html[data-theme="dark"] .tg-tool .tg-mode-btn.on {
	background: #fff !important; color: #111 !important; border-color: #fff !important;
}
/* Primary buttons stay solid: white on dark */
html[data-theme="dark"] .tg-tool [class*="btn-primary"], html[data-theme="dark"] .tg-tool .wp-btn-primary, html[data-theme="dark"] .tg-tool .gi-btn-primary {
	background: #fff !important; color: #111 !important;
}
html[data-theme="dark"] .tg-tool [class*="btn-primary"]:hover { background: #E4E4EC !important; }
/* Segmented controls */
html[data-theme="dark"] .tg-tool .wp-seg, html[data-theme="dark"] .tg-tool .gt-seg { background: var(--dk-s2) !important; }
html[data-theme="dark"] .tg-tool .wp-style, html[data-theme="dark"] .tg-tool .gt-seg-btn, html[data-theme="dark"] .tg-tool .gt-tab { color: var(--dk-text2) !important; }
html[data-theme="dark"] .tg-tool .wp-style[aria-pressed="true"], html[data-theme="dark"] .tg-tool .gt-seg-btn.on, html[data-theme="dark"] .tg-tool .gt-tab.on { background: var(--dk-s3) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important; }
/* Rows */
html[data-theme="dark"] .tg-tool .mg-point-row, html[data-theme="dark"] .tg-tool .tg-scale-row, html[data-theme="dark"] .tg-tool .gt-stop { background: var(--dk-s2) !important; border-color: var(--dk-line) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .tg-tool .mg-point-row.active { border-color: #8E7CFF !important; }
/* Stages: checkerboards and drop zones */
html[data-theme="dark"] .tg-tool .wp-stage, html[data-theme="dark"] .tg-tool .gi-preview {
	background: repeating-conic-gradient(#191922 0% 25%, #121219 0% 50%) 0 0 / 20px 20px !important;
}
html[data-theme="dark"] .tg-tool .gi-drop { background: var(--dk-s1) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-tool .gi-drop:hover, html[data-theme="dark"] .tg-tool .gi-drop.is-over { background: #1B1830 !important; border-color: #8E7CFF !important; }
html[data-theme="dark"] .tg-tool .gi-drop-empty strong { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-tool .gi-swatch { background: var(--dk-s2) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-tool .gi-swatch code { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-tool .gg-dial { background: var(--dk-s2) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-tool .gg-color-label, html[data-theme="dark"] .tg-tool h2, html[data-theme="dark"] .tg-tool h3 { color: var(--dk-text) !important; }
html[data-theme="dark"] .wp-gallery-sec h2 { color: var(--dk-text) !important; }

/* Colour search, saved, daily, submit */
html[data-theme="dark"] .cs-picker { background: rgba(21, 21, 29, .92) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .cs-picker #cs-hex { color: var(--dk-text) !important; background: transparent !important; }
html[data-theme="dark"] .cs-go { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .cs-random { background: rgba(30, 30, 40, .85) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .cs-head code { color: var(--dk-text) !important; }
html[data-theme="dark"] .gc-match, html[data-theme="dark"] .gc-day { background: var(--dk-s2) !important; color: var(--dk-text2) !important; }
html[data-theme="dark"] .cs-more, html[data-theme="dark"] .tg-saved-btn { background: var(--dk-s2) !important; color: var(--dk-text) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-saved-primary, html[data-theme="dark"] .tg-saved-cta { background: #fff !important; color: #111 !important; border-color: #fff !important; }
html[data-theme="dark"] .tg-saved-clear { color: #FF8A80 !important; }
html[data-theme="dark"] .tg-saved-empty-icon { background: #3A1424 !important; }
html[data-theme="dark"] .tg-saved-ghost { background: linear-gradient(90deg, #17171F 25%, #1F1F29 50%, #17171F 75%) 0 0 / 200% 100% !important; }
html[data-theme="dark"] .tg-share-row input { color: var(--dk-text) !important; }
html[data-theme="dark"] #gs-form-wrap, html[data-theme="dark"] .gs-form, html[data-theme="dark"] .gs-sub { color: var(--dk-text2) !important; }

/* Toast stays dark on dark, so lift it */
html[data-theme="dark"] .tg-toast { background: #2A2A36; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px var(--dk-line2); }

/* Footer is already a dark card; give it an edge against the dark page */
html[data-theme="dark"] .tg-footer-card { box-shadow: 0 0 0 1px var(--dk-line) !important; }

/* ─── The toggle (button injected by dark.php) ───────────────── */
.tg-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0 !important; margin: 0 4px !important;
	border: 0 !important; border-radius: 50% !important; background: transparent !important;
	color: #111 !important; cursor: pointer; box-shadow: none !important; flex-shrink: 0;
}
.tg-theme-toggle:hover { background: rgba(17, 17, 17, .06) !important; }
.tg-theme-toggle svg { width: 19px; height: 19px; }
/* Shows what a click switches to: the moon in light mode, the sun in dark. */
.tg-theme-toggle .tg-sun { display: none; }
html[data-theme="dark"] .tg-theme-toggle { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-theme-toggle:hover { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .tg-theme-toggle .tg-moon { display: none; }
html[data-theme="dark"] .tg-theme-toggle .tg-sun { display: block; }
html[data-theme="dark"] .tg-tool .gg-dial-arrow,
html[data-theme="dark"] .tg-tool .gg-dial-center { background: var(--dk-text) !important; }

/* Toggle placement in the header pill */
.tg-theme-item { display: flex; align-items: center; }
@media (max-width: 1024px) { .tg-theme-item { margin-right: 2px; } }

/* Generator: type, centre, import */
html[data-theme="dark"] .tg-tool .gg-type { background: var(--dk-s2) !important; }
html[data-theme="dark"] .tg-tool .gg-type-btn { color: var(--dk-text2) !important; }
html[data-theme="dark"] .tg-tool .gg-type-btn[aria-pressed="true"] { background: var(--dk-s3) !important; color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-tool .gg-pos-btn { background: var(--dk-s2) !important; border-color: var(--dk-line2) !important; }
html[data-theme="dark"] .tg-tool .gg-pos-btn i { background: #55556A; }
html[data-theme="dark"] .tg-tool .gg-pos-btn[aria-pressed="true"] { border-color: #fff !important; }
html[data-theme="dark"] .tg-tool .gg-pos-btn[aria-pressed="true"] i { background: #fff; }
html[data-theme="dark"] .tg-tool .gg-sub-title, html[data-theme="dark"] .tg-tool .gg-output-hint, html[data-theme="dark"] .tg-tool .gg-import-msg { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool .gg-import-box { background: var(--dk-s1) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tg-tool .gg-import-box label { color: var(--dk-text) !important; }

/* Wallpaper Maker motion controls */
html[data-theme="dark"] .tg-tool .wp-switch, html[data-theme="dark"] .tg-tool .wp-loop > span { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-tool .wp-switch-track { background: #3A3A48; }
html[data-theme="dark"] .tg-tool .wp-switch input:checked + .wp-switch-track { background: #8E7CFF; }
html[data-theme="dark"] .tg-tool .wp-motion-note { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool .wp-new { background: #2A2350; color: #C9BFFF; }
html[data-theme="dark"] .tg-tool .wp-progress { background: var(--dk-s2); }

html[data-theme="dark"] .tg-tool .gg-ease { color: var(--dk-text) !important; }
html[data-theme="dark"] .tg-tool .gg-ease input { accent-color: #8E7CFF; }
html[data-theme="dark"] .tg-tool .gg-blend-hint { color: var(--dk-text3) !important; }
html[data-theme="dark"] .tg-tool .gg-xy label, html[data-theme="dark"] .tg-tool .gg-xy span, html[data-theme="dark"] .tg-tool .gg-pos-in i { color: var(--dk-text3) !important; }