/* HRMindMap OS — Synapse Enterprise Master Design System */
/* Matched 100% with d:\My Agents\TA\frontend\ta-pwa\src\index.css brand sheet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --f-bg:            #F4F8FE;
  --f-surf:          #FFFFFF;
  --f-surface:       #FFFFFF;
  --f-surf2:         #EAF2FD;
  --f-border:        #D4E3F7;
  --f-primary:       #0A7CFF;
  --f-primary-light: #4DA6FF;
  --f-primary-dark:  #0B4FC0;
  --f-accent:        #FF7A00;
  --f-accent-light:  #FFAE00;
  --f-accent-dark:   #E05A00;
  --f-coral:         #F2601A;
  --f-cream:         #FFF6EC;
  --f-sky:           #00BFFF;
  --f-text-1:        #0D2440;
  --f-text-2:        #1E293B;
  --f-success:       #10B981;
  --f-error:         #E5484D;
  
  --font-heading: 'Outfit', 'Poppins', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Google Translate Protection */
.material-symbols-outlined,
[class*="material-symbols"],
.notranslate,
img,
svg,
code,
pre {
  -webkit-translate: no !important;
  translate: no !important;
}

font {
  background-color: transparent !important;
  box-shadow: none !important;
  vertical-align: baseline !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  display: inline !important;
}

html, body {
  top: 0px !important;
  position: static !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-balloon-frame,
body > .skiptranslate,
.goog-tooltip {
  display: none !important;
}

/* Official Logo Protection */
img[src*="Logo.png"] {
  filter: none !important;
}

/* Master Headlines Hierarchy */
.font-headline, h1, h2, h3, h4, h5, h6, .syne, .font-display, [class*="font-headline"], [class*="font-display"] {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

main {
  padding-top: 8rem !important;
  position: relative;
  z-index: 1;
}

section, footer, header {
  position: relative;
  z-index: 1;
}

h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important;
  line-height: 1.15 !important;
}

h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem) !important;
  line-height: 1.2 !important;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
  line-height: 1.3 !important;
}

h4 {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  line-height: 1.35 !important;
}

/* ============================================================
   ANIMATED DYNAMIC LOGO WAVE MOTION OVERLAY (ALL PAGES)
   ============================================================ */
.fluid-wave-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.brand-wave-svg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.wave-blue-bottom-left {
  bottom: -5%;
  left: -5%;
  width: min(65vw, 750px);
  height: auto;
  filter: drop-shadow(0 15px 35px rgba(10, 124, 255, 0.40));
  animation: floatWaveBlue 14s ease-in-out infinite alternate;
}

.wave-orange-top-right {
  top: -5%;
  right: -5%;
  width: min(60vw, 700px);
  height: auto;
  filter: drop-shadow(0 15px 35px rgba(255, 122, 0, 0.40));
  animation: floatWaveOrange 16s ease-in-out infinite alternate-reverse;
}

.wave-ribbon-1 {
  animation: pulseRibbon1 8s ease-in-out infinite alternate;
}

.wave-ribbon-2 {
  animation: pulseRibbon2 10s ease-in-out infinite alternate-reverse;
}

.wave-center-glow {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle at center, rgba(10, 124, 255, 0.22) 0%, rgba(255, 122, 0, 0.18) 45%, transparent 70%);
  filter: blur(60px);
  animation: floatWaveCenter 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.wave-orb-blue {
  position: absolute;
  bottom: 15%;
  left: 10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(10, 124, 255, 0.35) 0%, transparent 70%);
  filter: blur(55px);
  animation: orbPulseBlue 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.wave-orb-orange {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.32) 0%, transparent 70%);
  filter: blur(55px);
  animation: orbPulseOrange 11s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes floatWaveBlue {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(55px, -60px) scale(1.14) rotate(7deg); }
}

@keyframes floatWaveOrange {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(-60px, 55px) scale(1.16) rotate(-7deg); }
}

@keyframes floatWaveCenter {
  0% { transform: translate(-35px, -25px) scale(0.92); }
  100% { transform: translate(35px, 35px) scale(1.12); }
}

@keyframes pulseRibbon1 {
  0% { opacity: 0.80; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes pulseRibbon2 {
  0% { opacity: 0.70; transform: scale(1); }
  100% { opacity: 0.95; transform: scale(1.07); }
}

@keyframes orbPulseBlue {
  0% { transform: scale(0.88); opacity: 0.65; }
  100% { transform: scale(1.22); opacity: 0.95; }
}

@keyframes orbPulseOrange {
  0% { transform: scale(1.15); opacity: 0.55; }
  100% { transform: scale(0.88); opacity: 0.90; }
}

/* ============================================================
   1. DAY MODE (☀️ LIGHT THEME / DEFAULT)
   ============================================================ */
html:not(.dark) body,
html.light-theme body,
body.light-theme {
  background-color: #F4F8FE !important;
  color: #0D2440 !important;
}

/* Section Backgrounds - Removed to allow full wave visibility */

/* Day Mode Headings (excluding explicit dark backgrounds) */
html:not(.dark) body:not(.dark-theme) main h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main strong {
  color: #0D2440 !important;
}

/* Day Mode Body Copy */
html:not(.dark) body:not(.dark-theme) main p,
html:not(.dark) body:not(.dark-theme) main li,
html:not(.dark) body:not(.dark-theme) main td {
  color: #1E293B !important;
}

/* Day Mode Subtext */
html:not(.dark) body:not(.dark-theme) main .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .text-slate-300 {
  color: #475569 !important;
}

/* Day Mode Cards & Containers */
html:not(.dark) body:not(.dark-theme) .glass-card,
html:not(.dark) body:not(.dark-theme) main section > div.glass-card,
html:not(.dark) body:not(.dark-theme) .glass:not(.force-dark),
html:not(.dark) body:not(.dark-theme) .glass-panel:not(.force-dark),
html:not(.dark) body:not(.dark-theme) .card:not(.force-dark),
html:not(.dark) body:not(.dark-theme) .book-card:not(.force-dark) {
  background: #FFFFFF !important;
  border: 1px solid #D4E3F7 !important;
  box-shadow: 0 10px 30px rgba(10, 124, 255, 0.08) !important;
  color: #0D2440 !important;
  transition: all 0.3s ease !important;
}

html:not(.dark) body:not(.dark-theme) a.glass-card,
html:not(.dark) body:not(.dark-theme) button.glass-card {
  cursor: pointer;
}
html:not(.dark) body:not(.dark-theme) a.glass-card:hover,
html:not(.dark) body:not(.dark-theme) button.glass-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(10, 124, 255, 0.15) !important;
  border-color: #0A7CFF !important;
}

html:not(.dark) body:not(.dark-theme) .glass-card-orange {
  background: #FFFFFF !important;
  border: 1px solid #FFE4CC !important;
  box-shadow: 0 10px 30px rgba(255, 122, 0, 0.08) !important;
  color: #0D2440 !important;
  transition: all 0.3s ease !important;
}
html:not(.dark) body:not(.dark-theme) a.glass-card-orange,
html:not(.dark) body:not(.dark-theme) button.glass-card-orange {
  cursor: pointer;
}
html:not(.dark) body:not(.dark-theme) a.glass-card-orange:hover,
html:not(.dark) body:not(.dark-theme) button.glass-card-orange:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(255, 122, 0, 0.15) !important;
  border-color: #FF7A00 !important;
}

html:not(.dark) body:not(.dark-theme) .glass-card h1,
html:not(.dark) body:not(.dark-theme) .glass-card h2,
html:not(.dark) body:not(.dark-theme) .glass-card h3,
html:not(.dark) body:not(.dark-theme) .glass-card h4,
html:not(.dark) body:not(.dark-theme) .glass-card h5,
html:not(.dark) body:not(.dark-theme) .glass-card h6,
html:not(.dark) body:not(.dark-theme) .glass-card strong,
html:not(.dark) body:not(.dark-theme) .glass-card .font-bold {
  color: #0D2440 !important;
}

html:not(.dark) body:not(.dark-theme) .glass-card p,
html:not(.dark) body:not(.dark-theme) .glass-card li,
html:not(.dark) body:not(.dark-theme) .glass-card span:not(.badge-pill):not(.badge-pill-orange):not(.btn-pill-gradient) {
  color: #1E293B !important;
}

html:not(.dark) body:not(.dark-theme) .glass-card .text-slate-400,
html:not(.dark) body:not(.dark-theme) .glass-card .text-slate-500,
html:not(.dark) body:not(.dark-theme) .glass-card .text-slate-300 {
  color: #475569 !important;
}

/* Day Mode Inner Item Cards (e.g., Section 4 ERP cards, Fleet Swarm items, Navigator cards) */
html:not(.dark) body:not(.dark-theme) .bg-white\/5,
html:not(.dark) body:not(.dark-theme) [class*="bg-white/5"],
html:not(.dark) body:not(.dark-theme) .agent-item {
  background-color: #FFFFFF !important;
  border: 1px solid #D4E3F7 !important;
  box-shadow: 0 4px 15px rgba(10, 124, 255, 0.05) !important;
  color: #0D2440 !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

html:not(.dark) body:not(.dark-theme) .agent-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(10, 124, 255, 0.15) !important;
  border-color: #0A7CFF !important;
}

html:not(.dark) body:not(.dark-theme) .bg-white\/5 .text-white,
html:not(.dark) body:not(.dark-theme) [class*="bg-white/5"] .text-white,
html:not(.dark) body:not(.dark-theme) .agent-item .text-white {
  color: #0D2440 !important;
}

html:not(.dark) body:not(.dark-theme) .bg-white\/5 .text-slate-400,
html:not(.dark) body:not(.dark-theme) [class*="bg-white/5"] .text-slate-400,
html:not(.dark) body:not(.dark-theme) .agent-item .text-slate-400,
html:not(.dark) body:not(.dark-theme) .bg-white\/5 .text-slate-200,
html:not(.dark) body:not(.dark-theme) [class*="bg-white/5"] .text-slate-200,
html:not(.dark) body:not(.dark-theme) .agent-item .text-slate-200 {
  color: #475569 !important;
}

/* Day Mode Outline Button */
html:not(.dark) body:not(.dark-theme) .btn-pill-outline {
  border: 1px solid #D4E3F7 !important;
  background: #FFFFFF !important;
  color: #0D2440 !important;
}

html:not(.dark) body:not(.dark-theme) .btn-pill-outline:hover {
  background: #EAF2FD !important;
  border-color: #0A7CFF !important;
  color: #0A7CFF !important;
}


/* ============================================================
   2. MOON MODE (🌙 DARK THEME / NIGHT MODE)
   ============================================================ */
html.dark body,
html.dark,
body.dark-theme,
html.dark-theme body {
  background-color: #060E1A !important;
  color: #FFFFFF !important;
}

/* Moon Mode Section Backdrops - Removed to allow full wave visibility */

/* Moon Mode Headings */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark .syne, html.dark strong,
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6, body.dark-theme .syne, body.dark-theme strong,
html.dark [class*="bg-[#0b172a]" i] h1, html.dark [class*="bg-[#060e1a]" i] h1,
html.dark [class*="bg-[#0b172a]" i] h2, html.dark [class*="bg-[#060e1a]" i] h2,
html.dark [class*="bg-[#0b172a]" i] h3, html.dark [class*="bg-[#060e1a]" i] h3,
html.dark [class*="bg-[#0b172a]" i] h4, html.dark [class*="bg-[#060e1a]" i] h4 {
  color: #FFFFFF !important;
}

/* Moon Mode Body Copy */
html.dark p, html.dark li, html.dark td,
body.dark-theme p, body.dark-theme li, body.dark-theme td {
  color: #E2E8F0 !important;
}

/* Moon Mode Subtext */
html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-slate-300,
body.dark-theme .text-slate-400, body.dark-theme .text-slate-500, body.dark-theme .text-slate-300 {
  color: #CBD5E1 !important;
}

/* Moon Mode Cards & Glass Containers */
html.dark .glass-card,
body.dark-theme .glass-card {
  background: rgba(11, 23, 42, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

html.dark a.glass-card, html.dark button.glass-card,
body.dark-theme a.glass-card, body.dark-theme button.glass-card {
  cursor: pointer;
}
html.dark a.glass-card:hover, html.dark button.glass-card:hover,
body.dark-theme a.glass-card:hover, body.dark-theme button.glass-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(10, 124, 255, 0.20) !important;
  border-color: rgba(10, 124, 255, 0.5) !important;
}

html.dark .glass-card-orange,
body.dark-theme .glass-card-orange {
  background: rgba(26, 12, 0, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 122, 0, 0.15) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}
html.dark a.glass-card-orange, html.dark button.glass-card-orange,
body.dark-theme a.glass-card-orange, body.dark-theme button.glass-card-orange {
  cursor: pointer;
}
html.dark a.glass-card-orange:hover, html.dark button.glass-card-orange:hover,
body.dark-theme a.glass-card-orange:hover, body.dark-theme button.glass-card-orange:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(255, 122, 0, 0.20) !important;
  border-color: rgba(255, 122, 0, 0.5) !important;
}

html.dark .glass-card h1, html.dark .glass-card h2, html.dark .glass-card h3, html.dark .glass-card h4, html.dark .glass-card h5, html.dark .glass-card h6, html.dark .glass-card strong, html.dark .glass-card .font-bold,
body.dark-theme .glass-card h1, body.dark-theme .glass-card h2, body.dark-theme .glass-card h3, body.dark-theme .glass-card h4, body.dark-theme .glass-card h5, body.dark-theme .glass-card h6, body.dark-theme .glass-card strong, body.dark-theme .glass-card .font-bold {
  color: #FFFFFF !important;
}

html.dark .glass-card p, html.dark .glass-card li,
body.dark-theme .glass-card p, body.dark-theme .glass-card li {
  color: #E2E8F0 !important;
}

html.dark .glass-card .text-slate-400, html.dark .glass-card .text-slate-500, html.dark .glass-card .text-slate-300,
body.dark-theme .glass-card .text-slate-400, body.dark-theme .glass-card .text-slate-500, body.dark-theme .glass-card .text-slate-300 {
  color: #CBD5E1 !important;
}

/* Moon Mode Inner Item Cards */
html.dark .bg-white\/5, html.dark [class*="bg-white/5"], html.dark .agent-item,
body.dark-theme .bg-white\/5, body.dark-theme [class*="bg-white/5"], body.dark-theme .agent-item {
  background-color: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

html.dark .agent-item:hover, body.dark-theme .agent-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark .bg-white\/5 .text-white, html.dark [class*="bg-white/5"] .text-white, html.dark .agent-item .text-white,
body.dark-theme .bg-white\/5 .text-white, body.dark-theme [class*="bg-white/5"] .text-white, body.dark-theme .agent-item .text-white {
  color: #FFFFFF !important;
}

html.dark .bg-white\/5 .text-slate-400, html.dark [class*="bg-white/5"] .text-slate-400, html.dark .agent-item .text-slate-400,
body.dark-theme .bg-white\/5 .text-slate-400, body.dark-theme [class*="bg-white/5"] .text-slate-400, body.dark-theme .agent-item .text-slate-400 {
  color: #CBD5E1 !important;
}

/* Moon Mode Outline Button */
html.dark .btn-pill-outline,
body.dark-theme .btn-pill-outline {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}

html.dark .btn-pill-outline:hover,
body.dark-theme .btn-pill-outline:hover {
  background: rgba(10, 124, 255, 0.20) !important;
  border-color: #0A7CFF !important;
  color: #FFFFFF !important;
}


/* ============================================================
   3. SHARED UI UTILITIES, GRADIENTS, BUTTONS & HEADER / FOOTER
   ============================================================ */

/* Brand Gradients */
.text-gradient-brand,
[class*="text-gradient-brand"] {
  background: linear-gradient(135deg, #0A7CFF 0%, #FF7A00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.text-gradient-blue,
[class*="text-gradient-blue"] {
  background: linear-gradient(135deg, #0A7CFF 0%, #0B4FC0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.text-gradient-orange,
[class*="text-gradient-orange"] {
  background: linear-gradient(135deg, #FF7A00 0%, #E05A00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Synapse Buttons & Badges */
.btn-pill-gradient {
  background: linear-gradient(135deg, #0A7CFF 0%, #FF7A00 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(10, 124, 255, 0.30);
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.btn-pill-gradient:hover {
  box-shadow: 0 6px 25px rgba(255, 122, 0, 0.40);
  transform: translateY(-2px) scale(1.02);
  color: #FFFFFF !important;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  background: rgba(10, 124, 255, 0.18) !important;
  border: 1px solid rgba(10, 124, 255, 0.40) !important;
  color: #0A7CFF !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-pill span {
  color: #0A7CFF !important;
}

.badge-pill-orange {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  background: rgba(255, 122, 0, 0.18) !important;
  border: 1px solid rgba(255, 122, 0, 0.40) !important;
  color: #FF7A00 !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-pill-orange span {
  color: #FF7A00 !important;
}

/* Global Executive Navbar & Footer (Always Executive Dark Navy) */
header#global-header,
footer#global-footer {
  background-color: #0B172A !important;
  color: #FFFFFF !important;
}

header#global-header a,
footer#global-footer a {
  color: #E2E8F0;
}

header#global-header a:hover,
footer#global-footer a:hover,
nav a:hover,
#global-header nav a:hover {
  color: #FF7A00 !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #060E1A;
}
::-webkit-scrollbar-thumb {
  background: #1878F0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF7A00;
}

/* ============================================================
   Force Dark Revert Rules (Protects permanent dark containers)
   ============================================================ */
html:not(.dark) body:not(.dark-theme) main .force-dark h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark strong {
  color: #FFFFFF !important;
}

html:not(.dark) body:not(.dark-theme) main .force-dark p,
html:not(.dark) body:not(.dark-theme) main .force-dark li,
html:not(.dark) body:not(.dark-theme) main .force-dark td {
  color: #E2E8F0 !important;
}

html:not(.dark) body:not(.dark-theme) main .force-dark .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .force-dark .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .force-dark .text-slate-300 {
  color: #94A3B8 !important;
}

/* Fix text contrast for bright white glass-cards and inner tiles inside dark containers */
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card strong,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange strong,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] strong,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item strong {
  color: #0D2440 !important;
}

html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card p,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card li,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card td,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange p,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange li,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange td,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] p,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] li,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] td,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item p,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item li,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item td {
  color: #1E293B !important;
}

html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card .text-slate-300,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .force-dark .glass-card-orange .text-slate-300,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .force-dark [class*="bg-white/5"] .text-slate-300,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .force-dark .agent-item .text-slate-300 {
  color: #475569 !important;
}

/* ============================================================
   Protect Inner Dark Panels (Terminal & ROI Calculator)
   ============================================================ */
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h1:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h2:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h3:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h4:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h5:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg h6:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg .syne:not([class*="text-gradient"]),
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg strong,
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg .font-bold {
  color: #FFFFFF !important;
}

html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg p,
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg li,
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg td {
  color: #E2E8F0 !important;
}

html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg .text-slate-400,
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg .text-slate-500,
html:not(.dark) body:not(.dark-theme) main .glass-card .protect-dark-bg .text-slate-300 {
  color: #94A3B8 !important;
}

/* Day Mode Surface Background Overrides for custom Tailwind colors */
html:not(.dark) body:not(.dark-theme) .bg-surface-container-lowest:not(.force-dark) { background-color: #FFFFFF !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface-container-low:not(.force-dark) { background-color: #F8FAFC !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface-container:not(.force-dark) { background-color: #F1F5F9 !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface-container-high:not(.force-dark) { background-color: #E2E8F0 !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface-container-highest:not(.force-dark) { background-color: #CBD5E1 !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface-bright:not(.force-dark) { background-color: #F8FAFC !important; }
html:not(.dark) body:not(.dark-theme) .bg-background:not(.force-dark) { background-color: #FFFFFF !important; }
html:not(.dark) body:not(.dark-theme) .bg-surface:not(.force-dark) { background-color: #FFFFFF !important; }
html:not(.dark) body:not(.dark-theme) .bg-\[\#060E1A\]:not(.force-dark):not(#global-footer) { background-color: #F8FAFC !important; }

/* Day Mode Gradient Text Fallback */
html:not(.dark) body:not(.dark-theme) .text-transparent:not(.force-dark) {
    color: #1878F0 !important;
    background: none !important;
    -webkit-text-fill-color: #1878F0 !important;
}

/* Day Mode Accent Text Overrides */
html:not(.dark) body:not(.dark-theme) .text-primary:not(.force-dark) { color: #1878F0 !important; }
html:not(.dark) body:not(.dark-theme) .text-secondary:not(.force-dark) { color: #0A7CFF !important; }
html:not(.dark) body:not(.dark-theme) .text-tertiary:not(.force-dark) { color: #0056B3 !important; }