:root {
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
}

body {
  color: #e5eefb;
  background:
    radial-gradient(circle at 12% 12%, rgba(56, 189, 248, 0.22), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(16, 185, 129, 0.18), transparent 26%),
    radial-gradient(circle at 86% 82%, rgba(59, 130, 246, 0.15), transparent 30%),
    linear-gradient(135deg, #050816 0%, #071120 48%, #0b1020 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.22;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 95%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.08), rgba(5, 8, 22, 0.42));
}

html.foxhonk-ready * {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

a,
button,
input,
textarea,
select {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

a:hover,
button:hover {
  transform: translateY(-1px);
}

input,
textarea,
select {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2);
  backdrop-filter: blur(18px);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(125, 211, 252, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
  outline: none;
}

img {
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.24));
}

[class*="card"],
[class*="Card"],
[class*="widget"],
[class*="Widget"],
[class*="bookmark"],
[class*="Bookmark"] {
  border-radius: 20px;
}

[class*="card"]:hover,
[class*="Card"]:hover,
[class*="widget"]:hover,
[class*="Widget"]:hover,
[class*="bookmark"]:hover,
[class*="Bookmark"]:hover {
  transform: translateY(-2px);
}