:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --border: 0 0% 15%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 100%;
  --card-border: 0 0% 15%;
  --sidebar: 0 0% 3%;
  --sidebar-foreground: 0 0% 72%;
  --sidebar-border: 0 0% 14%;
  --sidebar-primary: 0 0% 100%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 0% 8%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-ring: 0 0% 100%;
  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 100%;
  --popover-border: 0 0% 14%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 82%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 63%;
  --accent: 0 0% 86%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 0% 100%;
  --destructive-foreground: 0 0% 0%;
  --input: 0 0% 12%;
  --ring: 0 0% 100%;
  --chart-1: 0 0% 100%;
  --chart-2: 0 0% 84%;
  --chart-3: 0 0% 68%;
  --chart-4: 0 0% 50%;
  --chart-5: 0 0% 32%;
  --button-outline: rgba(255, 255, 255, 0.14);
  --badge-outline: rgba(255, 255, 255, 0.12);
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.08);
  --app-font-sans: "Geist", "Space Grotesk", "DM Sans", sans-serif;
  --color-red-300: oklch(88% 0 0);
  --color-red-400: oklch(82% 0 0);
  --color-red-500: oklch(72% 0 0);
  --color-red-600: oklch(62% 0 0);
  --color-red-950: oklch(18% 0 0);
  --color-orange-400: oklch(84% 0 0);
  --color-orange-500: oklch(74% 0 0);
  --color-orange-950: oklch(18% 0 0);
  --color-amber-400: oklch(84% 0 0);
  --color-amber-500: oklch(74% 0 0);
  --color-amber-950: oklch(18% 0 0);
  --color-yellow-400: oklch(84% 0 0);
  --color-yellow-500: oklch(74% 0 0);
  --color-yellow-950: oklch(18% 0 0);
  --color-green-400: oklch(84% 0 0);
  --color-emerald-400: oklch(84% 0 0);
  --color-emerald-500: oklch(74% 0 0);
  --color-emerald-950: oklch(18% 0 0);
  --color-teal-400: oklch(84% 0 0);
  --color-teal-500: oklch(74% 0 0);
  --color-teal-950: oklch(18% 0 0);
  --color-cyan-300: oklch(90% 0 0);
  --color-cyan-400: oklch(84% 0 0);
  --color-cyan-500: oklch(74% 0 0);
  --color-cyan-950: oklch(18% 0 0);
  --color-blue-400: oklch(84% 0 0);
  --color-blue-500: oklch(74% 0 0);
  --color-blue-950: oklch(18% 0 0);
  --color-indigo-400: oklch(84% 0 0);
  --color-indigo-500: oklch(74% 0 0);
  --color-indigo-950: oklch(18% 0 0);
  --color-violet-400: oklch(84% 0 0);
  --color-violet-500: oklch(74% 0 0);
  --color-violet-950: oklch(18% 0 0);
  --color-purple-400: oklch(84% 0 0);
  --color-purple-500: oklch(74% 0 0);
  --color-purple-950: oklch(18% 0 0);
  --color-pink-400: oklch(84% 0 0);
  --color-pink-500: oklch(74% 0 0);
  --color-pink-950: oklch(18% 0 0);
  --color-rose-400: oklch(84% 0 0);
  --color-rose-500: oklch(74% 0 0);
  --color-rose-950: oklch(18% 0 0);
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --border: 0 0% 15%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 100%;
  --card-border: 0 0% 15%;
  --sidebar: 0 0% 3%;
  --sidebar-foreground: 0 0% 72%;
  --sidebar-border: 0 0% 14%;
  --sidebar-primary: 0 0% 100%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 0% 8%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-ring: 0 0% 100%;
  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 100%;
  --popover-border: 0 0% 14%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 82%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 63%;
  --accent: 0 0% 86%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 0% 100%;
  --destructive-foreground: 0 0% 0%;
  --input: 0 0% 12%;
  --ring: 0 0% 100%;
}

html,
body,
#root {
  background: #000;
  color: #fff;
}

body {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0) !important;
  background-size: 32px 32px !important;
}

section:not(#home),
footer {
  background-color: #000 !important;
}

[class*="bg-[#0a0f1c]"],
[class*="bg-[#0d1230]"],
[class*="from-[#0a0f1c]"],
[class*="via-[#0a0f1c]"],
[class*="via-[#0d1230]"],
[class*="to-[#0a0f1c]"] {
  background: #000 !important;
  background-color: #000 !important;
}

[class*="bg-white/[0.015]"],
[class*="bg-white/[0.025]"],
[class*="bg-white/[0.04]"] {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

header {
  background: rgba(0, 0, 0, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

header svg,
header img {
  filter: grayscale(1) brightness(1.9) contrast(1.05) !important;
}

img[src*="bg-features"],
img[src*="bg-stats"],
img[src*="bg-hero"],
img[src*="solana-logo"] {
  filter: grayscale(1) brightness(1.18) contrast(1.04) !important;
}

/* Peptide molecular images — grayscale with boosted contrast */
img[src*="/api/peptides"],
img[src*="peptides/sim-"],
img[src*="peptides/des-"] {
  filter: grayscale(1) brightness(1.15) contrast(1.4) !important;
}

a,
button,
input,
select,
textarea {
  accent-color: #fff;
}

/* Primary buttons: white bg + black text when enabled; dark bg + white text when disabled */
.bg-primary,
.bg-primary\/90,
.hover\:bg-primary\/90:hover {
  background-color: #fff !important;
  color: #000 !important;
}

button.bg-primary:disabled,
button.bg-primary[disabled] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  opacity: 1 !important;
}

/* Tinted primary variants — subtle surface highlight */
.bg-primary\/10,
.bg-primary\/20,
.bg-primary\/30 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.bg-secondary,
.bg-accent,
.bg-secondary\/20,
.bg-accent\/50 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.text-primary,
.text-secondary,
.text-accent,
.text-destructive,
.text-cyan-400,
.text-cyan-400\/60,
.text-cyan-400\/70,
.text-emerald-400,
.text-green-400,
.text-yellow-400,
.text-orange-400,
.text-blue-400,
.text-purple-400,
.text-pink-400,
.text-red-400,
.text-amber-400,
.text-amber-400\/80 {
  color: #fff !important;
}

.bg-cyan-950\/40,
.bg-emerald-950\/40,
.bg-purple-950\/40,
.bg-red-950\/40,
.bg-orange-950\/40,
.bg-yellow-950\/40 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.hover\:bg-cyan-400\/10:hover,
.hover\:bg-emerald-400\/10:hover,
.hover\:bg-purple-400\/10:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.border-cyan-500\/30,
.border-emerald-500\/30,
.border-purple-500\/30,
.border-red-500\/20,
.border-red-500\/30,
.border-orange-500\/30,
.border-yellow-500\/30 {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.shadow-\[0_0_6px_hsl\(var\(--primary\)\)\],
.shadow-\[0_0_15px_hsl\(var\(--primary\)\/0\.1\)\],
.shadow-\[0_0_20px_hsl\(var\(--primary\)\/0\.3\)\],
.shadow-\[0_0_20px_hsl\(var\(--primary\)\/0\.3\)\],
.shadow-\[0_0_25px_rgba\(0\,245\,255\,0\.25\)\],
.hover\:shadow-\[0_0_20px_hsl\(var\(--primary\)\/0\.3\)\]:hover,
.hover\:shadow-\[0_0_40px_rgba\(0\,245\,255\,0\.4\)\]:hover {
  box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important;
}

[class*="bg-cyan-"],
[class*="bg-emerald-"],
[class*="bg-purple-"],
[class*="bg-blue-"],
[class*="bg-pink-"],
[class*="bg-orange-"],
[class*="bg-yellow-"],
[class*="bg-green-"],
[class*="bg-red-"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[class*="border-cyan-"],
[class*="border-emerald-"],
[class*="border-purple-"],
[class*="border-blue-"],
[class*="border-pink-"],
[class*="border-orange-"],
[class*="border-yellow-"],
[class*="border-green-"],
[class*="border-red-"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[class*="text-cyan-"],
[class*="text-emerald-"],
[class*="text-purple-"],
[class*="text-blue-"],
[class*="text-pink-"],
[class*="text-orange-"],
[class*="text-yellow-"],
[class*="text-green-"],
[class*="text-red-"] {
  color: #fff !important;
}

[class*="group-hover:bg-cyan-"],
[class*="group-hover:bg-emerald-"],
[class*="group-hover:bg-purple-"],
[class*="group-hover:text-cyan-"],
[class*="group-hover:text-emerald-"],
[class*="group-hover:text-purple-"] {
  color: #fff !important;
}

[style*="#00f5ff"],
[style*="#00ff9f"],
[style*="#00cc88"],
[style*="#8b5cf6"],
[style*="#14F195"],
[style*="0,245,255"],
[style*="0,255,159"],
[style*="139,92,246"],
[style*="96,165,250"] {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#built-on,
#technology,
#how-it-works,
#community {
  background: #000 !important;
}

/* Connecting line through icon centers in How It Works (desktop only) */
@media (min-width: 768px) {
  #how-it-works .grid.relative {
    position: relative;
  }
  #how-it-works .grid.relative::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.25) 8%,
      rgba(255, 255, 255, 0.25) 92%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }
}

#built-on [class*="text-white/50"],
#built-on [class*="text-white/45"],
#technology [class*="text-white/45"],
#how-it-works [class*="text-white/40"],
#community [class*="text-white/35"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

#technology [class*="rounded-2xl"],
#community [class*="rounded-2xl"],
#features [class*="rounded-2xl"],
#features [class*="rounded-xl"] {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

#built-on svg,
#technology svg,
#how-it-works svg,
#community svg,
footer svg {
  color: #fff !important;
  stroke: currentColor !important;
}

#built-on [style*="color:"],
#technology [style*="color:"],
#how-it-works [style*="color:"],
#community [style*="color:"] {
  color: #fff !important;
}

#home {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
    #000 !important;
}

#home::before {
  content: "";
  position: absolute;
  inset: 8% 16% auto;
  height: min(38vw, 28rem);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 60px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 1;
}

#home canvas,
#home img[src*="bg-hero"] {
  filter: grayscale(1) brightness(1.42) contrast(1.12) !important;
}

#home [style*="background: linear-gradient"],
#home [style*="background:radial-gradient"],
#home [style*="background: radial-gradient"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}

#home h1 span,
#home p,
#home .text-white\/70,
#home .text-white\/55,
#home .text-white\/40 {
  color: #fff !important;
}

#home h1 span[style] {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

#home [data-testid="button-launch-app-nav"],
#home a[href="/app"] button,
header [data-testid="button-launch-app-nav"] {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

#home button[class*="border-white/10"],
#home a[class*="border-white/10"],
header button[class*="border-white/10"],
header a[class*="border-white/10"] {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

#home [class*="from-[#0a0f1c]"],
#home [class*="to-[#0a0f1c]"] {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), #000 100%) !important;
}

iframe {
  background: #000;
}

::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Badge styles (rounded-full pill badges) — white border + text, no colored bg */
[class*="rounded-full"][style*="border"],
[class*="rounded-full"][style*="background"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* Peptide molecular visualization — canvas, svg, img */
img[src*="/api/peptides"],
img[src*="peptides/sim-"],
img[src*="peptides/des-"] {
  filter: grayscale(1) brightness(1.2) contrast(1.5) !important;
}

/* Wallet adapter modal — preserve all original colors */
[class*="wallet-adapter"] {
  background-color: unset !important;
  border-color: unset !important;
  color: unset !important;
  filter: none !important;
}

[class*="wallet-adapter"] img,
[class*="wallet-adapter"] svg {
  filter: none !important;
}

dialog img,
[role="dialog"] img,
[aria-modal="true"] img,
w3m-modal img, wcm-modal img,
[class*="w3m"] img, [class*="wcm"] img {
  filter: none !important;
}

/* Slim styled scrollbar */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}