body, #app { background: #000 !important; }

#app { position: relative; z-index: 1; }
#app::before, #app::after { content: ''; position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(80px); }
#app::before { width: 500px; height: 500px; top: -200px; right: -100px; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%); animation: aurora-drift 20s ease-in-out infinite alternate; }
#app::after { width: 400px; height: 400px; bottom: -100px; left: -100px; background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%); animation: aurora-drift 25s ease-in-out infinite alternate-reverse; }
body::after { content: ''; position: fixed; pointer-events: none; z-index: -1; width: 350px; height: 350px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%); filter: blur(100px); animation: aurora-pulse 15s ease-in-out infinite alternate; }

@keyframes aurora-drift { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,-30px) scale(1.1); } 66% { transform: translate(-30px,40px) scale(0.95); } 100% { transform: translate(40px,-60px) scale(1.05); } }
@keyframes aurora-pulse { 0% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.8); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.9); } }

.header, nav:has(+ main), [class*="header"] { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.header > div:first-child, [class*="brand"] { display: flex !important; align-items: center !important; gap: 10px !important; }
.header h1, .header-title, [class*="header-title"] { font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; color: #fff !important; }

h2, .dashboard-heading { font-size: 2.25rem !important; font-weight: 800 !important; letter-spacing: -0.025em !important; color: #fff !important; }
.dashboard-subheading { color: #a1a1aa !important; font-size: 1.125rem !important; }

[class*="endpoint"], [class*="card"], .endpoint-item { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; transition: all 0.3s ease !important; padding: 1.5rem !important; }
[class*="endpoint"]:hover, [class*="card"]:hover, .endpoint-item:hover { border-color: rgba(255,255,255,0.2) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 20px 60px rgba(139,92,246,0.1) !important; transform: translateY(-2px) !important; }

.endpoint-name, [class*="endpoint-name"] { font-weight: 700 !important; color: #fff !important; font-size: 1rem !important; }
.group-label, [class*="group-label"] { font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; color: #a78bfa !important; margin-bottom: 0.75rem !important; }

.badge-success, [class*="badge-success"], .status-up { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; border-radius: 9999px !important; }
.badge-danger, [class*="badge-danger"], .status-down { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; border-radius: 9999px !important; }

[class*="uptime-bar"], [class*="uptime"] { border-radius: 8px !important; }

.header > div:first-child::before { content: ''; display: inline-block; width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 8px; flex-shrink: 0; }

.footer, [class*="footer"] { border-top: 1px solid rgba(255,255,255,0.08) !important; color: #71717a !important; font-size: 0.875rem !important; }
a { color: #a78bfa !important; transition: color 0.2s ease !important; }
a:hover { color: #c4b5fd !important; }
[class*="spinner"], [class*="loading"] { color: #8b5cf6 !important; }