:root, :root.dark {
  --background: 216 18.5% 5.3%;        /* forge-950 #0b0d10 */
  --foreground: 210 17.4% 82%;         /* forge-200 #c9d1d9 */
  --card: 213.3 20.9% 8.4%;            /* forge-900 #11151a */
  --card-foreground: 210 22.2% 92.9%;  /* forge-100 #e9edf1 */
  --popover: 213.3 20.9% 8.4%;
  --popover-foreground: 210 22.2% 92.9%;
  --primary: 20.5 90.2% 48.2%;         /* ember-500 #ea580c */
  --primary-foreground: 216 18.5% 5.3%;
  --secondary: 212.3 20% 12.7%;        /* forge-800 #1a2027 */
  --secondary-foreground: 210 22.2% 92.9%;
  --muted: 212.3 20% 12.7%;
  --muted-foreground: 210 11.1% 54.1%; /* forge-400 #7d8a97 */
  --accent: 212.3 20% 12.7%;
  --accent-foreground: 210 22.2% 92.9%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 22.2% 92.9%;
  --border: 210 18.8% 18.8%;           /* forge-700 #273039 */
  --input: 211.2 17.7% 27.6%;          /* forge-600 #3a4653 */
  --ring: 27 96% 61%;                  /* ember-400 #fb923c */
  --radius: 0.75rem;
  color-scheme: dark;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #0b0d10;
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgb(234 88 12 / 0.12), transparent 60%),
    radial-gradient(40rem 24rem at -10% 20%, rgb(58 70 83 / 0.25), transparent 60%);
  background-attachment: fixed;
}
#global, .dashboard-container, main { background: transparent !important; }
/* Header: sticky, translucent, like the site's. */
header {
  position: sticky; top: 0; z-index: 40;
  background-color: rgb(11 13 16 / 0.8) !important;
  border-bottom-color: rgb(26 32 39 / 0.8) !important;
  backdrop-filter: blur(8px);
}
header h1 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: #e9edf1; }
header .w-12.h-12 { width: 1.75rem; height: 1.75rem; }
header p.text-sm { display: none; } /* "System Monitoring Dashboard" */
header nav a { color: #7d8a97; }
header nav a:hover { color: #e9edf1; background-color: rgb(26 32 39 / 0.7) !important; }
/* Dashboard heading and the page block. */
.dashboard-container .text-4xl { font-size: 2.25rem; letter-spacing: -0.025em; color: #e9edf1; }
.dashboard-container .text-4xl + p, .dashboard-container p.text-muted-foreground { max-width: 48rem; }
/* Group sections and endpoint cards: the site's .card. */
.endpoint-group { border-color: #273039 !important; background: rgb(17 21 26 / 0.7); backdrop-filter: blur(4px); border-radius: 0.75rem !important; }
.endpoint-group-header { background: transparent !important; border-bottom-color: #1a2027 !important; }
.endpoint-group-header:hover { background: rgb(26 32 39 / 0.5) !important; }
.endpoint-group-header h2 { font-size: 1.125rem; color: #e9edf1; }
.endpoint { border-color: #273039 !important; background: rgb(17 21 26 / 0.7) !important; box-shadow: none !important; }
.endpoint:hover { border-color: #3a4653 !important; transform: none !important; }
.endpoint .hover\:text-primary:hover { color: #fb923c; }
/* Result bars: emerald for healthy, red for failing, forge for no data. */
.bg-green-500 { background-color: #10b981 !important; }
.bg-green-700, .hover\:bg-green-700:hover { background-color: #047857 !important; }
.bg-red-500 { background-color: #ef4444 !important; }
.bg-red-700, .hover\:bg-red-700:hover { background-color: #b91c1c !important; }
.bg-gray-200, .dark\:bg-gray-700 { background-color: #1a2027 !important; }
.bg-red-600 { background-color: #c2410c !important; } /* failing counter badge */
/* Buttons and controls. */
button, [role="button"] { border-radius: 0.375rem; }
a { text-underline-offset: 4px; }
/* Footer: keep the Gatus credit, drop its social icons. */
footer { border-top-color: #1a2027 !important; margin-top: 4rem; }
footer a.text-emerald-800 { color: #fb923c !important; }
footer a.text-emerald-800:hover { color: #fdba74 !important; }
footer .flex.flex-col > :not(:first-child) { display: none; }