:root, :root.dark {
  --background: 222 47% 6%;
  --foreground: 210 40% 98%;
  --card: 222 39% 9%;
  --card-foreground: 210 40% 98%;
  --popover: 222 39% 9%;
  --popover-foreground: 210 40% 98%;
  --primary: 158 64% 42%;
  --primary-foreground: 222 47% 6%;
  --secondary: 217 32% 14%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 32% 14%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 32% 16%;
  --accent-foreground: 210 40% 98%;
  --border: 217 24% 18%;
  --input: 217 24% 18%;
  --ring: 158 64% 42%;
  --radius: 0.75rem;
}

html { background: #070b12; }
body {
  background:
    radial-gradient(circle at 15% 0%, rgba(16, 185, 129, 0.10), transparent 32rem),
    radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.08), transparent 28rem),
    #070b12 !important;
  background-attachment: fixed;
}

#global, .bg-background {
  background-color: #070b12 !important;
  color: #e5e7eb !important;
}

.bg-card {
  background-color: #0f172a !important;
}

main .container {
  padding-top: 1.75rem;
}

main h1 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em;
}

main h1 + p {
  font-size: 0.875rem !important;
  margin-top: 0.35rem !important;
}

div:has(> .flex-1 > .relative > #search-input) {
  background: rgba(15, 23, 42, 0.76) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  border-radius: 1rem !important;
  padding: 0.75rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

#search-input {
  height: 2.5rem !important;
  border-radius: 0.75rem !important;
  background: rgba(2, 6, 23, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  font-size: 0.9rem !important;
}

#search-input::placeholder {
  color: #64748b !important;
}

#search-input:focus {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

div.relative:has(#search-input) > svg {
  color: #10b981 !important;
}

main select {
  height: 2.5rem !important;
  border-radius: 0.75rem !important;
  background-color: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  font-size: 0.875rem !important;
}

.endpoint, .endpoint * {
  color: #e5e7eb !important;
}

.endpoint .text-muted-foreground {
  color: #94a3b8 !important;
}

.endpoint-header .text-muted-foreground {
  display: none !important;
}

.endpoint .bg-success, .endpoint .bg-success * {
  color: #ffffff !important;
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 18, 0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

header h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.endpoint {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(10, 15, 25, 0.94)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.endpoint:hover {
  border-color: rgba(16, 185, 129, 0.38) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

input, select {
  background-color: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

input:focus, select:focus {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.bg-success { background-color: #10b981 !important; }
footer { display: none !important; }
header .w-12.h-12 { display: none !important; }
header img[alt="Gatus"] { display: none !important; }