html {
  scroll-behavior: smooth;
  background: #08090b;
}

body {
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent 520px),
    #08090b !important;
  color: #f8fafc !important;
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body.light-mode,
html.light-mode {
  background: #08090b !important;
  color: #f8fafc !important;
}

::selection {
  background: rgba(139, 92, 246, 0.42);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #08090b;
}

::-webkit-scrollbar-thumb {
  background: #2b2f39;
  border-radius: 999px;
}

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(8, 9, 11, 0.86) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

nav > div,
footer > div {
  width: min(100% - 2rem, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

nav a,
footer a {
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none;
}

nav a:hover,
footer a:hover {
  color: #ffffff !important;
}

#theme-toggle,
.orb {
  display: none !important;
}

body > main {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

main h1 {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0;
}

main h2,
main h3,
summary {
  color: #ffffff !important;
  letter-spacing: 0;
}

main p,
main li {
  color: rgba(255, 255, 255, 0.68) !important;
}

main strong {
  color: rgba(255, 255, 255, 0.92);
}

main a {
  color: #c4b5fd !important;
}

main a:hover {
  color: #ddd6fe !important;
}

.gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #c4b5fd !important;
}

.glass-card,
.bg-white\/5 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    #111317 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn-primary,
button[type="submit"] {
  background: rgba(196, 181, 253, 0.13) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(196, 181, 253, 0.36) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-primary:hover,
button[type="submit"]:hover {
  background: rgba(196, 181, 253, 0.18) !important;
  border-color: rgba(196, 181, 253, 0.5) !important;
  color: #ddd6fe !important;
  transform: none !important;
}

input:not([type="hidden"]),
textarea,
select {
  background: #151820 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
  color: rgba(203, 213, 225, 0.58) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  background: #181b24 !important;
  border-color: rgba(167, 139, 250, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #08090b !important;
}

footer p {
  color: rgba(255, 255, 255, 0.38) !important;
}

main > .space-y-8 > section {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

main > .space-y-8 > section:first-child {
  padding-top: 0;
  border-top: 0;
}

.checkmark > div {
  background: rgba(52, 211, 153, 0.11) !important;
  border-color: rgba(52, 211, 153, 0.44) !important;
}

.text-mana-green,
.checkmark svg {
  color: #34d399 !important;
}

.text-red-400 {
  color: #f87171 !important;
}

.text-violet-400,
.text-violet-500 {
  color: #c4b5fd !important;
}

@media (max-width: 640px) {
  body > main {
    width: min(100% - 1.25rem, 980px);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}