:root{
  --bg:#07090f;
  --card:#0d111a;
  --ink:#e8f0ff;
  --muted:#9db0d6;
  --accent:#7cfc00;
  --accent-2:#7aa2ff;
  --danger:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:radial-gradient(1200px 600px at 80% -10%, rgba(124,252,0,.08), transparent 60%),
            radial-gradient(1000px 500px at 10% 120%, rgba(122,162,255,.08), transparent 60%),
            var(--bg);
}

.bg-deco{
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(124,252,0,.05), transparent 60%),
    radial-gradient(600px 300px at 100% 100%, rgba(122,162,255,.05), transparent 60%);
  filter:saturate(120%);
}

.site-header{
  max-width:1200px; margin:0 auto; padding:24px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:56px; height:56px; border-radius:14px; box-shadow:0 8px 24px rgba(124,252,0,.2)}
.title{margin:0; font-family:Bangers, cursive; letter-spacing:1px; font-size:40px; line-height:1; color:var(--ink); text-shadow:0 6px 0 #1a2233}
.subtitle{margin:4px 0 0; color:var(--muted); font-weight:600}
.links{display:flex; gap:10px}

.btn{
  background:linear-gradient(180deg, var(--accent), #5dd900);
  color:#021; border:0; padding:10px 16px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow:0 10px 20px rgba(124,252,0,.25), inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); filter:saturate(110%)}
.btn:active{transform:translateY(0)}
.btn.secondary{
  background:linear-gradient(180deg, #1b2436, #111723);
  color:var(--ink); box-shadow:0 10px 20px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.06);
}
.btn.jumbo{font-size:18px; padding:14px 22px}

.content{max-width:1200px; margin:0 auto; padding:10px 20px 60px}
.copybar{margin:6px 0 12px}
.copybar-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; background:var(--card); border:1px solid #141b2b; border-radius:14px; padding:10px}
.copybar-label{color:#9fb2d8; font-weight:800; letter-spacing:.4px}
.copybar-input{width:100%; background:#0b1220; color:var(--ink); border:1px dashed #1a2440; border-radius:10px; padding:10px 12px; font-weight:700}
.copybar-btn{white-space:nowrap}
.hero{padding:14px 0 10px}
.punch{font-family:Bangers, cursive; font-size:40px; letter-spacing:.5px; margin:0 0 6px}
.tagline{margin:0; color:var(--muted)}
.badges{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.badge{background:#0f1522; color:#b7c6ea; border:1px solid #1a2440; padding:8px 10px; border-radius:999px; font-weight:700}

.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:22px 0}
.stat{background:var(--card); border:1px solid #141b2b; border-radius:14px; padding:14px}
.stat-label{color:#9fb2d8; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.stat-value{font-size:22px; font-weight:800; margin-top:8px}

.chart-wrap{margin-top:6px}
.notice{color:#b9c7ea; margin:6px 0 10px}
.chart-card{background:var(--card); border:1px solid #141b2b; border-radius:18px; overflow:hidden}
#dexChart{width:100%; height:520px; border:0; display:block; background:#0b1220}

.cta{display:flex; justify-content:center; margin:20px 0 0}

.config-panel{position:fixed; inset:0; background:rgba(5,8,12,.62); backdrop-filter:blur(8px); display:grid; place-items:center; padding:20px}
.config-inner{width:100%; max-width:520px; background:var(--card); border:1px solid #141b2b; border-radius:16px; padding:18px}
.config-inner h3{margin:0 0 8px}
.config-help{margin:0 0 10px; color:var(--muted)}
.field{display:grid; gap:6px; margin:10px 0}
.field input{background:#0b1220; border:1px solid #1a2440; color:var(--ink); padding:10px 12px; border-radius:12px}
.config-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}

@media (max-width:920px){
  .stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .title{font-size:34px}
}
@media (max-width:560px){
  .site-header{flex-direction:column; align-items:flex-start}
  .stats{grid-template-columns:1fr}
  .title{font-size:30px}
  #dexChart{height:440px}
}