:root {
  --tg-ink:    #07080b;
  --tg-panel:  #0f1318;
  --tg-border: #1E2433;
  --tg-text:   #eef2f6;
  --tg-muted:  #8b95a5;
  --tg-gold:   #ecb24e;
}
html, body, #app, .bg-gray-100, .dark\:bg-gray-900 {
  background: var(--tg-ink) !important;
  color: var(--tg-text) !important;
}
/* Panels + endpoint rows */
.bg-white, .dark\:bg-gray-800, .dark\:bg-gray-700 {
  background: var(--tg-panel) !important;
  border-color: var(--tg-border) !important;
}
.border, .border-t, .border-b, .divide-y > * + * {
  border-color: var(--tg-border) !important;
}
/* Headings in the cockpit's serif; data stays monospace and tabular. */
h1, h2, .text-2xl, .text-xl {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
  color: var(--tg-text) !important;
}
.text-gray-500, .text-gray-400, .dark\:text-gray-400 {
  color: var(--tg-muted) !important;
}
a { color: var(--tg-gold) !important; }
a:hover { opacity: 0.85; }
/* Header buttons read as the cockpit's chips rather than default links. */
header a, .rounded.border {
  border: 1px solid var(--tg-border) !important;
  border-radius: 7px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.72rem !important;
}
/* Response-time figures line up in columns. */
.font-mono, code, .text-xs {
  font-variant-numeric: tabular-nums;
}
/* Gatus ships a fixed "System Monitoring Dashboard" strapline under the
   header (its loginSubtitle default, with no config key to change it).
   It is the tool's name for itself, not ours, so it is hidden rather
   than left contradicting the heading directly below it. */
header img + div > :not(:first-child),
header .text-sm.text-gray-500,
header p.text-sm {
  display: none !important;
}
header img { height: 34px !important; width: auto !important; }

/* A public status page answers one question — is it up. The search,
   filter and sort controls are browser-local view preferences (they
   cannot change what is monitored; Gatus is configured from this file
   and exposes no write API), but on a page with a handful of endpoints
   they are chrome that invites fiddling instead of reading. Same for the
   refresh-interval and theme widget pinned bottom-left. */
div:has(> input[placeholder^="Search endpoints"]),
div:has(> div > input[placeholder^="Search endpoints"]),
div:has(> div > div > input[placeholder^="Search endpoints"]) {
  display: none !important;
}
.fixed.bottom-0, .fixed.bottom-4, [class*="bottom-"][class*="fixed"] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}