/* =========================================================
   DCA SOLANA TRADE DEX — Neo-brutalist trading system
   Shared design tokens, primitives, animations
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Paper */
  --ink:       #0B0B0B;
  --ink-2:     #111111;
  --ink-3:     #161616;
  --ink-4:     #1d1d1d;
  --line:      #2a2a2a;
  --line-2:    #3a3a3a;
  --paper:     #ECE7DC;       /* warm off-white */
  --paper-2:   #DED6C4;
  --paper-3:   #CFC4AB;
  --text:      #F4F0E6;
  --text-dim:  #9a9387;
  --text-xdim: #5c574d;

  /* Signal */
  --amber:     #F5B800;       /* primary */
  --amber-2:   #FFD43B;
  --amber-ink: #1a1400;
  --green:     #20E070;
  --red:       #FF3B3B;
  --violet:    #8157FF;
  --cyan:      #00E1D4;

  /* Type */
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

html{scroll-behavior:smooth; background:var(--ink); color-scheme:dark}
body{
  font-family:var(--f-body);
  font-size:15px; line-height:1.55;
  background:var(--ink);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor: none; /* we draw our own */
}
@media (max-width:860px){ body{ cursor:auto } }

::selection{ background:var(--amber); color:var(--amber-ink) }

a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--line); border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}

/* ============ BACKGROUND ============ */
.bg-stack{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-grain{
  position:absolute; inset:-50%;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:0.35; mix-blend-mode:overlay;
  animation: grainDrift 8s steps(6) infinite;
}
@keyframes grainDrift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,4%)}
  80%{transform:translate(2%,-2%)}
}
.bg-grid{
  display: none;
}
.bg-orb{
  position:absolute; width:720px; height:720px; border-radius:50%;
  filter:blur(120px); opacity:0.18; pointer-events:none;
}
.bg-orb.amber{ background:var(--amber); top:-260px; right:-120px }
.bg-orb.violet{ background:var(--violet); bottom:-260px; left:-120px; opacity:0.14 }

/* ============ CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  will-change:transform;
}
.cursor-dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--green));
  box-shadow:0 0 18px rgba(245,184,0,0.55),0 0 28px rgba(32,224,112,0.18);
  transform: translate3d(-50%,-50%,0);
  transition:opacity .16s ease;
}
.cursor-ring{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(245,184,0,0.9);
  background:radial-gradient(circle,rgba(245,184,0,0.08) 0 18%,transparent 19% 100%);
  box-shadow:0 0 0 1px rgba(32,224,112,0.16) inset,0 0 34px rgba(245,184,0,0.18);
  transform: translate3d(-50%,-50%,0);
  transition:width .2s ease,height .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,opacity .16s ease;
}
.cursor-ring::before,.cursor-ring::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--amber);opacity:.65;transform:translate(-50%,-50%);pointer-events:none;
}
.cursor-ring::before{width:22px;height:1px}
.cursor-ring::after{width:1px;height:22px}
.cursor-dot.out,.cursor-ring.out{opacity:0}
.cursor-ring.down{
  width:32px;height:32px;border-color:var(--green);box-shadow:0 0 0 1px rgba(32,224,112,0.35) inset,0 0 36px rgba(32,224,112,0.22);
}
.cursor-ring.hover{
  width:62px;height:62px;background:radial-gradient(circle,rgba(32,224,112,0.1) 0 20%,rgba(245,184,0,0.08) 21% 100%);border-color:var(--amber-2);
  box-shadow:0 0 0 1px rgba(245,184,0,0.35) inset,6px 6px 0 rgba(245,184,0,0.16),0 0 40px rgba(245,184,0,0.24);
}
@media (max-width:860px){ .cursor-dot,.cursor-ring{display:none} }

/* ============ TYPOGRAPHY ============ */
.display, h1, h2, h3, h4{
  font-family:var(--f-display); font-weight:700;
  letter-spacing:-0.03em; line-height:0.92;
}
.mono{ font-family:var(--f-mono); font-feature-settings:"zero","tnum"; }
.num{ font-family:var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim);
}

/* ============ LAYOUT ============ */
.wrap{ max-width:1400px; margin:0 auto; padding:0 28px; position:relative; z-index:1 }
.z1{position:relative; z-index:1}

/* ============ TOP BAR ============ */
:root{ --topbar-h: 65px; }
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid var(--line);
  background:rgba(11,11,11,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.topbar-inner{
  max-width:1400px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:28px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:16px;
  letter-spacing:-0.02em;
}
.brand-mark{
  width:28px; height:28px; background:var(--amber); color:var(--amber-ink);
  display:grid; place-items:center; font-family:var(--f-mono); font-weight:700; font-size:13px;
  transform:rotate(-6deg); transition:transform .2s;
}
.brand:hover .brand-mark{ transform:rotate(0) scale(1.08) }
.brand-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(32,224,112,0.18); animation: pulse 1.6s infinite }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes lndTick{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes lndCenter{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.lnd-tick{animation:lndTick 2.4s ease-in-out infinite}
.lnd-center{animation:lndCenter 2.4s ease-in-out infinite;transform-origin:20px 20px}

.nav{ display:flex; gap:4px; margin-left:18px }
.nav a{
  font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:0.06em;
  text-transform:uppercase; padding:8px 14px; color:var(--text-dim);
  border:1px solid transparent; transition:all .15s;
}
.nav a:hover{ color:var(--text); border-color:var(--line) }
.nav a.active{ color:var(--amber-ink); background:var(--amber); border-color:var(--amber) }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px }

/* ============ BUTTONS ============ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; font-family:var(--f-mono); font-weight:600; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase;
  border:1.5px solid var(--text); background:var(--ink-2); color:var(--text);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s;
  white-space:nowrap;
}
.btn::after{ /* hard brutal shadow */
  content:''; position:absolute; inset:0;
  box-shadow: 4px 4px 0 0 var(--text);
  transition: box-shadow .12s ease;
  pointer-events:none;
}
.btn:hover{ transform: translate(-2px,-2px) }
.btn:hover::after{ box-shadow: 6px 6px 0 0 var(--text) }
.btn:active{ transform: translate(2px,2px) }
.btn:active::after{ box-shadow: 0 0 0 0 var(--text) }

.btn-amber{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber) }
.btn-amber::after{ box-shadow: 4px 4px 0 0 var(--amber) }
.btn-amber:hover::after{ box-shadow: 6px 6px 0 0 var(--amber) }

.btn-ghost{ background:transparent; border-color:var(--line-2) }
.btn-ghost::after{ box-shadow: 4px 4px 0 0 var(--line-2) }
.btn-ghost:hover::after{ box-shadow: 6px 6px 0 0 var(--line-2) }

.btn-sm{ padding:9px 14px; font-size:11px }
.btn-sm::after{ box-shadow: 3px 3px 0 0 var(--text) }
.btn-sm:hover::after{ box-shadow: 4px 4px 0 0 var(--text) }

.btn-red{ background:var(--red); color:#fff; border-color:var(--red) }
.btn-red::after{ box-shadow: 4px 4px 0 0 var(--red) }

/* ============ BRUTAL CARD ============ */
.card{
  position:relative;
  background:var(--ink-2);
  border:1.5px solid var(--line);
  padding:22px;
}
.card.hard{
  border-color:var(--text);
  box-shadow: 6px 6px 0 0 var(--text);
}
.card.amber{
  border-color:var(--amber);
  box-shadow: 6px 6px 0 0 var(--amber);
}
.card-corners::before,
.card-corners::after,
.card-corners > .corner-tl,
.card-corners > .corner-br{
  content:''; position:absolute; width:14px; height:14px;
  border:2px solid var(--amber); pointer-events:none;
}
.card-corners::before{ top:-2px; left:-2px; border-right:none; border-bottom:none }
.card-corners::after{ bottom:-2px; right:-2px; border-left:none; border-top:none }
.card-corners > .corner-tl{ top:-2px; right:-2px; border-left:none; border-bottom:none }
.card-corners > .corner-br{ bottom:-2px; left:-2px; border-right:none; border-top:none }

/* ============ BADGES ============ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--text-dim);
}
.badge.live{ border-color:var(--green); color:var(--green); background:rgba(32,224,112,0.08) }
.badge.amber{ border-color:var(--amber); color:var(--amber); background:rgba(245,184,0,0.08) }
.badge.red{ border-color:var(--red); color:var(--red); background:rgba(255,59,59,0.08) }
.badge.violet{ border-color:var(--violet); color:var(--violet); background:rgba(129,87,255,0.08) }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; animation: pulse 1.4s infinite }

/* ============ CHIPS ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-family:var(--f-mono); font-size:11px;
  border:1px solid var(--line); color:var(--text-dim);
  background:var(--ink-3);
}
.chip.on{ border-color:var(--amber); color:var(--amber); background:rgba(245,184,0,0.06) }

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden; border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line);
  background:var(--ink-2);
}
.marquee-track{
  display:flex; gap:0; white-space:nowrap;
  animation: marquee 90s linear infinite;
  will-change: transform;
}
.marquee-track:hover{ animation-play-state: paused }
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 28px; border-right:1px solid var(--line);
  font-family:var(--f-mono); font-size:13px;
}
.marquee-item .sym{ color:var(--text); font-weight:600 }
.marquee-item .pos{ color:var(--green) }
.marquee-item .neg{ color:var(--red) }
.marquee-item .px{ color:var(--text-dim) }

/* ============ TABLE ============ */
.tbl{ width:100%; border-collapse: collapse; font-family:var(--f-mono); font-size:13px }
.tbl th, .tbl td{
  text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.tbl th{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-dim); font-weight:500;
  background:var(--ink-3);
  border-bottom:1.5px solid var(--line-2);
  position:sticky; top:0;
}
.tbl tr{ transition: background .15s }
.tbl tbody tr:hover{ background: rgba(245,184,0,0.04) }
.tbl td .up{ color:var(--green) }
.tbl td .dn{ color:var(--red) }

/* ============ SHARED ANIMATIONS ============ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform: none }

@keyframes float-up {
  from{opacity:0; transform: translateY(14px)}
  to{opacity:1; transform:none}
}
@keyframes blink { 50%{opacity:0.25} }

.spinner{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  border:1.5px solid currentColor; border-right-color:transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ============ PAGE FADE ============ */
.page-enter{ animation: pageEnter .55s cubic-bezier(.2,.7,.2,1) both }
@keyframes pageEnter{
  from{ opacity:0; transform: translateY(18px) }
  to{ opacity:1; transform:none }
}

/* ============ UTILS ============ */
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.col{ display:flex; flex-direction:column; gap:12px }
.grow{ flex:1 1 auto }
.sep{ height:1px; background:var(--line); margin:22px 0 }
.spacer-24{ height:24px } .spacer-40{ height:40px } .spacer-80{ height:80px }
@media(max-width:860px){ .hide-sm{ display:none !important } }

/* label stickers — brutal */
.sticker{
  display:inline-block; transform:rotate(-2deg);
  padding:5px 9px; font-family:var(--f-mono); font-size:11px; font-weight:700;
  background:var(--amber); color:var(--amber-ink);
  border:1.5px solid var(--amber-ink);
  box-shadow: 3px 3px 0 0 var(--amber-ink);
}
.sticker.violet{ background:var(--violet); color:#fff; border-color:#fff; box-shadow:3px 3px 0 0 var(--ink) }
.sticker.green{ background:var(--green); color:var(--ink); border-color:var(--ink); box-shadow:3px 3px 0 0 var(--ink) }

/* Dotted divider */
.dotline{ height:0; border-top:1px dashed var(--line-2) }