/**
 * Sentinel Pool Canonical Design System — Logo-Derived Visual Theme
 * Authoritative Directives:
 *   - MSG:sentinel-pool-logo-derived-visual-system-directive-20261004-30
 *   - MSG:sentinel-pool-logo-derived-visual-system-review-20261004-33
 * Canonical Logo Asset: Sentinel_Pool_Logo.heic (Bezel / Star Field / Crimson Stripes / Specular Highlights)
 * Shared Memory Authority: https://github.com/PeterJFrancoIII/Gemini_To_Terminal_CLI_Remote_Agent/tree/main/docs/shared-cognitive-memory
 */

/* ==========================================================================
   1. CSS Variables & Token Architecture
   ========================================================================== */
:root {
  color-scheme: light;
  --page-bg: #f4f6fa;            /* Specular star facet silver-white from logo */
  --surface: #ffffff;
  --surface-elevated: #eaedf4;   /* Subtle brushed steel tint */
  --surface-overlay: rgba(10, 18, 32, 0.45);
  
  --border: #c8ceda;            /* Silver steel border from shield rim */
  --border-subtle: #dfe4ec;
  
  --text-primary: #0e1726;       /* Deep slate-charcoal (15.8:1 AAA on #ffffff) */
  --text-secondary: #2a3e5f;     /* Brand canopy slate-navy (8.5:1 AAA on #ffffff) */
  --text-muted: #526077;         /* Balanced slate (5.5:1 AA on #ffffff) */
  
  /* Logo-Derived Brand Tokens */
  --brand-navy: #2a3e5f;         /* Canopy slate blue */
  --brand-navy-dark: #162238;
  --brand-navy-light: #3d5885;
  --brand-crimson: #8a1018;      /* Dominant heraldic crimson stripe */
  --brand-crimson-vibrant: #b01116;
  --brand-crimson-subtle: #fdf2f2;
  --brand-silver: #b2b7c4;       /* Beveled shield outer rim */
  --brand-steel: #d8dce6;        /* Bright brushed steel */
  --brand-ice: #3d607f;          /* Light mode ice steel (5.6:1 AAA on #ffffff) */
  
  /* Operational Semantic Tokens (Preserved for live mining telemetry & WCAG) */
  --accent: #16a34a;             /* 4.6:1 contrast on #ffffff (AA) */
  --accent-hover: #15803d;
  
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --success-text: #14532d;       /* 7.1:1 contrast on #dcfce7 (AAA) */
  
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --warning-text: #78350f;       /* 7.2:1 contrast on #fef3c7 (AAA) */
  
  --danger-bg: #fee2e2;
  --danger-border: var(--brand-crimson-vibrant);
  --danger-text: #7f1d1d;        /* 7.5:1 contrast on #fee2e2 (AAA) */
  
  --info-bg: #e6eef8;
  --info-border: var(--brand-navy-light);
  --info-text: #1e3a8a;          /* 7.3:1 contrast on #e6eef8 (AAA) */
  
  --code-bg: #0d131f;
  --code-text: #34d399;
  --code-border: #26334a;
  --code-muted: var(--brand-ice);
  
  --focus-ring: var(--brand-navy);
  --header-bg: rgba(244, 246, 250, 0.94);
  --card-shadow: 0 1px 3px rgba(14, 23, 38, 0.08), 0 1px 2px rgba(14, 23, 38, 0.04);
}

html.dark {
  color-scheme: dark;
  --page-bg: #070a10;            /* Deep midnight navy-black from shield backdrop */
  --surface: #0d131f;            /* Weathered navy slate from star field */
  --surface-elevated: #151c2c;   /* Elevated surface with deep navy depth */
  --surface-overlay: rgba(7, 10, 16, 0.88);
  
  --border: #26334a;            /* Navy-steel rim from shield bezel */
  --border-subtle: #1a2334;
  
  --text-primary: #f4f6fa;       /* Specular star facet silver-white (16.2:1 AAA on #070a10) */
  --text-secondary: #c2c9d6;     /* Brushed steel secondary (10.5:1 AAA on #070a10) */
  --text-muted: #7e8b9f;         /* Slate steel muted (5.2:1 AA on #070a10) */
  
  /* Logo-Derived Brand Tokens */
  --brand-navy: #2a3e5f;         /* Canopy slate blue */
  --brand-navy-dark: #162238;
  --brand-navy-light: #446394;
  --brand-crimson: #8a1018;      /* Dominant heraldic crimson stripe */
  --brand-crimson-vibrant: #b01116;
  --brand-crimson-subtle: #2d070a;
  --brand-silver: #b2b7c4;       /* Beveled shield outer rim */
  --brand-steel: #d8dce6;        /* Bright brushed steel */
  --brand-ice: #8eadcf;          /* Ice steel cyan-blue */
  
  /* Operational Semantic Tokens (Preserved for live mining telemetry & WCAG) */
  --accent: #22c55e;
  --accent-hover: #4ade80;
  
  --success-bg: #052e16;
  --success-border: #166534;
  --success-text: #4ade80;
  
  --warning-bg: #451a03;
  --warning-border: #92400e;
  --warning-text: #fde047;
  
  --danger-bg: #3b0406;          /* Deep shadow burgundy from stripe */
  --danger-border: var(--brand-crimson);
  --danger-text: #fca5a5;
  
  --info-bg: #101c30;            /* Midnight canopy */
  --info-border: var(--brand-navy);
  --info-text: var(--brand-ice);
  
  --code-bg: #090d16;
  --code-text: #34d399;
  --code-border: #1a2538;
  --code-muted: #7e8b9f;
  
  --focus-ring: var(--brand-ice);
  --header-bg: rgba(7, 10, 16, 0.88);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   2. Core Semantic Element Styling
   ========================================================================== */
/* Base Layout & Overflow Rules */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
.overflow-x-auto {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html.light footer,
html:not(.dark) footer {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}
.pulse-dot {
  animation: pulse-dot 2s infinite ease-in-out;
}

body {
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;
}
header {
  background-color: var(--header-bg) !important;
  border-bottom-color: var(--border-subtle) !important;
}
.glass-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Theme Switcher Segmented Control */
.theme-switch-wrapper {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
}
.theme-btn {
  color: var(--text-muted) !important;
}
.theme-btn:hover {
  color: var(--text-primary) !important;
}
.theme-btn.active {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
html.dark .theme-btn.active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   3. Brand Aesthetics & Shield/Bezel Surface Language (Hold 3)
   ========================================================================== */
.brand-title-text {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-steel) 45%, var(--brand-ice) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
html.light .brand-title-text,
html:not(.dark) .brand-title-text {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-navy) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Restrained Shield Bezel Highlight (Echoes logo's beveled metallic rim) */
.sentinel-shield-bezel {
  position: relative;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(216, 220, 230, 0.15), var(--card-shadow) !important;
}
html.dark .sentinel-shield-bezel {
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(216, 220, 230, 0.16), 0 4px 20px -2px rgba(7, 10, 16, 0.6) !important;
}
html.dark .sentinel-shield-bezel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-ice), var(--brand-steel), transparent);
  opacity: 0.35;
  pointer-events-none;
}

/* ==========================================================================
   4. High-Contrast Dark Element Overrides (Logo-Derived System)
   ========================================================================== */
html.dark .text-slate-100,
html.dark .text-slate-200 {
  color: var(--text-primary) !important;
}
html.dark .text-slate-300,
html.dark .text-slate-400 {
  color: var(--text-secondary) !important;
}
html.dark .text-slate-500 {
  color: var(--text-muted) !important;
}
html.dark .text-slate-600 {
  color: var(--text-secondary) !important;
}
html.dark .bg-slate-950:not(.terminal-box):not(pre):not(code),
html.dark .bg-slate-950\/60,
html.dark .bg-slate-950\/80,
html.dark .bg-slate-950\/90,
html.dark .bg-slate-950\/95 {
  background-color: var(--page-bg) !important;
}
html.dark .bg-slate-900:not(.terminal-box):not(pre):not(code),
html.dark .bg-slate-900\/40,
html.dark .bg-slate-900\/50,
html.dark .bg-slate-900\/60,
html.dark .bg-slate-900\/80,
html.dark .bg-slate-900\/90 {
  background-color: var(--surface) !important;
}
html.dark .border-slate-800,
html.dark .border-slate-800\/60,
html.dark .border-slate-800\/80,
html.dark .border-slate-800\/90 {
  border-color: var(--border-subtle) !important;
}
html.dark .border-slate-700,
html.dark .border-slate-700\/60,
html.dark .border-slate-700\/80 {
  border-color: var(--border) !important;
}
html.dark .divide-slate-800 > * + *,
html.dark .divide-slate-800\/60 > * + * {
  border-color: var(--border-subtle) !important;
}
html.dark .glass-card,
html.dark .card,
html.dark .panel,
html.dark [id*="-card"],
html.dark [id*="-panel"] {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

/* ==========================================================================
   5. High-Contrast Light Mode Class Mappings
   ========================================================================== */
html.light body,
html:not(.dark) body {
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;
}

/* Containers & Surfaces in Light Mode */
html.light .bg-slate-950:not(.terminal-box):not(pre):not(code),
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/95,
html:not(.dark) .bg-slate-950:not(.terminal-box):not(pre):not(code),
html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/95 {
  background-color: var(--surface) !important;
}
html.light .bg-slate-900:not(.terminal-box):not(pre):not(code),
html.light .bg-slate-900\/40,
html.light .bg-slate-900\/50,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90,
html:not(.dark) .bg-slate-900:not(.terminal-box):not(pre):not(code),
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90 {
  background-color: var(--surface-elevated) !important;
}
html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80 {
  background-color: var(--border-subtle) !important;
}
html.light .border-slate-800,
html.light .border-slate-800\/60,
html.light .border-slate-800\/80,
html.light .border-slate-800\/90,
html.light .border-slate-700,
html.light .border-slate-700\/60,
html.light .border-slate-700\/80,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/90,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/60,
html:not(.dark) .border-slate-700\/80 {
  border-color: var(--border) !important;
}
html.light .divide-slate-800 > * + *,
html.light .divide-slate-800\/60 > * + *,
html:not(.dark) .divide-slate-800 > * + *,
html:not(.dark) .divide-slate-800\/60 > * + * {
  border-color: var(--border-subtle) !important;
}

/* Text Hierarchy on Light Surfaces */
html.light .text-white,
html.light .text-slate-100,
html.light .text-slate-200,
html:not(.dark) .text-white,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: var(--text-primary) !important;
}
html.light .text-slate-300,
html:not(.dark) .text-slate-300 {
  color: var(--text-secondary) !important;
}
html.light .text-slate-400,
html.light .text-slate-500,
html.light .text-slate-600,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600 {
  color: var(--text-muted) !important;
}
html.light .text-brand-400,
html:not(.dark) .text-brand-400 {
  color: var(--accent) !important;
}

/* Light Mode Accent Colors */
html.light .text-purple-200,
html.light .text-purple-300,
html.light .text-purple-300\/80,
html.light .text-purple-300\/90,
html.light .text-purple-400,
html:not(.dark) .text-purple-200,
html:not(.dark) .text-purple-300,
html:not(.dark) .text-purple-300\/80,
html:not(.dark) .text-purple-300\/90,
html:not(.dark) .text-purple-400 {
  color: #6b21a8 !important;
}
html.light .text-blue-200,
html.light .text-blue-300,
html.light .text-blue-300\/80,
html.light .text-blue-300\/90,
html.light .text-blue-400,
html:not(.dark) .text-blue-200,
html:not(.dark) .text-blue-300,
html:not(.dark) .text-blue-300\/80,
html:not(.dark) .text-blue-300\/90,
html:not(.dark) .text-blue-400 {
  color: #1d4ed8 !important;
}
html.light .text-cyan-300,
html:not(.dark) .text-cyan-300 {
  color: #0e7490 !important;
}
html.light .text-emerald-200,
html.light .text-emerald-300,
html.light .text-emerald-300\/90,
html.light .text-emerald-400,
html:not(.dark) .text-emerald-200,
html:not(.dark) .text-emerald-300,
html:not(.dark) .text-emerald-300\/90,
html:not(.dark) .text-emerald-400 {
  color: var(--success-text) !important;
}
html.light .text-amber-300,
html.light .text-amber-300\/90,
html.light .text-amber-400,
html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-300\/90,
html:not(.dark) .text-amber-400 {
  color: var(--warning-text) !important;
}
html.light .text-red-400,
html:not(.dark) .text-red-400 {
  color: var(--danger-text) !important;
}

/* Light Mode Hover States */
html.light .hover\:text-slate-200:hover,
html.light .hover\:text-slate-300:hover,
html.light .hover\:text-white:hover,
html:not(.dark) .hover\:text-slate-200:hover,
html:not(.dark) .hover\:text-slate-300:hover,
html:not(.dark) .hover\:text-white:hover {
  color: var(--text-primary) !important;
}
html.light .hover\:text-brand-300:hover,
html:not(.dark) .hover\:text-brand-300:hover {
  color: var(--accent-hover) !important;
}
html.light .hover\:text-emerald-300:hover,
html:not(.dark) .hover\:text-emerald-300:hover {
  color: #14532d !important;
}
html.light .hover\:text-purple-300:hover,
html:not(.dark) .hover\:text-purple-300:hover {
  color: #581c87 !important;
}

/* Neutral Content Panels & Cards */
html.light .glass-card,
html.light .card,
html.light .panel,
html.light #sovereign-datum-panel,
html.light [id*="-card"],
html.light [id*="-panel"],
html.light .rounded-2xl.border,
html.light .rounded-2xl.border-2,
html.light .rounded-xl.border,
html:not(.dark) .glass-card,
html:not(.dark) .card,
html:not(.dark) .panel,
html:not(.dark) #sovereign-datum-panel,
html:not(.dark) [id*="-card"],
html:not(.dark) [id*="-panel"],
html:not(.dark) .rounded-2xl.border,
html:not(.dark) .rounded-2xl.border-2,
html:not(.dark) .rounded-xl.border {
  background-color: var(--surface) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Category & Stage Card Outlines in Light Mode */
html.light .border-purple-500\/40,
html:not(.dark) .border-purple-500\/40 {
  background-color: var(--surface) !important;
  border-color: #d8b4fe !important;
}
html.light .border-purple-500\/40:hover,
html:not(.dark) .border-purple-500\/40:hover {
  border-color: #a855f7 !important;
}
html.light .border-blue-500\/40,
html:not(.dark) .border-blue-500\/40 {
  background-color: var(--surface) !important;
  border-color: #93c5fd !important;
}
html.light .border-blue-500\/40:hover,
html:not(.dark) .border-blue-500\/40:hover {
  border-color: #3b82f6 !important;
}
html.light .border-emerald-500\/40,
html:not(.dark) .border-emerald-500\/40 {
  background-color: var(--surface) !important;
  border-color: #86efac !important;
}
html.light .border-emerald-500\/40:hover,
html:not(.dark) .border-emerald-500\/40:hover {
  border-color: #22c55e !important;
}

/* Callout & Note Blocks inside Cards */
html.light div.bg-purple-950\/50,
html:not(.dark) div.bg-purple-950\/50 {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  border-left: 3px solid #9333ea !important;
  color: var(--text-secondary) !important;
}
html.light div.bg-blue-950\/50,
html:not(.dark) div.bg-blue-950\/50 {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  border-left: 3px solid #2563eb !important;
  color: var(--text-secondary) !important;
}
html.light div.bg-emerald-950\/50,
html.light div.bg-emerald-950\/60,
html:not(.dark) div.bg-emerald-950\/50,
html:not(.dark) div.bg-emerald-950\/60 {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  border-left: 3px solid #16a34a !important;
  color: var(--text-secondary) !important;
}
html.light div.bg-amber-950\/50,
html:not(.dark) div.bg-amber-950\/50 {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  border-left: 3px solid #d97706 !important;
  color: var(--text-secondary) !important;
}
html.light div.bg-rose-950\/40,
html:not(.dark) div.bg-rose-950\/40 {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  border-left: 3px solid #dc2626 !important;
  color: var(--text-secondary) !important;
}

/* Category Badges & Chips */
html.light span[class*="rounded"].bg-purple-900\/80,
html.light span[class*="rounded"].bg-purple-950,
html.light span[class*="rounded"].bg-purple-500\/10,
html.light span[class*="rounded"].bg-purple-500\/20,
html:not(.dark) span[class*="rounded"].bg-purple-900\/80,
html:not(.dark) span[class*="rounded"].bg-purple-950,
html:not(.dark) span[class*="rounded"].bg-purple-500\/10,
html:not(.dark) span[class*="rounded"].bg-purple-500\/20 {
  background-color: #faf5ff !important;
  border-color: #d8b4fe !important;
  color: #6b21a8 !important;
  font-weight: 700 !important;
}
html.light span[class*="rounded"].bg-blue-900\/80,
html.light span[class*="rounded"].bg-blue-950,
html.light span[class*="rounded"].bg-blue-500\/10,
html.light span[class*="rounded"].bg-blue-500\/20,
html:not(.dark) span[class*="rounded"].bg-blue-900\/80,
html:not(.dark) span[class*="rounded"].bg-blue-950,
html:not(.dark) span[class*="rounded"].bg-blue-500\/10,
html:not(.dark) span[class*="rounded"].bg-blue-500\/20 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}
html.light span[class*="rounded"].bg-emerald-900,
html.light span[class*="rounded"].bg-emerald-900\/80,
html.light span[class*="rounded"].bg-emerald-950,
html.light span[class*="rounded"].bg-emerald-500\/10,
html.light span[class*="rounded"].bg-emerald-500\/20,
html:not(.dark) span[class*="rounded"].bg-emerald-900,
html:not(.dark) span[class*="rounded"].bg-emerald-900\/80,
html:not(.dark) span[class*="rounded"].bg-emerald-950,
html:not(.dark) span[class*="rounded"].bg-emerald-500\/10,
html:not(.dark) span[class*="rounded"].bg-emerald-500\/20 {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
  font-weight: 700 !important;
}
html.light span[class*="rounded"].bg-amber-950,
html.light span[class*="rounded"].bg-amber-500\/10,
html.light span[class*="rounded"].bg-amber-500\/20,
html:not(.dark) span[class*="rounded"].bg-amber-950,
html:not(.dark) span[class*="rounded"].bg-amber-500\/10,
html:not(.dark) span[class*="rounded"].bg-amber-500\/20 {
  background-color: #fefce8 !important;
  border-color: #fde047 !important;
  color: #9a3412 !important;
  font-weight: 700 !important;
}

/* Active Mode & Fleet Tab Buttons */
html.light #mode-tab-sovereign.bg-purple-500\/20,
html.light button.bg-purple-500\/20,
html:not(.dark) #mode-tab-sovereign.bg-purple-500\/20,
html:not(.dark) button.bg-purple-500\/20 {
  background-color: #f3e8ff !important;
  border-color: #c084fc !important;
  color: #581c87 !important;
  font-weight: 700 !important;
}

/* Content Typography Inside Cards (Heading & Body Contrast) */
html.light .rounded-2xl h1,
html.light .rounded-2xl h2,
html.light .rounded-2xl h3,
html.light .rounded-2xl h4,
html.light .rounded-xl h1,
html.light .rounded-xl h2,
html.light .rounded-xl h3,
html.light .rounded-xl h4,
html.light .glass-card h1,
html.light .glass-card h2,
html.light .glass-card h3,
html.light .glass-card h4,
html.light section h1,
html.light section h2,
html.light section h3,
html.light section h4,
html:not(.dark) .rounded-2xl h1,
html:not(.dark) .rounded-2xl h2,
html:not(.dark) .rounded-2xl h3,
html:not(.dark) .rounded-2xl h4,
html:not(.dark) .rounded-xl h1,
html:not(.dark) .rounded-xl h2,
html:not(.dark) .rounded-xl h3,
html:not(.dark) .rounded-xl h4,
html:not(.dark) .glass-card h1,
html:not(.dark) .glass-card h2,
html:not(.dark) .glass-card h3,
html:not(.dark) .glass-card h4,
html:not(.dark) section h1,
html:not(.dark) section h2,
html:not(.dark) section h3,
html:not(.dark) section h4 {
  color: var(--text-primary) !important;
}

html.light .rounded-2xl p,
html.light .rounded-xl p,
html.light .glass-card p,
html:not(.dark) .rounded-2xl p,
html:not(.dark) .rounded-xl p,
html:not(.dark) .glass-card p {
  color: var(--text-secondary) !important;
}

/* SVG & Chart Fills in Light Mode */
html.light .fill-slate-400,
html:not(.dark) .fill-slate-400 {
  fill: #475569 !important;
}
html.light .fill-slate-500,
html:not(.dark) .fill-slate-500 {
  fill: #334155 !important;
}
html.light .fill-emerald-300,
html:not(.dark) .fill-emerald-300 {
  fill: #047857 !important;
}
html.light .fill-amber-400,
html:not(.dark) .fill-amber-400 {
  fill: #9a3412 !important;
}
html.light .fill-orange-400,
html:not(.dark) .fill-orange-400 {
  fill: #c2410c !important;
}
html.light .fill-red-400,
html:not(.dark) .fill-red-400 {
  fill: #b91c1c !important;
}

/* Forms & Inputs */
html.light input,
html.light select,
html.light textarea,
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
html.light input:focus,
html.light select:focus,
html.light textarea:focus,
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: var(--focus-ring) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(42, 62, 95, 0.25) !important;
}
html.light input::placeholder,
html:not(.dark) input::placeholder {
  color: var(--text-muted) !important;
}

/* Table Headers & Rows */
html.light thead.bg-slate-900,
html.light thead.bg-slate-900\/90,
html:not(.dark) thead.bg-slate-900,
html:not(.dark) thead.bg-slate-900\/90 {
  background-color: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border) !important;
}
html.light tbody tr:hover,
html:not(.dark) tbody tr:hover {
  background-color: var(--surface-elevated) !important;
}

/* Modals in Light Mode */
html.light .fixed.inset-0.bg-slate-950\/80,
html:not(.dark) .fixed.inset-0.bg-slate-950\/80 {
  background-color: var(--surface-overlay) !important;
}
html.light #modal-claim-token > div,
html.light #modal-unlock-token > div,
html.light #modal-rename-worker > div,
html:not(.dark) #modal-claim-token > div,
html:not(.dark) #modal-unlock-token > div,
html:not(.dark) #modal-rename-worker > div {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Terminal & Code Blocks: Always High-Contrast Dark */
.terminal-box,
pre,
code.terminal,
.terminal-block,
html.light pre,
html.light code.terminal,
html.light .terminal-block,
html:not(.dark) pre,
html:not(.dark) code.terminal,
html:not(.dark) .terminal-block {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  border-color: var(--code-border) !important;
}
html.light .font-mono.bg-slate-950,
html.light .font-mono.bg-slate-900,
html:not(.dark) .font-mono.bg-slate-950,
html:not(.dark) .font-mono.bg-slate-900 {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  border-color: var(--code-border) !important;
}
html.light .font-mono.bg-slate-950 *,
html.light .font-mono.bg-slate-900 *,
html:not(.dark) .font-mono.bg-slate-950 *,
html:not(.dark) .font-mono.bg-slate-900 * {
  color: inherit;
}

/* Tooltips in Light Mode */
html.light #chart-tooltip,
html:not(.dark) #chart-tooltip {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
html.light #chart-tooltip div,
html:not(.dark) #chart-tooltip div {
  color: var(--text-muted) !important;
}
html.light #chart-tooltip #chart-tooltip-val,
html:not(.dark) #chart-tooltip #chart-tooltip-val {
  color: var(--accent) !important;
}

/* Hardware Section Tabs, Drawers, and Responsive Code Containment */
.hw-status-card {
  transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.hw-status-card:hover {
  border-color: var(--accent) !important;
}
.hw-tab-btn {
  transition: all 0.15s ease-in-out;
  border: 1px solid transparent;
}
.hw-tab-btn.active {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-color: var(--accent) !important;
}
html.light .hw-tab-btn:not(.active) {
  background-color: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html.light .hw-tab-btn:not(.active):hover {
  background-color: #e2e8f0 !important;
  color: var(--text-primary) !important;
}
.code-scroll-container {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   6. Comprehensive Reduced Motion Controls (Hold 4)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot,
  .animate-ping,
  .animate-pulse,
  .animate-bounce,
  .animate-spin {
    animation: none !important;
  }
}