:root,
html,
html.dark,
body {
  --background: 0 0% 2% !important;
  --foreground: 0 0% 91% !important;
  --card: 0 0% 6% !important;
  --card-foreground: 0 0% 91% !important;
  --popover: 0 0% 6% !important;
  --popover-foreground: 0 0% 91% !important;
  --primary: 357 56% 42% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 0 0% 8% !important;
  --secondary-foreground: 0 0% 91% !important;
  --muted: 0 0% 10% !important;
  --muted-foreground: 0 0% 65% !important;
  --accent: 357 56% 42% !important;
  --accent-foreground: 0 0% 100% !important;
  --destructive: 357 72% 55% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 0 0% 16% !important;
  --input: 0 0% 16% !important;
  --ring: 357 56% 42% !important;
  --radius: 0.125rem !important;
}

html,
body,
#root {
  background: #050505 !important;
  background-color: #050505 !important;
  color: #e6e6e6 !important;
  min-height: 100% !important;
}

body {
  background-image:
    radial-gradient(circle at top left, rgba(180, 35, 42, 0.12), transparent 32rem),
    linear-gradient(180deg, #080808 0%, #050505 100%) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

body * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  box-shadow: none !important;
}

#root,
#root > div,
#root > div > div,
main,
main > div,
main > div > div {
  background: transparent !important;
  background-color: transparent !important;
}

.bg-background,
.bg-card,
.bg-popover,
.bg-muted,
.bg-secondary,
[class~="bg-background"],
[class~="bg-card"],
[class~="bg-popover"],
[class~="bg-muted"],
[class~="bg-secondary"] {
  background-color: #050505 !important;
}

.text-foreground,
.text-muted-foreground,
[class~="text-foreground"],
[class~="text-muted-foreground"] {
  color: #d8d8d8 !important;
}

header,
nav {
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  border-bottom: 1px solid #2a2a2a !important;
}

h1,
h2,
h3,
h4 {
  color: #ffffff !important;
  letter-spacing: -0.04em !important;
}

a {
  color: #ff5a63 !important;
  text-decoration: none !important;
}

a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

input,
select,
button {
  background: #0c0c0f !important;
  background-color: #0c0c0f !important;
  color: #e6e6e6 !important;
  border-color: #2a2a2a !important;
  border-radius: 2px !important;
}

input:focus,
select:focus,
button:focus {
  border-color: #b4232a !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #b4232a !important;
}

[class*="border"],
.border {
  border-color: #2a2a2a !important;
}

[class*="card"],
[class*="Card"],
[class*="endpoint"],
[class*="Endpoint"],
[class*="monitor"],
[class*="Monitor"] {
  background: #101010 !important;
  background-color: #101010 !important;
  border-color: #2a2a2a !important;
  border-radius: 2px !important;
}

[class*="card"]:hover,
[class*="Card"]:hover,
[class*="endpoint"]:hover,
[class*="Endpoint"]:hover {
  background: #160d0f !important;
  background-color: #160d0f !important;
  border-color: #b4232a !important;
}

[class*="badge"],
[class*="Badge"],
[class*="status"],
[class*="Status"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.bg-green-500,
.bg-green-600,
[class*="bg-green"] {
  background-color: #1f7a35 !important;
  color: #ffffff !important;
}

.text-green-500,
.text-green-600,
[class*="text-green"] {
  color: #7dff9b !important;
}

.bg-red-500,
.bg-red-600,
[class*="bg-red"] {
  background-color: #b4232a !important;
  color: #ffffff !important;
}

.text-red-500,
.text-red-600,
[class*="text-red"] {
  color: #ff5a63 !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-sky-500,
.bg-sky-600,
[class*="bg-blue"],
[class*="bg-sky"] {
  background-color: #b4232a !important;
}

.text-blue-500,
.text-blue-600,
.text-sky-500,
.text-sky-600,
[class*="text-blue"],
[class*="text-sky"] {
  color: #ff5a63 !important;
}

svg,
path {
  stroke: currentColor !important;
}
main h1,
main h1 + p {
  display: none !important;
}
