:root {
  --night-0: #030712;
  --night-1: #070d1b;
  --night-2: #0f172a;
  --night-3: #16213e;
  --panel: rgba(15, 23, 42, 0.76);
  --panel-strong: rgba(17, 24, 39, 0.92);
  --line: rgba(125, 146, 191, 0.22);
  --moon: #d9e7ff;
  --silver: #b8c6ea;
  --mist: #8f9fc5;
  --cyan: #67e8f9;
  --violet: #a78bfa;
  --amber: #ff9e42;
  --danger: #f87171;
  --alt: rgba(59, 130, 246, 0.16);
}

html {
  background: var(--night-0);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  color: var(--moon);
  background:
    radial-gradient(circle at 15% 12%, rgba(139, 92, 246, .18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(103, 232, 249, .14), transparent 30%),
    radial-gradient(circle at 55% 92%, rgba(255, 158, 66, .08), transparent 36%),
    linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 48%, var(--night-2) 100%);
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 55% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 82% 78%, rgba(255,255,255,.32), transparent);
  background-size: 100% 100%;
  opacity: .65;
}

#moondog-starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.main-shell {
  position: relative;
  z-index: 1;
}

.glass-nav {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--panel-strong) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .28);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--moon);
}

.brand-dot {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cyan), var(--violet));
  box-shadow: 0 0 18px rgba(103, 232, 249, .55);
}

.nav-link {
  color: var(--silver) !important;
  font-weight: 600;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--moon) !important;
  background: rgba(103, 232, 249, .08);
  border-radius: 999px;
}

.navbar-toggler {
  border-color: var(--line);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(217,231,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.hero {
  padding: 3.5rem 0 2.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 75% 35%, rgba(255, 158, 66, .12), transparent 35%);
}

.hero-card {
  background: linear-gradient(145deg, rgba(18, 24, 44, .95), rgba(32, 16, 58, .92));
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
}

.glass-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  padding: 1.25rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, .38);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .3);
}

.display-title {
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--moon);
}

.body-muted {
  color: var(--mist);
}

.cta-primary,
.btn-glow {
  background: linear-gradient(135deg, rgba(103, 232, 249, .28), rgba(167, 139, 250, .42));
  border: 1px solid rgba(103, 232, 249, .42);
  color: var(--moon);
  font-weight: 700;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: 0 0 28px rgba(103, 232, 249, .16);
}

.cta-primary:hover,
.btn-glow:hover {
  color: var(--moon);
  background: linear-gradient(135deg, rgba(103, 232, 249, .38), rgba(167, 139, 250, .55));
  border-color: rgba(167, 139, 250, .62);
}

.form-control,
form input,
form select,
form textarea {
  background: rgba(8, 14, 30, .82);
  border: 1px solid rgba(139, 92, 246, .28);
  color: var(--moon);
  border-radius: .75rem;
}

.form-control:focus,
form input:focus,
form select:focus,
form textarea:focus {
  background: rgba(7, 12, 26, .95);
  color: var(--moon);
  border-color: var(--cyan);
  box-shadow: 0 0 0 .15rem rgba(103, 232, 249, .18);
}

label,
.form-label {
  color: var(--silver);
  font-weight: 600;
}

.table-night {
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: rgba(103,232,249,.045);
  color: var(--moon);
}

.table-night th {
  color: var(--moon);
  border-color: var(--line);
  background: rgba(8, 14, 30, .82);
}

.table-night td {
  border-color: var(--line);
  color: var(--silver);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(103, 232, 249, .1);
  color: var(--moon);
  border: 1px solid rgba(103, 232, 249, .24);
  font-size: .9rem;
  font-weight: 700;
}

.status-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

.status-dot.online {
  background: #34d399;
  box-shadow: 0 0 18px #34d399;
}

.stat-tile {
  background: linear-gradient(145deg, rgba(18, 24, 44, .95), rgba(28, 16, 60, .84));
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  min-height: 100%;
}

.stat-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--moon);
  line-height: 1;
}

.stat-label {
  color: var(--mist);
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.footer-night {
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 18, .76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mist);
  margin-top: 3rem;
}

.footer-night a {
  color: var(--silver);
}

.pumpkin-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, rgba(255, 158, 66,.4), rgba(255, 100, 0,.12));
  box-shadow: 0 0 20px rgba(255, 130, 25, .45);
  margin-inline-start: .5rem;
}

.pumpkin-face {
  width: 1.55rem;
  height: 1.3rem;
  position: relative;
  filter: drop-shadow(0 0 8px rgba(255,135,30,.7));
}

.pumpkin-eye,
.pumpkin-mouth {
  background: radial-gradient(circle, rgba(255,105,0,1), rgba(255,135,0,.95));
  box-shadow: 0 0 8px rgba(255,135,0,.9);
  border-radius: 50%;
}

.pumpkin-eye {
  position: absolute;
  top: .18rem;
  width: .32rem;
  height: .42rem;
}

.pumpkin-eye.left {
  left: .28rem;
  transform: rotate(-12deg);
}

.pumpkin-eye.right {
  right: .28rem;
  transform: rotate(12deg);
}

.pumpkin-mouth {
  position: absolute;
  left: 50%;
  bottom: .12rem;
  width: .85rem;
  height: .34rem;
  border-radius: .4rem / .28rem;
  transform: translateX(-50%);
  clip-path: polygon(0% 0%, 12% 100%, 35% 55%, 62% 55%, 88% 100%, 100% 0%);
}

.pumpkin-stem {
  position: absolute;
  top: -.22rem;
  left: 48%;
  width: .35rem;
  height: .35rem;
  border-radius: .12rem;
  background: linear-gradient(180deg, #24a120, #0c5a14);
  transform: rotate(12deg);
}

@keyframes pumpkinFlicker {
  0%, 100% {
    filter: brightness(1);
    transform: scale(1);
  }
  34% {
    filter: brightness(1.08);
  }
  68% {
    filter: brightness(.96);
    transform: scale(.985);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pumpkin-face {
    animation: pumpkinFlicker 3.4s ease-in-out infinite;
  }
}

@media (max-width: 991.98px) {
  .hero { padding: 2.5rem 0 1.5rem; }
  .display-title { font-size: 2rem; }
  .hero-card { padding: 1.35rem; }
  .glass-card { padding: 1rem; }
}

@media (max-width: 575.98px) {
  .display-title { font-size: 1.65rem; }
  .pumpkin-wrap { width: 2rem; height: 2rem; }
}