/* hedgefun design system: a dark trading terminal. Numbers in mono, neon for up, red for down. */
:root {
  --bg:#07090a; --surface:#0c1012; --raised:#11171a; --sunken:#0f1416; --ink:#e6eeea; --ink2:#b4c0ba; --dim:#7d8a84; --faint:#4f5a55;
  --line:#1b2328; --line2:#26313a; --green:#2ee88a; --greenD:#22c474; --green2:#2ee88a; --mint:rgba(46,232,138,.10); --red:#ff4d5e; --redbg:rgba(255,77,94,.10);
  --amber:#ffb547; --amberbg:rgba(255,181,71,.10); --cyan:#5ad1ff; --cyanbg:rgba(90,209,255,.10); --glow:0 0 0 1px rgba(46,232,138,.35), 0 0 24px -4px rgba(46,232,138,.45);
  --r:10px; --r-sm:8px; --shadow:none; --shadow-lg:0 0 0 1px var(--line2), 0 20px 40px -12px rgba(0,0,0,.6);
  --display:"Space Grotesk", "Inter", -apple-system, sans-serif; --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--bg); } html, body { margin:0; color:var(--ink); font:15px/1.55 "Inter", -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
body { overflow-x:hidden; background:transparent; }
/* faint chart-paper grid behind everything, fading out toward the edges, plus the occasional price move (#bgfx, app.js) */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size:56px 56px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 35%, #000 30%, transparent 100%); mask-image:radial-gradient(ellipse 85% 75% at 50% 35%, #000 30%, transparent 100%); }
#bgfx { position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
::selection { background:rgba(46,232,138,.3); }
a { color:inherit; } .hide { display:none !important; }
.num, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.dim { color:var(--dim); } .faint { color:var(--faint); } .up { color:var(--green); } .down { color:var(--red); }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.eyebrow { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:lowercase; color:var(--green); }
.eyebrow::before { content:"// "; color:var(--faint); }
h1 { font-family:var(--display); font-size:clamp(44px, 6.4vw, 84px); line-height:.98; letter-spacing:-.04em; font-weight:600; margin:0; }
h2 { font-family:var(--display); font-size:clamp(30px, 3.6vw, 44px); line-height:1.05; letter-spacing:-.03em; font-weight:600; margin:0 0 12px; }
h3 { font-family:var(--display); font-size:18px; letter-spacing:-.01em; font-weight:600; margin:0 0 6px; }
.lead { font-size:18px; line-height:1.55; color:var(--ink2); }
.ico { width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cursor::after { content:""; display:inline-block; width:.42em; height:.8em; margin-left:.08em; background:var(--green); vertical-align:-.04em; box-shadow:0 0 8px rgba(46,232,138,.3); animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.glowtext { color:var(--green); text-shadow:0 0 22px rgba(46,232,138,.16); }

/* nav */
.nav { position:sticky; top:0; z-index:20; background:rgba(7,9,10,.82); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:4px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:22px; }
.brand svg { width:34px; height:34px; } .brand span { font-family:"Fredoka", "Space Grotesk", sans-serif; font-weight:700; font-size:23px; letter-spacing:-.005em; line-height:1; color:var(--ink); } .brand span i { color:var(--green); } .brand .cur { display:inline-block; width:7px; height:15px; margin-left:3px; background:var(--green); opacity:.85; animation:blink 1.1s steps(1) infinite; }
.navlink { text-decoration:none; color:var(--dim); font-weight:500; font-size:14px; padding:7px 12px; border-radius:7px; } .navlink:hover { color:var(--ink); } .navlink.on { color:var(--ink); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line2); }
.navr { margin-left:auto; display:flex; align-items:center; gap:10px; } .nbr { display:none; }
.bal { font-size:13px; color:var(--ink2); text-decoration:none; padding:7px 10px; border-radius:8px; } .bal:hover { background:var(--raised); } .bal b { font-weight:600; }
.pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(46,232,138,.15), 0 0 10px rgba(46,232,138,.8); animation:pulse 2s ease-in-out infinite; flex:0 0 auto; }
@keyframes pulse { 50% { box-shadow:0 0 0 5px rgba(46,232,138,.05), 0 0 4px rgba(46,232,138,.5); } }

/* ticker tape under the nav */
.tape { border-bottom:1px solid var(--line); background:var(--surface); font-family:var(--mono); font-size:12px; color:var(--dim); overflow:hidden; white-space:nowrap; height:32px; display:flex; align-items:center; position:relative; }
.tape .mode { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:0 14px; height:100%; border-right:1px solid var(--line); color:var(--ink2); background:var(--surface); z-index:1; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:11px; }
.tape .track { display:inline-flex; gap:34px; padding-left:24px; animation:tape 60s linear infinite; will-change:transform; }
.tape:hover .track { animation-play-state:paused; }
.tape .it { display:inline-flex; gap:7px; align-items:center; } .tape .it b { color:var(--ink); font-weight:600; } .tape a { text-decoration:none; } .tape a:hover b { color:var(--green); }
@keyframes tape { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .tape .track, .cursor::after, .pulse, .loop .dot { animation:none !important; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--line2); border-radius:var(--r-sm); font:inherit; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; background:var(--raised); color:var(--ink); transition:background .15s, border-color .15s, box-shadow .15s, transform .1s; white-space:nowrap; }
.btn:hover { border-color:#3a4752; background:#151c20; } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.primary { background:var(--green); color:#03140a; border-color:transparent; box-shadow:0 0 18px -8px rgba(46,232,138,.4); } .btn.primary:hover { background:#5cf2a5; box-shadow:0 0 22px -8px rgba(46,232,138,.5); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line2); } .btn.ghost:hover { border-color:var(--ink2); background:var(--raised); }
.btn.quiet { background:transparent; color:var(--ink2); border-color:transparent; padding:0 10px; } .btn.quiet:hover { background:var(--raised); color:var(--ink); }
.btn.lg { height:50px; padding:0 22px; font-size:15px; border-radius:10px; } .btn.sm { height:32px; padding:0 11px; font-size:13px; border-radius:7px; } .btn.full { width:100%; }

/* surfaces */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.pad { padding:24px; }
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:5px; font-family:var(--mono); font-size:11px; font-weight:500; white-space:nowrap; background:var(--raised); color:var(--ink2); border:1px solid var(--line2); }
.badge.verified { background:var(--mint); color:var(--green); border-color:rgba(46,232,138,.25); } .badge.ai { background:var(--cyanbg); color:var(--cyan); border-color:rgba(90,209,255,.25); } .badge.rules { background:var(--amberbg); color:var(--amber); border-color:rgba(255,181,71,.25); } .badge.warn { background:var(--amberbg); color:var(--amber); border-color:rgba(255,181,71,.25); }
.badge.long { background:var(--mint); color:var(--green); border-color:rgba(46,232,138,.25); } .badge.short { background:var(--redbg); color:var(--red); border-color:rgba(255,77,94,.25); }
.badge .ico { width:13px; height:13px; stroke-width:2.2; }
.mono-av { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.02em; flex:0 0 auto; }

/* forms */
label { display:block; font-size:13px; font-weight:500; color:var(--ink2); margin:16px 0 6px; }
input, textarea, select { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line2); border-radius:var(--r-sm); padding:10px 12px; font:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,232,138,.15); }
.hint { font-size:12.5px; color:var(--dim); margin-top:6px; }
.seg { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; } .seg button { border:0; background:transparent; font:inherit; font-size:13px; font-weight:500; color:var(--dim); height:30px; padding:0 12px; border-radius:6px; cursor:pointer; } .seg button:hover { color:var(--ink); } .seg button.on { background:var(--raised); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); font-weight:600; }
.err { color:var(--red); font-size:13px; min-height:1.2em; }
.switch { position:relative; width:36px; height:20px; background:var(--line2); border-radius:99px; cursor:pointer; transition:background .15s; flex:0 0 auto; } .switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:left .15s; } .switch.on { background:var(--green); } .switch.on::after { left:18px; background:#03140a; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:14px; } th { color:var(--dim); font-weight:500; font-size:11.5px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; } td.r, th.r { text-align:right; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; } .kv:last-child { border-bottom:0; } .kv span { color:var(--dim); } .kv b { font-weight:600; text-align:right; font-family:var(--mono); font-size:13.5px; }
details > summary { cursor:pointer; } details > summary::marker { color:var(--faint); }

/* coin cards */
.grid3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; }
.scard { display:flex; flex-direction:column; padding:20px; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; } .scard:hover { border-color:rgba(46,232,138,.35); box-shadow:0 18px 40px -22px rgba(46,232,138,.15); transform:translateY(-1px); }
.scard .head { display:flex; gap:12px; align-items:flex-start; }
.scard .title { font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scard .by { font-size:13px; color:var(--dim); }
.scard p { margin:12px 0 0; color:var(--dim); font-size:13.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3em; }
.scard .figs { display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; gap:12px; }
.scard .lbl { font-family:var(--mono); font-size:11px; color:var(--faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.scard .ret { font-family:var(--mono); font-size:28px; font-weight:600; letter-spacing:-.04em; line-height:1; }
.scard .tvl { font-family:var(--mono); font-size:18px; font-weight:600; letter-spacing:-.03em; }
.scard .spark { width:100%; height:44px; margin-top:16px; display:block; }
.scard .foot { display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:16px; padding-top:13px; font-size:12.5px; color:var(--dim); } .scard .foot b { color:var(--ink2); font-weight:500; } .scard:hover .foot b { color:var(--green); }
.scard .pro { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--dim); margin-top:12px; }
.avwrap { position:relative; flex:0 0 auto; } .avwrap .on { position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--surface); box-shadow:0 0 8px rgba(46,232,138,.9); }

/* screener rows (explore + homepage board) */
.srow { display:grid; grid-template-columns:minmax(190px, 2fr) minmax(150px, 1.7fr) 84px 96px 74px 70px; gap:16px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .12s; }
.srow:last-child { border-bottom:0; } a.srow:hover { background:var(--raised); } a.srow:hover .nm { color:var(--green); }
.srow.hd { padding-top:11px; padding-bottom:11px; font-family:var(--mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.srow .who { display:flex; gap:12px; align-items:center; min-width:0; } .srow .nm { font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .12s; } .srow .tk { font-family:var(--mono); font-size:12px; color:var(--dim); }
.srow .r { text-align:right; } .srow .big { font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:-.03em; }
.srow .spark { height:30px; width:100%; display:block; } .srow .what { font-size:12.5px; color:var(--ink2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .srow .c-what { min-width:0; }
.srow.ghost { color:var(--dim); } .srow.ghost .slot { width:40px; height:40px; border-radius:10px; border:1px dashed var(--line2); display:grid; place-items:center; color:var(--faint); font-family:var(--mono); flex:0 0 auto; }
@media (max-width:900px) { .srow { grid-template-columns:1fr 80px 84px; gap:10px; padding:12px 14px; } .srow .c-what, .srow .c-mcap, .srow .c-act { display:none; } }

.foot-site { border-top:1px solid var(--line); margin-top:100px; padding:34px 0 60px; color:var(--dim); font-size:13px; background:var(--bg); }
.foot-site .wrap { display:flex; gap:22px; flex-wrap:wrap; align-items:center; } .foot-site a { text-decoration:none; } .foot-site a:hover { color:var(--green); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--raised); color:var(--ink); border:1px solid var(--line2); padding:11px 16px; border-radius:10px; font-size:14px; box-shadow:var(--shadow-lg); z-index:50; }
@media (max-width:760px) { .bal { display:none; } .brand { margin-right:8px; } .wrap { padding:0 16px; }
  /* phones: logo + wallet on the first row, the menu links on a second row */
  .nav .wrap { flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:6px; row-gap:6px; }
  .brand { order:1; } .brand span { display:none; } .navr { order:2; } .nbr { display:block; order:3; flex-basis:100%; height:0; } .navlink { order:4; font-size:12.5px; padding:6px 7px; } .nav .wrap { gap:0; }
  .navr .btn.quiet { display:none; } .tape .mode .lbl { display:none; } }

/* tooltips */
.tip { position:relative; display:inline-grid; place-items:center; width:16px; height:16px; margin-left:5px; border-radius:50%; background:var(--raised); border:1px solid var(--line2); color:var(--dim); font-size:10.5px; font-weight:700; cursor:help; vertical-align:1px; font-style:normal; font-family:var(--mono); }
.tip .tipbox { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:260px; background:#1a2226; color:var(--ink); border:1px solid var(--line2); font-family:Inter, sans-serif; font-size:12.5px; font-weight:400; line-height:1.5; padding:10px 12px; border-radius:9px; text-align:left; z-index:30; box-shadow:var(--shadow-lg); white-space:normal; letter-spacing:0; text-transform:none; }
.tip:hover .tipbox, .tip:focus .tipbox { display:block; }
.spic { object-fit:cover; flex:0 0 auto; display:block; background:var(--raised); }
.chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { border:1px solid var(--line2); background:var(--surface); border-radius:7px; height:32px; padding:0 11px; font-family:var(--mono); font-size:12.5px; font-weight:500; cursor:pointer; color:var(--ink2); } .chip:hover { border-color:#3a4752; color:var(--ink); } .chip.on { border-color:rgba(46,232,138,.6); background:var(--mint); color:var(--green); }
.tbl td, .tbl th { white-space:nowrap; } .tbl tr:hover td { background:var(--raised); }
.pill { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:5px; font-family:var(--mono); font-size:11.5px; font-weight:600; } .pill.long { background:var(--mint); color:var(--green); } .pill.short { background:var(--redbg); color:var(--red); }

/* live activity feed: a terminal log */
.feed { padding:0; overflow:hidden; } .feed .fh { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:11.5px; font-family:var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.05em; } .feed .fh b { color:var(--ink); font-weight:600; }
.fl { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); text-decoration:none; font-size:13px; color:var(--ink2); } .fl:hover { background:var(--raised); }
.fl .fm { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:1px; } .fl .fa { font-family:var(--mono); font-size:12px; color:var(--ink); white-space:nowrap; }
.withfeed { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; } .withfeed .feed { position:sticky; top:110px; max-height:calc(100vh - 130px); overflow:auto; }
@media (max-width:1100px) { .withfeed { grid-template-columns:1fr; } .withfeed .feed { position:static; max-height:520px; } }

/* value flash when a number changes */
.flash-up { animation:flashUp 1.2s ease-out; } .flash-down { animation:flashDown 1.2s ease-out; }
@keyframes flashUp { from { background:rgba(46,232,138,.25); } to { background:transparent; } }
@keyframes flashDown { from { background:rgba(255,77,94,.25); } to { background:transparent; } }

* { scrollbar-color:var(--line2) transparent; }

/* live mode hides testnet-only bits */
body.mode-real .testonly { display: none !important; }