/* Cyber-degen glass theme */
:root{
  --neon-primary: #0ff;
  --neon-secondary: #ff00e6;
  --neon-accent: #00ffa2;
  /* BossEngine-style glass on pure black */
  --glass-bg: rgba(0, 0, 0, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 255, 200, 0.05);
}
html, body{ min-height: 100%; height: 100%; }
body.theme-cyber{
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(0,255,214,0.03), transparent),
    radial-gradient(900px 500px at 110% 0%, rgba(255,0,230,0.03), transparent),
    radial-gradient(1400px 700px at 50% 120%, rgba(0, 170, 255, 0.03), transparent),
    #000000;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.nav-glass{ background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.4)); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--glass-border); box-shadow: var(--shadow-strong); min-height: 40px; }
.nav-glass a{ color:#cfe6ff; opacity: 0.88; transition: opacity .2s ease, text-shadow .2s ease; }
.nav-glass a:hover{ opacity: 1; text-shadow: 0 0 8px rgba(207, 230, 255, 0.35); }
.nav-glass a.nav-active{ color:#ffd76a; text-shadow: 0 0 10px rgba(255,215,106,0.4); }
.nav-links{ display:flex; flex-wrap: nowrap; align-items: center; }
.nav-links a{ font-size: 0.85rem; line-height: 1rem; padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }
.nav-group{ display:inline-flex; gap:8px; padding:2px 6px; border-radius:10px; background: rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.18); }
.nav-group-label{ font-size: 0.75rem; color:#9fb3c8; margin-right: 2px; letter-spacing: .5px; }
.nav-group-sep{ color:#64748b; padding: 0 4px; opacity: .7; }
.token-name-gold{ color:#ffd76a; text-shadow: 0 0 12px rgba(255,215,106,0.5), 0 0 24px rgba(255,215,106,0.35); font-weight:800; letter-spacing: 1px; }
.token-row{ background: linear-gradient(180deg, rgba(255,215,106,0.10), rgba(255,215,106,0.02)); border: 1px solid rgba(255,215,106,0.2); }
.brand-gradient{ background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(0,255,255,0.3); }
.btn-neon{ background: rgba(0,255,214,0.12); border: 1px solid rgba(0,255,214,0.35); color: #c3fff9; padding: 4px 10px; border-radius: 10px; box-shadow: 0 0 12px rgba(0,255,214,0.18), inset 0 0 6px rgba(0,255,214,0.12); transition: all .2s ease; display:inline-flex; align-items:center; gap:6px; white-space: nowrap; font-size: 0.85rem; line-height: 1; }
.btn-neon:hover{ transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,255,214,0.28), inset 0 0 12px rgba(0,255,214,0.18); }
.btn-neon--active{ background: rgba(0,204,255,0.18); border-color: rgba(0,204,255,0.55); color: #e6fbff; box-shadow: 0 0 16px rgba(0,204,255,0.28), inset 0 0 12px rgba(0,204,255,0.16); }
.btn-ghost{ color:#9fb3c8; padding:4px 10px; border-radius:10px; border:1px solid var(--glass-border); background: rgba(148,163,184,0.05); }
.modal-glass{ background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.5)); backdrop-filter: blur(22px) saturate(180%); border:1px solid var(--glass-border); border-radius:16px; padding:20px; box-shadow: var(--shadow-strong); }
.neon-text{ color:#e6faff; text-shadow: 0 0 10px rgba(0,255,214,0.3), 0 0 20px rgba(255,0,230,0.25); }
.token-pill{ display:flex; gap:10px; align-items:center; width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--glass-border); background: rgba(0, 0, 0, 0.55); color:#cfe6ff; box-shadow: inset 0 0 20px rgba(255,0,230,0.04), 0 10px 20px rgba(0,0,0,0.35); }
.token-pill:hover{ background: rgba(0, 0, 0, 0.75); border-color: rgba(0,255,214,0.35); box-shadow: 0 0 20px rgba(0,255,214,0.12), inset 0 0 20px rgba(255,0,230,0.08); }
.token-pill .star{ color:#ffd95a; text-shadow: 0 0 8px rgba(255,217,90,0.4); }

/* Dropdown nav (sexy) */
.nav-dropdown{ position: relative; display: inline-flex; align-items: center; }
.nav-drop-trigger{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:10px; background: rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.18); color:#cfe6ff; cursor: default; white-space: nowrap; font-size: 0.9rem; line-height: 1.2; }
.nav-drop-trigger:hover{ background: rgba(148,163,184,0.14); }
.nav-drop-menu{ position:absolute; top:110%; left:0; display:none; flex-direction:column; min-width:160px; padding:6px; gap:6px; background: rgba(0,0,0,0.92); border:1px solid var(--glass-border); border-radius:10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index:50; }
.nav-dropdown:hover .nav-drop-menu{ display:flex; }
.nav-drop-menu a{ padding:6px 8px; border-radius:8px; background: transparent; }
.nav-drop-menu a:hover{ background: rgba(148,163,184,0.12); }

/* Active group dot */
.nav-dot{ display:inline-block; width:6px; height:6px; border-radius:9999px; background:#0ea5e9; box-shadow: 0 0 6px rgba(14,165,233,0.7); margin-right:6px; }

/* Universal sexy selects (cyber glass) */
body.theme-cyber select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)),
    radial-gradient(200% 100% at 0% 0%, rgba(0,255,214,0.08), transparent);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 12px;
  color: #e6f3ff;
  padding: 10px 40px 10px 12px;
  min-height: 42px;
  line-height: 1.2;
  box-shadow: inset 0 0 18px rgba(0,255,214,0.06), 0 4px 14px rgba(0,0,0,0.35);
  transition: box-shadow .2s ease, border-color .2s ease, transform .1s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300ffd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
body.theme-cyber select:hover{
  border-color: rgba(0,255,214,0.45);
  box-shadow: inset 0 0 22px rgba(0,255,214,0.1), 0 6px 18px rgba(0,0,0,0.4);
}
body.theme-cyber select:focus{
  outline: none;
  border-color: rgba(0,255,214,0.6);
  box-shadow: 0 0 0 3px rgba(0,255,214,0.15), inset 0 0 26px rgba(0,255,214,0.12);
  transform: translateY(-1px);
}
/* Hide default arrow in old IE */
select::-ms-expand{ display: none; }
/* Option text color */
body.theme-cyber select option{ color: #000; background: #e6faff; }

/* Tailwind slate overrides to remove blue tint in containers */
.bg-slate-900{ background-color: rgba(0,0,0,0.85) !important; }
.bg-slate-800{ background-color: rgba(0,0,0,0.7) !important; }
.bg-slate-700{ background-color: rgba(0,0,0,0.6) !important; }
.border-slate-700{ border-color: rgba(255,255,255,0.14) !important; }
.border-slate-600{ border-color: rgba(255,255,255,0.16) !important; }
.shadow{ box-shadow: 0 10px 24px rgba(0,0,0,0.5) !important; }

/* Neon link style (avoid Tailwind sky blue) */
.link-neon{ color:#00ccff !important; text-decoration:none; transition: color .2s ease, text-shadow .2s ease; text-shadow: 0 0 6px rgba(0,204,255,0.25); }
.link-neon:hover{ color:#66e0ff !important; text-shadow: 0 0 10px rgba(0,204,255,0.45); }

/* Give generic Tailwind containers a visible glass outline/background */
.bg-slate-900,
.bg-slate-800,
.bg-slate-700{
  background-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.65));
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 0 18px rgba(255,255,255,0.02);
}
.bg-slate-900:hover,
.bg-slate-800:hover,
.bg-slate-700:hover{
  border-color: rgba(0,255,214,0.25) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 0 20px rgba(0,255,214,0.08), inset 0 0 22px rgba(255,255,255,0.03);
}

/* ========================= */
/* Overview page enhancements */
/* ========================= */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rainbow-animated{
  background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary), var(--neon-accent), var(--neon-primary));
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gradientShift 10s ease infinite;
  text-shadow: 0 0 20px rgba(0,255,214,0.25), 0 0 36px rgba(255,0,230,0.18);
}

.hero-landing{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(60% 120% at -10% -10%, rgba(0,255,214,0.06), transparent),
    radial-gradient(80% 100% at 110% 0%, rgba(255,0,230,0.05), transparent),
    linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55));
  box-shadow: var(--shadow-strong);
}
.hero-landing:before, .hero-landing:after{
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(300px 300px at 20% 30%, rgba(0,255,214,0.08), transparent),
    radial-gradient(300px 300px at 80% 20%, rgba(255,0,230,0.07), transparent),
    radial-gradient(400px 400px at 50% 110%, rgba(0, 170, 255, 0.06), transparent);
  filter: blur(12px);
  pointer-events: none;
}

.grid-overlay{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mask-image: radial-gradient(100% 60% at 50% 40%, #000 60%, transparent 100%);
  pointer-events: none;
}

.glow-orb{
  position: absolute;
  width: 220px; height: 220px; border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(0,255,214,0.4), rgba(0,255,214,0.0) 70%);
  filter: blur(24px);
  opacity: .6;
}
.glow-orb.pink{ background: radial-gradient(circle at 30% 30%, rgba(255,0,230,0.35), rgba(255,0,230,0.0) 70%); }
.glow-orb.blue{ background: radial-gradient(circle at 30% 30%, rgba(14,165,233,0.35), rgba(14,165,233,0.0) 70%); }

@keyframes floaty { 0%{ transform: translateY(0px); } 50%{ transform: translateY(-8px); } 100%{ transform: translateY(0px); } }
.floaty{ animation: floaty 6s ease-in-out infinite; }

.card-neo{
  position: relative;
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 20px rgba(255,0,230,0.05), 0 10px 30px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-neo:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,214,0.35);
  box-shadow: 0 0 24px rgba(0,255,214,0.14), inset 0 0 26px rgba(255,0,230,0.08);
}
.card-neo .title{ font-weight: 700; letter-spacing: .5px; }
.card-neo .desc{ color:#b8c9dd; font-size:.95rem; }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 9999px; font-size: .8rem;
  background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.28);
}
.status-pill .dot{ width:8px; height:8px; border-radius:9999px; box-shadow: 0 0 8px currentColor; }
.status-pill.ok{ color:#9fffea; border-color: rgba(0,255,214,0.4); background: rgba(0,255,214,0.12); }
.status-pill.ok .dot{ background:#00ffd6; }
.status-pill.warn{ color:#ffd76a; border-color: rgba(255,215,106,0.5); background: rgba(255,215,106,0.12); }
.status-pill.warn .dot{ background:#ffd76a; }
.status-pill.deny{ color:#ffb4c4; border-color: rgba(244,63,94,0.5); background: rgba(244,63,94,0.12); }
.status-pill.deny .dot{ background:#f43f5e; }

.shine{ position: relative; overflow:hidden; }
.shine:after{
  content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 20%, rgba(255,255,255,0) 40%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.shine:hover:after{ transform: translateX(100%); }

.display-xl{ font-size: clamp(2rem, 1.2rem + 4vw, 4rem); line-height: 1.05; }
.display-sub{ font-size: clamp(1rem, 0.9rem + 1vw, 1.4rem); }