/* Custom small helpers for neon palette */
:root{
  --neonYellow: #f5c400;
  --neonCyan: #00f0ff;
  --neonGreen: #00FFD1;
  --neonPurple: #b26bff;
  --neon: #00ff88;
  --glass: rgba(255,255,255,0.03);
}

/* subtle glass for panels */
.bg-white\/3 { /* utility used above for 30% white overlay */
  background-color: rgba(255,255,255,0.03);
}
.bg-white\/4 {
  background-color: rgba(255,255,255,0.04);
}

/* small tweak for canvas responsiveness */
/* canvas { width: 100% !important; height: auto !important; } */
.chart-container {
  position: relative;
  height: 240px;
}

.chart {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}


/* ===== Neon Futuristic Header (TRON/Matrix vibes) ===== */


/* base */
* { box-sizing: border-box; }
body { background: var(--bg); color: #dffaff; font-family: Inter, ui-sans-serif, system-ui, "Orbitron", sans-serif; }

/* header container */
.header-glow {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: auto;
  transition: backdrop-filter .28s ease, background-color .28s ease, transform .18s ease;
  padding-bottom: 6px;
}

/* neon glass bar + subtle blur */
.header-glow .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(0,240,255,0.06);
  padding: 10px 18px;
  border-radius: 10px;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 6px 40px rgba(0,0,0,0.6), 0 0 30px rgba(0,240,255,0.03) inset;
}

/* scrolled state style */
.header-scrolled {
  transform: translateY(-2px);
  background-color: rgba(0,0,0,0.45);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* logo */
.neon-logo {
  color: var(--neonYellow);
  letter-spacing: 0.6px;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(245,196,0,0.08), 0 8px 30px rgba(178,107,255,0.02);
}

/* nav links desktop */
.desktop-nav .nav-link {
  color: rgba(255,255,255,0.85);
  position: relative;
  padding: 6px 4px;
  transition: color .18s ease, transform .14s ease;
}
.desktop-nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0%;
  height:2px;
  background: linear-gradient(90deg,var(--neonCyan),var(--neonGreen));
  transition: width .22s ease;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0,240,255,0.18);
}
.desktop-nav .nav-link:hover{
  color: var(--neonCyan);
  transform: translateY(-3px);
  text-shadow: 0 0 12px rgba(0,240,255,0.12);
}
.desktop-nav .nav-link:hover::after{ width:100%; }

/* buttons */
.btn {
  font-weight:600;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.connect-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: #dffaff;
  font-size: .8rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.connect-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 30px rgba(0,255,209,0.06);
}
.join-btn {
  background: linear-gradient(90deg,var(--neonPurple), #d6a8ff);
  color: #000;
  font-size: .9rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(178,107,255,0.12);
}
.join-btn:hover { transform: translateY(-3px); }

/* HAMBURGER (three bars neon) */
.hamburger {
  width:44px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 70;
}
.hamburger .bar{
  display:block;
  width:20px;
  height:2px;
  margin: 3px 0;
  background: linear-gradient(90deg,var(--neonCyan),var(--neonGreen));
  border-radius:2px;
  box-shadow: 0 0 10px rgba(0,240,255,0.14);
  transform-origin: center;
  transition: transform .22s ease, opacity .2s ease;
}

/* mobile nav & overlay */
.nav-overlay {
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 55;
}
.nav-overlay.show {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(6,6,8,0.98), rgba(2,2,2,0.96));
  border-left: 1px solid rgba(0,240,255,0.06);
  box-shadow: -40px 0 120px rgba(0,0,0,0.6), -8px 0 40px rgba(0,240,255,0.02) inset;
  transition: right .34s cubic-bezier(.2,.9,.2,1);
  z-index: 60;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mobile-nav.open { right: 0; }

/* mobile top row */
.mobile-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.close-mobile-btn {
  font-size: 1.6rem;
  color: var(--neonCyan);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px;
  transition: transform .12s ease;
}
.close-mobile-btn:hover { transform: scale(1.06); }

/* mobile links */
.mobile-links { display:flex; flex-direction:column; gap:6px; padding-top:6px; }
.mobile-links .mobile-link {
  color: #dffaff;
  padding:12px 8px;
  font-size: 1.02rem;
  border-radius:6px;
  text-decoration:none;
  transition: background .14s ease, transform .12s ease;
}
.mobile-links .mobile-link:hover {
  background: linear-gradient(90deg, rgba(0,240,255,0.04), rgba(0,255,209,0.03));
  transform: translateX(6px);
  color: var(--neonCyan);
}

/* mobile actions */
.mobile-actions { margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:24px; }

/* responsive helpers */
@media (min-width: 768px) {
  .mobile-nav, .nav-overlay, .hamburger { display:none; }
  .desktop-nav, .header-glow .container > .md\\:flex { display:flex; }
}
@media (max-width: 767px) {
  .desktop-nav, .header-glow .container > .hidden { display:none; }
}

/* little animated grid lines behind header for TRON vibes */
.header-glow::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(transparent 60%, rgba(0,240,255,0.02) 60%), linear-gradient(90deg, rgba(0,255,209,0.02), rgba(0,0,0,0));
  background-size: 100% 6px, 6px 100%;
  pointer-events:none;
  z-index: 49;
  transform: translateZ(0);
}