@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Space+Grotesk:wght@500;600&display=swap");
html:root, html:root.dark {
  --background: 220 79% 46%; --foreground: 0 0% 100%;
  --card: 220 79% 46%; --card-foreground: 0 0% 100%;
  --popover: 220 70% 28%; --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%; --primary-foreground: 220 79% 46%;
  --secondary: 220 70% 54%; --secondary-foreground: 0 0% 100%;
  --muted: 220 70% 54%; --muted-foreground: 220 80% 90%;
  --accent: 220 70% 52%; --accent-foreground: 0 0% 100%;
  --border: 220 60% 60%; --input: 220 60% 60%; --ring: 38 100% 78%;
}
/* One look in light and dark mode: Gatus's own :root.dark would win over a weaker selector. */
html, body, #global { background: #1957d2 !important; color: #fff; }
body, #global { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.container { max-width: 760px !important; }
header { border: 0 !important; background: transparent !important; backdrop-filter: none !important; }
header .w-12.h-12 { width: 28px; height: 28px; }
header a > div:last-child { display: flex; align-items: baseline; }
header h1 { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
header h1::after { content: "."; color: #ffd791; margin: 0 0.09em 0 0.06em; }
header a > div:last-child::after { content: "status"; font: 500 17px "Space Grotesk", sans-serif; color: rgba(255,255,255,0.75); }
.dashboard-container h1.text-4xl { font-size: 40px; letter-spacing: -0.02em; }
.dashboard-container h1.text-4xl + p { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: rgba(255,255,255,0.8); }
div:has(> div > div > #search-input) { display: none !important; }
.grid:has(> .endpoint) { display: block !important; border-top: 1px solid rgba(255,255,255,0.2); }
.endpoint {
  border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; transform: none !important;
}
.endpoint .endpoint-header { padding: 14px 0 6px !important; }
.endpoint .endpoint-content { padding: 0 0 14px !important; }
.endpoint .endpoint-content .space-y-2 > * + * { margin-top: 4px !important; }
.endpoint h3 span { font: 500 15px "Geist", sans-serif; text-decoration: none !important; color: #fff !important; }
.endpoint .endpoint-header .text-muted-foreground span:nth-child(n+2) { display: none; }
.endpoint .endpoint-header .text-muted-foreground { font-size: 12px; color: rgba(255,255,255,0.75); }
.endpoint .rounded-full.border { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 0 !important; gap: 6px; }
.endpoint .rounded-full.border::after { font: 400 14px "Geist", sans-serif; }
.endpoint .rounded-full.bg-green-500::after { content: "working"; color: rgba(255,255,255,0.85); }
.endpoint .rounded-full.bg-destructive::after { content: "not working"; color: #ffd791; font-weight: 600; }
.endpoint .rounded-full.bg-yellow-500::after { content: "unsteady"; color: #ffd791; font-weight: 500; }
.endpoint .rounded-full.bg-secondary::after { content: "no data yet"; color: rgba(255,255,255,0.75); }
.endpoint .rounded-full > span:first-child {
  width: 16px !important; height: 16px !important; border-radius: 0 !important;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.endpoint .rounded-full .bg-green-400 { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.5 2.5 5.5-5.5'/></svg>"); background: rgba(255,255,255,0.85) !important; }
.endpoint .rounded-full .bg-red-400 { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15 9l-6 6M9 9l6 6'/></svg>"); background: #ffd791 !important; }
.endpoint .rounded-full .bg-yellow-400 { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); background: #ffd791 !important; }
.endpoint .rounded-sm { height: 18px !important; border-radius: 1px !important; }
.endpoint .rounded-sm.bg-green-500, .endpoint .rounded-sm.bg-green-700 { background: rgba(255,255,255,0.3) !important; }
.endpoint .rounded-sm.bg-red-500, .endpoint .rounded-sm.bg-red-700 { background: #ffd791 !important; }
.endpoint .rounded-sm.bg-gray-200 { background: rgba(255,255,255,0.1) !important; }
.endpoint .text-muted-foreground { color: rgba(255,255,255,0.75) !important; }
footer { border-color: rgba(255,255,255,0.2) !important; }
footer a { color: #fff !important; }
#social, #settings { display: none !important; }
button { color: #fff; }