/* ==========================================================================
   Nezha v1 Vibrant Canvas & Neon Glass Theme (Transparent Flowing Backdrop)
   ========================================================================== */

:root {
  --monitor-page: #f7f9fc;
  --monitor-text: #172033;
  --monitor-muted: #52627a;
  --monitor-surface: rgba(255, 255, 255, .97);
  --monitor-header: rgba(255, 255, 255, .97);
  --monitor-border: #cbd5e1;
  --monitor-shadow: 0 12px 36px -12px rgba(15, 23, 42, .12);
  --monitor-heading-shadow: none;
  --monitor-ambient-opacity: .045;
  --monitor-scrollbar: #8998ac;
  color-scheme: light;
}

:root.dark {
  --monitor-page: #04060d;
  --monitor-text: #f8fafc;
  --monitor-muted: #b5c3d6;
  --monitor-surface: rgba(14, 20, 38, .86);
  --monitor-header: rgba(7, 11, 22, .94);
  --monitor-border: rgba(148, 163, 184, .3);
  --monitor-shadow: 0 16px 40px -10px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  --monitor-heading-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  --monitor-ambient-opacity: .72;
  --monitor-scrollbar: #64748b;
  color-scheme: dark;
}

:root:not(.dark) {
  --background: 210 40% 98% !important;
  --foreground: 221 38% 15% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 221 38% 15% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 221 38% 15% !important;
  --primary: 173 80% 24% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 210 40% 96% !important;
  --secondary-foreground: 221 38% 15% !important;
  --muted: 210 40% 96% !important;
  --muted-foreground: 215 19% 36% !important;
  --accent: 210 40% 94% !important;
  --accent-foreground: 221 38% 15% !important;
  --border: 214 32% 81% !important;
  --input: 214 32% 81% !important;
  --ring: 173 80% 24% !important;
}

:root:not(.dark), :root:not(.dark) body {
  background-image: none !important;
}

:root:not(.dark) [class*="card"] {
  background-color: var(--monitor-surface) !important;
  border-color: var(--monitor-border) !important;
  box-shadow: var(--monitor-shadow) !important;
}

:root :is(button, a).bg-primary {
  background: linear-gradient(135deg, #047857, #0f766e) !important;
  color: #fff !important;
}

/* 1. Base Setup */
html:root, html:root body {
  background-color: var(--monitor-page) !important;
  color: var(--monitor-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#ambient-bg-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: var(--monitor-ambient-opacity);
}

/* 2. Remove Opaque Containers so Dynamic Ambient Canvas shines through! */
#root, 
#root > div, 
#app, 
main, 
.bg-background:not([data-slot]):not([role="dialog"]),
div[class*="min-h-screen"], 
div[class*="w-full flex-col"] {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 3. Glassmorphism Translucent Server Cards (68% Opacity lets orbs glow through!) */
:root .bg-card,
:root div.rounded-lg.border,
:root div[class*="rounded-xl border"],
:root div[data-slot="card"] {
  background: var(--monitor-surface) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--monitor-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--monitor-shadow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bg-card:hover, 
div.rounded-lg.border:hover,
div[class*="rounded-xl border"]:hover {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: var(--monitor-shadow), 0 0 24px rgba(168, 85, 247, .14) !important;
  transform: translateY(-3px) !important;
}

/* 4. Neon Dynamic Progress Bars */
[role="progressbar"] > div {
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #6366f1 100%) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.6) !important;
}

/* 5. Translucent Top Navigation & Header */
header, nav, [data-slot="header"] {
  background-color: var(--monitor-header) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--monitor-border) !important;
}

/* 6. Typography High Contrast */
h1, h2, h3, h4 {
  color: var(--monitor-text) !important;
  font-weight: 600 !important;
  text-shadow: var(--monitor-heading-shadow) !important;
}

span, div, p {
  font-feature-settings: "tnum";
}

/* 7. Status Pulse Beacon */
.bg-green-500, [class*="bg-emerald"] {
  box-shadow: 0 0 10px #10b981, 0 0 20px rgba(16, 185, 129, 0.6) !important;
}

/* 8. Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--monitor-scrollbar); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--monitor-muted); }

.text-muted-foreground, [class*="text-muted"], [class*="text-foreground/"],
.server-footer-name, .server-footer-theme {
  color: var(--monitor-muted) !important;
}

.text-sm.font-medium:is(.opacity-40, .opacity-50):not(:disabled):not([aria-disabled="true"]) {
  color: var(--monitor-muted) !important;
  opacity: 1 !important;
}

input::placeholder, textarea::placeholder {
  color: var(--monitor-muted) !important;
  opacity: 1;
}