:root {
  --radar-bg-1: #eef6ff;
  --radar-bg-2: #dbeafe;
  --radar-panel: rgba(255, 255, 255, 0.94);
  --radar-border: rgba(43, 72, 110, 0.14);
  --radar-text: #0f172a;
  --radar-muted: #475569;
  --radar-ping: #0f766e;
  --radar-ping-soft: rgba(20, 184, 166, 0.16);
  --radar-ping-border: rgba(13, 148, 136, 0.34);
  --radar-tcp: #1d4ed8;
  --radar-tcp-soft: rgba(59, 130, 246, 0.16);
  --radar-tcp-border: rgba(37, 99, 235, 0.34);
}

html.dark {
  --radar-bg-1: #07111f;
  --radar-bg-2: #0d1b2a;
  --radar-panel: rgba(8, 16, 30, 0.86);
  --radar-border: rgba(120, 170, 220, 0.16);
  --radar-text: #d9e7f5;
  --radar-muted: #8fa8c1;
  --radar-ping: #5eead4;
  --radar-ping-soft: rgba(45, 212, 191, 0.16);
  --radar-ping-border: rgba(45, 212, 191, 0.28);
  --radar-tcp: #93c5fd;
  --radar-tcp-soft: rgba(96, 165, 250, 0.16);
  --radar-tcp-border: rgba(96, 165, 250, 0.28);
}

body {
  background:
    radial-gradient(circle at top left, var(--radar-ping-soft), transparent 30%),
    radial-gradient(circle at top right, var(--radar-tcp-soft), transparent 34%),
    linear-gradient(180deg, var(--radar-bg-1), var(--radar-bg-2));
  color: var(--radar-text) !important;
}

.page-header,
.dashboard-header,
.endpoint-group,
.toolbar,
.stats,
.endpoint,
.endpoint-card {
  background: var(--radar-panel) !important;
  color: var(--radar-text) !important;
  border: 1px solid var(--radar-border) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-radius: 18px !important;
}

.page-header__heading,
.dashboard-header__heading,
.endpoint-group__heading,
.endpoint__name,
.endpoint-card__title,
.stats,
.toolbar,
h1, h2, h3, h4, h5, h6 {
  color: var(--radar-text) !important;
}

.dashboard-header__subtitle,
.page-header__subtitle,
.endpoint-card__description,
.endpoint__description,
.endpoint__body,
.endpoint-card,
.endpoint,
.stats *,
.toolbar * {
  color: var(--radar-muted) !important;
}

.endpoint__name,
.endpoint-card__title {
  color: var(--radar-text) !important;
  font-weight: 700;
}

.page-header__heading,
.dashboard-header__heading {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-header__subtitle,
.page-header__subtitle {
  max-width: 980px;
}

.page-header__buttons a,
.page-header__buttons button {
  border-radius: 999px !important;
  border: 1px solid var(--radar-border) !important;
  background: rgba(255, 255, 255, 0.30) !important;
  color: var(--radar-text) !important;
  font-weight: 600;
}

html.dark .page-header__buttons a,
html.dark .page-header__buttons button {
  background: rgba(255, 255, 255, 0.05) !important;
}

.endpoint-group {
  overflow: visible !important;
}

.endpoint-group-header {
  border-radius: 16px 16px 0 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.endpoint-group-content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.endpoint-group:nth-of-type(1) .endpoint-group-header {
  background: linear-gradient(90deg, var(--radar-ping-soft), transparent) !important;
  border-bottom: 1px solid var(--radar-ping-border) !important;
}

.endpoint-group:nth-of-type(1) .endpoint-group__heading,
.endpoint-group:nth-of-type(1) .endpoint-group-header,
.endpoint-group:nth-of-type(1) .endpoint-group-header * {
  color: var(--radar-ping) !important;
}

.endpoint-group:nth-of-type(2) .endpoint-group-header {
  background: linear-gradient(90deg, var(--radar-tcp-soft), transparent) !important;
  border-bottom: 1px solid var(--radar-tcp-border) !important;
}

.endpoint-group:nth-of-type(2) .endpoint-group__heading,
.endpoint-group:nth-of-type(2) .endpoint-group-header,
.endpoint-group:nth-of-type(2) .endpoint-group-header * {
  color: var(--radar-tcp) !important;
}

.endpoint-group__heading {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.84rem;
  font-weight: 800;
}

.endpoint-card__description,
.endpoint__description {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
}

.endpoint-group button[aria-expanded="false"] svg,
.endpoint-group button[aria-expanded="false"] {
  transform: none !important;
}

.endpoint-group button {
  opacity: 0.85;
}