/*!
 * liftRader dark theme (FR-37) — override layer for Tailwind utility classes.
 *
 * RULE: when you add a new color class to a template (bg-*, text-*, border-*, ring-*, divide-*,
 *       from/to-*, shadow-* incl. hover:/focus:/peer-checked:/opacity variants), add its dark
 *       mapping here too (otherwise it stays light-colored in dark mode).
 *
 * How it works
 *   - theme.js / the inline snippet in <head> put class "dark" on <html> (localStorage `lr-theme`).
 *   - Every rule is `html.dark .<tailwind-class>` (specificity > the Play CDN utility), so it wins
 *     regardless of stylesheet injection order. Light mode is untouched when the class is absent.
 *   - Everything lives inside @media screen so print / PDF output is always light (R9).
 *   - All colors come from the palette variables below: change them here, nowhere else (N5).
 *   - Mapping rules: slate surfaces/borders/text -> dark scale; hue tints (50-300) -> translucent
 *     hue over the dark surface; hue text 500-900 -> light hue 400-200; solid 400-900 fills,
 *     white text and brand colors are kept.
 */
@media screen {
html.dark {
  color-scheme: dark;

  /* slate scale (rgb triplets so opacity variants work) */
  --lr-page: 11 18 32;
  --lr-surface: 20 29 47;
  --lr-s100: 28 39 61;
  --lr-s200: 40 52 76;
  --lr-s300: 55 69 96;
  --lr-s400: 82 96 122;
  --lr-s800: 51 65 85;
  --lr-s900: 41 53 72;
  --lr-overlay: 2 6 23;
  --lr-b100: 31 42 66;
  --lr-b200: 43 56 80;
  --lr-b300: 61 76 104;
  --lr-t900: 241 245 249;
  --lr-t800: 232 237 245;
  --lr-t700: 213 222 234;
  --lr-t600: 188 200 216;
  --lr-t500: 158 172 192;
  --lr-t400: 135 149 171;
  --lr-t300: 91 106 133;
  --lr-ph: 115 129 153;
  /* hue families: rgb triplets of 500 (tints/borders) and light text shades 200/300/400 */
  --lr-amber: 245 158 11;
  --lr-amber-200: 253 230 138; --lr-amber-300: 252 211 77; --lr-amber-400: 251 191 36;
  --lr-blue: 59 130 246;
  --lr-blue-200: 191 219 254; --lr-blue-300: 147 197 253; --lr-blue-400: 96 165 250;
  --lr-cyan: 6 182 212;
  --lr-cyan-200: 165 243 252; --lr-cyan-300: 103 232 249; --lr-cyan-400: 34 211 238;
  --lr-emerald: 16 185 129;
  --lr-emerald-200: 167 243 208; --lr-emerald-300: 110 231 183; --lr-emerald-400: 52 211 153;
  --lr-indigo: 99 102 241;
  --lr-indigo-200: 199 210 254; --lr-indigo-300: 165 180 252; --lr-indigo-400: 129 140 248;
  --lr-purple: 168 85 247;
  --lr-purple-200: 233 213 255; --lr-purple-300: 216 180 254; --lr-purple-400: 192 132 252;
  --lr-red: 239 68 68;
  --lr-red-200: 254 202 202; --lr-red-300: 252 165 165; --lr-red-400: 248 113 113;
  --lr-rose: 244 63 94;
  --lr-rose-200: 254 205 211; --lr-rose-300: 253 164 175; --lr-rose-400: 251 113 133;
}

/* ---- base */
html.dark { background-color: rgb(var(--lr-page)); }  /* dark canvas before Tailwind CDN paints the body */
html.dark body { background-color: rgb(var(--lr-page)); color: rgb(var(--lr-t900)); }
html.dark ::placeholder { color: rgb(var(--lr-ph)); opacity: 1; }
html.dark ::selection { background: rgb(var(--lr-blue) / .35); }

/* ---- Tailwind utility overrides (generated from the template class inventory) */
html.dark .bg-amber-50\/20 {
  background-color: rgb(var(--lr-amber) / 0.068);
}
html.dark .bg-amber-50\/60 {
  background-color: rgb(var(--lr-amber) / 0.084);
}
html.dark .bg-amber-50\/70 {
  background-color: rgb(var(--lr-amber) / 0.088);
}
html.dark .bg-amber-50\/80 {
  background-color: rgb(var(--lr-amber) / 0.092);
}
html.dark .bg-amber-50 {
  background-color: rgb(var(--lr-amber) / 0.1);
}
html.dark .hover\:bg-amber-50\/40:hover {
  background-color: rgb(var(--lr-amber) / 0.136);
}
html.dark .hover\:bg-amber-50\/50:hover {
  background-color: rgb(var(--lr-amber) / 0.14);
}
html.dark .hover\:bg-amber-50\/60:hover {
  background-color: rgb(var(--lr-amber) / 0.144);
}
html.dark .bg-amber-100,
html.dark .hover\:bg-amber-50:hover {
  background-color: rgb(var(--lr-amber) / 0.16);
}
html.dark .hover\:bg-amber-100\/60:hover {
  background-color: rgb(var(--lr-amber) / 0.194);
}
html.dark .bg-amber-200\/70 {
  background-color: rgb(var(--lr-amber) / 0.211);
}
html.dark .hover\:bg-amber-100:hover {
  background-color: rgb(var(--lr-amber) / 0.22);
}
html.dark .bg-amber-200\/80 {
  background-color: rgb(var(--lr-amber) / 0.221);
}
html.dark .hover\:bg-amber-200:hover {
  background-color: rgb(var(--lr-amber) / 0.3);
}
html.dark .hover\:bg-amber-300:hover {
  background-color: rgb(var(--lr-amber) / 0.38);
}
html.dark .bg-blue-50\/30 {
  background-color: rgb(var(--lr-blue) / 0.072);
}
html.dark .bg-blue-50\/50 {
  background-color: rgb(var(--lr-blue) / 0.08);
}
html.dark .bg-blue-50\/60 {
  background-color: rgb(var(--lr-blue) / 0.084);
}
html.dark .bg-blue-50\/70 {
  background-color: rgb(var(--lr-blue) / 0.088);
}
html.dark .bg-blue-50\/80 {
  background-color: rgb(var(--lr-blue) / 0.092);
}
html.dark .bg-blue-50,
html.dark .peer:checked ~ .peer-checked\:bg-blue-50 {
  background-color: rgb(var(--lr-blue) / 0.1);
}
html.dark .hover\:bg-blue-50\/30:hover {
  background-color: rgb(var(--lr-blue) / 0.132);
}
html.dark .hover\:bg-blue-50\/60:hover {
  background-color: rgb(var(--lr-blue) / 0.144);
}
html.dark .bg-blue-100,
html.dark .hover\:bg-blue-50:hover {
  background-color: rgb(var(--lr-blue) / 0.16);
}
html.dark .hover\:bg-blue-100:hover {
  background-color: rgb(var(--lr-blue) / 0.22);
}
html.dark .hover\:bg-blue-200:hover {
  background-color: rgb(var(--lr-blue) / 0.3);
}
html.dark .bg-cyan-50\/60 {
  background-color: rgb(var(--lr-cyan) / 0.084);
}
html.dark .bg-cyan-50\/70 {
  background-color: rgb(var(--lr-cyan) / 0.088);
}
html.dark .bg-cyan-50\/80 {
  background-color: rgb(var(--lr-cyan) / 0.092);
}
html.dark .bg-cyan-50 {
  background-color: rgb(var(--lr-cyan) / 0.1);
}
html.dark .bg-cyan-100 {
  background-color: rgb(var(--lr-cyan) / 0.16);
}
html.dark .hover\:bg-cyan-100:hover {
  background-color: rgb(var(--lr-cyan) / 0.22);
}
html.dark .bg-emerald-50\/60 {
  background-color: rgb(var(--lr-emerald) / 0.084);
}
html.dark .bg-emerald-50\/80 {
  background-color: rgb(var(--lr-emerald) / 0.092);
}
html.dark .bg-emerald-50 {
  background-color: rgb(var(--lr-emerald) / 0.1);
}
html.dark .hover\:bg-emerald-50\/20:hover {
  background-color: rgb(var(--lr-emerald) / 0.128);
}
html.dark .hover\:bg-emerald-50\/30:hover {
  background-color: rgb(var(--lr-emerald) / 0.132);
}
html.dark .bg-emerald-100,
html.dark .hover\:bg-emerald-50:hover {
  background-color: rgb(var(--lr-emerald) / 0.16);
}
html.dark .hover\:bg-emerald-100\/60:hover {
  background-color: rgb(var(--lr-emerald) / 0.194);
}
html.dark .hover\:bg-emerald-100:hover {
  background-color: rgb(var(--lr-emerald) / 0.22);
}
html.dark .bg-emerald-200 {
  background-color: rgb(var(--lr-emerald) / 0.24);
}
html.dark .hover\:bg-emerald-200:hover {
  background-color: rgb(var(--lr-emerald) / 0.3);
}
html.dark .bg-indigo-50\/30 {
  background-color: rgb(var(--lr-indigo) / 0.072);
}
html.dark .bg-indigo-50\/40 {
  background-color: rgb(var(--lr-indigo) / 0.076);
}
html.dark .bg-indigo-50\/50 {
  background-color: rgb(var(--lr-indigo) / 0.08);
}
html.dark .bg-indigo-50\/80 {
  background-color: rgb(var(--lr-indigo) / 0.092);
}
html.dark .bg-indigo-50,
html.dark .peer:checked ~ .peer-checked\:bg-indigo-50 {
  background-color: rgb(var(--lr-indigo) / 0.1);
}
html.dark .hover\:bg-indigo-50\/30:hover {
  background-color: rgb(var(--lr-indigo) / 0.132);
}
html.dark .bg-indigo-100 {
  background-color: rgb(var(--lr-indigo) / 0.16);
}
html.dark .hover\:bg-indigo-100:hover {
  background-color: rgb(var(--lr-indigo) / 0.22);
}
html.dark .bg-slate-900\/50 {
  background-color: rgb(var(--lr-overlay) / 0.65);
}
html.dark .bg-slate-900\/60,
html.dark .hover\:bg-slate-900\/60:hover {
  background-color: rgb(var(--lr-overlay) / 0.75);
}
html.dark .bg-slate-900\/70 {
  background-color: rgb(var(--lr-overlay) / 0.85);
}
html.dark .bg-slate-50\/50 {
  background-color: rgb(var(--lr-page) / 0.5);
}
html.dark .bg-slate-50\/60 {
  background-color: rgb(var(--lr-page) / 0.6);
}
html.dark .bg-slate-50\/70 {
  background-color: rgb(var(--lr-page) / 0.7);
}
html.dark .bg-slate-50\/80 {
  background-color: rgb(var(--lr-page) / 0.8);
}
html.dark .bg-slate-50 {
  background-color: rgb(var(--lr-page));
}
html.dark .bg-purple-50\/60 {
  background-color: rgb(var(--lr-purple) / 0.084);
}
html.dark .bg-purple-50\/70 {
  background-color: rgb(var(--lr-purple) / 0.088);
}
html.dark .bg-purple-50 {
  background-color: rgb(var(--lr-purple) / 0.1);
}
html.dark .bg-purple-100 {
  background-color: rgb(var(--lr-purple) / 0.16);
}
html.dark .hover\:bg-purple-100:hover {
  background-color: rgb(var(--lr-purple) / 0.22);
}
html.dark .bg-purple-200 {
  background-color: rgb(var(--lr-purple) / 0.24);
}
html.dark .hover\:bg-purple-200:hover {
  background-color: rgb(var(--lr-purple) / 0.3);
}
html.dark .bg-red-50 {
  background-color: rgb(var(--lr-red) / 0.1);
}
html.dark .bg-red-100 {
  background-color: rgb(var(--lr-red) / 0.16);
}
html.dark .bg-rose-50\/50 {
  background-color: rgb(var(--lr-rose) / 0.08);
}
html.dark .bg-rose-50\/70 {
  background-color: rgb(var(--lr-rose) / 0.088);
}
html.dark .bg-rose-50,
html.dark .peer:checked ~ .peer-checked\:bg-rose-50 {
  background-color: rgb(var(--lr-rose) / 0.1);
}
html.dark .bg-rose-100,
html.dark .hover\:bg-rose-50:hover {
  background-color: rgb(var(--lr-rose) / 0.16);
}
html.dark .hover\:bg-rose-200:hover {
  background-color: rgb(var(--lr-rose) / 0.3);
}
html.dark .bg-slate-100\/50 {
  background-color: rgb(var(--lr-s100) / 0.5);
}
html.dark .bg-slate-100\/60,
html.dark .hover\:bg-slate-100\/60:hover {
  background-color: rgb(var(--lr-s100) / 0.6);
}
html.dark .hover\:bg-slate-50\/70:hover {
  background-color: rgb(var(--lr-s100) / 0.7);
}
html.dark .bg-slate-100\/80,
html.dark .hover\:bg-slate-50\/80:hover {
  background-color: rgb(var(--lr-s100) / 0.8);
}
html.dark .bg-slate-100\/90 {
  background-color: rgb(var(--lr-s100) / 0.9);
}
html.dark .bg-slate-100,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .peer:checked ~ .peer-checked\:bg-slate-100 {
  background-color: rgb(var(--lr-s100));
}
html.dark .bg-slate-200,
html.dark .hover\:bg-slate-200:hover {
  background-color: rgb(var(--lr-s200));
}
html.dark .bg-slate-400 {
  background-color: rgb(var(--lr-s400));
}
html.dark .bg-slate-800,
html.dark .hover\:bg-slate-800:hover {
  background-color: rgb(var(--lr-s800));
}
html.dark .bg-slate-900,
html.dark .hover\:bg-slate-900:hover {
  background-color: rgb(var(--lr-s900));
}
html.dark .bg-white\/80 {
  background-color: rgb(var(--lr-surface) / 0.8);
}
html.dark .bg-white\/90 {
  background-color: rgb(var(--lr-surface) / 0.9);
}
html.dark .bg-white\/95 {
  background-color: rgb(var(--lr-surface) / 0.95);
}
html.dark .bg-white,
html.dark .focus\:bg-white:focus {
  background-color: rgb(var(--lr-surface));
}
html.dark .focus\:ring-amber-100:focus,
html.dark .ring-amber-200 {
  --tw-ring-color: rgb(var(--lr-amber) / 0.35);
}
html.dark .ring-amber-300 {
  --tw-ring-color: rgb(var(--lr-amber) / 0.4);
}
html.dark .focus\:ring-blue-100:focus {
  --tw-ring-color: rgb(var(--lr-blue) / 0.35);
}
html.dark .ring-cyan-300 {
  --tw-ring-color: rgb(var(--lr-cyan) / 0.4);
}
html.dark .focus\:ring-emerald-100:focus,
html.dark .focus\:ring-emerald-200:focus {
  --tw-ring-color: rgb(var(--lr-emerald) / 0.35);
}
html.dark .focus\:ring-indigo-200:focus {
  --tw-ring-color: rgb(var(--lr-indigo) / 0.35);
}
html.dark .ring-white {
  --tw-ring-color: rgb(var(--lr-surface));
}
html.dark .border-amber-200\/60 {
  border-color: rgb(var(--lr-amber) / 0.252);
}
html.dark .border-amber-200\/80 {
  border-color: rgb(var(--lr-amber) / 0.276);
}
html.dark .border-amber-200 {
  border-color: rgb(var(--lr-amber) / 0.3);
}
html.dark .border-amber-300,
html.dark .hover\:border-amber-300:hover {
  border-color: rgb(var(--lr-amber) / 0.4);
}
html.dark .border-slate-100,
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--lr-b100));
}
html.dark .border-slate-200\/60 {
  border-color: rgb(var(--lr-b200) / 0.6);
}
html.dark .border-slate-200\/80 {
  border-color: rgb(var(--lr-b200) / 0.8);
}
html.dark .border-slate-200\/90 {
  border-color: rgb(var(--lr-b200) / 0.9);
}
html.dark .border-slate-200 {
  border-color: rgb(var(--lr-b200));
}
html.dark .border-slate-300,
html.dark .hover\:border-slate-300:hover {
  border-color: rgb(var(--lr-b300));
}
html.dark .border-blue-100,
html.dark .hover\:border-blue-100:hover {
  border-color: rgb(var(--lr-blue) / 0.22);
}
html.dark .border-blue-200\/60 {
  border-color: rgb(var(--lr-blue) / 0.252);
}
html.dark .border-blue-200 {
  border-color: rgb(var(--lr-blue) / 0.3);
}
html.dark .hover\:border-blue-300:hover {
  border-color: rgb(var(--lr-blue) / 0.4);
}
html.dark .border-cyan-200\/80 {
  border-color: rgb(var(--lr-cyan) / 0.276);
}
html.dark .border-cyan-200 {
  border-color: rgb(var(--lr-cyan) / 0.3);
}
html.dark .border-emerald-100 {
  border-color: rgb(var(--lr-emerald) / 0.22);
}
html.dark .border-emerald-200 {
  border-color: rgb(var(--lr-emerald) / 0.3);
}
html.dark .border-emerald-300,
html.dark .hover\:border-emerald-300:hover {
  border-color: rgb(var(--lr-emerald) / 0.4);
}
html.dark .border-indigo-100\/60 {
  border-color: rgb(var(--lr-indigo) / 0.185);
}
html.dark .border-indigo-100\/80 {
  border-color: rgb(var(--lr-indigo) / 0.202);
}
html.dark .border-indigo-100 {
  border-color: rgb(var(--lr-indigo) / 0.22);
}
html.dark .border-indigo-200,
html.dark .hover\:border-indigo-200:hover {
  border-color: rgb(var(--lr-indigo) / 0.3);
}
html.dark .border-purple-100\/60 {
  border-color: rgb(var(--lr-purple) / 0.185);
}
html.dark .border-purple-100 {
  border-color: rgb(var(--lr-purple) / 0.22);
}
html.dark .border-purple-200\/60 {
  border-color: rgb(var(--lr-purple) / 0.252);
}
html.dark .border-purple-200 {
  border-color: rgb(var(--lr-purple) / 0.3);
}
html.dark .border-red-200 {
  border-color: rgb(var(--lr-red) / 0.3);
}
html.dark .border-rose-200\/60 {
  border-color: rgb(var(--lr-rose) / 0.252);
}
html.dark .border-rose-200 {
  border-color: rgb(var(--lr-rose) / 0.3);
}
html.dark .border-white {
  border-color: rgb(var(--lr-surface));
}
html.dark .hover\:text-amber-900:hover,
html.dark .text-amber-900,
html.dark .text-amber-950 {
  color: rgb(var(--lr-amber-200));
}
html.dark .text-amber-800\/90 {
  color: rgb(var(--lr-amber-300) / 0.9);
}
html.dark .group:hover .group-hover\:text-amber-700,
html.dark .hover\:text-amber-700:hover,
html.dark .hover\:text-amber-800:hover,
html.dark .text-amber-700,
html.dark .text-amber-800 {
  color: rgb(var(--lr-amber-300));
}
html.dark .text-amber-500,
html.dark .text-amber-600 {
  color: rgb(var(--lr-amber-400));
}
html.dark .text-blue-900 {
  color: rgb(var(--lr-blue-200));
}
html.dark .group:hover .group-hover\:text-blue-700,
html.dark .hover\:text-blue-700:hover,
html.dark .peer:checked ~ .peer-checked\:text-blue-700,
html.dark .text-blue-700,
html.dark .text-blue-800 {
  color: rgb(var(--lr-blue-300));
}
html.dark .hover\:text-blue-600:hover,
html.dark .text-blue-500,
html.dark .text-blue-600 {
  color: rgb(var(--lr-blue-400));
}
html.dark .text-cyan-900 {
  color: rgb(var(--lr-cyan-200));
}
html.dark .text-cyan-700\/80 {
  color: rgb(var(--lr-cyan-300) / 0.8);
}
html.dark .group:hover .group-hover\:text-cyan-700,
html.dark .hover\:text-cyan-700:hover,
html.dark .text-cyan-700,
html.dark .text-cyan-800 {
  color: rgb(var(--lr-cyan-300));
}
html.dark .text-cyan-600 {
  color: rgb(var(--lr-cyan-400));
}
html.dark .text-emerald-900 {
  color: rgb(var(--lr-emerald-200));
}
html.dark .text-emerald-700\/80 {
  color: rgb(var(--lr-emerald-300) / 0.8);
}
html.dark .group:hover .group-hover\:text-emerald-700,
html.dark .hover\:text-emerald-700:hover,
html.dark .hover\:text-emerald-800:hover,
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
  color: rgb(var(--lr-emerald-300));
}
html.dark .text-emerald-500,
html.dark .text-emerald-600 {
  color: rgb(var(--lr-emerald-400));
}
html.dark .text-indigo-900 {
  color: rgb(var(--lr-indigo-200));
}
html.dark .peer:checked ~ .peer-checked\:text-indigo-700,
html.dark .text-indigo-700,
html.dark .text-indigo-800 {
  color: rgb(var(--lr-indigo-300));
}
html.dark .hover\:text-indigo-600:hover,
html.dark .text-indigo-500,
html.dark .text-indigo-600 {
  color: rgb(var(--lr-indigo-400));
}
html.dark .text-purple-900 {
  color: rgb(var(--lr-purple-200));
}
html.dark .group:hover .group-hover\:text-purple-700,
html.dark .hover\:text-purple-800:hover,
html.dark .text-purple-700,
html.dark .text-purple-800 {
  color: rgb(var(--lr-purple-300));
}
html.dark .text-purple-600 {
  color: rgb(var(--lr-purple-400));
}
html.dark .text-red-900 {
  color: rgb(var(--lr-red-200));
}
html.dark .text-red-700 {
  color: rgb(var(--lr-red-300));
}
html.dark .text-red-600 {
  color: rgb(var(--lr-red-400));
}
html.dark .text-rose-900,
html.dark .text-rose-950 {
  color: rgb(var(--lr-rose-200));
}
html.dark .text-rose-700\/80 {
  color: rgb(var(--lr-rose-300) / 0.8);
}
html.dark .hover\:text-rose-700:hover,
html.dark .peer:checked ~ .peer-checked\:text-rose-700,
html.dark .text-rose-700,
html.dark .text-rose-800 {
  color: rgb(var(--lr-rose-300));
}
html.dark .hover\:text-rose-600:hover,
html.dark .text-rose-500,
html.dark .text-rose-600 {
  color: rgb(var(--lr-rose-400));
}
html.dark .hover\:text-slate-300:hover,
html.dark .text-slate-300 {
  color: rgb(var(--lr-t300));
}
html.dark .placeholder\:text-slate-400::placeholder,
html.dark .text-slate-400 {
  color: rgb(var(--lr-t400));
}
html.dark .text-slate-500 {
  color: rgb(var(--lr-t500));
}
html.dark .hover\:text-slate-600:hover,
html.dark .text-slate-600 {
  color: rgb(var(--lr-t600));
}
html.dark .hover\:text-slate-700:hover,
html.dark .text-slate-700 {
  color: rgb(var(--lr-t700));
}
html.dark .hover\:text-slate-800:hover,
html.dark .peer:checked ~ .peer-checked\:text-slate-800,
html.dark .text-slate-800 {
  color: rgb(var(--lr-t800));
}
html.dark .hover\:text-slate-900:hover,
html.dark .text-slate-900 {
  color: rgb(var(--lr-t900));
}
html.dark .from-slate-50 {
  --tw-gradient-from: rgb(var(--lr-page)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--lr-page) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .to-slate-100\/70 {
  --tw-gradient-to: rgb(var(--lr-s100) / 0.7) var(--tw-gradient-to-position);
}
html.dark .shadow-slate-200\/60 {
  --tw-shadow-color: rgb(0 0 0 / .5); --tw-shadow: var(--tw-shadow-colored);
}
html.dark .shadow-blue-200 {
  --tw-shadow-color: rgb(var(--lr-blue) / 0.25); --tw-shadow: var(--tw-shadow-colored);
}
html.dark .shadow-cyan-200 {
  --tw-shadow-color: rgb(var(--lr-cyan) / 0.25); --tw-shadow: var(--tw-shadow-colored);
}
html.dark .shadow-emerald-200 {
  --tw-shadow-color: rgb(var(--lr-emerald) / 0.25); --tw-shadow: var(--tw-shadow-colored);
}

/* ---- theme toggle button (rendered by theme.js into [data-theme-toggle]); light look lives here too */
[data-theme-toggle] { display: inline-flex; align-items: center; flex: none; }
.lr-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: .75rem; border: 1px solid #e2e8f0; background: transparent; color: #475569; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.lr-theme-toggle:hover { background: #f1f5f9; color: #0f172a; }
.lr-theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
html.dark .lr-theme-toggle { border-color: rgb(var(--lr-b200)); color: rgb(var(--lr-amber-300)); }
html.dark .lr-theme-toggle:hover { background: rgb(var(--lr-s200)); color: rgb(var(--lr-t900)); }

/* ---- page-level classes defined in the templates' own <style> blocks */
html.dark .glassmorphism { background: rgb(var(--lr-surface) / .95); }
html.dark .badge-thng { background-color: rgb(var(--lr-emerald) / .16); color: rgb(var(--lr-emerald-300)); border-color: rgb(var(--lr-emerald) / .35); }
html.dark .badge-cnstwk { background-color: rgb(var(--lr-blue) / .16); color: rgb(var(--lr-blue-300)); border-color: rgb(var(--lr-blue) / .35); }
html.dark .tbl th { background: rgb(var(--lr-s100)); }
html.dark .chip.active { background: rgb(var(--lr-s300)); color: rgb(var(--lr-t900)); border-color: rgb(var(--lr-s300)); }
html.dark .group-head td { background: rgb(var(--lr-indigo) / .16); color: rgb(var(--lr-indigo-300)); }

/* ---- form controls without an explicit bg-* class (UA default would be a mid-grey in dark) */
html.dark :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) { background-color: rgb(var(--lr-page)); color: rgb(var(--lr-t800)); }

/* ---- page background: darker than cards (slate-100 body on portal/login) */
html.dark body.bg-slate-50, html.dark body.bg-slate-100 { background-color: rgb(var(--lr-page)); }

/* ---- exceptions: bright solid fill keeps its dark text */
html.dark .bg-amber-400.text-amber-950 { color: #451a03; }

/* ---- solid fills carrying white text: darkened in dark only so white text reaches AA 4.5:1 (light stays untouched) */
html.dark .bg-emerald-600 { background-color: #047857; }
html.dark .hover\:bg-emerald-700:hover { background-color: #065f46; }
/* same for amber / rose / cyan fills, scoped to white-label buttons only: bare bg-amber-500 / bg-rose-500 are status dots
   and map legend swatches and must keep their colour. Hover rules need the extra classes to out-rank the base override. */
html.dark .bg-amber-500.text-white, html.dark .bg-amber-600.text-white { background-color: #b45309; }  /* white 5.0:1 */
html.dark .bg-amber-500.text-white.hover\:bg-amber-600:hover, html.dark .bg-amber-600.text-white.hover\:bg-amber-700:hover { background-color: #92400e; }  /* white 7.1:1 */
html.dark .bg-rose-500.text-white { background-color: #be123c; }  /* white 6.3:1 */
html.dark .bg-rose-500.text-white.hover\:bg-rose-600:hover, html.dark .bg-rose-500.text-white.hover\:bg-rose-700:hover { background-color: #9f1239; }  /* white 8.3:1 */
html.dark .bg-cyan-600.text-white { background-color: #0e7490; }  /* white 5.4:1 */
html.dark .bg-cyan-600.text-white.hover\:bg-cyan-700:hover { background-color: #155e75; }  /* white 7.5:1 */

/* ---- QA console terminal stays a dark terminal (light text on near-black) */
html.dark #qa-log-terminal .text-slate-300 { color: #cbd5e1; }
html.dark #qa-log-terminal .text-slate-400 { color: #94a3b8; }
html.dark #qa-log-terminal .bg-slate-800 { background-color: #1e293b; }
html.dark #qa-log-terminal .bg-slate-900 { background-color: #0f172a; }
html.dark #qa-log-terminal .hover\:bg-slate-900\/60:hover { background-color: rgb(15 23 42 / .6); }

/* ---- Leaflet (dashboard map, origin map): dark tiles, readable controls/popups */
html.dark .leaflet-container { background: #1b2230; color: rgb(var(--lr-t800)); }
html.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background: rgb(var(--lr-surface)); color: rgb(var(--lr-t800)); border-color: rgb(var(--lr-b200)); }
html.dark .leaflet-container a.leaflet-popup-close-button { color: rgb(var(--lr-t500)); }
html.dark .leaflet-container a.leaflet-popup-close-button:hover { color: rgb(var(--lr-t900)); }
html.dark .leaflet-bar a, html.dark .leaflet-bar a:hover { background-color: rgb(var(--lr-surface)); color: rgb(var(--lr-t700)); border-bottom-color: rgb(var(--lr-b200)); }
html.dark .leaflet-bar a:hover { background-color: rgb(var(--lr-s200)); }
html.dark .leaflet-bar { border-color: rgb(var(--lr-b200)); }
html.dark .leaflet-control-attribution { background: rgb(var(--lr-surface) / .8); color: rgb(var(--lr-t500)); }
html.dark .leaflet-control-attribution a { color: rgb(var(--lr-blue-300)); }
html.dark .lr-popup-title { color: rgb(var(--lr-t900)) !important; }  /* beats the inline style color */
html.dark .lr-popup-sub { color: rgb(var(--lr-t500)) !important; }
}  /* end @media screen */
@media print { [data-theme-toggle] { display: none !important; } }