:root {
  --ink:#f8f9fb;             /* Light ink for text */
  --bg:#0b0b0c;              /* Deep black background */
  --paper:#111111;           /* Card background */
  --border:#222222;          /* Subtle border grey */
  --muted:#9ca3af;           /* Muted grey text */
  --accent:#15c1ff;          /* Neon blue accent */
  --good:#00b35c;
  --bad:#e11d48;
  --yellow:#ffd166;
  --green:#22c55e;
  --purple:#7c3aed;
  --max:1200px;
}

/* Base setup */
* { box-sizing:border-box }
html,body {
  margin:0;
  padding:0;
  font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* Top navigation bar */
.topbar {
  background:linear-gradient(180deg,#000,#0b0b0c);
  color:#fff;
  border-bottom:4px solid var(--accent);
}
.topbar .brand {
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
}
.socials a {
  margin-left:10px;
  display:inline-flex;
}

/* Tabs */
.tabs {
  display:flex;
  gap:10px;
  list-style:none;
  margin:0;
  padding:10px 18px 14px;
  border-top:1px solid rgba(255,255,255,.15);
  flex-wrap:wrap;
}
.tabs li a {
  color:#e5e7eb;
  text-decoration:none;
  font-weight:800;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset;
  background:rgba(255,255,255,.05);
}
.tabs li a.yellow { color:#ffd166; }
.tabs li a.green { color:#a7f3d0; }
.tabs li a.purple { color:#c4b5fd; }
.tabs .right { margin-left:auto; }
.toggle {
  display:flex;
  align-items:center;
  gap:8px;
  color:#e5e7eb;
  font-weight:700;
}
.toggle input { accent-color:#22c55e; }

/* Ticker */
.ticker {
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--paper);
  position:relative;
}
.marquee {
  display:flex;
  gap:24px;
  white-space:nowrap;
  animation:scroll 25s linear infinite;
  padding:8px 0;
}
.marquee span {
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  margin-left:12px;
  background:rgba(255,255,255,.03);
  min-width:fit-content;
}
.bad { color:var(--bad) }
.good { color:var(--good) }
@keyframes scroll {
  from { transform:translateX(0) }
  to { transform:translateX(-50%) }
}

/* Layouts and cards */
.paper {
  max-width:var(--max);
  margin:0 auto;
  padding:18px;
}
.lead {
  display:grid;
  grid-template-columns:1.1fr 1fr 0.8fr;
  gap:18px;
  background:var(--paper);
  padding:18px;
  border:1px solid var(--border);
}
.lead figure { margin:0 }
.lead img {
  width:100%;
  display:block;
  border:1px solid var(--border);
}
.lead figcaption {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:6px;
}
.kicker {
  color:var(--muted);
  font-weight:700;
  margin-bottom:6px;
}
.lead h1 {
  font-family:Georgia, 'Times New Roman', serif;
  font-size:36px;
  margin:.2em 0;
}
.wtf {
  border-left:1px solid var(--border);
  padding-left:18px;
}
.wtf .coin {
  width:180px;
  display:block;
  margin:8px auto;
}
.wtf .promo { font-weight:800; text-align:center; }
.wtf .we { text-align:center; font-weight:800; }
.ca {
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  padding:10px;
  border-radius:10px;
  margin:10px 0;
}
.ca-row {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* Buttons */
.copy,
button,
.pill,
.ca-row button,
a.button {
  color:white !important;
  font-weight:800;
}
.copy {
  padding:6px 10px;
  border-radius:8px;
  background:#0ea5e9;
  border:0;
  cursor:pointer;
}

/* Promo grid */
.promos {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:18px 0;
}
.promoCard {
  background:var(--paper);
  border:1px solid var(--border);
  padding:18px;
  text-decoration:none;
  color:white !important;
  font-weight:800;
}
.promoCard:hover { background:#1a1a1a; }

/* Charts & images */
.chartwrap { margin:18px 0 }
.chart-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#dsEmbed {
  width:100%;
  height:520px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#000;
}

/* Grid sections */
.grid3 {
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:18px;
}
.card {
  background:var(--paper);
  padding:18px;
  border:1px solid var(--border);
}
.card h2 {
  font-family:Georgia, 'Times New Roman', serif;
  margin-top:0;
}
.rightpic img {
  width:100%;
  display:block;
  border:1px solid var(--border);
}
.rightpic figcaption { font-size:12px; color:var(--muted); }

/* Token section */
.tokenrow {
  display:grid;
  grid-template-columns:1fr 1.2fr 0.6fr;
  gap:18px;
  margin:18px 0;
}
.banner {
  width:100%;
  border:1px solid var(--border);
  border-radius:6px;
}
.nftbtns {
  display:flex;
  gap:10px;
  margin-top:10px;
}
.pill {
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  color:white !important;
  font-weight:800;
}
.pill.blue { background:#0284c7 }
.pill.orange { background:#fb923c }

/* Tokenomics */
.tokenomics .tokentitle { font-weight:900; margin-bottom:8px; }
.tokendata { margin:0 0 10px 16px }
.scanners { display:flex; gap:10px; margin:10px 0; }
.chip {
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,255,255,.03);
}
.swaps {
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  margin:10px 0;
}
.center { text-align:center }
.tiny { font-size:12px; color:var(--muted) }

.listings {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

/* Footer */
.footer {
  max-width:var(--max);
  margin:10px auto 40px;
  background:var(--paper);
  border:1px solid var(--border);
  padding:14px;
  text-align:center;
  color:var(--muted);
}

/* Responsive tweaks */
@media (max-width:980px) {
  .lead { grid-template-columns:1fr }
  .wtf { border-left:0; padding-left:0 }
  .grid3 { grid-template-columns:1fr }
  .tokenrow { grid-template-columns:1fr }
  .promos { grid-template-columns:1fr 1fr }
}

/* Terminal theme */
body[data-theme='terminal'] .marquee span {
  box-shadow:0 0 0 1px rgba(61,255,154,.25) inset;
}

/* Hover and color accents */
.tabs li a:hover {
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.tabs li a.yellow {
  background:linear-gradient(180deg,#ffd166,#e9b24f);
  color:#111;
}
.tabs li a.green {
  background:linear-gradient(180deg,#a7f3d0,#4ade80);
  color:#062b1e;
}
.tabs li a.purple {
  background:linear-gradient(180deg,#c4b5fd,#8b5cf6);
  color:white;
}

/* Mobile drag: let the canvas capture touches */
#canvas,
#pfpCanvas {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}
/* If the canvas is inside the Pro stage wrapper */
.pfp-pro .stage { overscroll-behavior: contain; }

/* ===== Matrix theme (toggle via body[data-theme="matrix"]) ===== */
body[data-theme="matrix"]{
  --bg:#000; 
  --paper:#061106;
  --ink:#d1ffe7;
  --border:#113322;
  --muted:#7ce0ad;
  --accent:#00ff9c;
}
body[data-theme="matrix"] .topbar{
  background:linear-gradient(180deg,#000,#020);
  border-bottom-color:#00ff9c;
}
body[data-theme="matrix"] a{ color:#00ff9c; }
body[data-theme="matrix"] .tabs li a{
  border-color:rgba(0,255,156,.25);
  box-shadow:0 0 0 1px rgba(0,255,156,.15) inset;
}
body[data-theme="matrix"] .tabs li a:hover{
  background:rgba(0,255,156,.08);
}
body[data-theme="matrix"] .card,
body[data-theme="matrix"] .promoCard,
body[data-theme="matrix"] .paper,
body[data-theme="matrix"] .pfp-pro .stage,
body[data-theme="matrix"] .controls{
  background:var(--paper);
  border:1px solid var(--border);
}

/* Matrix canvas */
#matrix-canvas{
  position:fixed; inset:0; z-index:0; 
  display:none; background:transparent;
  pointer-events:none; /* stays click-through */
}
body[data-theme="matrix"] #matrix-canvas{ display:block; }

/* ensure main content sits above the canvas */
.topbar, .paper, .footer, .pfp-pro, .ticker { position:relative; z-index:1; }
/* Keep the UL centered like the rest of the layout */
.tabs{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 18px 14px; /* keep your padding */
}

/* Keep the scrolling row the same width as content */
.ticker > .marquee{
  max-width: var(--max);
  margin: 0 auto;
}

/* In case the matrix canvas causes tiny overflow on some browsers */
html, body { overflow-x: hidden; }