:root,
:root.light,
:root.dark {
  --background: 202 58% 7%;
  --foreground: 174 38% 94%;
  --card: 198 46% 11%;
  --card-foreground: 174 38% 94%;
  --popover: 198 46% 11%;
  --popover-foreground: 174 38% 94%;
  --primary: 172 66% 50%;
  --primary-foreground: 202 58% 7%;
  --secondary: 197 38% 16%;
  --secondary-foreground: 174 38% 94%;
  --muted: 197 34% 15%;
  --muted-foreground: 183 17% 67%;
  --accent: 190 42% 20%;
  --accent-foreground: 174 38% 96%;
  --border: 190 35% 22%;
  --input: 190 35% 22%;
  --ring: 172 66% 50%;
  --radius: 0.8rem;
}

html { background: #061720; }
body {
  background:
    radial-gradient(circle at 78% 8%, rgba(45, 212, 191, .13), transparent 28rem),
    radial-gradient(circle at 8% 42%, rgba(35, 106, 128, .18), transparent 34rem),
    #061720;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}
#global { background: transparent; min-height: 100vh; }

header {
  background: rgba(6, 23, 32, .78) !important;
  border-color: rgba(94, 234, 212, .16) !important;
  position: sticky;
  top: 0;
  z-index: 30;
}
header img { filter: hue-rotate(115deg) saturate(1.25) drop-shadow(0 0 10px rgba(45, 212, 191, .35)); }
header h1 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}

.dashboard-container { background: transparent !important; position: relative; overflow: hidden; }
.dashboard-container::before,
.dashboard-container::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(94, 234, 212, .12);
  border-radius: 999px;
  pointer-events: none;
}
.dashboard-container::before { width: 28rem; height: 28rem; right: -13rem; top: -15rem; }
.dashboard-container::after { width: 20rem; height: 20rem; right: -9rem; top: -11rem; }
.dashboard-container > .container { position: relative; z-index: 1; }
.dashboard-container > .container > .mb-6 > .flex:first-child {
  align-items: end;
  background: linear-gradient(115deg, rgba(12, 48, 61, .88), rgba(7, 31, 42, .72));
  border: 1px solid rgba(94, 234, 212, .18);
  border-radius: 1.25rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .035);
  padding: clamp(1.2rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}
.dashboard-container > .container > .mb-6 > .flex:first-child::after {
  content: "PASSIVE SERVICE WATCH";
  position: absolute;
  right: 1.4rem;
  top: 1rem;
  color: rgba(153, 246, 228, .52);
  font: 600 .66rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
.dashboard-container h1.text-4xl {
  max-width: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.dashboard-container h1.text-4xl + p { max-width: 48rem; color: #a7c9c9; line-height: 1.55; }

.dashboard-container .bg-card.rounded-lg.border {
  background: rgba(9, 38, 50, .72) !important;
  border-color: rgba(94, 234, 212, .16) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .16);
}
.endpoint {
  background: linear-gradient(155deg, rgba(13, 53, 66, .95), rgba(7, 31, 42, .94)) !important;
  border-color: rgba(94, 234, 212, .15) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.endpoint:hover { border-color: rgba(94, 234, 212, .42) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 22px rgba(45, 212, 191, .06); }
.endpoint-header [role="link"] { font-weight: 650; letter-spacing: -.01em; }
.endpoint-header .text-muted-foreground { color: #76a9aa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.endpoint-content .bg-green-500 { background-color: #2dd4bf; }
.endpoint-content .bg-green-700 { background-color: #14b8a6; }
.endpoint-content .bg-red-500 { background-color: #ff765f; }
footer { border-color: rgba(94, 234, 212, .12) !important; color: #76a9aa; }
button:focus-visible, a:focus-visible, [role="link"]:focus-visible, input:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 3px;
}

@media (max-width: 639px) {
  header .container { padding-block: .7rem; }
  header .w-12.h-12 { width: 2.35rem; height: 2.35rem; }
  header h1 { font-size: 1.05rem !important; }
  .dashboard-container > .container { padding: 1rem .8rem 2rem; }
  .dashboard-container > .container > .mb-6 > .flex:first-child {
    align-items: flex-start;
    min-height: 12rem;
    padding: 3.2rem 1.1rem 1.15rem;
  }
  .dashboard-container h1.text-4xl { font-size: clamp(2rem, 10vw, 2.65rem); white-space: nowrap; }
  .dashboard-container h1.text-4xl + p { font-size: .88rem; padding-right: .2rem; }
  .dashboard-container > .container > .mb-6 > .flex:first-child > .flex { position: absolute; right: .65rem; bottom: .65rem; gap: .15rem; }
  .dashboard-container > .container > .mb-6 > .flex:first-child::after { left: 1.1rem; right: auto; top: 1.15rem; font-size: .6rem; }
  .dashboard-container .flex-col.lg\\:flex-row { padding: .7rem; gap: .65rem; }
  .dashboard-container .flex-col.sm\\:flex-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .dashboard-container .flex-col.sm\\:flex-row > div { min-width: 0; display: block; }
  .dashboard-container .flex-col.sm\\:flex-row label { display: block; margin-bottom: .3rem; }
  .dashboard-container .flex-col.sm\\:flex-row button { width: 100%; min-height: 2.75rem; }
  .endpoint { transform: none !important; }
  .endpoint-header, .endpoint-content { padding-left: .9rem !important; padding-right: .9rem !important; }
  .endpoint-content .h-6 { min-width: 3px; height: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}