/*
  High-Contrast Code Surfaces V16
  Fixes dark text inherited from white Neon Chaos cards inside black code panels.
*/
#root pre {
  color: #f8fafc !important;
  background: #050507 !important;
  border: 2px solid #52525b !important;
  border-left-color: #39ff14 !important;
  box-shadow:
    inset 0 0 0 1px #000,
    5px 5px 0 rgba(38, 230, 255, .28) !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #71717a #18181b;
  white-space: pre !important;
}

#root pre code,
#root pre code.text-foreground,
#root pre .text-foreground,
#root .neon-card pre code,
#root .neon-card pre code.text-foreground,
#root .neon-card pre .text-foreground,
#root [class*="bg-muted"] pre code,
#root [class*="bg-secondary"] pre code {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 1px 0 #000 !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
  white-space: inherit !important;
}

/* Keep headings such as “Terminal” clearly readable on their light header strip. */
#root .neon-card:has(pre) [class*="border-b"] {
  color: #18181b !important;
  background: #f4f4f5 !important;
  border-color: #71717a !important;
}

#root .neon-card:has(pre) [class*="border-b"] span,
#root .neon-card:has(pre) [class*="border-b"] .text-muted-foreground {
  color: #27272a !important;
  -webkit-text-fill-color: #27272a !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* Copy control remains visible against the dark code surface. */
#root .neon-card:has(pre) .relative > button,
#root .neon-card:has(pre) button[aria-label*="copy" i] {
  color: #fff !important;
  background: rgba(9, 9, 11, .94) !important;
  border: 1px solid #71717a !important;
  opacity: 1 !important;
}

#root .neon-card:has(pre) .relative > button:hover,
#root .neon-card:has(pre) .relative > button:focus-visible,
#root .neon-card:has(pre) button[aria-label*="copy" i]:hover,
#root .neon-card:has(pre) button[aria-label*="copy" i]:focus-visible {
  color: #050507 !important;
  background: #39ff14 !important;
  border-color: #050507 !important;
  outline: 2px solid #26e6ff !important;
  outline-offset: 2px;
}

/* Selection stays readable. */
#root pre code::selection,
#root pre code *::selection {
  color: #050507 !important;
  -webkit-text-fill-color: #050507 !important;
  background: #39ff14 !important;
}

#root pre::-webkit-scrollbar {
  height: 10px;
}

#root pre::-webkit-scrollbar-track {
  background: #18181b;
}

#root pre::-webkit-scrollbar-thumb {
  background: #71717a;
  border: 2px solid #18181b;
}

#root pre::-webkit-scrollbar-thumb:hover {
  background: #39ff14;
}

@media (max-width: 720px) {
  #root pre {
    padding: .9rem !important;
    font-size: .78rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  #root pre code,
  #root pre code.text-foreground {
    font-weight: 600 !important;
  }
}

@media (prefers-contrast: more) {
  #root pre {
    border-color: #fff !important;
    border-left-color: #39ff14 !important;
  }

  #root pre code,
  #root pre code.text-foreground,
  #root pre .text-foreground {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
  }
}