:root {
  --cs-bg: #0c0f14;
  --cs-surface: #141821;
  --cs-surface-hover: #1a2030;
  --cs-border: #232a36;
  --cs-border-hover: #364252;
  --cs-text: #e6e9ef;
  --cs-heading: #f4f6fa;
  --cs-muted: #8b95a5;
  --cs-accent: #3b82f6;
}

html, body, #__next {
  background: var(--cs-bg) !important;
  color: var(--cs-text) !important;
}

/* Reduce visual noise from Homepage chrome */
footer, [class*="version"], a[href*="gethomepage"] {
  opacity: 0.4;
}

/* Constrain content to a comfortable command-center width */
main, #page_container, [class*="page"] {
  max-width: 1440px !important;
}

/* Title hierarchy */
h1, h2, h3 {
  color: var(--cs-heading) !important;
  letter-spacing: -0.01em;
}

/* Group headings: quiet, uppercase, NOC-style with a divider rule */
[id^="group-"] h2,
section h2 {
  color: var(--cs-muted) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--cs-border) !important;
}

/* Service and bookmark cards: flat, bordered, no gradient or glow */
a[class*="service"],
div[class*="service-card"],
div[class*="card"],
li[class*="service"] > a,
li[class*="bookmark"] > a {
  border: 1px solid var(--cs-border) !important;
  background: var(--cs-surface) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

a[class*="service"]:hover,
div[class*="service-card"]:hover,
li[class*="service"] > a:hover,
li[class*="bookmark"] > a:hover {
  border-color: var(--cs-border-hover) !important;
  background: var(--cs-surface-hover) !important;
  box-shadow: none !important;
}

/* Card text */
a[class*="service"] div,
li[class*="service"] a,
li[class*="bookmark"] a {
  color: var(--cs-text) !important;
}

[class*="description"] {
  color: var(--cs-muted) !important;
}

/* Status chips and monitors */
[class*="status"], [class*="siteMonitor"] {
  border-radius: 4px !important;
}

/* Icons: flat, no drop shadow */
img[alt$=" Icon"], img[alt*="Icon"], svg {
  filter: none !important;
}

/* Inputs and buttons */
input, button {
  border-radius: 6px !important;
  background: var(--cs-surface) !important;
  border: 1px solid var(--cs-border) !important;
}

input:focus, button:focus {
  border-color: var(--cs-accent) !important;
  outline: none !important;
}