:root{ --bg:#0a0e1a; --surface:#0d1320; --surface-1:#111829; --surface-2:#161f33; --grid-line:rgba(120,160,220,.08); --border:#1e2942; --accent:#00d4ff; --long:#14e0a0; --short:#ff4d6d; --warn:#ffb547; --text:#e6edf7; --text-muted:#8b9bb4; --text-dim:#5a6b85; } body{background:var(--bg); color:var(--text);} .num{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em;} .jx-grid-bg{ background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:48px 48px; animation:jx-drift 40s linear infinite; } @keyframes jx-drift{from{background-position:0 0}to{background-position:48px 48px}} .jx-glow{box-shadow:0 0 24px -6px color-mix(in srgb,var(--accent) 60%,transparent);} .jx-gradient-border{position:relative;border:1px solid var(--border);} .jx-gradient-border:hover{border-color:transparent; box-shadow:0 0 0 1px var(--accent),0 0 28px -8px var(--accent);} .jx-pulse{position:relative;} .jx-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 color-mix(in srgb,var(--long) 70%,transparent); animation:jx-pulse 1.8s ease-out infinite;} @keyframes jx-pulse{to{box-shadow:0 0 0 8px transparent;}} /* Progressive enhancement: sections are visible BY DEFAULT. Only when JS marks (synchronous inline script) do they start hidden for the scroll-in animation. No-JS (or failed-JS) users see all content. */ .js-reveal .jx-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;} .js-reveal .jx-reveal.is-in{opacity:1;transform:none;} /* ── Live-feel (live.js): heartbeat dot, fresh-data pill, skeleton ──────── */ .jx-live-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim); display:inline-block;flex-shrink:0;vertical-align:middle;transition:background .3s;} .jx-live-dot[data-state="live"]{background:var(--long);animation:jx-live-pulse 2s ease-out infinite;} .jx-live-dot[data-state="stale"]{background:var(--warn);} .jx-live-dot[data-state="error"]{background:var(--short);} @keyframes jx-live-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--long) 65%,transparent);} 70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}} .jx-fresh-pill{position:fixed;left:50%;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px; padding:10px 18px;border-radius:9999px;background:var(--surface-1);border:1px solid var(--long); color:var(--text);font-family:'Inter',sans-serif;font-size:13px;font-weight:600; box-shadow:0 10px 34px rgba(0,0,0,.55);cursor:pointer; opacity:0;pointer-events:none;transform:translateX(-50%) translateY(18px); transition:opacity .3s ease,transform .3s ease;} .jx-fresh-pill.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} .jx-fresh-pill:hover{filter:brightness(1.12);} .jx-skeleton{background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-2) 37%,var(--surface-1) 63%); background-size:400% 100%;animation:jx-shimmer 1.4s ease infinite;border-radius:6px;color:transparent!important;} @keyframes jx-shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* ── Micro-interactions: card hover-lift, toast ────────────────────────── */ .heat-border{transition:transform .18s ease,box-shadow .18s ease;} .heat-border:hover,.jx-lift:hover{transform:translateY(-3px); box-shadow:0 14px 34px -16px rgba(0,0,0,.72),0 0 0 1px rgba(0,212,255,.12);} .jx-lift{transition:transform .18s ease,box-shadow .18s ease;} .jx-toast{position:fixed;left:50%;bottom:22px;z-index:70;display:flex;align-items:center;gap:8px; padding:10px 18px;border-radius:9999px;background:var(--surface-1);border:1px solid var(--border); color:var(--text);font-family:'Inter',sans-serif;font-size:13px;font-weight:600; box-shadow:0 10px 34px rgba(0,0,0,.55);opacity:0;pointer-events:none; transform:translateX(-50%) translateY(16px);transition:opacity .3s ease,transform .3s ease;} .jx-toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ── Data-viz: inline score strength bar ───────────────────────────────── */ .jx-scorebar{display:inline-block;width:44px;height:3px;border-radius:2px; background:var(--border);position:relative;overflow:hidden;vertical-align:middle;} .jx-scorebar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,0%); border-radius:2px;background:var(--text-dim);transition:width .6s cubic-bezier(.22,1,.36,1);} .jx-scorebar[data-tier="hi"]::after{background:var(--long);} .jx-scorebar[data-tier="mid"]::after{background:var(--warn);} .jx-scorebar[data-tier="lo"]::after{background:var(--short);} /* ── Trade-history trader filter chips ─────────────────────────────────── */ .jx-tfilter{cursor:pointer;} .jx-tfilter:hover{color:var(--text);} .jx-tfilter.active{color:var(--accent);border-color:var(--accent);background:rgba(0,212,255,.08);} /* ── Push trader-picker popover ────────────────────────────────────────── */ .jx-push-picker{position:fixed;top:60px;right:16px;z-index:80;width:220px;padding:14px;border-radius:12px; background:var(--surface-1);border:1px solid var(--outline);box-shadow:0 16px 40px rgba(0,0,0,.6); font-family:'Inter',sans-serif;animation:jx-pp-in .18s ease;} @keyframes jx-pp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .jx-pp-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;} .jx-pp-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;} .jx-pp-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;padding:5px 6px;border-radius:6px;} .jx-pp-row:hover{background:var(--surface-2);} .jx-pp-row input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;} .jx-pp-actions{display:flex;justify-content:flex-end;gap:8px;} .jx-pp-actions button{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;} .jx-pp-cancel{background:transparent;border:1px solid var(--outline-variant);color:var(--text-muted);} .jx-pp-ok{background:var(--accent);border:1px solid var(--accent);color:#04121a;} .jx-pp-ok:hover{filter:brightness(1.1);} @media (prefers-reduced-motion:reduce){.jx-push-picker{animation:none;}} @media (prefers-reduced-motion:reduce){ .jx-grid-bg,.jx-pulse::after{animation:none!important;} .jx-reveal{opacity:1!important;transform:none!important;transition:none!important;} .jx-live-dot[data-state="live"]{animation:none!important;} .jx-skeleton{animation:none!important;} .heat-border,.jx-lift,.jx-scorebar::after{transition:none!important;} .heat-border:hover,.jx-lift:hover{transform:none!important;} } /* ── Sci-fi terminal / HUD kit (landing + lieflat) ───────────────────────── Deliberately anti-"AI-render": pure lines, scanlines, mono telemetry, corner brackets, a scan sweep. NO glowing blobs / gradients / 3D. */ .jx-scanlines::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(0,212,255,.035) 0 1px,transparent 1px 3px);} /* 4-corner HUD bracket frame drawn with 8 tiny gradients (no extra DOM) */ .jx-hud{--hc:var(--accent);--hs:14px;position:relative; background-image: linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)), linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)), linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)), linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)); background-repeat:no-repeat; background-size:var(--hs) 1px,1px var(--hs),var(--hs) 1px,1px var(--hs), var(--hs) 1px,1px var(--hs),var(--hs) 1px,1px var(--hs); background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;} /* scan sweep line — a thin accent bar travelling top→bottom of a container */ .jx-sweep{position:relative;overflow:hidden;} .jx-sweep::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent) 45%,var(--accent) 55%,transparent); opacity:.45;animation:jx-scan-sweep 4.5s linear infinite;} @keyframes jx-scan-sweep{0%{top:-2px}100%{top:100%}} /* blinking terminal caret */ .jx-caret::after{content:"_";margin-left:1px;color:var(--accent);animation:jx-caret-blink 1.1s step-end infinite;} @keyframes jx-caret-blink{50%{opacity:0}} /* mono telemetry text */ .jx-tele{font-family:'JetBrains Mono',monospace;letter-spacing:.08em;} .jx-tele-dim{font-family:'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase;} @media (prefers-reduced-motion:reduce){ .jx-sweep::after{animation:none;opacity:.3;} .jx-caret::after{animation:none;} }