:root {
  --background: 210 25% 98%;
  --foreground: 222 34% 14%;
  --card: 0 0% 100%;
  --card-foreground: 222 34% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 34% 14%;
  --primary: 174 72% 26%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 24% 94%;
  --secondary-foreground: 222 34% 14%;
  --muted: 210 24% 94%;
  --muted-foreground: 217 14% 42%;
  --accent: 174 42% 92%;
  --accent-foreground: 174 72% 22%;
  --border: 214 22% 88%;
  --ring: 174 72% 26%;
  --radius: 0.5rem;
}

:root.dark {
  --background: 220 28% 8%;
  --foreground: 210 24% 96%;
  --card: 220 24% 11%;
  --card-foreground: 210 24% 96%;
  --popover: 220 24% 11%;
  --popover-foreground: 210 24% 96%;
  --primary: 173 80% 42%;
  --primary-foreground: 220 28% 8%;
  --secondary: 220 20% 16%;
  --secondary-foreground: 210 24% 96%;
  --muted: 220 20% 16%;
  --muted-foreground: 215 16% 72%;
  --accent: 174 42% 18%;
  --accent-foreground: 172 90% 84%;
  --border: 220 18% 22%;
  --ring: 173 80% 42%;
}

body {
  background: #f6f8fb;
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root.dark body {
  background: #10151c;
}

header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

:root.dark header {
  background: rgba(20, 26, 34, 0.94) !important;
}

header img[alt="Gatus"] {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.16);
}

header h1 {
  letter-spacing: 0;
}

header p {
  display: none !important;
}

header nav a {
  align-items: center;
  border: 1px solid transparent;
  display: inline-flex !important;
  gap: 0.375rem;
}

header nav a:hover {
  border-color: hsl(var(--border));
}

header nav a[href*="github.com/pascalebeier/hitkeep"] {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

header nav a[href*="github.com/pascalebeier/hitkeep"]:hover {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  opacity: 0.86;
}

header nav a[href*="github.com/pascalebeier/hitkeep"]::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 1rem;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.62 7.62 0 0 1 8 3.86c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 1rem;
}

header nav a[href="https://status.hitkeep.com/api/v1/endpoints/statuses"] {
  color: hsl(var(--accent-foreground));
}

header nav a[href="https://status.hitkeep.com/api/v1/endpoints/statuses"]::before {
  content: "{}";
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
}

header h1::after {
  color: hsl(var(--muted-foreground));
  content: "Independent regional uptime monitoring";
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 0.125rem;
}

main > div:first-child::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  color: hsl(var(--muted-foreground));
  content: "Independent production monitoring for HitKeep Cloud EU and US regions.\A\A Region-specific readiness  ·  API availability  ·  30-second external checks  ·  TLS expiry monitored";
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  white-space: pre-line;
}

:root.dark main > div:first-child::before {
  background: linear-gradient(180deg, rgba(25,32,42,0.98), rgba(20,26,34,0.94));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

main h1 {
  letter-spacing: 0;
}

main h1 + p {
  max-width: 760px;
}

.endpoint {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.endpoint:hover {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}

.endpoint-header {
  border-bottom: 1px solid hsl(var(--border));
}

.endpoint-header a {
  color: hsl(var(--foreground));
  font-weight: 700;
  text-decoration: none !important;
}

.endpoint-content {
  background: linear-gradient(180deg, transparent, rgba(15, 118, 110, 0.025));
}

button,
a[class*="rounded-md"] {
  border-radius: 6px !important;
}

#settings {
  display: none !important;
}

footer {
  background: rgba(255, 255, 255, 0.72);
  border-top: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

:root.dark footer {
  background: rgba(20, 26, 34, 0.72);
}

footer > div > div {
  align-items: center;
  gap: 0.75rem !important;
}

footer .text-sm.text-muted-foreground.text-center {
  font-size: 0 !important;
  line-height: 1.45;
  max-width: 720px;
}

footer .text-sm.text-muted-foreground.text-center::before {
  color: hsl(var(--foreground));
  content: "HitKeep Cloud Status";
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.125rem;
}

footer .text-sm.text-muted-foreground.text-center::after {
  content: "Open-source monitoring for EU and US cloud regions, operated independently from the production app nodes.";
  display: block;
  font-size: 0.8125rem;
}

footer .text-sm.text-muted-foreground.text-center a[href="https://gatus.io"] {
  display: inline-block;
  font-size: 0.8125rem;
  margin-top: 0.375rem;
}

footer .text-sm.text-muted-foreground.text-center a[href="https://gatus.io"]::before {
  color: hsl(var(--muted-foreground));
  content: "Powered by ";
  font-weight: 400;
}

footer #social {
  display: none !important;
}