:root {
  --background: #08070d;
  --foreground: #f6f2ff;
  --card: rgba(20, 17, 31, .78);
  --card-foreground: #f6f2ff;
  --popover: #161225;
  --popover-foreground: #f6f2ff;
  --primary: #a78bfa;
  --primary-foreground: #100b1e;
  --secondary: #211b33;
  --secondary-foreground: #eee7ff;
  --muted: #171326;
  --muted-foreground: #b3a9ca;
  --accent: #2a2142;
  --accent-foreground: #faf7ff;
  --border: rgba(224, 212, 255, .13);
  --input: rgba(224, 212, 255, .16);
  --ring: #a78bfa;
  --radius: .85rem;
  --sidebar-background: rgba(11, 9, 18, .86);
  --sidebar-foreground: #eee7ff;
  --sidebar-primary: #a78bfa;
  --sidebar-primary-foreground: #100b1e;
  --sidebar-accent: rgba(167, 139, 250, .15);
  --sidebar-accent-foreground: #fff;
  --sidebar-border: rgba(224, 212, 255, .13);
  --sidebar-ring: #a78bfa;
}

html.dark,
html.dark body,
html.dark #root {
  background: #08070d !important;
  color: #f6f2ff;
}

html.dark body {
  background-image: linear-gradient(135deg, rgba(167, 139, 250, .055), transparent 38%),
    linear-gradient(315deg, rgba(99, 102, 241, .045), transparent 42%);
}

html.dark header,
html.dark aside,
html.dark nav {
  background-color: rgba(10, 8, 17, .86) !important;
  border-color: rgba(224, 212, 255, .12) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html.dark [class*="rounded"].border,
html.dark [data-slot="card"],
html.dark [role="dialog"],
html.dark [data-radix-popper-content-wrapper] > div {
  border-color: rgba(224, 212, 255, .14) !important;
  background-color: rgba(20, 17, 31, .82) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

html.dark input,
html.dark textarea,
html.dark select {
  background-color: rgba(8, 7, 13, .72) !important;
  border-color: rgba(224, 212, 255, .18) !important;
  color: #f6f2ff !important;
}

html.dark button,
html.dark [role="button"] {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

html.dark button:hover:not(:disabled),
html.dark [role="button"]:hover:not([aria-disabled="true"]) {
  border-color: rgba(167, 139, 250, .55) !important;
  box-shadow: 0 8px 22px rgba(81, 48, 142, .2);
}

html.dark button:active:not(:disabled),
html.dark [role="button"]:active:not([aria-disabled="true"]) {
  transform: translateY(1px);
}

html.dark a {
  transition: color .18s ease, opacity .18s ease;
}

html.dark a:hover {
  color: #d8caff;
}

html.dark [data-slot="table"] tbody tr:hover,
html.dark table tbody tr:hover {
  background-color: rgba(167, 139, 250, .08) !important;
}

html.dark ::selection {
  background: rgba(167, 139, 250, .35);
  color: #fff;
}

@media (max-width: 700px) {
  html.dark header,
  html.dark aside {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}