/* ============================================================================================
   NEONDARK-1 (2026-10-26) — dark mode step 2: Nana's navy + teal neon, app-wide.
   Operator: "the nana dark theme have neon can apply to sedgeos also", "dark mode step 2".
   Plan: C:\a\sedgeos\darkmode\DARKMODE_AUDIT_20261026.md (S1/S2).

   HOW: one token set under html.dark, then the Tailwind dark: surfaces the pages already use
   (dark:bg-slate-900 x2318, dark:bg-slate-800 x2122, dark:border-slate-700/800 x4476 ...) are
   re-pointed at those tokens. `html.dark .dark\:bg-slate-900` (0,2,1) beats Tailwind's own
   `.dark\:bg-slate-900:is(.dark *)` (0,2,0), so no page needs editing and nothing changes in
   light mode. Only COLOURS move - layout, spacing and the light theme are untouched.
   NOT copied from Nana: the 28px backdrop blur (too heavy for the calendars) and her colour ban.
   To switch the whole look off: remove the <link> to this file in App.razor.
   ============================================================================================ */

html.dark {
    --sx-bg:       #0B1A2E;   /* page */
    --sx-bg2:      #0E2038;   /* slate-950 surfaces */
    --sx-surface:  #112642;   /* cards (slate-900) */
    --sx-raised:   #16305A;   /* raised / inputs (slate-800) */
    --sx-raised2:  #1D3B6B;   /* chips, hover (slate-700) */
    --sx-hair:     #1E3A5F;   /* hairlines (border-slate-800) */
    --sx-hair2:    #284A78;   /* stronger borders (border-slate-700) */
    --sx-text:     #F5F7FA;
    --sx-muted:    #9AA8BA;
    --sx-accent:   #0FA3B1;
    --sx-accent-t: #5FD3DC;
    --sx-glow:     0 0 0 .5px rgba(95,211,220,.45), 0 0 22px rgba(15,163,177,.18);
}

/* ── page: deep navy with Nana's two big soft lights behind everything ───────────────────────
   NEONDARK-2 (operator: "other page not like nana got neon glowing light behind"). Same colours,
   sizes and blur as nana-v5.css .nv5::before/::after, but FIXED to the viewport: painted once,
   never re-blurred while scrolling, so the calendars stay fast. */
html.dark { background-color: var(--sx-bg); }
html.dark body { background: transparent; color: var(--sx-text); }
html.dark body::before, html.dark body::after {
    content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(100px);
}
html.dark body::before { width: 700px; height: 600px; left: -120px; top: -160px; background: rgba(15,163,177,.20); }
html.dark body::after  { width: 820px; height: 720px; right: -200px; bottom: -220px; background: rgba(31,78,140,.48); }
@media (prefers-reduced-transparency: reduce) { html.dark body::before, html.dark body::after { display: none; } }
/* the layout root paints the page; let the body's glow show through */
html.dark .min-h-screen.dark\:bg-gray-900 { background-color: transparent; }

/* ── surfaces ─────────────────────────────────────────────────────────────────────────────────
   NEONDARK-2: cards are Nana's see-through glass (rgba(19,41,75,.5)) so the light shows through.
   Anything that FLOATS or STICKS over other content stays solid (rules at the end of this block),
   or text behind it would bleed through. */
html.dark {
    --sx-glass:   rgba(19,41,75,.50);
    --sx-glass2:  rgba(29,59,107,.55);
    --sx-glass0:  rgba(11,26,46,.55);
    --sx-hairline: rgba(201,209,219,.12);
}
html.dark .dark\:bg-slate-950, html.dark .dark\:bg-gray-950 { background-color: var(--sx-glass0); }
html.dark .dark\:bg-slate-900, html.dark .dark\:bg-gray-900 { background-color: var(--sx-glass); }
html.dark .dark\:bg-slate-800, html.dark .dark\:bg-gray-800 { background-color: var(--sx-glass2); }
html.dark .dark\:bg-slate-700, html.dark .dark\:bg-gray-700 { background-color: var(--sx-raised2); }
/* glass cards get Nana's faint light edge */
html.dark .rounded-xl.dark\:bg-slate-900, html.dark .rounded-2xl.dark\:bg-slate-900, html.dark .rounded-3xl.dark\:bg-slate-900,
html.dark .rounded-xl.dark\:bg-gray-900, html.dark .rounded-2xl.dark\:bg-gray-900, html.dark .rounded-3xl.dark\:bg-gray-900 {
    border-color: var(--sx-hairline);
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
/* SOLID for anything floating / sticky / layered (modals, dropdowns, menus, sticky table cells) */
html.dark .fixed .dark\:bg-slate-900, html.dark .fixed.dark\:bg-slate-900,
html.dark .absolute.dark\:bg-slate-900, html.dark .absolute.dark\:bg-slate-800,
html.dark .sticky.dark\:bg-slate-900, html.dark .sticky.dark\:bg-slate-800, html.dark .sticky.dark\:bg-slate-950,
html.dark .fixed .dark\:bg-gray-900, html.dark .fixed.dark\:bg-gray-900,
html.dark .absolute.dark\:bg-gray-800, html.dark .sticky.dark\:bg-gray-900,
html.dark [role="dialog"] .dark\:bg-slate-900, html.dark [role="menu"].dark\:bg-slate-800,
html.dark .context-menu, html.dark .sticky-col { background-color: var(--sx-surface); }
html.dark .fixed .dark\:bg-slate-800, html.dark .fixed.dark\:bg-slate-800 { background-color: var(--sx-raised); }
html.dark .dark\:bg-slate-900\/80 { background-color: rgba(17,38,66,.80); }
html.dark .dark\:bg-slate-900\/50 { background-color: rgba(17,38,66,.50); }
html.dark .dark\:bg-slate-900\/40 { background-color: rgba(17,38,66,.40); }
html.dark .dark\:bg-slate-900\/20 { background-color: rgba(17,38,66,.20); }
html.dark .dark\:bg-slate-800\/60 { background-color: rgba(22,48,90,.60); }
html.dark .dark\:bg-slate-800\/50 { background-color: rgba(22,48,90,.50); }
html.dark .dark\:bg-slate-800\/40 { background-color: rgba(22,48,90,.40); }
html.dark .dark\:bg-slate-800\/30 { background-color: rgba(22,48,90,.30); }
html.dark .dark\:bg-slate-700\/50 { background-color: rgba(29,59,107,.50); }

/* ── borders ──────────────────────────────────────────────────────────────────────────────── */
html.dark .dark\:border-slate-800, html.dark .dark\:border-gray-800 { border-color: var(--sx-hair); }
html.dark .dark\:border-slate-700, html.dark .dark\:border-gray-700 { border-color: var(--sx-hair2); }
html.dark .dark\:border-slate-800\/50 { border-color: rgba(30,58,95,.5); }
html.dark .dark\:border-slate-700\/50 { border-color: rgba(40,74,120,.5); }
html.dark .dark\:divide-slate-800 > * + * { border-color: var(--sx-hair); }
html.dark .dark\:divide-slate-700 > * + * { border-color: var(--sx-hair2); }

/* ── the DARKNET-1 safety net (custom-styles.css) moves to the same palette ──────────────── */
html.dark .bg-white:not([class*="dark:bg-"]),
html.dark .bg-slate-50:not([class*="dark:bg-"]),
html.dark .bg-gray-50:not([class*="dark:bg-"])   { background-color: var(--sx-surface); }
html.dark .bg-slate-100:not([class*="dark:bg-"]),
html.dark .bg-gray-100:not([class*="dark:bg-"])  { background-color: var(--sx-raised); }
html.dark .border-slate-100:not([class*="dark:border-"]),
html.dark .border-gray-100:not([class*="dark:border-"]),
html.dark .border-slate-200:not([class*="dark:border-"]),
html.dark .border-gray-200:not([class*="dark:border-"]),
html.dark .border-slate-300:not([class*="dark:border-"]),
html.dark .border-gray-300:not([class*="dark:border-"]) { border-color: var(--sx-hair); }
html.dark table:not([class*="dark:"]) > thead:not([class*="dark:bg-"]) { background-color: var(--sx-raised); }
html.dark table:not([class*="dark:"]) th:not([class*="dark:"]),
html.dark table:not([class*="dark:"]) td:not([class*="dark:"]) { border-color: var(--sx-hair); }

/* ── side menu: teal bar + glow on the active item (as Nana's rail) ──────────────────────── */
html.dark .nav-link:hover { background-color: rgba(95,211,220,.08); color: var(--sx-text); }
html.dark .nav-link.active {
    background-color: rgba(15,163,177,.14);
    color: var(--sx-accent-t);
    box-shadow: inset 3px 0 0 var(--sx-accent), var(--sx-glow);
}

/* ── fields: teal focus ring ──────────────────────────────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--sx-accent-t);
    box-shadow: 0 0 0 3px rgba(95,211,220,.18);
    outline: none;
}

/* ── print: always black on white, whatever the screen theme (S5) ───────────────────────── */
@media print {
    html.dark body { background: #fff !important; color: #000 !important; }
    html.dark * { color: #000 !important; background: transparent !important; box-shadow: none !important; border-color: #ccc !important; }
}


/* ============================================================================================
   NEONDARK-4 (2026-10-27) - fixes from C:\a\sedgeos\darkmode\NEON_PAGE_AUDIT_20261027.md section 3:
   G1 glow through, G2/G3 floating + sticky + frozen columns SOLID (the glass regression), G4-G9 the rest
   of the palette, G11-G15/G17 text, options, flatpickr, loading flash, quick menu, WhatsApp pages.
   G10 (pastel tints -> navy) is held back for a staged check, as the audit advises.
   ============================================================================================ */

/* G1 - let the glow through (N1) */
html.dark body.dark\:bg-gray-900,
html.dark .min-h-screen.dark\:bg-gray-900 > .dark\:bg-gray-900,
html.dark .min-h-screen.dark\:bg-slate-950 { background-color: transparent; }

/* G2 - floating / inside a fixed overlay = SOLID (N2) */
html.dark .fixed.dark\:bg-gray-800, html.dark .fixed .dark\:bg-gray-800,
html.dark .fixed.dark\:bg-slate-950, html.dark .fixed .dark\:bg-slate-950, html.dark .fixed .dark\:bg-gray-950,
html.dark .absolute.dark\:bg-gray-900, html.dark .absolute.dark\:bg-slate-950,
html.dark .sticky.dark\:bg-gray-800, html.dark .sticky.dark\:bg-gray-950 { background-color: var(--sx-surface); }

/* G3a - frozen calendar column beats opacity variants (N3) */
html.dark td.sticky-col, html.dark th.sticky-col { background-color: var(--sx-surface); }
html.dark th.property-header-cell { background-color: var(--sx-raised); }
/* G3b - CSS-sticky calendar footers (N4); body + :not() outranks the MultiCalendar (0,3,2) rule */
html.dark body .cal-occ-foot td:not(.sx-x), html.dark body .cal-occ-foot th:not(.sx-x) { background-color: var(--sx-surface); }
html.dark body .cal-occ-foot td.dark\:bg-blue-900\/30 { background-image: linear-gradient(rgba(30,58,138,.30), rgba(30,58,138,.30)); }
/* G3c - sticky with a translucent dark bg and no blur = solid */
html.dark .sticky[class*="dark:bg-slate-800/"]:not([class*="backdrop-blur"]),
html.dark .sticky[class*="dark:bg-slate-900/"]:not([class*="backdrop-blur"]),
html.dark .sticky[class*="dark:bg-slate-950/"]:not([class*="backdrop-blur"]) { background-color: var(--sx-raised); }

/* G4 - remaining opacity variants on the navy scale (N5) */
html.dark .dark\:bg-slate-950\/95 { background-color: rgba(11,26,46,.95); }
html.dark .dark\:bg-slate-950\/80 { background-color: rgba(11,26,46,.80); }
html.dark .dark\:bg-slate-950\/50 { background-color: rgba(11,26,46,.50); }
html.dark .dark\:bg-slate-950\/20 { background-color: rgba(11,26,46,.20); }
html.dark .dark\:bg-slate-950\/10 { background-color: rgba(11,26,46,.10); }
html.dark .dark\:bg-slate-900\/95 { background-color: rgba(17,38,66,.95); }
html.dark .dark\:bg-slate-900\/90 { background-color: rgba(17,38,66,.90); }
html.dark .dark\:bg-slate-900\/60 { background-color: rgba(17,38,66,.60); }
html.dark .dark\:bg-slate-900\/30 { background-color: rgba(17,38,66,.30); }
html.dark .dark\:bg-slate-900\/25 { background-color: rgba(17,38,66,.25); }
html.dark .dark\:bg-slate-900\/10 { background-color: rgba(17,38,66,.10); }
html.dark .dark\:bg-slate-900\/5  { background-color: rgba(17,38,66,.05); }
html.dark .dark\:bg-slate-800\/95 { background-color: rgba(22,48,90,.95); }
html.dark .dark\:bg-slate-800\/90 { background-color: rgba(22,48,90,.90); }
html.dark .dark\:bg-slate-800\/80 { background-color: rgba(22,48,90,.80); }
html.dark .dark\:bg-slate-800\/70 { background-color: rgba(22,48,90,.70); }
html.dark .dark\:bg-slate-800\/20 { background-color: rgba(22,48,90,.20); }
html.dark .dark\:bg-slate-800\/10 { background-color: rgba(22,48,90,.10); }
html.dark .dark\:bg-slate-800\/5  { background-color: rgba(22,48,90,.05); }
html.dark .dark\:bg-slate-700\/30 { background-color: rgba(29,59,107,.30); }
html.dark .dark\:bg-gray-700\/50  { background-color: rgba(29,59,107,.50); }
html.dark .dark\:bg-gray-800\/50  { background-color: rgba(22,48,90,.50); }
html.dark .dark\:bg-gray-900\/20  { background-color: rgba(17,38,66,.20); }
html.dark .dark\:bg-slate-600, html.dark .dark\:bg-gray-600 { background-color: #2A4F86; }

/* G5 - hovers */
html.dark .dark\:hover\:bg-slate-900:hover { background-color: var(--sx-surface); }
html.dark .dark\:hover\:bg-slate-800:hover { background-color: var(--sx-raised); }
html.dark .dark\:hover\:bg-slate-700:hover, html.dark .dark\:hover\:bg-gray-700:hover { background-color: var(--sx-raised2); }
html.dark .dark\:hover\:bg-slate-600:hover, html.dark .dark\:hover\:bg-gray-600:hover { background-color: #2A4F86; }
html.dark .dark\:hover\:bg-slate-800\/60:hover { background-color: rgba(22,48,90,.60); }
html.dark .dark\:hover\:bg-slate-800\/50:hover { background-color: rgba(22,48,90,.50); }
html.dark .dark\:hover\:bg-slate-800\/40:hover { background-color: rgba(22,48,90,.40); }
html.dark .dark\:hover\:bg-slate-800\/30:hover { background-color: rgba(22,48,90,.30); }
html.dark .dark\:hover\:bg-slate-800\/20:hover { background-color: rgba(22,48,90,.20); }
html.dark .dark\:hover\:bg-slate-700\/50:hover { background-color: rgba(29,59,107,.50); }
html.dark .dark\:hover\:bg-slate-700\/30:hover { background-color: rgba(29,59,107,.30); }

/* G6 - borders / dividers */
html.dark .dark\:border-slate-600, html.dark .dark\:border-gray-600 { border-color: #34598C; }
html.dark .dark\:border-slate-900 { border-color: var(--sx-bg2); }
html.dark .dark\:divide-gray-700 > * + * { border-color: var(--sx-hair2); }

/* G7 - slate gradients -> navy */
html.dark .dark\:from-slate-900, html.dark .dark\:from-gray-900 { --tw-gradient-from: #112642 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 38 66 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .dark\:from-slate-800 { --tw-gradient-from: #16305A var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 48 90 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .dark\:from-slate-700 { --tw-gradient-from: #1D3B6B var(--tw-gradient-from-position); --tw-gradient-to: rgb(29 59 107 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .dark\:from-slate-800\/80 { --tw-gradient-from: rgb(22 48 90 / .8) var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 48 90 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .dark\:to-slate-900 { --tw-gradient-to: #112642 var(--tw-gradient-to-position); }
html.dark .dark\:to-slate-800 { --tw-gradient-to: #16305A var(--tw-gradient-to-position); }
html.dark .dark\:to-slate-800\/50 { --tw-gradient-to: rgb(22 48 90 / .5) var(--tw-gradient-to-position); }
html.dark .dark\:to-slate-800\/40 { --tw-gradient-to: rgb(22 48 90 / .4) var(--tw-gradient-to-position); }

/* G8 - hard-coded darks */
html.dark .dark\:bg-black { background-color: #081426; box-shadow: var(--sx-glow); }
html.dark .dark\:bg-gray-750 { background-color: var(--sx-raised); }
html.dark .dark\:bg-\[\#0d1117\] { background-color: var(--sx-bg2); }

/* G9 - light surfaces DARKNET does not catch */
html.dark .bg-white\/95:not([class*="dark:bg-"]), html.dark .bg-white\/90:not([class*="dark:bg-"]),
html.dark .bg-white\/80:not([class*="dark:bg-"]), html.dark .bg-white\/70:not([class*="dark:bg-"]),
html.dark .bg-white\/60:not([class*="dark:bg-"]), html.dark .bg-white\/50:not([class*="dark:bg-"]) { background-color: rgba(17,38,66,.92); }
html.dark .bg-slate-50\/50:not([class*="dark:bg-"]), html.dark .bg-gray-50\/50:not([class*="dark:bg-"]) { background-color: rgba(22,48,90,.35); }
html.dark .bg-slate-200:not([class*="dark:bg-"]), html.dark .bg-gray-200:not([class*="dark:bg-"]),
html.dark .bg-slate-300:not([class*="dark:bg-"]), html.dark .bg-gray-300:not([class*="dark:bg-"]) { background-color: var(--sx-raised2); }

/* G11 - grey text too dim on navy */
html.dark .dark\:text-slate-500, html.dark .dark\:text-gray-500 { color: #8796AC; }
html.dark .dark\:text-slate-600, html.dark .dark\:text-gray-600 { color: #7D8DA3; }
html.dark .dark\:placeholder-slate-500::placeholder { color: #7D8DA3; }
/* G11b - unvarianted mid grey (extends DARKNET rule 3) */
html.dark .text-slate-500:not([class*="dark:text-"]):not([class*="bg-"]),
html.dark .text-gray-500:not([class*="dark:text-"]):not([class*="bg-"]) { color: #8796AC; }
/* ratios on card: #8796AC 4.96 (was 3.13), #7D8DA3 4.41 (was 1.97) */

/* G12 - native option popups (N7) */
html.dark select option, html.dark select optgroup { background-color: var(--sx-raised); color: var(--sx-text); }

/* G13 - flatpickr (+ leaflet chrome; tiles stay light) */
html.dark .flatpickr-calendar { background: var(--sx-surface); border: 1px solid var(--sx-hair2); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
html.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--sx-surface); }
html.dark .flatpickr-calendar.arrowBottom:after { border-top-color: var(--sx-surface); }
html.dark .flatpickr-months .flatpickr-month, html.dark .flatpickr-current-month,
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months, html.dark .flatpickr-weekdays,
html.dark span.flatpickr-weekday { background: transparent; color: var(--sx-text); fill: var(--sx-text); }
html.dark .flatpickr-months .flatpickr-prev-month svg, html.dark .flatpickr-months .flatpickr-next-month svg { fill: var(--sx-text); }
html.dark .flatpickr-day, html.dark .flatpickr-monthSelect-month { color: var(--sx-text); }
html.dark .flatpickr-day:hover, html.dark .flatpickr-day:focus, html.dark .flatpickr-monthSelect-month:hover { background: var(--sx-raised2); border-color: var(--sx-raised2); }
html.dark .flatpickr-day.today { border-color: var(--sx-accent-t); }
html.dark .flatpickr-day.selected, html.dark .flatpickr-day.startRange, html.dark .flatpickr-day.endRange,
html.dark .flatpickr-monthSelect-month.selected { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
html.dark .flatpickr-day.inRange { background: rgba(15,163,177,.20); border-color: transparent; box-shadow: -5px 0 0 rgba(15,163,177,.20), 5px 0 0 rgba(15,163,177,.20); }
html.dark .flatpickr-day.prevMonthDay, html.dark .flatpickr-day.nextMonthDay, html.dark .flatpickr-day.flatpickr-disabled { color: rgba(154,168,186,.45); }
html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background: var(--sx-surface); color: var(--sx-text); }
html.dark .leaflet-container .leaflet-control-attribution { background: rgba(11,26,46,.7); color: var(--sx-muted); }

/* G14 - no white flash while Blazor boots (inline style needs !important) */
html.dark #app-loading { background: var(--sx-bg) !important; }

/* G15 - MultiCalendar JS quick menu (inline styles from multicalendar-interactions.js) */
html.dark .mcal-quickmenu { background: var(--sx-surface) !important; border-color: var(--sx-hair2) !important; }
html.dark .mcal-quickmenu > div { color: var(--sx-text) !important; }
html.dark .mcal-quickmenu > div:first-child { color: var(--sx-muted) !important; }
html.dark .mcal-quickmenu > div:hover { background: var(--sx-raised2) !important; }
html.dark .mcal-quickmenu > div[style*="#dc2626"] { color: #F87171 !important; }
html.dark .mcal-quickmenu > div[style*="height:1px"] { background: var(--sx-hair) !important; }

/* G17 - WhatsApp page classes (their page style blocks are (0,1,0); these are (0,2,1)) */
html.dark :is(.bc-page,.wa-tpl-page,.ar-page,.nn-page,.nk-page,.wa-inbox-shell) { background: transparent; color: var(--sx-text); }
html.dark :is(.bc-card,.wa-card,.wa-tpl-card,.wa-form-card,.ar-card,.nn-card,.nk-card,.wa-conv-list,.wa-thread-header,.wa-thread-input,.nk-save)
    { background: var(--sx-surface); border-color: var(--sx-hair); color: var(--sx-text); }
html.dark :is(.bc-h,.bc-label,.wa-value,.ar-label,.nn-label,.nk-label,.nk-list,.wa-conv-name) { color: var(--sx-text); }
html.dark :is(.wa-conv-item:hover,.wa-tpl-body,.nn-num,.nn-soon,.bc-btn-2,.wa-pill-paused,.nk-bar,.nk-host,.ar-pill-off) { background: var(--sx-raised); color: var(--sx-text); }
html.dark .wa-conv-item.active { background: rgba(15,163,177,.14); }
html.dark :is(.wa-thread,.nn-chat) { background: var(--sx-bg2); }
html.dark :is(.wa-msg-in,.nn-guest) { background: var(--sx-raised); color: var(--sx-text); }
html.dark .wa-msg-out { background: #0F4C46; color: #E6FFFA; }
html.dark :is(.wa-pill-green,.nk-live,.ar-pill-on,.nn-done,.bc-ok) { background: rgba(16,185,129,.18); color: #6EE7B7; }
html.dark :is(.wa-pill-yellow,.wa-pill-pending,.nn-held,.nk-warn,.nk-note,.bc-warn,.nn-warn) { background: rgba(245,158,11,.16); color: #FCD34D; }
html.dark :is(.wa-pill-red,.wa-pill-rejected,.nn-attn,.nk-err,.nn-err,.bc-bad,.ar-btn-danger,.nn-btn-danger,.wa-msg-error) { background: rgba(225,29,72,.16); color: #FDA4AF; }
html.dark :is(.nn-todo,.ar-scope-all,.nk-ver,.ar-scope-pill,.nn-scope) { background: rgba(59,130,246,.16); color: #93C5FD; }
html.dark :is(.ar-btn-secondary,.nn-btn-secondary,.nk-btn-secondary,.wa-disconnect-btn,.wa-cat-btn) { background: var(--sx-raised); color: var(--sx-text); border-color: var(--sx-hair2); }
/* NB: inside .nv5 (Nana shell) nana-v5.css !important rules still win for the classes it already styles - intended. */

/* N6 - the DARKNET-1 safety net TEXT rules + native control chrome, so the four portals (which do not link
   custom-styles.css) get light text too. Same guards: never overrides an element that has its own dark: class. */
html.dark { color-scheme: dark; }
html.dark .text-slate-900:not([class*="dark:text-"]), html.dark .text-gray-900:not([class*="dark:text-"]),
html.dark .text-slate-800:not([class*="dark:text-"]), html.dark .text-gray-800:not([class*="dark:text-"]) { color: #E7EAEF; }
html.dark .text-slate-700:not([class*="dark:text-"]), html.dark .text-gray-700:not([class*="dark:text-"]) { color: #C6CCD6; }
html.dark .text-slate-600:not([class*="dark:text-"]), html.dark .text-gray-600:not([class*="dark:text-"]) { color: #A8B0BC; }
html.dark ::placeholder { color: #7C8593; opacity: 1; }