/* Premium 2.0 token layer. Existing names kept so every component inherits the new palette; new names add the design-system vocabulary. Amber is punctuation, not neon — hairline rgba borders, near-black surfaces, restrained glow. */ :root{ /* surfaces — GMGN-style two-tone: a near-black page with clearly-gray item highlights, so cards and rows pop off the background instead of blending in */ --bg:#050506; --bg2:#0b0b0d; --bg-elevated:#0b0b0d; --panel:#131319; --surface:#131319; --panel2:#1c1c23; --surface-raised:#1c1c23; --surface-hover:#23232b; /* hairline borders — subtle white overlay, Apple-style */ --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.13); --border:rgba(255,255,255,.075); --border-strong:rgba(255,255,255,.13); /* text */ --fg:#f5f5f7; --text-primary:#f5f5f7; --fg2:#a1a1aa; --text-secondary:#a1a1aa; --dim:#7e7e88; --text-muted:#7e7e88; /* lifted from #68686f — sub-10px labels were ~3.3:1, below AA */ /* signal = amber (attention), intelligence = violet */ --acc:#ffb84d; --amber:#ffb84d; --amber-hot:#ffd166; --amber-dim:rgba(255,184,77,.12); --acc-ink:#1a1206; --acc2:#9b7cff; --violet:#9b7cff; --violet-dim:rgba(155,124,255,.12); /* market / execution / risk */ --up:#52d68a; --green:#52d68a; --green-dim:rgba(82,214,138,.11); --down:#ff5c6c; --red:#ff5c6c; --red-dim:rgba(255,92,108,.11); --hot:#ffb84d; --info:#65a9ff; --blue:#65a9ff; /* strict radius scale: 6 telemetry · 8 controls · 12 cards · 16 sheets · 24 major */ --r-tel:6px; --r:10px; --r-sm:6px; --r-ctrl:8px; --r-card:12px; --r-sheet:16px; --r-major:24px; --r-pill:999px; /* badges, chips, toggle tracks — fully-rounded, its own tier */ /* motion vocabulary */ --t-fast:.12s; --t-normal:.22s; --t-slow:.42s; --ease:cubic-bezier(.22,1,.36,1); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif; --mono:"SFMono-Regular","SF Mono",ui-monospace,"Geist Mono",Menlo,monospace; } *{box-sizing:border-box} /* Page lock: no pinch/double-tap zoom, no horizontal fly-out, no rubber-band overscroll — so live updates never make the layout jump around on mobile. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation} /* overflow-x:CLIP, not hidden. `hidden` on turns body into a scroll container and forces overflow-y to compute to `auto`, so the mouse wheel tries to scroll body (which isn't the overflowing element) and — with overscroll-behavior:none blocking the chain to the viewport scroller — does nothing, while dragging the scrollbar (targets the viewport directly) still works. `clip` stops horizontal fly-out WITHOUT creating a scroll container, so the wheel scrolls the page normally. overscroll-behavior lives on html only. */ html{overflow-x:clip;overscroll-behavior:none} body{overflow-x:clip;max-width:100%} body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased;position:relative;width:100%} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:var(--acc-ink); padding:8px 14px;border-radius:var(--r-sm)} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ── shell ─────────────────────────────────────────────────────────────── */ /* An explicit `display` in CSS silently overrides the [hidden] attribute's display:none, which left every dropdown that uses display:grid stuck open (venue picker, chain picker). This restores what `hidden` is supposed to mean everywhere at once. */ [hidden]{display:none !important} .shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh} /* embed mode — chrome-less so the page can live inside a sheet iframe */ body.embed nav.side,body.embed header.top,body.embed .statusbar, body.embed .databanner,body.embed .skip{display:none} body.embed .shell{grid-template-columns:1fr;min-height:0} body.embed,body.embed .wrap{min-height:0} body.embed main{grid-column:1} body.embed .wrap{padding:12px 14px 20px} /* FIXED, not sticky. The `overflow-x:hidden` on html/body silently breaks position:sticky for descendants (the sidebar scrolled away with the page). The grid still reserves the 232px column, so a fixed nav sits over that empty column and stays put no matter how far the page scrolls; it scrolls internally only if its own content is taller than the viewport. */ nav.side{background:var(--bg2);border-right:1px solid var(--line); position:fixed;left:0;top:0;width:232px;height:100vh;overflow-y:auto; overflow-x:hidden;padding-bottom:42px;z-index:20; display:flex;flex-direction:column} /* account card pinned to the bottom of the sidebar (under the nav items) */ .navuser{margin-top:auto;padding:10px 12px 0;position:relative} .navuser-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card); padding:9px 10px;cursor:pointer;transition:border-color .12s,background .12s} .navuser-btn:hover{border-color:var(--acc);background:var(--panel2)} .navuser-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid; place-items:center;background:var(--amber-dim);color:var(--acc); font:700 13px/1 var(--sans);overflow:hidden} .navuser-av img{width:100%;height:100%;object-fit:cover} .navuser-txt{min-width:0;flex:1} .navuser-txt b{display:block;font-size:13px;font-weight:600;color:var(--fg); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navuser-txt small{display:block;font-size:11px;color:var(--dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navuser-chev{color:var(--dim);font-size:12px;flex:none} .navuser-pop{position:absolute;left:12px;right:12px;bottom:calc(100% - 2px); background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card); padding:5px;box-shadow:0 -10px 30px rgba(0,0,0,.5);z-index:5} .navuser-pop[hidden]{display:none} .navuser-pop a,.navuser-pop button{display:block;width:100%;text-align:left; background:transparent;border:0;color:var(--fg);font:550 13px/1 var(--sans); padding:9px 11px;border-radius:var(--r-tel);cursor:pointer;text-decoration:none} .navuser-pop a:hover,.navuser-pop button:hover{background:var(--panel2)} .navuser-pop .so{color:var(--down)} .brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px} .logo{width:28px;height:28px;flex:none} .brand b{font-size:15px;font-weight:650;letter-spacing:.02em} .brand small{display:block;font:11px/1.2 var(--mono);color:var(--dim);letter-spacing:.04em} /* Mode label is the ANCHOR — the four modes (Wire/Research/Operate/Crew) are the structure; the tools under each are secondary. Brighter, larger, with a hairline above so the eye reads four groups, not thirteen peers. */ .navgroup{font:600 10.5px/1 var(--sans);letter-spacing:.14em;color:var(--fg2); text-transform:uppercase;padding:18px 18px 8px;margin-top:2px; border-top:1px solid var(--line)} .navgroup:first-of-type{border-top:0;margin-top:0} nav.side a{display:flex;gap:10px;align-items:center;padding:8px 18px;color:var(--fg2); border-left:2px solid transparent;transition:background .12s,color .12s} nav.side a:hover{background:var(--panel);color:var(--fg)} /* Active = white text + amber rail + a very subtle amber wash and 1px inset glow. */ nav.side a.on{background:var(--amber-dim);color:var(--fg);border-left-color:var(--acc); box-shadow:inset 0 1px 0 rgba(255,184,77,.06),inset 1px 0 0 rgba(255,184,77,.05)} nav.side a.on .i{color:var(--acc)} nav.side a span{display:block;font-weight:550;font-size:13.5px} /* Descriptions stay put — always visible, just dim. A hover-reveal shifted every other row (the "jiggle"), so it's a fixed layout now, only the colour changes. */ nav.side a small{display:block;font-size:11px;color:var(--dim);font-weight:400; line-height:1.3;margin-top:2px} nav.side a:hover small{color:var(--fg2)} .i{width:20px;height:20px;flex:none;margin-top:1px} .safety{margin:14px 14px 0;padding:9px 11px;background:#111a14;border:1px solid #1d3327; border-radius:var(--r-sm);display:flex;gap:8px;color:var(--up);font-size:11px; line-height:1.4} .safety .i{width:16px;height:16px} .keyed{display:inline-block;font:600 8.5px/1.7 var(--sans);letter-spacing:.08em; text-transform:uppercase;background:#2a2110;border:1px solid #4a3a17; color:var(--acc);border-radius:var(--r-pill);padding:0 6px;margin-left:6px; vertical-align:middle} .gate{display:grid;place-items:center;min-height:64vh;padding:20px;min-width:0} /* width:100% + max-width, NOT 94vw. 94vw ignores the padding on .gate and .wrap above it, so on a phone the card came out wider than its container and bled off the right edge. Sizing to the container keeps it inside the padding. */ .gatecard{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line2); border-radius:var(--r);padding:26px;min-width:0} .gatecard h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em} .gatecard p{margin:0 0 18px;color:var(--fg2);font-size:14px} .gatecard form{display:flex;gap:9px;flex-wrap:wrap} /* Telegram sign-in — primary path, Telegram blue, full width */ .tgbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px; background:#2aabee;border:1px solid #2aabee;color:#fff;font-weight:600; min-height:46px;border-radius:var(--r-ctrl,8px)} .tgbtn:hover{filter:brightness(1.06)} .tgbtn:disabled{opacity:.6;cursor:default} .tgstate{min-height:20px;margin-top:10px;font-size:12.5px;color:var(--fg2)} .tgstate a{color:var(--acc)} .ordiv{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--dim); font-size:11px;text-transform:uppercase;letter-spacing:.08em} .ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)} .gatecard input{flex:1;min-width:190px;font-family:var(--mono);letter-spacing:.08em; text-transform:uppercase} .gatefoot{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap} .note .ok{color:var(--up)} .note .bad{color:var(--down)} /* ── header ────────────────────────────────────────────────────────────── */ /* The nav is position:fixed (out of grid flow), so main must be pinned to the SECOND column explicitly — otherwise grid auto-places it into the first (232px) column and squishes every page. Mobile resets this below. */ main{min-width:0;grid-column:2} /* Data-health pill — always on in the header. State is a product surface, not a log line. */ .health{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill); font:700 9.5px/1 var(--mono);letter-spacing:.08em;position:relative; border:1px solid transparent;white-space:nowrap} .health .hdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .health-live{color:var(--up);background:var(--green-dim);border-color:transparent} .health-live .hdot{animation:heatPulse 2.2s ease infinite} .health-delayed{color:var(--acc);background:var(--amber-dim)} .health-degraded{color:var(--down);background:var(--red-dim);border-color:var(--down)} .health-degraded .hdot{animation:heatPulse 1.4s ease infinite} .health-offline{color:var(--dim);background:var(--panel2);border-color:var(--line)} .health[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0; background:var(--panel);border:1px solid var(--line2);color:var(--fg2);border-radius:var(--r-tel); padding:6px 9px;font:500 11px/1.3 var(--sans);letter-spacing:0;white-space:nowrap; opacity:0;pointer-events:none;transition:opacity .12s;z-index:40;text-transform:none} .health[data-tip]:hover::after{opacity:1} @media(max-width:560px){.health b{display:none}.health{padding:6px}} /* Degraded-data banner — shown when the live wire is down so nobody trades on a stale flow read thinking it's live. */ .databanner{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:8px 22px;background:var(--red-dim);border-bottom:1px solid var(--down); color:var(--down);font-size:12.5px} .databanner b{color:var(--fg)}.databanner span:last-child{color:var(--fg2)} .databanner .ddot{width:8px;height:8px;border-radius:50%;background:var(--down); animation:heatPulse 1.6s ease infinite} header.top{display:flex;align-items:center;gap:16px; padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0; background:rgba(8,8,11,.92);backdrop-filter:blur(8px);z-index:5} /* The wallet readout + actions are ONE group pinned to the right, not floating items spread by space-between. And the header's .hright is a ROW (a stray generic .hright{column} for hunt rows was stacking the pill/bell/avatar). */ header.top .hstats{margin-left:auto} header.top .hright{flex-direction:row;align-items:center;gap:10px;flex:none} header.top h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em} header.top p{margin:2px 0 0;font-size:12px;color:var(--dim)} /* brand mark in the header — hidden on desktop (the sidebar carries it), shown on mobile where there's no sidebar */ .hbrand{display:none;align-items:center} .hbrand .logo{width:26px;height:26px} .hstats{display:flex;gap:18px;align-items:center} .search{display:flex;gap:7px;align-items:center;flex:1;max-width:430px;min-width:210px} .search{position:relative} .search input{min-height:36px;padding:8px 11px;font-size:13px} #qres{position:absolute;top:calc(100% + 6px);left:0;right:52px;z-index:40; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r); box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden;max-height:60vh; overflow-y:auto} #qres[hidden]{display:none} #qres .qgroup{font:600 9.5px/1 var(--sans);letter-spacing:.14em;color:var(--dim); text-transform:uppercase;padding:9px 12px 5px} #qres .qrow{display:flex;gap:10px;align-items:center;padding:7px 12px;cursor:pointer; border-left:2px solid transparent} #qres .qrow:hover,#qres .qrow.sel{background:var(--panel2);border-left-color:var(--acc)} #qres .qrow img,#qres .qrow .mono-av{width:26px;height:26px;border-radius:var(--r-tel);flex:none} #qres .qmain{flex:1;min-width:0} #qres .qmain b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} #qres .qmain small{color:var(--dim);font-size:10.5px} #qres .qnum{flex:none;font:12px/1.3 var(--mono);text-align:right} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hright{display:flex;align-items:center;gap:8px;margin-left:6px;padding-left:12px; border-left:1px solid var(--line)} .bell{position:relative;display:grid;place-items:center;width:32px;height:32px; border-radius:50%;border:1px solid var(--line);background:var(--panel); color:var(--fg2)} .bell:hover{border-color:var(--line2);color:var(--fg)} .bell .i{width:17px;height:17px} .bell span{position:absolute;top:-3px;right:-3px;background:var(--acc); color:var(--acc-ink);font:700 9px/1 var(--mono);min-width:15px;height:15px; padding:0 3px;border-radius:var(--r-pill);display:none;align-items:center; justify-content:center;box-shadow:0 0 0 2px var(--bg)} .bell span.on{display:inline-flex} .bell{cursor:pointer} /* ── notifications popup ─────────────────────────────────────────────────── The bell opens this instead of navigating to a page; each event is its own card, with a pinned system card for custody. */ #notifPanel{position:fixed;inset:0;z-index:85} #notifPanel[hidden]{display:none} .notif-scrim{position:absolute;inset:0;background:rgba(4,4,7,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .notif-card{position:absolute;top:54px;right:16px;width:min(384px,94vw); max-height:min(72vh,580px);display:flex;flex-direction:column;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r-card);overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.6)} .notif-head{display:flex;align-items:center;gap:8px;padding:13px 15px; border-bottom:1px solid var(--line)} .notif-head b{font:700 14px/1 var(--sans)} .notif-clear{margin-left:auto;background:none;border:0;color:var(--dim);cursor:pointer; font:500 11.5px/1 var(--sans);padding:5px 9px;border-radius:var(--r-tel)} .notif-clear:hover{color:var(--fg);background:var(--panel2)} .notif-list{overflow:auto;padding:9px;display:flex;flex-direction:column;gap:7px} .notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px 11px; background:var(--panel2);border:1px solid var(--line);border-radius:var(--r)} .notif-item.system{background:linear-gradient(180deg,rgba(70,180,120,.06),transparent); border-color:var(--line2)} .notif-item.system .ni-ico svg{color:#46b478} .ni-ico{width:28px;height:28px;border-radius:var(--r-ctrl);display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);flex:none;font-size:14px} .ni-ico svg{width:15px;height:15px;color:var(--acc2)} .ni-body{flex:1;min-width:0} .ni-body b{font-size:12.5px} .ni-body p{margin:2px 0 0;font-size:11.5px;color:var(--fg2);line-height:1.45; word-break:break-word} .ni-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .ni-top time{margin-left:auto;font-size:10px;color:var(--dim);font-family:var(--mono)} .ni-open{flex:none;width:28px;height:28px;border-radius:var(--r-ctrl);background:var(--panel); border:1px solid var(--line);color:var(--fg2);cursor:pointer;display:grid;place-items:center} .ni-open:hover{border-color:var(--acc);color:var(--acc)} .ni-open svg{width:13px;height:13px} .ni-empty{padding:22px 14px;text-align:center;color:var(--dim);font-size:12px;line-height:1.5} #notifAlerts{display:flex;flex-direction:column;gap:7px} #notifAlerts:empty{display:none} @media(max-width:560px){ .notif-card{top:auto;bottom:0;right:0;left:0;width:100%;max-height:76vh; border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)} } .avatarbtn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(140deg,#2a2110,#1a1a24);border:1px solid var(--line2); color:var(--acc);font:650 13px/1 var(--sans);flex:none;position:relative} .avatarbtn:hover{border-color:var(--acc)} #scrim{position:fixed;inset:0;background:rgba(4,4,7,.72);z-index:60; display:flex;justify-content:center;padding-top:12vh} #scrim[hidden]{display:none} .finder{width:min(680px,92vw);height:max-content;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r);overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6)} /* Command palette: glass (per spec, glass is reserved for palette/sheets/nav, not cards), animating opacity+transform only so it never shifts layout. */ .cmdk{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--line2);border-radius:var(--r-sheet,14px); box-shadow:0 30px 90px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.05); animation:cmdkIn .16s var(--ease,ease) both} @keyframes cmdkIn{from{opacity:0;transform:translateY(-8px) scale(.985)} to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.cmdk{animation:none}} .fbar{display:flex;align-items:center;gap:10px;padding:0 16px; border-bottom:1px solid var(--line)} .fkicon{font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--dim); border:1px solid var(--line2);border-radius:var(--r-tel);padding:5px 6px;flex:none} .finder input{border:0;background:transparent;font-size:15px;padding:15px 2px; min-height:54px;flex:1;color:var(--fg)} .finder input:focus{box-shadow:none} #fres{max-height:52vh;overflow:auto} /* command rows: a page or action, with a category chip and a go affordance */ .fcmd{display:flex;gap:11px;align-items:center;padding:9px 16px;cursor:pointer; border-left:2px solid transparent} .fcmd:hover,.fcmd.sel{background:var(--panel2);border-left-color:var(--acc)} .fcmd .fcmain{flex:1;min-width:0} .fcmd b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fcmd small{color:var(--dim);font-size:11px} .fchip{font:600 9px/1 var(--mono);letter-spacing:.12em;color:var(--dim); border:1px solid var(--line);border-radius:var(--r-tel);padding:4px 6px;flex:none; text-transform:uppercase} .fcmd.sel .fchip{border-color:var(--acc);color:var(--acc)} .fgo{color:var(--dim);flex:none;font-size:13px;opacity:0;transition:opacity .12s} .fcmd.sel .fgo,.fcmd:hover .fgo{opacity:1;color:var(--acc)} /* ── Hunt sheet ─────────────────────────────────────────────────────────── */ /* Vamp sheet — the launch form popped over a card as a sheet iframe (the same working /launch page in embed mode), so vamping from Discover never leaves. */ #vampScrim{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end; background:rgba(4,4,7,.72)} #vampScrim[hidden]{display:none} .vs-back{position:absolute;inset:0;background:rgba(4,4,7,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .vs-sheet{position:relative;width:min(780px,98vw);height:auto;max-height:90vh; background:var(--panel);border:1px solid var(--line2);border-radius:16px 16px 0 0; display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 44px rgba(0,0,0,.6)} .vs-head{display:flex;align-items:center;gap:12px;padding:12px 14px; border-bottom:1px solid var(--line);flex:none} .vs-head b{font-size:14px;font-weight:650} .vs-full{margin-left:auto;font:600 12px/1 var(--sans);color:var(--acc);text-decoration:none} .vs-frame{flex:none;display:block;width:100%;border:0;background:var(--bg);height:60vh} @media(min-width:560px){#vampScrim{align-items:center;justify-content:center} .vs-sheet{border-radius:var(--r-sheet)}} #huntScrim{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end; justify-content:center} #huntScrim[hidden]{display:none} .hs-back{position:absolute;inset:0;background:rgba(4,4,7,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .huntsheet{position:relative;width:min(520px,96vw);max-height:92vh;overflow:auto; margin-bottom:0;border-radius:var(--r-sheet,14px) var(--r-sheet,14px) 0 0} @media(min-width:560px){#huntScrim{align-items:center} .huntsheet{border-radius:var(--r-sheet,14px);margin-bottom:0}} .hs-head{display:flex;align-items:center;gap:11px;padding:15px 16px; border-bottom:1px solid var(--line)} .hs-art{width:40px;height:40px;border-radius:var(--r);flex:none;display:grid; place-items:center;background:var(--panel2);font:700 16px/1 var(--sans);overflow:hidden} .hs-art img{width:100%;height:100%;object-fit:cover} .hs-hid b{display:block;font-size:16px} .hs-hid small{font-size:11px} .iconbtn{margin-left:auto;background:transparent;border:0;color:var(--dim); cursor:pointer;font-size:16px;padding:4px 8px} .iconbtn:hover{color:var(--fg)} .hs-body{padding:14px 16px;display:flex;flex-direction:column;gap:14px} .hs-mkts{display:flex;gap:8px} .hs-mkt{flex:1;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r);padding:9px 11px} .hs-mkt span{display:block;font:600 9px/1 var(--sans);letter-spacing:.1em; color:var(--dim);text-transform:uppercase;margin-bottom:4px} .hs-mkt b{font-size:13px} /* paper / live toggle — live is amber so it reads as "this spends real SOL" */ .hs-modebar{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-ctrl);padding:2px;align-self:flex-start} .hs-mode{border:0;background:transparent;color:var(--dim);cursor:pointer; border-radius:var(--r-tel);padding:6px 16px;font:600 12px/1 var(--sans)} .hs-mode.on[data-mode="paper"]{background:var(--surface-raised);color:var(--fg)} .hs-mode.on[data-mode="live"]{background:var(--acc);color:var(--acc-ink)} .hs-fields{display:flex;gap:10px} .hs-f{flex:1;display:flex;flex-direction:column;gap:5px;font:600 10px/1 var(--sans); letter-spacing:.08em;color:var(--dim);text-transform:uppercase} .hs-f select,.hs-f input{width:100%;background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r-ctrl);padding:11px 12px;color:var(--fg);font:600 14px/1 var(--sans)} .hs-f input{font-family:var(--mono)} /* Compaction — matches the launch page density so the two sheets feel one system */ .hs-head{padding:11px 14px;gap:10px} .hs-art{width:34px;height:34px;border-radius:var(--r-ctrl);font-size:14px} .hs-hid b{font-size:15px} .hs-body{padding:11px 14px;gap:11px} .hs-mkt{padding:7px 10px} .hs-mkt span{font-size:8.5px;margin-bottom:3px} .hs-mkt b{font-size:12.5px} .hs-mode{padding:5px 14px;font-size:11.5px} .hs-fields{gap:8px} .hs-f{gap:4px;font-size:9px} .hs-f select,.hs-f input{padding:8px 10px;font-size:13px;border-radius:var(--r-tel)} .hs-preflight{padding:9px 11px} .grow{padding:5px 0;font-size:11.5px} /* Rug-bait warning banner — sits above the preflight, loud on purpose. Danger = red (thin pool / concentrated / would-be blocked), caution = amber. */ .hs-warn{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:var(--r); margin-bottom:10px;border:1px solid;animation:gpop .28s cubic-bezier(.2,1.3,.4,1) both} .hs-warn.danger{background:var(--red-dim);border-color:rgba(255,92,108,.4)} .hs-warn.caution{background:var(--amber-dim);border-color:rgba(255,184,77,.38)} .hs-warn .hw-ico{flex:none;width:19px;height:19px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#0b0b0d;margin-top:1px} .hs-warn.danger .hw-ico{background:var(--down)} .hs-warn.caution .hw-ico{background:var(--acc)} .hs-warn .hw-body b{display:block;font-size:12px;font-weight:700;letter-spacing:-.01em} .hs-warn.danger .hw-body b{color:#ff8b96} .hs-warn.caution .hw-body b{color:var(--amber-hot)} .hs-warn .hw-body ul{margin:3px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .hs-warn .hw-body li{font-size:11px;color:var(--fg2);position:relative;padding-left:11px} .hs-warn .hw-body li::before{content:"·";position:absolute;left:2px;color:var(--dim)} .hs-preflight{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r); padding:10px 12px} .hs-plabel{font:600 9px/1 var(--sans);letter-spacing:.12em;color:var(--dim); text-transform:uppercase;margin-bottom:8px} .grow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12px} .grow .gd{width:7px;height:7px;border-radius:50%;flex:none} .grow b{font-weight:600;min-width:96px} .grow .gdet{color:var(--dim);font-size:11px;margin-left:auto;text-align:right} /* Polished gate check: a colored badge with a pop-in animation. */ .gmark{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#0b0b0d; animation:gpop .3s cubic-bezier(.2,1.3,.4,1) both} .gmark.ok{background:var(--up)} .gmark.warn{background:var(--acc)} .gmark.bad{background:var(--down)} .gmark.dim{background:var(--dim)} @keyframes gpop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}} /* After the first paint the preflight just refreshes its numbers — don't replay the pop-in every reload. */ .noanim .gmark{animation:none} /* Launchpad venue picker — a select-style dropdown with the real brand logo. */ .vlogo{flex:none;vertical-align:middle;border-radius:var(--r-tel)} .venuedd{position:relative;display:inline-block} .venuedd-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 10px; border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);color:var(--fg); font-weight:600;font-size:13.5px;cursor:pointer;transition:.14s} .venuedd-btn:hover{border-color:var(--dim)} .venuedd-btn .vddname{text-align:left} .venuedd-btn .vlogo{width:18px;height:18px} .vddchev{font-style:normal;color:var(--dim);font-size:10px;margin-left:1px;transition:transform .15s} .venuedd-menu{position:absolute;z-index:97;top:calc(100% + 6px);left:0;min-width:max(100%,168px); background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-card);padding:5px; box-shadow:0 12px 34px rgba(0,0,0,.5);display:grid;gap:2px} .venuedd-menu[hidden]{display:none} .venuedd-opt{display:inline-flex;align-items:center;gap:9px;padding:8px 10px;border:0; border-radius:var(--r-ctrl);background:transparent;color:var(--fg);font-weight:600;font-size:14px; cursor:pointer;text-align:left;transition:.12s} .venuedd-opt .vddname{flex:1} .venuedd-opt:hover{background:rgba(255,255,255,.06)} .venuedd-opt.on{background:rgba(255,255,255,.05)} .venuedd-opt.soon{opacity:.5;cursor:not-allowed} .vddtick{font-style:normal;color:var(--acc);font-size:12px} /* Earned card: subtle operator-only platform take, one hairline footer line. */ .earnc .pfoot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line); font-size:11.5px;color:var(--dim)} .earnc .pfoot b{color:var(--fg2);font-family:var(--mono);font-weight:600} .earnc .venuedd-opt .mini.dim{margin-left:auto;padding-left:10px} .earnc .venuedd-opt .vddtick[hidden]{display:none} .earnc #earnClaim:disabled{opacity:.5;cursor:default;background:var(--panel2);color:var(--dim);border-color:var(--line)} /* On a phone the anchored dropdowns become full-width bottom sheets — an anchored 190px card near the screen edge overflows and clips. Pure CSS: the menus stay DOM children of their trigger, so the existing outside-click close still works. */ @media(max-width:560px){ /* Claim menu lives in a toolbar, so a bottom sheet is right. The venue dropdown sits high in the Launch form — keep it ANCHORED right under its button where the thumb is, or it reads as "nothing happened". */ .claimmenu{position:fixed;left:0;right:0;bottom:0;top:auto; width:100%;min-width:0;margin:0;border-radius:18px 18px 0 0; max-height:72vh;overflow:auto;z-index:97; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.55);animation:riseIn .24s cubic-bezier(.2,.7,.3,1) both} .claimmenu::before{content:"";display:block;width:38px;height:4px; border-radius:3px;background:var(--line2);margin:2px auto 8px} .venuedd-menu{max-height:58vh;overflow:auto;box-shadow:0 12px 34px rgba(0,0,0,.5)} .venuedd-opt,.claimopt{padding:13px 12px;border-radius:var(--r-card)} } /* Launchpad dropdown on the left, the two setup toggles on the right of it. */ .launchrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .launchtoggles{display:flex;flex-direction:column;gap:6px;margin-left:auto} .launchtoggles .switch{font-size:12px;white-space:nowrap} @media(max-width:520px){.launchtoggles{flex-direction:row;margin-left:0;width:100%}} .venuepick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .venuepill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px; border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel2); color:var(--fg);font-weight:600;font-size:13px;cursor:pointer;transition:.15s; position:relative} .venuepill:hover{border-color:var(--dim)} .venuepill.on{border-color:var(--acc);background:rgba(255,255,255,.05); box-shadow:0 0 0 1px var(--acc) inset} .venuepill.soon{opacity:.55;cursor:not-allowed} .venuepill .vsoon{font-size:9px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--dim);border:1px solid var(--line); border-radius:4px;padding:1px 4px;margin-left:2px} /* Logo cell inside a claim-menu row. */ .claimopt .cp-name{display:inline-flex;align-items:center;gap:8px} /* Preflight + Timeline side by side on the hunt cockpit. */ .pftl{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .pftl>.panel{margin:0} @media(max-width:900px){.pftl{grid-template-columns:1fr}} .hs-foot{display:flex;align-items:center;gap:8px;padding:12px 16px; border-top:1px solid var(--line);position:sticky;bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.006))} .btn.danger{background:var(--red-dim);border:1px solid var(--down);color:var(--down)} .btn.danger:hover{background:var(--down);color:#fff} /* Buttons that carry an inline icon: size the glyph to the label and space it. */ .btn svg.i{width:16px;height:16px;flex:none;margin-right:2px;vertical-align:-3px} /* Call = putting a coin on the record for your crew. A branded signal-horn, not an emoji — accent-tinted so it reads as the social/alpha action, distinct from the amber Hunt. */ .btn.callbtn{background:var(--amber-dim);border:1px solid rgba(255,209,102,.4);color:var(--acc)} .btn.callbtn:hover{background:rgba(255,209,102,.16);border-color:var(--acc)} /* Hunt = arming an instrument, not "Buy" (design system §75). Hover tightens a reticle ring and the amber intensifies — a real "ready" state, no fake spinner. */ .btn.hunt{position:relative;overflow:hidden} .btn.hunt::after{content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t-normal,.2s) var(--ease,ease)} .btn.hunt:hover::after{box-shadow:inset 0 0 0 1px rgba(255,209,102,.9), inset 0 0 12px -4px var(--amber-hot)} .btn.hunt:hover{filter:brightness(1.06)} @media(prefers-reduced-motion:reduce){.btn.hunt::after{transition:none}} /* ── Hunt workspace page ────────────────────────────────────────────────── */ .hbadge{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono); letter-spacing:.08em;border:1px solid;border-radius:var(--r-tel);padding:4px 7px;vertical-align:middle} .hbadge .hd{width:6px;height:6px;border-radius:50%} .hlist{display:flex;flex-direction:column} .hrow{display:flex;align-items:center;gap:11px;padding:12px 14px; border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg)} .hrow:last-child{border-bottom:0} .hrow:hover{background:var(--panel2)} .hart{width:34px;height:34px;border-radius:var(--r-ctrl);flex:none;display:grid;place-items:center; background:var(--panel2);font:700 14px/1 var(--sans);overflow:hidden} .hart.big{width:46px;height:46px;font-size:18px} .hart img{width:100%;height:100%;object-fit:cover} /* Letter tile swapped in for any coin art that fails to load (see the global img-error handler). Inherits size from whatever class it replaced. */ .artfb{display:grid;place-items:center;overflow:hidden;background:var(--panel2); color:#7a7a83;font:700 14px/1 var(--sans);min-width:1.4em;min-height:1.4em} .hmid{flex:1;min-width:0}.hmid b{display:flex;align-items:center;gap:7px;font-size:14px;min-width:0} /* CA line under a hunt row — same copyable pill the coin cards use */ .hca{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hright{display:flex;flex-direction:column;align-items:flex-end;gap:4px} /* Hunt detail header: avatar top-left (not floating mid-text against a tall wrapped title), identity in the middle, P&L pinned top-right. */ .hhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap} .hhead .hid{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-self:stretch} .hhead .hid h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:18px;line-height:1.1} .hpnl{text-align:right;margin-left:auto;flex:none}.hpnl b{display:block;font:700 20px/1 var(--mono)} /* honest empty-state for a hunt that expired/stopped before ever entering — beats a wall of "—" and +0.000 stat cards that reads as broken. */ .hnopos{display:flex;align-items:center;gap:14px;padding:6px 2px} .hnopos-mark{width:46px;height:46px;border-radius:var(--r-card);flex:none;display:grid;place-items:center; background:var(--panel2);border:1px solid var(--line);color:var(--dim);font-size:20px} .hnopos b{display:block;font-size:15px} .hnopos span{display:block;font-size:12.5px;color:var(--fg2);margin-top:2px} .hnopos small{display:block;margin-top:3px} .hpnl small{font-size:10px;text-transform:uppercase;letter-spacing:.08em} /* This grid never got the same pass Discovery's .stat tiles did — different background token, tighter radius, no tabular-nums on the numbers (so digits didn't line up column-to-column the way a "premium" numeric grid should). Brought in line with .stat's already-proven recipe rather than inventing a second one. */ .hmets{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:7px} .hmet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:7px 10px;min-width:0} .hmet span{display:block;font:600 8px/1 var(--sans);letter-spacing:.05em;color:var(--dim); text-transform:uppercase;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hmet b{font-size:13.5px;line-height:1.1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-variant-numeric:tabular-nums;letter-spacing:-.01em} @media(max-width:560px){ /* 3 tight columns fit a phone without overflow and cut the row count vs 2-col. minmax(0,1fr) (not bare 1fr, whose auto-min is min-content) guarantees the tracks can shrink so a long label/value ellipsises instead of overflowing. */ .hmets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .hmet{padding:6px 8px} .hmet b{font-size:12.5px} /* ladder rungs: two per row, each fills its half so the content never clips */ .hrungs .hrung{flex:1 1 calc(50% - 3px);max-width:none;min-width:0} /* fills stay one line — drop the (secondary) on-chain note that was overflowing */ .hfill{grid-template-columns:38px 1fr auto auto;gap:6px;padding:5px 8px} .hfill .ftag{display:none} /* strategy rule rows stack on a phone — align-items:stretch (not flex-start) so the value fills the width and WRAPS instead of sizing to its content width, which was forcing the whole page ~600px wide and overflowing every panel */ .hstrat{flex-direction:column;gap:2px;align-items:stretch} .hstrat>div{min-width:0} } /* Hunt cockpit — state tags, entry countdown, ladder rungs, strategy rows, market-health and the fill-by-fill ledger. */ .htag{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.08em; padding:3px 6px;border-radius:var(--r-tel);vertical-align:middle;margin-left:2px} .htag.paper{background:var(--panel2);color:var(--dim);border:1px solid var(--line)} .htag.live{background:var(--green-dim);color:var(--up);border:1px solid var(--up)} .htag.stale{background:var(--amber-dim,rgba(240,180,60,.14));color:var(--acc); border:1px solid var(--acc)} .hwait{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:6px 2px} .hwait b{font-size:26px} /* ladder rungs sit side by side (wrap), compact — not a tall vertical stack */ .hrungs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px} .hrung{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:var(--r-ctrl); background:var(--panel2);border:1px solid var(--line);font-size:12.5px; flex:1 1 150px;max-width:240px;min-width:0} .hrung .rk{width:13px;text-align:center;color:var(--dim);flex:none} .hrung.done{border-color:var(--up)}.hrung.done .rk{color:var(--up)} .hrung .rs{margin-left:auto;font:600 8.5px/1 var(--sans);letter-spacing:.07em; text-transform:uppercase;color:var(--dim);flex:none} .hrung.done .rs{color:var(--up)} .hstrat{display:flex;justify-content:space-between;gap:12px;padding:6px 2px; border-top:1px solid var(--line);font-size:12.5px} .hstrat>span{color:var(--dim);font:600 9px/1.3 var(--sans);letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} .hledger{display:flex;flex-direction:column;gap:4px} /* fills are compact single-line rows — the price note rides at the end of the same line (dim, ellipsised) instead of wrapping to its own row */ .hfill{display:grid;grid-template-columns:44px auto auto auto 1fr;gap:7px;align-items:center; padding:5px 9px;border-radius:var(--r-ctrl);background:var(--panel2);border:1px solid var(--line); font-size:12px} .hfill .fk{font:700 8.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase; padding:2px 5px;border-radius:var(--r-tel);text-align:center} .hfill.buy .fk{background:var(--green-dim);color:var(--up)} .hfill.sell .fk{background:var(--red-dim);color:var(--down)} .hfill .ftag{grid-column:auto;justify-self:end;font-size:9.5px;color:var(--dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .hresult{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r-card); border:1px solid var(--line2);background:var(--panel2)} .hresult.up{border-color:var(--up);background:var(--green-dim)} .hresult.down{border-color:var(--down);background:var(--red-dim)} .hresult b{font:700 16px/1 var(--sans);letter-spacing:.04em} .hresult .mono{font-size:13px} .htl{display:flex;flex-direction:column;gap:0} .tlrow{display:flex;gap:11px;align-items:flex-start;padding:8px 0;position:relative} .tlrow .tldot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none; margin-top:3px;box-shadow:0 0 0 3px var(--amber-dim)} .tlrow:not(:last-child)::before{content:"";position:absolute;left:4px;top:15px;bottom:-8px; width:1px;background:var(--line2)} .tlmain{flex:1}.tlmain b{display:block;font-size:12.5px;text-transform:capitalize} .tlmain small{font-size:11px} .tlt{font-size:11px;flex:none} .fgroup{font:600 10px/1 var(--sans);letter-spacing:.14em;color:var(--dim); text-transform:uppercase;padding:11px 16px 6px} .fitem{display:flex;gap:11px;align-items:center;padding:9px 16px;cursor:pointer; border-left:2px solid transparent} .fitem:hover,.fitem.sel{background:var(--panel2);border-left-color:var(--acc)} .fitem img,.fitem .mono-av{width:32px;height:32px;border-radius:var(--r-ctrl);flex:none} .fitem .fmain{flex:1;min-width:0} .fitem b{display:block;font-size:13px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .fitem small{color:var(--dim);font-size:11px} .fitem .fnum{text-align:right;font-family:var(--mono);font-size:12px;flex:none} .fhint{display:flex;justify-content:space-between;align-items:center; padding:9px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:11px} .fhint b{color:var(--fg2);font-weight:600} .fhint-r{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--dim);opacity:.7} /* coin header stat strip: a grid that fits — 4 per row on a phone (2 rows for the 8 stats), a single row on desktop. minmax(0,1fr) so it never overflows. */ /* Compact trading-terminal token header: title -> mint -> metrics as ONE tight block, no dead space. Padding + rhythm tuned down from the old dashboard card. */ #head{padding:10px 16px} /* the Trade-on dropdown and social hover previews must escape the header panel, which is otherwise overflow:hidden like every panel */ .panel:has(#head){overflow:visible} #head .coin-top{min-height:0;align-items:center;gap:11px} #head .coin-top h3{min-height:0} #head .coin-top .sub{margin-top:1px} /* One-line header: identity | metric strip | socials+actions. The strip fills the middle on wide screens and wraps to its own line underneath on small ones, while the actions stay up on the first line. */ .coinhead1{position:relative;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;padding-right:118px} /* avatar + identity are ONE unit — never let the name wrap below the icon */ .coinlead{display:flex;gap:11px;align-items:flex-start;min-width:0;flex:1 1 auto} .coinhead1 .coinident{flex:1 1 auto;min-width:0} .coinhead1 .coinident h3{margin:0} /* CA + socials + share tight under the ticker, minimal gap */ .coinsub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px} .coinsub .cshare{margin:0} .coinhead1 .coinstrip{flex:1 1 220px;min-width:0;margin:0;align-items:center} /* Trade-on + graduated pinned to the TOP-RIGHT corner, stacked — out of flow so they never float into the middle when the identity block wraps. */ .coinbtns{position:absolute;top:0;right:0;display:flex;flex-direction:column; align-items:flex-end;gap:6px} @media(max-width:900px){.coinhead1 .coinstrip{order:3;flex-basis:100%;margin-top:2px}} @media(max-width:520px){.coinhead1{padding-right:104px}} /* Stats pack by content in a tight row (a "focused" cluster), not 8 equal full-width columns that spray them edge to edge with dead space between. */ .coinstrip{display:flex;flex-wrap:wrap;gap:7px 28px;align-items:end} .coinstrip .hstat{text-align:left;min-width:0;flex:0 0 auto} .coinstrip .hstat b{white-space:nowrap;font-size:13px;line-height:1.1} /* market cap is the headline number — it should dominate the seven equal chips */ .coinstrip .hstat b[data-stat="mc"]{font-size:19px;letter-spacing:-.01em} .coinstrip .hstat b[data-stat="price"]{font-size:15px} .coinstrip .hstat span{font-size:9px;line-height:1;letter-spacing:.08em} /* the same strip, reused on the hunt header — but INLINE, filling the empty middle of the header row rather than a new row below it, so the card stays slim */ .huntstrip{flex:1 1 220px;align-self:center;margin:0;padding:0;border:0;gap:7px 18px} .huntstrip[hidden]{display:none} /* Share dropdown on the hunt header — coin link + P&L card in one action. */ .hshare{position:relative;display:inline-flex} .hsharemenu{position:absolute;top:calc(100% + 4px);left:0;z-index:200;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);padding:4px;display:grid;gap:2px;min-width:140px; box-shadow:0 12px 30px rgba(0,0,0,.5)} .hsharemenu[hidden]{display:none} .hsharemenu button{text-align:left;background:transparent;border:0;color:var(--fg); font-size:12.5px;padding:8px 10px;border-radius:var(--r-tel);cursor:pointer;white-space:nowrap} .hsharemenu button:hover{background:rgba(255,255,255,.06)} /* header action row: individual social icons sit inline with share + Trade on */ .headactions{gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .headsocs{display:inline-flex;gap:6px} .soc-ico{font-size:14px;font-weight:600;line-height:1;text-decoration:none} .hstat{text-align:right} .hstat b{display:block;font:600 14px/1.2 var(--mono);font-variant-numeric:tabular-nums} .hstat span{font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase} .wrap{padding:14px 20px 28px} /* ── panels ────────────────────────────────────────────────────────────── */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); margin-bottom:10px;overflow:hidden} .panel>h2{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--sans); letter-spacing:.06em;color:var(--fg2);margin:0;padding:10px 14px; border-bottom:1px solid var(--line);text-transform:uppercase} .panel>h2 .hint{margin-left:auto;font:400 11px/1 var(--sans);letter-spacing:0;color:var(--dim); text-transform:none} .body{padding:12px 14px} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;align-items:stretch} .grid2>.panel{margin-bottom:0} /* Don't stretch columns to equal height — the shorter column was padding out a band of empty panel (the launch form's left column vs the taller sticky rail). */ .grid2.gridtop{align-items:start} .grid2>div{display:flex;flex-direction:column;gap:12px} .grid2>div>.panel:last-child{margin-bottom:0} /* auto-fit, not a hard breakpoint. The sidebar takes 232px, so a 844px window leaves ~610px of content, under the old 1000px rule that collapsed three small number fields into three full-width slabs, turning a compact filter bar into half a screen of furniture. Fit to the space that actually exists. */ .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;align-items:start} .grid2>*,.grid3>*{min-width:0} /* The feed's two columns: the tape is a fixed-ish rail, the cards take the rest, but only while both still fit. Below that they stack instead of squeezing the card column down to a width that stacks its own heading. */ .feedcols{grid-template-columns:minmax(0,1fr) 330px} @media(max-width:1140px){.feedcols{grid-template-columns:minmax(0,1fr)}} /* A 40px browser-default checkbox next to 12px text is the "giant blue tick". Size it to the label it belongs to and stop the label breaking mid-phrase. */ .tickbox{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .lbl-short{display:none} .tickbox input[type=checkbox]{width:14px;min-width:14px;height:14px;min-height:0; margin:0;accent-color:var(--acc);cursor:pointer} /* A horizontal card rail should not clip its first card mid-word. */ .livestrip{scroll-padding-inline:2px} .livestrip>*{scroll-snap-align:start} .grid3 .field{margin:0} .grid3 .field input{min-height:34px;font-size:13px} /* ── Wire command center ─────────────────────────────────────────────────── The home answers ONE question: what is moving right now? Three panes — signal stream (what is moving), token evidence (why), action rail (what to do, primary = Hunt). Desktop: 3 columns. Tablet: stream + evidence, action folds into evidence. Mobile: stream only, tapping a row opens evidence as a sheet. */ .wirehero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 14px} .wirehero h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em} .wirehero .wsub{color:var(--dim);font-size:12.5px} .wirehero .wmoving{margin-left:auto;font:700 11px/1 var(--mono);letter-spacing:.06em; color:var(--up);background:var(--green-dim);padding:6px 10px;border-radius:var(--r-pill); display:inline-flex;align-items:center;gap:6px} .wirehero .wmoving .d{width:7px;height:7px;border-radius:50%;background:currentColor; animation:heatPulse 2s ease infinite} .wire3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) 260px; gap:14px;align-items:start} .wpane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card); overflow:hidden;min-width:0} .wpane>.ph{display:flex;align-items:center;gap:8px;padding:12px 14px 10px; border-bottom:1px solid var(--line)} .wpane>.ph b{font-size:12px;font-weight:650;letter-spacing:.02em} .wpane>.ph .sub{font-size:11px;color:var(--dim);margin-left:auto} /* signal stream — the ranked live list */ .wstream{display:flex;flex-direction:column;max-height:640px;overflow-y:auto; overscroll-behavior:contain} .wrow{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center; padding:10px 13px;border-bottom:1px solid var(--line);cursor:pointer; border-left:2px solid transparent;transition:background .12s,border-color .12s; text-align:left;background:none;font:inherit;color:inherit;width:100%} .wrow:hover{background:var(--panel2)} .wrow.sel{background:var(--panel2);border-left-color:var(--acc)} .wrow:last-child{border-bottom:0} .wface{width:38px;height:38px;border-radius:var(--r-ctrl);object-fit:cover;flex:none; background:var(--panel2);display:grid;place-items:center;font:700 14px/1 var(--sans); color:var(--dim);overflow:hidden} .wface img{width:100%;height:100%;object-fit:cover} .wmid{min-width:0} .wmid .wtk{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wmid .wmeta{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;margin-top:2px;font-family:var(--mono)} .wright{text-align:right;white-space:nowrap} .wright .wnum{font:700 13px/1 var(--mono)} .wright .wsm{font-size:10.5px;margin-top:3px} /* heat states — colour is data, not decoration */ .hchip{font:700 8.5px/1 var(--mono);letter-spacing:.07em;padding:3px 6px;border-radius:var(--r-tel); text-transform:uppercase;flex:none} .hchip.runner{color:var(--up);background:var(--green-dim)} .hchip.breaking{color:#fff;background:var(--up);animation:heatPulse 1.3s ease infinite} .hchip.heating{color:var(--acc);background:var(--amber-dim)} .hchip.moving{color:var(--acc);background:var(--amber-dim)} .hchip.watching{color:var(--fg2);background:var(--panel2);border:1px solid var(--line2)} .hchip.fading{color:var(--down);background:var(--red-dim)} .wrow.st-runner{border-left-color:var(--up)} .wrow.st-breaking{border-left-color:var(--up)} .wrow.st-heating,.wrow.st-moving{border-left-color:var(--acc)} .wrow.st-fading{border-left-color:var(--down)} /* token evidence — why this coin is here */ .evbody{padding:14px} .evhead{display:flex;align-items:center;gap:12px;margin-bottom:14px} .evhead .wface{width:52px;height:52px;border-radius:var(--r-card);font-size:18px} .evhead .evt{min-width:0} .evhead .evt h3{margin:0;font-size:19px;font-weight:680;letter-spacing:-.01em; display:flex;align-items:center;gap:8px} .evhead .evt .evname{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .evca{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--mono); color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-tel); padding:5px 8px;cursor:pointer;margin-top:6px} .evca:hover{color:var(--fg2);border-color:var(--line2)} .evca svg{width:12px;height:12px} .evstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px} .evstat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r); padding:10px 11px} .evstat .k{font:600 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim); text-transform:uppercase} .evstat .v{font:700 16px/1.1 var(--mono);margin-top:6px} .evstat .x{font-size:11px;margin-top:4px} .evrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .evstars{color:var(--acc);font-size:14px;letter-spacing:1px} .evconv{font:700 12px/1 var(--mono)} .evwallets{font-size:11.5px;color:var(--fg2)} .evflow{margin-bottom:12px} .evflow .flabel{display:flex;justify-content:space-between;font-size:10.5px; color:var(--dim);margin-bottom:5px;font-family:var(--mono)} .evflowbar{height:8px;border-radius:var(--r-tel);overflow:hidden;display:flex;background:var(--red-dim)} .evflowbar .fb{background:var(--up);height:100%;transition:width .4s} .evmetas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .evwhy{font-size:12.5px;color:var(--fg2);line-height:1.5;padding:10px 12px; background:var(--panel2);border-radius:var(--r-ctrl);border-left:2px solid var(--acc)} .evempty{padding:40px 20px;text-align:center;color:var(--dim);font-size:13px} /* action rail */ .wact{display:flex;flex-direction:column;gap:9px;padding:14px} .wact .huntbtn{display:flex;align-items:center;justify-content:center;gap:8px; padding:13px;border-radius:var(--r-card);border:0;cursor:pointer;font:700 14px/1 var(--sans); background:var(--acc);color:#0a0a0c;transition:filter .12s} .wact .huntbtn:hover{filter:brightness(1.08)} .wact .huntbtn:disabled{opacity:.4;cursor:not-allowed;filter:none} .wact .huntbtn svg{width:17px;height:17px} .wact .arbtn{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r); border:1px solid var(--line);background:var(--panel2);cursor:pointer;color:var(--fg2); font:600 12.5px/1 var(--sans);text-decoration:none;transition:border-color .12s,color .12s} .wact .arbtn:hover{border-color:var(--line2);color:var(--fg)} .wact .arbtn svg{width:15px;height:15px;flex:none} .wact .arbtn.on{color:var(--acc);border-color:var(--acc)} .wact .arnote{font-size:10.5px;color:var(--dim);text-align:center;line-height:1.4; margin-top:2px} .wact hr{border:0;border-top:1px solid var(--line);margin:4px 0} .wact .arlbl{font:600 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim); text-transform:uppercase;margin:2px 0} @media(max-width:1080px){ .wire3{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)} .wcol-action{grid-column:1 / -1} .wact{flex-direction:row;flex-wrap:wrap;align-items:center} .wact .huntbtn{flex:1 1 200px} .wact .arbtn{flex:1 1 130px;justify-content:center} .wact hr,.wact .arlbl,.wact .arnote{display:none} } /* Responsive split: the drag-to-stage UI is a pointer/desktop affordance; phones get the button flow instead (dragging on touch is fiddly). */ .mobile-only{display:none} @media(max-width:720px){ .web-only{display:none!important} .mobile-only{display:block!important} } @media(max-width:720px){ .wire3{grid-template-columns:1fr} .wcol-evidence,.wcol-action{display:none} .wire3.showev .wcol-stream{display:none} .wire3.showev .wcol-evidence{display:block} .wire3.showev .wcol-action{display:block;grid-column:1} .evback{display:flex} } .evback{display:none;align-items:center;gap:6px;font-size:12px;color:var(--acc); background:none;border:0;cursor:pointer;padding:10px 14px 0} /* ── stats ─────────────────────────────────────────────────────────────── */ /* Compact: a number and its label on one line, the detail beneath. The old cards were three tall blocks eating a whole screen band above the coins. */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; margin-bottom:12px} .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card); padding:8px 12px;display:grid;grid-template-columns:auto 1fr; align-items:baseline;gap:0 8px} .stat b{font:650 16px/1.1 var(--mono);font-variant-numeric:tabular-nums; letter-spacing:-.02em;display:inline-flex;align-items:center;gap:5px} .stat span{font-size:9px;letter-spacing:.1em;color:var(--dim); text-transform:uppercase;text-align:right;white-space:nowrap} .stat small{grid-column:1/3;display:block;font-size:10.5px;color:var(--fg2); margin-top:2px} /* Sniper tape: collapsible and short. It is context, not the headline, so it sits low on Discover and no longer eats a 640px band. */ .tapepanel{overflow:hidden} .tapepanel>summary{list-style:none;cursor:pointer} .tapepanel>summary::-webkit-details-marker{display:none} .tapepanel>summary:hover h2{color:var(--fg)} /* h2 sits under

, so the .panel.tight>h2 direct-child rule can't reach it; match its small-caps header here. */ .tapepanel>summary>h2{margin:0;padding:9px 12px;font-size:11px;gap:7px; align-items:center} .tapepanel .chev{color:var(--dim);transition:transform .18s;font-size:12px} .tapepanel[open] .chev{transform:rotate(180deg)} .tape{max-height:300px;overflow:auto} .tape .tapeline{padding:6px 12px} /* ── coin cards ────────────────────────────────────────────────────────── */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px} .coin{position:relative;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);transition:border-color .12s;overflow:hidden;isolation:isolate; container:card / inline-size} .coin:hover{border-color:var(--line2)} /* The coin's own art, sunk into the card. Dim enough that every number stays readable, this is a trading card, not a poster. */ .coin-bg{position:absolute;inset:0;z-index:0;background-size:cover; background-position:center;opacity:.34;filter:saturate(1.15) contrast(1.05); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.15) 100%); transition:opacity .22s ease,filter .22s ease} .coin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; transition:opacity .22s ease; background:linear-gradient(180deg,rgba(16,16,23,.58),rgba(16,16,23,.88) 55%, rgba(16,16,23,.95))} /* The selected/hovered coin's art wakes up — the watermark un-dims instead of a flat border highlight. `.coin.sel` keeps it lit while its links menu is open. */ .coin:hover .coin-bg,.coin.sel .coin-bg{opacity:.66;filter:saturate(1.25) contrast(1.08)} .coin:hover::after,.coin.sel::after{opacity:.62} /* Content-height, not stretched. The old grid carried a 1fr spacer row that inflated every card with a band of empty art; cards are now as tall as what they hold, and roughly half the height. */ .coin-body{position:relative;z-index:2;padding:10px 11px;display:flex; flex-direction:column;gap:7px;min-width:0;overflow:hidden} .coin-body>*{min-width:0} .coin.hi{border-color:#4a3a15} /* 50x+ earns a look from across the room. */ .coin.blazing{border-color:#7a3a12;box-shadow:0 0 0 1px #47230b inset, 0 0 22px rgba(245,120,40,.13)} .coin.blazing .coin-bg{opacity:.42} .blaze{font-size:13px;letter-spacing:-1px} /* A faded/dead coin RECEDES — its art desaturates and dims so live coins carry the colour on the board. Heat as data, at the card level, not just the badge. */ .coin.cooled{opacity:.92} .coin.cooled .coin-bg{filter:grayscale(.4) saturate(.5);opacity:.16} .coin.cooled:hover{opacity:1} .coin.cooled:hover .coin-bg{filter:grayscale(.15) saturate(.8);opacity:.4} /* Runner energy line — a thin amber light travels the card perimeter (design system: "moving amber gradient along the perimeter, not a flame"). The flames stay; this is an additional rail, runner-only, so motion stays meaningful. */ @property --mhang{syntax:"";inherits:false;initial-value:0deg} .coin.energized{border-color:var(--line2)} .coin .cedge{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.3px; pointer-events:none;opacity:.85; background:conic-gradient(from var(--mhang),transparent 0deg,var(--amber-hot) 26deg, rgba(255,209,102,0) 66deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;animation:mhedge 3s linear infinite} @keyframes mhedge{to{--mhang:360deg}} /* new-call: a thin amber scan line sweeps down once, then gone — no shimmer */ .coin.freshscan .cscan{position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(180deg,transparent 0%,var(--amber-hot) 1.2%,transparent 3%) no-repeat;background-size:100% 100%;animation:mhscan .6s var(--ease,ease) 1 forwards} @keyframes mhscan{0%{background-position:0 -110%;opacity:0} 20%{opacity:.85}100%{background-position:0 210%;opacity:0}} @media(prefers-reduced-motion:reduce){.coin .cedge,.coin .cscan{animation:none;opacity:.35}} /* platform badge — which launchpad the coin is from, brand-coloured pill */ .plat{display:inline-flex;align-items:center;gap:3px;font:700 8.5px/1 var(--mono); letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:4px; border:1px solid currentColor;flex:none} .plat-pump{color:#5fd08a}.plat-bonk{color:#ffb02e}.plat-bags{color:#e879f9} .plat-moon{color:#65a9ff}.plat-rh{color:#42d778}.plat-base{color:#4f8cff} .plat-bsc{color:#f0b90b}.plat-sol{color:#9b7cff} /* ── the fire on a runner ─────────────────────────────────────────────────── Individual flames drifting up the card. z-index 2 puts them above the coin art but below .coin-body, so heat passes BEHIND the numbers, a card you cannot read is a decoration, not a tool. pointer-events:none keeps the whole card clickable through them. */ .flames{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden; border-radius:inherit} .flame{position:absolute;bottom:-16px;line-height:1;opacity:0;will-change:transform; filter:drop-shadow(0 0 7px rgba(255,140,20,.5)); animation:flameup var(--dur,3s) var(--delay,0s) ease-out infinite} @keyframes flameup{ 0% {transform:translate3d(0,0,0) scale(.6) rotate(-6deg); opacity:0} /* Ambience, not foreground. At .9 they fought the numbers for attention on a card whose whole job is being read fast. */ 18% {opacity:.62} 60% {opacity:.34} /* drift sideways as it climbs, the way heat actually moves */ /* --riseScale lets a breakpoint shorten the climb without fighting the inline --rise the card sets per flame. A mobile card is half the height, so an unscaled flame would sail off the top of it. */ 100% {transform:translate3d(var(--drift,4px), calc(-1 * var(--rise,240px) * var(--riseScale,1)),0) scale(1.05) rotate(7deg); opacity:0} } /* Motion sensitivity is not a preference to style around. The global reduce rule kills the animation, which would strand every flame at opacity:0, so remove them outright rather than leaving invisible nodes behind. */ @media(prefers-reduced-motion:reduce){.flames{display:none}} .coin.hi .coin::after{background:linear-gradient(180deg,rgba(21,18,11,.7),rgba(21,18,11,.94) 60%)} .coin-top{display:flex;gap:11px;align-items:flex-start;min-height:44px;min-width:0} .coin-id{min-width:0;flex:1} .coin h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:20px} .coin .sub{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .coin-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px} .coin-right .tag{margin:0} .avatar{width:42px;height:42px;border-radius:var(--r-ctrl);flex:none;object-fit:cover; background:var(--panel2);border:1px solid var(--line)} .mono-av{display:grid;place-items:center;font:650 15px/1 var(--mono);color:var(--acc); background:#1a150a;border-color:#33280f} .conv{text-align:right;flex:none} .conv b{display:block;font:650 17px/1 var(--mono);color:var(--hot)} .conv span{font-size:9px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase} .coin-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;font-size:12px; min-width:0} .fact{display:flex;justify-content:space-between;gap:8px;min-width:0} /* When the row is too narrow, something has to give, and it must be the LABEL, never the number. "ran 513.4…" is a truncated fact; "r… 513.4×" is still readable. The value therefore refuses to shrink and the label yields. */ /* `.fact > span`, DIRECT child only. Unscoped, this label rule also matched the coloured span INSIDE the value, clamping the number itself to 52% of the row: "513.4×" rendered as "51…". When the row is too narrow something has to give, and it must be the label, never the number. */ .fact>span{color:var(--dim);flex:0 1 auto;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:52%} .fact b{flex:0 0 auto;min-width:0;font:550 12px/1.4 var(--mono);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:3px;justify-content:flex-end; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coin .mintline{min-height:18px;display:flex;align-items:center;gap:4px; flex-wrap:wrap;overflow:hidden} .coin .press{min-height:20px} /* an empty pressure/venue row is pure dead height on the card — collapse it */ .coin .press:empty,.coin .venueline:empty{display:none;min-height:0} .coin .venueline{min-height:20px;overflow:hidden} .coin-actions{display:flex;gap:7px;margin-top:auto;padding-top:1px} .coin-top{min-height:36px} .coin h3{min-height:20px} .coin-actions .btn{flex:1;justify-content:center;padding:7px 10px;font-size:12px} /* ── controls ──────────────────────────────────────────────────────────── */ label,.lbl{display:block;font:600 10px/1 var(--sans);letter-spacing:.11em;color:var(--dim); text-transform:uppercase;margin:0 0 6px} .field{margin-bottom:13px} .field .help{font-size:11px;color:var(--dim);margin-top:5px} /* Checkboxes are not text fields. The blanket sizing below was stretching every one of them into a giant blue tick, it inherited width:100% and min-height:40px. */ input[type=checkbox],input[type=radio]{width:15px!important;height:15px!important; min-height:0!important;padding:0!important;margin:0;flex:none;accent-color:var(--acc); border-radius:4px;cursor:pointer;box-shadow:none!important} input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none!important} input:not([type=checkbox]):not([type=radio]),select,textarea{ width:100%;background:#0a0a0e;border:1px solid var(--line2); color:var(--fg);padding:10px 12px;border-radius:var(--r-sm); font:14px/1.4 var(--sans);min-height:40px} input[inputmode="decimal"],input.addr{font-family:var(--mono);font-size:13px} input::placeholder,textarea::placeholder{color:#55556a} input:hover,select:hover,textarea:hover{border-color:#3a3a4d} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 3px rgba(245,181,68,.13)} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-size:5px 5px;background-repeat:no-repeat;padding-right:34px} .btn{display:inline-flex;align-items:center;gap:7px;background:var(--acc);color:var(--acc-ink); border:1px solid transparent;padding:8px 15px;border-radius:var(--r-sm); font:650 13px/1 var(--sans);cursor:pointer;min-height:36px;transition:filter .12s} .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.5;cursor:not-allowed} .btn.ghost{background:var(--panel2);color:var(--fg);border-color:var(--line2)} .btn.ghost:hover{background:#1c1c26} .btn.danger{background:#3a1417;color:#ff9ca6;border-color:#5c1f24} .btn.sm{padding:6px 11px;min-height:32px;font-size:12px} .btn .i{width:16px;height:16px} .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} /* compact coin socials — tiny icon links for cards and dense rows */ .socis{display:inline-flex;gap:4px;align-items:center;vertical-align:middle} .soci{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:var(--r-tel); background:var(--panel2);border:1px solid var(--line);color:var(--fg2);font-size:11px; line-height:1;text-decoration:none;transition:border-color .12s,color .12s} .soci:hover{border-color:var(--line2);color:var(--fg)} .venue.soc{text-decoration:none} /* link cluster — one always-visible trigger (shows the socials it has, or a link glyph so there is ALWAYS something), reveals socials + trade venues on hover in a fixed popover that no card/table overflow can clip, and clicking opens the coin page for the full set. Tap on touch falls straight through to the page. */ .lclus{display:inline-flex;align-items:center;vertical-align:middle} /* default (tight container, or no socials): the collapsed link button */ .lc-inline{display:none;align-items:center;gap:4px} .lc-more{display:inline-flex;align-items:center;gap:5px;min-height:20px;padding:0 8px; border-radius:var(--r-tel);background:var(--panel2);border:1px solid var(--line);color:var(--fg2); font:600 10.5px/1 var(--sans);cursor:pointer;letter-spacing:.02em;white-space:nowrap} .lc-more:hover{border-color:var(--acc);color:var(--fg)} .lc-more svg{width:13px;height:13px;flex:none} .lc-more b{font-weight:600} /* enough room in the host → show the coin's socials as compact icons, drop the button. Icons are tiny so the bar is low; a truly tight card keeps the button. */ @container card (min-width:210px){ .lclus .lc-inline{display:inline-flex} .lclus:has(.lc-inline) .lc-more{display:none} } /* The pool table can't be a query container (it would break column sizing), so use the viewport: the table is full-width on desktop, stacks tight on mobile. */ @media(min-width:820px){ table.pools .lclus .lc-inline{display:inline-flex} table.pools .lclus:has(.lc-inline) .lc-more{display:none} } #lcpop{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--line2); border-radius:var(--r);padding:6px;min-width:158px;box-shadow:0 14px 34px rgba(0,0,0,.55); display:none;flex-direction:column;gap:2px} #lcpop.on{display:flex} #lcpop .lci{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-tel); cursor:pointer;font-size:12px;color:var(--fg2)} #lcpop .lci:hover{background:var(--panel2);color:var(--fg)} #lcpop .lci b{font-weight:600;color:var(--fg)} #lcpop .lci .k{width:15px;text-align:center;color:var(--dim);flex:none} #lcpop .lci .k .vlogo{width:15px;height:15px;border-radius:4px;vertical-align:middle} #lcpop .lchead{font:700 9px/1 var(--mono);letter-spacing:.06em;color:var(--dim); text-transform:uppercase;padding:6px 8px 3px} /* link preview card — an OG unfurl of whatever link you are hovering */ #lpprev{position:fixed;z-index:210;width:300px;max-width:88vw;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r-card);overflow:hidden;display:none; box-shadow:0 18px 44px rgba(0,0,0,.6)} #lpprev.on{display:block} #lpprev .lpimg{width:100%;height:150px;object-fit:cover;background:var(--panel2); display:block;border-bottom:1px solid var(--line)} #lpprev .lpbody{padding:10px 12px} #lpprev .lpsite{font:600 10px/1 var(--mono);letter-spacing:.05em;color:var(--acc); text-transform:uppercase;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #lpprev .lptitle{font-size:13px;font-weight:650;line-height:1.35;margin-bottom:4px; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} #lpprev .lpdesc{font-size:11.5px;color:var(--fg2);line-height:1.45; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #lpprev .lploading{padding:16px;color:var(--dim);font-size:12px;display:flex;gap:8px;align-items:center} /* inline social preview cards on the coin page — read the post/profile/site here */ .socgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:12px} .soccard{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-card); overflow:hidden;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s} .soccard:hover{border-color:var(--line2);transform:translateY(-1px)} .scimg{width:100%;height:132px;object-fit:cover;display:block;border-bottom:1px solid var(--line)} .scbody{padding:11px 12px} .scload{padding:14px 12px;display:flex;flex-direction:column;gap:7px} .scspin{color:var(--dim);font-size:12px;display:flex;gap:8px;align-items:center} .sckind{font:600 9.5px/1 var(--mono);letter-spacing:.05em;color:var(--acc); text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .scbody .sckind{margin-bottom:6px} .sctitle{font-size:13px;font-weight:650;line-height:1.35;margin-bottom:5px; display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .scdesc{font-size:11.5px;color:var(--fg2);line-height:1.45;margin-bottom:8px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .scopen{font:600 11px/1 var(--sans);color:var(--acc)} .seg{display:inline-flex;background:#0a0a0e;border:1px solid var(--line2); border-radius:var(--r-sm);padding:3px;gap:3px} .seg button{background:transparent;border:0;color:var(--fg2);padding:7px 13px; border-radius:var(--r-tel);font:550 12px/1 var(--sans);cursor:pointer;min-height:32px} .seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);font-weight:650} /* ── Traders "Top huntr" — the sharpest wallets, scouted ──────────────────── The ranking table answers "rank them all"; the desk answers "who is sharpest right now" by the active metric, as cards you can follow in one tap. */ .deskgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;padding:12px} /* On a phone the top-5 wallets become a SWIPE carousel (dating-app style) instead of five tall stacked cards you scroll past — each card is 86% wide so the next one peeks, and scroll-snap centres whichever you swipe to. */ .deskdots{display:none} @media(max-width:820px){ .deskgrid{display:flex;grid-template-columns:none;overflow-x:auto; scroll-snap-type:x mandatory;gap:12px;padding:2px 12px 6px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .deskgrid::-webkit-scrollbar{display:none} .deskcard{flex:0 0 74%;scroll-snap-align:center;min-width:0} /* tiny pagination dots — active one stretches to a short pill. Minimal height, no dead gap. */ .deskdots{display:flex;justify-content:center;gap:5px;padding:0 0 8px} .ddot{width:5px;height:5px;border-radius:50%;background:var(--line2);transition:.18s} .ddot.on{width:15px;border-radius:3px;background:var(--acc)} } .deskcard{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-card); padding:12px;position:relative;display:flex;flex-direction:column;gap:6px} .deskcard.top1{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset} .deskcard .drank{position:absolute;top:11px;right:13px;font:800 12px/1 var(--mono);color:var(--dim)} .deskcard.top1 .drank{color:var(--acc)} .deskcard .dtop{display:flex;align-items:center;gap:9px;min-width:0} .deskcard .didentity{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .deskcard .dav{width:34px;height:34px;border-radius:var(--r-ctrl);display:grid;place-items:center;flex:none; background:var(--panel);font:700 13px/1 var(--mono);color:var(--acc)} .deskcard .dname{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;min-width:0} /* Rename a followed wallet in place. The pen only exists once you follow; the name reads "anon" until you give it one. Editor swaps in for the label. */ .tnamewrap{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%} .tnamewrap .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tnpen{display:inline-flex;align-items:center;justify-content:center;flex:none; width:19px;height:19px;padding:0;border:0;border-radius:var(--r-tel);background:transparent; color:var(--dim);cursor:pointer;opacity:.5;transition:opacity .12s,color .12s,background .12s} .tnpen svg{width:12px;height:12px} .tnpen:hover{opacity:1;color:var(--acc);background:var(--panel)} tr:hover .tnpen,.deskcard:hover .tnpen{opacity:.8} .tnameinp{font:inherit;font-weight:650;color:var(--txt);background:var(--panel); border:1px solid var(--acc);border-radius:var(--r-tel);padding:2px 7px;min-width:96px;max-width:180px; outline:none} .deskcard .dtier{font:700 8px/1 var(--mono);letter-spacing:.06em;padding:3px 6px;border-radius:var(--r-tel); background:var(--panel);color:var(--dim);width:fit-content} .deskcard .dtier.up{color:var(--up);background:var(--green-dim)} .deskcard .dtier.down{color:var(--down);background:var(--red-dim)} .deskcard .dbig{font:800 21px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .deskcard .dbig small{font:600 10px/1 var(--mono);color:var(--dim);letter-spacing:.05em; display:block;margin-bottom:2px;text-transform:uppercase} .deskcard .dmeta{display:flex;gap:12px;font-size:11px;color:var(--fg2);flex-wrap:wrap;justify-content:space-between} .deskcard .dmeta b{font-family:var(--mono);color:var(--fg);font-variant-numeric:tabular-nums} .deskcard .dact{display:flex;gap:6px;margin-top:2px} .deskcard .dact .btn{flex:1;min-height:34px!important;padding:7px 10px} .switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px; color:var(--fg2);margin:0 0 12px} .switch input[type=checkbox]{width:38px!important;height:22px!important;appearance:none;background:#22222e;border-radius:var(--r-card); position:relative;cursor:pointer;transition:background .15s;min-height:0; border:0;padding:0;flex:none} .switch input[type=checkbox]:checked{background:var(--acc);accent-color:transparent} .switch input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px; border-radius:50%;background:#fff;transition:transform .15s} .switch input[type=checkbox]:checked::after{transform:translateX(16px)} /* ── filter tabs ─────────────────────────────────────────────────────────── These four words used to be a colour key printed above the list. Making them the control means the reader picks a group instead of decoding one, and the count tells them whether it is worth picking before they tap. */ .tabbar{display:flex;gap:6px;overflow-x:auto;padding:9px 12px 0; scrollbar-width:none;border-bottom:1px solid var(--line)} .tabbar::-webkit-scrollbar{display:none} .tab{flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer; background:none;border:0;border-bottom:2px solid transparent; color:var(--dim);font:600 12px/1 var(--sans);padding:8px 4px 9px; white-space:nowrap} .tab:hover{color:var(--fg2)} .tab.on{color:var(--fg);border-bottom-color:var(--acc)} .tabn{font:600 10px/1 var(--mono);background:var(--panel2);color:var(--dim); border-radius:var(--r-pill);padding:3px 6px} .tab.on .tabn{background:var(--acc);color:var(--acc-ink)} .t-runner.on{border-bottom-color:var(--up)} .t-conviction.on{border-bottom-color:var(--acc2)} /* the coin's face on every pool row, with the chain it lives on tucked under it. A list of tickers is a spreadsheet; this market trades pictures. */ .poolart{display:flex;flex-direction:column;align-items:center;gap:3px} .poolart img{width:30px;height:30px;border-radius:50%;object-fit:cover; background:var(--panel2);border:1px solid var(--line)} .poolart .pill{font-size:8.5px;padding:1px 6px} /* Chain pills carry the platform's colour so the venue reads at a glance. */ .cpill{border:1px solid transparent;font-weight:600} .cpill[data-chain="solana"]{background:rgba(153,69,255,.16);color:#c9a6ff;border-color:rgba(153,69,255,.4)} .cpill[data-chain="robinhood"]{background:rgba(0,200,5,.16);color:#4ade80;border-color:rgba(0,200,5,.4)} .cpill[data-chain="base"]{background:rgba(0,82,255,.18);color:#6f9bff;border-color:rgba(0,82,255,.45)} .cpill[data-chain="bsc"]{background:rgba(240,185,11,.18);color:#f0c530;border-color:rgba(240,185,11,.45)} .cpill[data-chain="eth"]{background:rgba(98,126,234,.18);color:#98abf0;border-color:rgba(98,126,234,.45)} .cpill[data-chain="arbitrum"]{background:rgba(18,170,255,.16);color:#5cc6ff;border-color:rgba(18,170,255,.4)} .cpill[data-chain="blast"]{background:rgba(252,252,3,.16);color:#e6e600;border-color:rgba(252,252,3,.4)} /* the mint's art behind its own wire card. Dim, masked toward the bottom so the ticker and the dev buy stay first: this is a ticker tape, and a number you cannot read at a glance is worse than no picture. */ .livecard{position:relative;overflow:hidden;isolation:isolate} .lbg{position:absolute;inset:0;z-index:0;background-size:cover; background-position:center;opacity:.30;transition:opacity .22s ease,filter .22s ease; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25)); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25))} /* the live-wire card's art wakes up on hover, same as the coin cards */ .livecard:hover .lbg{opacity:.62;filter:saturate(1.2) contrast(1.05)} .livecard>span:not(.lbg){position:relative;z-index:1} /* ── the More sheet ──────────────────────────────────────────────────────── Desktop keeps the full sidebar; this only exists because five tabs cannot hold eight destinations and a scrolling tab bar hides the app. */ .moretab{display:none} .sheet{position:fixed;inset:0;z-index:60} .sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .sheet-body{position:absolute;left:0;right:0;bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),var(--bg); backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3); border-top:1px solid var(--line2);border-radius:20px 20px 0 0; padding:8px 12px calc(16px + env(safe-area-inset-bottom)); display:grid;gap:8px;max-height:74vh;overflow:auto} .sheet-grip{width:38px;height:4px;border-radius:3px;background:var(--line2); margin:4px auto 6px} .sheet-title{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--dim);padding:2px 4px 4px} /* GMGN-style menu rows: gray card, icon in a tile, name + desc, chevron */ .sheet-body a{display:flex;align-items:center;gap:13px;padding:12px 13px; border-radius:var(--r-card);color:var(--fg);font:600 14.5px/1.2 var(--sans); background:var(--surface);border:1px solid var(--line)} .sheet-body a:active{background:var(--surface-hover)} .sheet-body a small{display:block;font:400 11.5px/1.3 var(--sans);color:var(--dim); margin-top:3px} .sheet-body a.on{border-color:color-mix(in oklab,var(--acc) 45%,var(--line)); box-shadow:inset 2px 0 0 var(--acc)} .sheet-body a .i{width:22px;height:22px;flex:none;color:var(--acc)} .sheet-body a::after{content:"›";margin-left:auto;color:var(--dim); font:400 20px/1 var(--sans);padding-left:6px} /* sort chips + the second line inside a dense row */ .sortbar{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px; scrollbar-width:none} .sortbar::-webkit-scrollbar{display:none} .sortchip{flex:none;background:var(--panel2);border:1px solid var(--line); color:var(--dim);border-radius:var(--r-pill);padding:5px 11px;cursor:pointer; font:600 11.5px/1 var(--sans);white-space:nowrap} .sortchip:hover{color:var(--fg2)} .sortchip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)} /* Column headers are sort controls: click to sort, click again to flip. The arrow shows a faint ⇅ when idle and a solid ▴/▾ (accent) on the active one. */ table.pools th.sortable{cursor:pointer;user-select:none;white-space:nowrap; transition:color .12s} table.pools th.sortable .hlbl{vertical-align:middle} table.pools th.sortable .sar{display:inline-block;width:1em;margin-left:3px; font-size:10px;line-height:1;color:var(--dim);opacity:.4;vertical-align:middle; transition:opacity .12s,color .12s} table.pools th.sortable:hover{color:var(--fg2)} table.pools th.sortable:hover .sar{opacity:.7} table.pools th.sortable.sorted{color:var(--fg)} table.pools th.sortable.sorted .sar{opacity:1;color:var(--acc);font-size:11px} /* num headers align right, so the arrow rides just after the label there */ table.pools th.num.sortable{text-align:right} /* ── Outcome Ledger ───────────────────────────────────────────────────────── The proof layer: one filterable table across calls/hunts/launches/books. */ .ledfilters{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px 4px} .ledchip{flex:none;background:var(--panel2);border:1px solid var(--line); color:var(--dim);border-radius:var(--r-pill);padding:5px 10px;cursor:pointer; font:600 11.5px/1 var(--sans);white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .ledchip:hover{color:var(--fg2)} .ledchip.on{background:var(--amber-dim);border-color:var(--acc);color:var(--acc)} .ledchip .ledn{font:700 9px/1 var(--mono);background:var(--panel);color:var(--fg2); border-radius:var(--r-pill);padding:2px 5px} .ledchip.on .ledn{background:rgba(255,209,102,.18);color:var(--acc)} .ledtype{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.06em; text-transform:uppercase;padding:3px 7px;border-radius:var(--r-tel);border:1px solid;background:var(--panel2)} .ledtype b{font-size:8px} table.ledger td{vertical-align:middle} table.ledger .tick{font-weight:600} /* the number is the point of this page — make result/peak outweigh status text */ table.ledger .resb{font-size:14px;font-weight:700;letter-spacing:-.01em} table.ledger .pill{font-size:10px;opacity:.9} /* price-change window toggle: a tight segmented control, mono so it reads as a data control next to the % column it drives */ .tfbar{display:inline-flex;gap:2px;flex:none;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-ctrl);padding:2px} .tfchip{border:0;background:transparent;color:var(--dim);cursor:pointer; border-radius:var(--r-tel);padding:4px 9px;font:600 11px/1 var(--mono);letter-spacing:.02em} .tfchip:hover{color:var(--fg2)} .tfchip.on{background:var(--acc);color:var(--acc-ink)} .rowsub{display:block;font:400 10px/1.3 var(--mono);color:var(--dim); margin-top:2px;letter-spacing:0;text-transform:none} td.tick .rowsub{font-weight:400} /* ── crew page ───────────────────────────────────────────────────────────── Three columns on a wide screen: the crew, its people, and everyone else's crews. The hero is the only place in the app with a cover image, because a crew is the one thing here that belongs to a group of people rather than to the market. */ /* Two columns — a wide main that FLOWS (hero, then activity+profit side by side, then holdings) and the discovery rail. The old middle column held only the short Members panel and left a big void beside the taller left column. */ .crewwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:14px;align-items:start} .crewmain,.crewside,.crewrail{display:grid;gap:12px;min-width:0} .crewcols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px;align-items:start;min-width:0} .crewcols>.panel{margin:0} .hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); overflow:hidden} .hero-cover{height:100px;background:linear-gradient(120deg,#2a1c3d,#101018 60%)} .hero-face{display:flex;align-items:flex-end;gap:14px;padding:0 16px 14px; margin-top:-34px} .hero-logo{flex:none} .hero-logo .face{border-radius:var(--r-card);border:3px solid var(--panel); box-shadow:0 6px 18px rgba(0,0,0,.5)} .hero-id h1{margin:0;font-size:22px;font-weight:680;letter-spacing:-.02em} .hero-meta{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--dim); margin-top:3px} .hero-acts select{min-height:32px;font-size:12.5px;padding:5px 9px} /* a generated face beats a grey square: a list of blanks reads as broken */ .face{display:inline-flex;align-items:center;justify-content:center;flex:none; border-radius:50%;color:#fff;font-weight:700;letter-spacing:-.02em; font-family:var(--sans);overflow:hidden} .stack{display:inline-flex;align-items:center} .stack .face{margin-right:-7px;border:2px solid var(--panel)} .stackmore{margin-left:11px;font:600 10px/1 var(--mono);color:var(--dim)} .bignum{font:700 34px/1.05 var(--sans);letter-spacing:-.03em;margin:2px 0 12px} .podium{display:flex;gap:8px;flex-wrap:wrap} .podcard{display:flex;align-items:center;gap:9px;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;min-width:0} .podcard b{display:block;font-size:12.5px;max-width:120px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .podcard span{font:600 12px/1.3 var(--mono)} .holdtok{display:flex;align-items:center;gap:9px;min-width:0} .holdtok b{display:block;font-size:13px} .holdtok small{display:block;font-size:11px;color:var(--dim)} .mrow,.crewrow{display:flex;align-items:center;gap:11px;padding:9px 2px; border-bottom:1px solid var(--line)} .mrow:last-child,.crewrow:last-child{border-bottom:0} .crewrow{cursor:pointer;border-radius:var(--r-ctrl);padding:9px 8px} .crewrow:hover{background:var(--panel2)} .mid{min-width:0;flex:1} .mid b{display:block;font-size:13px;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .mid small{display:block;font-size:11px;color:var(--dim);margin-top:2px} .mpnl{font:650 13px/1 var(--mono);white-space:nowrap;text-align:right} .crank{flex:none;width:18px;text-align:center;font:700 11px/1 var(--mono);color:var(--dim)} .thesis{font-size:13.5px;line-height:1.6;color:var(--fg2);padding:4px 2px} @media(max-width:1180px){.crewwrap{grid-template-columns:minmax(0,1fr);gap:14px}} @media(max-width:820px){ .crewwrap{grid-template-columns:minmax(0,1fr);gap:14px} .crewcols{grid-template-columns:minmax(0,1fr)} /* a phone-sized hero: shorter cover, the logo and name sit closer */ .hero{border-radius:0;border-left:0;border-right:0;margin:0 -14px} .hero-cover{height:88px} .hero-face{padding:0 14px 12px;margin-top:-28px} .hero-logo .face{border-radius:var(--r-card);border-width:2px} .hero-id h1{font-size:19px} .bignum{font-size:30px} /* member/crew rows get a touch more room for the thumb */ .mrow,.crewrow{padding:11px 2px} .podium{gap:7px}.podcard{padding:7px 10px} /* the follow/discover rails read as their own sections, not a sidebar */ .crewrail .panel{margin-top:2px}} /* ── launch controls ─────────────────────────────────────────────────────── Presets and popovers, so the numbers that decide a launch are one tap away instead of buried in an env var or retyped every time. */ .presetrow{display:flex;gap:6px;margin-bottom:7px;flex-wrap:wrap} .preset{display:inline-flex;align-items:center;gap:5px;background:var(--panel2); border:1px solid var(--line);color:var(--fg2);border-radius:var(--r-ctrl); padding:7px 11px;cursor:pointer;font:600 12.5px/1 var(--mono);min-height:34px} .preset:hover{border-color:var(--line2);color:var(--fg)} .preset.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)} .preset.on .sol{fill:var(--acc-ink)} .preset.ghost{font-family:var(--sans);padding:7px 10px} .hbtns .chip b{margin-left:6px;font:600 11px/1 var(--mono);color:var(--fg2)} /* Anchored popover: a small card that appears right at the chip you clicked (positioned in JS via _anchorPop), instead of a big centred modal. */ .pop{position:fixed;z-index:96;width:288px;max-height:80vh;overflow:auto; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card); box-shadow:0 16px 42px rgba(0,0,0,.6)} .pop[hidden]{display:none} /* On a phone every popover / floating card becomes a centered modal with a blurred backdrop, for clean separation from the page. inset:0 + margin:auto centers WITHOUT a transform on purpose — a transform makes the fixed ::before backdrop position relative to the CARD instead of the viewport, so the blur would only cover the card, not the page. The ::before sits at z-index:-1 inside the card's stacking context: over the page, under the card, no extra markup. */ @media(max-width:560px){ .pop{inset:0!important;margin:auto!important;transform:none!important; right:auto;bottom:auto;width:min(92vw,360px)!important;height:max-content!important; max-height:84vh;animation:sheetIn .24s cubic-bezier(.2,.7,.3,1) both} /* Blur only cards that carry their own ✕ close — a blurred backdrop swallows tap-outside (e.target becomes the card), so menus without a close button (claim/venue dropdowns) must keep a plain, tap-outside-dismissable backdrop. */ .pop:not([hidden])::before,.popout::before{ content:"";position:fixed;inset:0;z-index:-1; background:rgba(4,4,7,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} } .pop-head{display:flex;align-items:center;justify-content:space-between; padding:10px 12px;border-bottom:1px solid var(--line);font:600 12.5px/1 var(--sans)} .pop-body{padding:11px 12px;display:grid;gap:9px} .pop-body .help{font-size:10.5px} .pop-body .field{margin:0} /* Tappable header stat → distribution popover. */ .hstat-tap{cursor:pointer;border-radius:var(--r-ctrl);transition:background .12s;margin:-2px -4px;padding:2px 4px} .hstat-tap:hover{background:rgba(255,255,255,.05)} .hstat-chev{font-style:normal;color:var(--dim);font-size:11px;margin-left:3px;vertical-align:1px} .hprow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px} .hprow>span{color:var(--dim)} #holdersPopBody .hclabel{font-size:10px;text-transform:uppercase;letter-spacing:.05em; color:var(--dim);margin-top:4px} .rangeout{display:flex;justify-content:space-between;align-items:center; font:11px/1 var(--mono);color:var(--dim);margin-top:5px} .rangeout b{font-size:13px;color:var(--acc)} input[type=range]{width:100%;accent-color:var(--acc);min-height:0;padding:0; background:none;border:0} /* ── kanban ──────────────────────────────────────────────────────────────── Three grades side by side. Comparing them IS the product; a tab bar hides two thirds of the answer behind a tap. */ .kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; padding:12px 14px 14px;align-items:start} .kanban .kcol{background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-card);min-width:0;overflow:hidden} .kanban .kcol header{display:flex;align-items:center;gap:7px;flex-wrap:wrap; padding:10px 12px;border-bottom:1px solid var(--line)} .kanban .kcol header b{font:600 12px/1 var(--sans);letter-spacing:.02em} .kanban .kcol header small{flex:1 0 100%;font:400 10.5px/1.4 var(--sans); color:var(--dim)} .lanen{font:700 10px/1 var(--mono);background:var(--panel);color:var(--fg2); border-radius:var(--r-pill);padding:3px 7px} .kcol[data-lane="new"] header{border-bottom-color:var(--acc)} .kcol[data-lane="signal"] header{border-bottom-color:var(--acc2)} .kcol[data-lane="runner"] header{border-bottom-color:var(--up)} /* A LITE wash of the lane's own colour behind its cards, fading down — so the green/blue/amber line on the header carries into the body as a subtle lane identity, not just a hairline. */ .kcol[data-lane="new"] .kbody{background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 7%,transparent),transparent 55%)} .kcol[data-lane="signal"] .kbody{background:linear-gradient(180deg, color-mix(in srgb,var(--acc2) 9%,transparent),transparent 55%)} .kcol[data-lane="runner"] .kbody{background:linear-gradient(180deg, color-mix(in srgb,var(--up) 8%,transparent),transparent 55%)} .kbody{display:grid;gap:9px;padding:10px;max-height:74vh;overflow:auto} .kbody .coin{border-radius:var(--r)} @media(max-width:1080px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:820px){ /* One column per screen, and the swipe LANDS on it. scroll-snap-stop:always stops a hard flick skipping past two sections, so left and right move you exactly one face, like a carousel. */ .kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:0;padding:0;scrollbar-width:none;scroll-behavior:smooth} .kanban::-webkit-scrollbar{display:none} .kanban .kcol{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always; /* no container: the screen is the container */ background:none;border:0;border-radius:0} .kanban .kcol header{border-bottom:1px solid var(--line);padding:10px 14px; background:none} .kbody{max-height:none;padding:10px 14px 14px;gap:8px;background:none} /* Swipe affordance: a dot per lane + the active lane's header lit up, so you know there are three lanes and which one you're on. Desktop shows all three side by side and needs none of this. */ .lanedots{display:flex;justify-content:center;gap:8px;padding:4px 0 12px} .lanedot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--line2);transition:background .15s,width .15s} .lanedot.on{background:var(--acc);width:20px;border-radius:4px} /* Active lane: highlight just the TITLE WORDS, in that lane's OWN colour — not a full amber banner across every section. Inactive titles dim back. */ .kcol header b{color:var(--dim);transition:color .15s} .kcol[data-lane="new"].active header b{color:var(--acc)} .kcol[data-lane="signal"].active header b{color:var(--acc2)} .kcol[data-lane="runner"].active header b{color:var(--up)} .swipehint{margin-left:auto;font:600 10px/1 var(--mono);color:var(--acc); letter-spacing:.04em;animation:swipeNudge 1.8s ease-in-out infinite} .swipehint.gone{display:none} @keyframes swipeNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}} } /* the hint + dots are a mobile affordance only */ @media(min-width:821px){.lanedots,.swipehint{display:none}} /* chain picker: a dropdown with the chain's own mark, not eight amber pills */ .chainpick{position:relative;margin-bottom:12px} .chaintrigger{display:inline-flex;align-items:center;gap:8px;background:var(--panel2); border:1px solid var(--line2);color:var(--fg);border-radius:var(--r-ctrl);padding:7px 11px; cursor:pointer;min-height:36px;font:600 12.5px/1 var(--sans)} .chaintrigger:hover{border-color:var(--acc)} #chainFace{display:inline-flex;align-items:center;gap:0} img.cm{width:18px;height:18px;object-fit:contain;vertical-align:middle;display:inline-block} #chainFace .cm{width:18px;height:18px;margin-right:-5px; border-radius:50%;background:var(--panel);box-shadow:0 0 0 2px var(--panel2)} #chainFace b{margin-left:12px;font:600 12px/1 var(--sans);color:var(--fg2)} .cchev{color:var(--dim);font-size:10px} .chainmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:210px; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card); padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.6);display:grid;gap:2px} .chainopt{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-ctrl); cursor:pointer;font:550 13px/1 var(--sans);color:var(--fg2)} .chainopt:hover{background:var(--panel2)} .chainopt.on{color:var(--fg)} .chainopt .cm{width:20px;height:20px;flex:none} .chainopt input{width:15px;min-width:15px;height:15px;min-height:0;margin:0; accent-color:var(--acc)} .chainopt em{margin-left:auto;font:400 10.5px/1 var(--mono);color:var(--dim); font-style:normal} /* filters as options on the card, not a form further down the page */ /* ── wire filter: one pen on the header, controls in a sheet ───────────────── */ .filterbtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 6px 4px 12px; color:var(--fg2);cursor:pointer;max-width:min(60vw,340px)} .filterbtn:hover{border-color:var(--acc);color:var(--fg)} .filtsum{font:600 11px/1 var(--mono);letter-spacing:.02em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .filtsum:empty::before{content:"filters";color:var(--dim)} .peni{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-pill); background:var(--panel);border:1px solid var(--line2);flex:none} .peni svg{width:13px;height:13px} .filterbtn:hover .peni{border-color:var(--acc);color:var(--acc)} /* Compact trigger — just the pen + "Filters", never the filter values. */ .filterbtn.compact{gap:7px;padding:4px 12px 4px 6px;max-width:none; font:600 12px/1 var(--sans);letter-spacing:.02em;color:var(--fg2)} /* pen-only trigger (New Pools): drop the pill chrome, show just the edit pen */ .filterbtn.penonly{background:transparent;border:0;padding:0;gap:0;max-width:none} .filterbtn.penonly:hover .peni{border-color:var(--acc);color:var(--acc)} #filterSheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center} #filterSheet[hidden]{display:none} .filtcard{position:relative;z-index:1;width:min(360px,94vw);background:var(--panel); border:1px solid var(--line2);border-radius:var(--r-sheet);overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.6); /* the Auto-snipe block stacked on top of the wire filters made this taller than the viewport with nothing to cap it — header + Done stay pinned, only the middle scrolls, so it can never blow out the page again. */ display:flex;flex-direction:column;max-height:min(600px,86vh)} .filtcard .filthead,.filtcard .filtfoot{flex:none} .filtbody{overflow-y:auto;min-height:0} /* the sheet arrives, not just appears — scrim fades, card rises + settles */ #filterSheet:not([hidden]) .modal-scrim{animation:scrimIn .18s ease both} #filterSheet:not([hidden]) .filtcard{animation:sheetIn .24s cubic-bezier(.2,.7,.3,1) both} @keyframes scrimIn{from{opacity:0}to{opacity:1}} @keyframes sheetIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} /* A bottom sheet rises from below; a centered card scales in. */ @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Tab-content swaps fade in instead of snapping (hunt Sessions/Ledger, and any pane that toggles the same way). */ /* creator/dev crown — the SVG from the icon set, small + accent, not a ♛ glyph */ .lblcrown{display:inline-flex;vertical-align:-2px;margin-right:2px} .lblcrown svg{width:12px;height:12px;color:var(--acc)} @keyframes tabfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} #huntSessions:not([hidden]),#huntLedger:not([hidden]),.tabfade{ animation:tabfade .18s ease both} @media(prefers-reduced-motion:reduce){ #huntSessions,#huntLedger,.tabfade{animation:none}} /* Every overlay gets the same considered entrance — no more snap-in. */ #huntScrim:not([hidden]) .hs-back,#vampScrim:not([hidden]) .vs-back, #moreSheet:not([hidden]) .sheet-scrim,#notifPanel:not([hidden]) .notif-scrim, #appModal:not([hidden]) .modal-scrim{animation:scrimIn .18s ease both} #huntScrim:not([hidden]) .huntsheet,#vampScrim:not([hidden]) .vs-sheet, #appModal:not([hidden]) .modal-card{animation:sheetIn .24s cubic-bezier(.2,.7,.3,1) both} #moreSheet:not([hidden]) .sheet-body,#notifPanel:not([hidden]) .notif-card{ animation:riseIn .26s cubic-bezier(.2,.7,.3,1) both} @media(prefers-reduced-motion:reduce){ #filterSheet:not([hidden]) .modal-scrim,#filterSheet:not([hidden]) .filtcard, #huntScrim:not([hidden]) .huntsheet,#huntScrim:not([hidden]) .hs-back, #vampScrim:not([hidden]) .vs-sheet,#vampScrim:not([hidden]) .vs-back, #moreSheet:not([hidden]) .sheet-body,#moreSheet:not([hidden]) .sheet-scrim, #notifPanel:not([hidden]) .notif-card,#notifPanel:not([hidden]) .notif-scrim, #appModal:not([hidden]) .modal-card,#appModal:not([hidden]) .modal-scrim{animation:none}} .filthead{display:flex;align-items:baseline;gap:8px;padding:14px 16px 9px} .snihead{display:flex;flex-direction:column;gap:2px;padding:12px 16px 6px; border-top:1px solid var(--line);margin-top:2px} .snihead b{font:700 13px/1 var(--sans)} .snihead .mini{line-height:1.4} .sniarm{display:flex;align-items:center;justify-content:space-between; padding:2px 16px 10px;gap:10px} .sniarm .switch{margin:0} .sniexpand{height:32px;padding:0 12px;border-radius:var(--r-ctrl);gap:6px; font:600 12px/1 var(--sans);color:var(--fg2);display:inline-flex;align-items:center; background:var(--panel2);border:1px solid var(--line);cursor:pointer} .sniexpand:hover{border-color:var(--acc);color:var(--fg)} .sniexpand .cchev{transition:transform .2s ease} .sniexpand[aria-expanded="true"] .cchev{transform:rotate(180deg)} /* Smooth expand/collapse with no JS height measurement: a 0fr/1fr grid track animates cleanly regardless of content size, unlike max-height tricks that need a guessed cap. The inner div's overflow:hidden clips mid-transition. */ .snicollapse{display:grid;grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.2,.7,.3,1)} .snicollapse.open{grid-template-rows:1fr} .snicollapse>div{overflow:hidden} .snicollapse .wireopts{padding-top:2px} @media(prefers-reduced-motion:reduce){.snicollapse{transition:none}} /* Two toggle pairs (states / boards) sitting on the value side of an .optnum row, instead of the usual single input/select. */ .momrow{display:flex;gap:14px;flex-wrap:wrap} .momrow .switch{margin:0} .filthead b{font:700 15px/1 var(--sans)} .filthead .iconbtn{margin-left:auto;width:28px;height:28px;border-radius:var(--r-ctrl); background:var(--panel2);border:1px solid var(--line);color:var(--fg2); cursor:pointer;font-size:13px;line-height:1} .filthead .iconbtn:hover{border-color:var(--acc);color:var(--fg)} .filtfoot{padding:6px 16px 16px} .filtfoot .btn{width:100%;justify-content:center} /* controls stack full-width in the sheet, one decision per row */ .wireopts{display:flex;flex-direction:column;gap:8px;padding:2px 16px 12px} .optnum:focus-within{border-color:var(--acc)} .optnum input:focus{border-color:var(--acc);outline:none} .wireopts .tickbox:hover,.wireopts .chaintrigger:hover{border-color:var(--line2)} .wireopts>*{width:100%} .wireopts .tickbox{display:flex;align-items:center;gap:9px;font-size:13px; color:var(--fg);padding:9px 12px;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r);cursor:pointer} .wireopts .chainpick{margin:0} .wireopts .chaintrigger{width:100%;justify-content:space-between;min-height:40px; padding:8px 12px;font-size:13px;border-radius:var(--r)} .wireopts .chainmenu{position:static;margin-top:8px} .optnum{display:flex;align-items:center;justify-content:space-between; background:var(--panel2);border:1px solid var(--line);border-radius:var(--r); padding:8px 12px;min-height:40px} .optnum span{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--dim); text-transform:uppercase} .optnum input{width:96px;min-height:28px;padding:5px 9px;font-size:13px; text-align:right;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctrl)} .optsep{display:none} @media(max-width:560px){ /* Centered + compact on mobile too, not a full-width bottom sheet — the base .filtcard rule (width:min(360px,94vw), centered by #filterSheet's place-items:center) already reads as a tight, deliberate card on a phone; the old override just made it big and glued to the bottom edge instead. */ .filtcard{padding-bottom:env(safe-area-inset-bottom)} } /* ── modal + funding ─────────────────────────────────────────────────────── Used by the fund flow: a QR to scan, a Phantom deep-link, a copy. The funding step was the biggest drop-off in the funnel; this removes the copy-paste tax. */ /* the app/confirm modal must sit ABOVE every sheet (hunt z70, vamp z75, notif z85) — a live-trade confirm hidden behind the hunt sheet reads as "nothing happened" and is how a real spend gets mis-clicked. */ #appModal{position:fixed;inset:0;z-index:95;display:grid;place-items:center} #appModal[hidden]{display:none} .modal-scrim{position:absolute;inset:0;background:rgba(4,4,7,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .modal-card{position:relative;z-index:1;width:min(360px,92vw); background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-sheet); box-shadow:0 22px 60px rgba(0,0,0,.6);overflow:hidden} .fundmodal{padding:16px 18px 18px;display:grid;gap:12px;justify-items:center} .fund-head{display:flex;align-items:center;justify-content:space-between; width:100%;font:700 15px/1 var(--sans)} .fund-qr{width:200px;height:200px;border-radius:var(--r);background:#fff;padding:8px} .fund-addr{font:500 11px/1.5 var(--mono);color:var(--fg2);text-align:center; word-break:break-all;cursor:pointer;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-ctrl);padding:9px 11px;width:100%} .fund-addr .mini{display:block;color:var(--dim);margin-top:4px} .fund-acts{display:flex;gap:8px;width:100%} .fund-acts .btn{flex:1;justify-content:center;text-align:center} /* in-app chart modal (GeckoTerminal embed) */ .modal-card:has(.chartmodal){width:min(760px,96vw)} .chartmodal{display:flex;flex-direction:column} .chart-head{display:flex;align-items:center;gap:9px;padding:11px 14px; border-bottom:1px solid var(--line)} .chart-head b{font-size:14px} .chart-head a{color:var(--acc2);text-decoration:none} .chart-head a:hover{text-decoration:underline} .chart-head .iconbtn{width:28px;height:28px;border-radius:var(--r-ctrl);background:var(--panel2); border:1px solid var(--line);color:var(--fg2);cursor:pointer;font-size:13px} .chart-head .iconbtn:hover{border-color:var(--acc);color:var(--fg)} .chart-frame{width:100%;height:min(64vh,470px);border:0;background:#0a0a0f;display:block} /* full-effect chart on the coin page */ .coinchart{width:100%;height:340px;border:0;background:#0a0a0f;display:block} .chart-empty{height:340px;display:grid;place-items:center;align-content:center;gap:10px; text-align:center;color:var(--dim);font-size:13px;background:#0a0a0f;padding:24px} .chart-empty a{color:var(--acc2)} /* Momentum strip — 1m/5m/1h/24h change at a glance, mono telemetry, heat-coloured */ .pstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .pcell{overflow:hidden} /* Momentum state pill — calls the coin by its CURRENT trend (running/setup/ fading/dead), so a faded pump can't wear a runner's badge. */ .momo{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 8px; border-radius:var(--r-pill);font:700 11px/1 var(--sans);letter-spacing:.04em;margin-left:8px} .momo small{font:500 10px/1 var(--sans);letter-spacing:0;opacity:.8;text-transform:none} .momo .md{width:7px;height:7px;border-radius:50%} .momo.momo-up{background:var(--green-dim);color:var(--up)} .momo.momo-up .md{background:var(--up);box-shadow:0 0 8px var(--up)} .momo.momo-acc{background:var(--amber-dim);color:var(--acc)} .momo.momo-acc .md{background:var(--acc);box-shadow:0 0 8px var(--acc)} .momo.momo-down{background:var(--red-dim);color:var(--down)} .momo.momo-down .md{background:var(--down)} @media(max-width:560px){.momo small{display:none}} .pcell b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} @media(max-width:560px){.pstrip{gap:6px}.pcell{padding:9px 6px}.pcell b{font-size:14px} .pcell span{font-size:9.5px}} /* Same untreated combo .hmet had — .stat (Discovery) is the proven recipe: --panel not --panel2, --r-card not --r, tabular-nums on the number. */ .pcell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card); padding:11px 12px;text-align:center} .pcell span{display:block;font:600 9px/1 var(--sans);letter-spacing:.12em;color:var(--dim); text-transform:uppercase;margin-bottom:6px} .pcell b{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* wallet-mix chips — GMGN's read on who holds: smart money vs snipers vs fresh */ .pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; padding-top:12px;border-top:1px solid var(--line)} .pchip{display:flex;flex-direction:column;align-items:center;gap:2px; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card); padding:7px 12px;min-width:58px} .pchip b{font-size:14px;font-variant-numeric:tabular-nums} .pchip span{font:600 9px/1 var(--sans);letter-spacing:.08em;color:var(--dim); text-transform:uppercase} .pchip.good{border-color:color-mix(in oklab,var(--up) 40%,var(--line))} .pchip.good b{color:var(--up)} .pchip.warn{border-color:color-mix(in oklab,var(--acc) 40%,var(--line))} .pchip.warn b{color:var(--acc)} /* ── confirm sheet, the styled stand-in for window.confirm ──────────────── Every money move (send, sweep, key reveal, fee claim, live book) used to fire a native confirm(): a blocking OS dialog that both looks foreign and freezes the extension. This is the same decision, in the app's own skin. */ .csheet{padding:18px 18px 16px;display:grid;gap:12px} .csheet-ico{width:38px;height:38px;border-radius:var(--r);display:grid; place-items:center;background:var(--panel2);border:1px solid var(--line)} .csheet-ico svg{width:20px;height:20px} .csheet.danger .csheet-ico{background:rgba(230,72,72,.12); border-color:rgba(230,72,72,.4);color:var(--bad,#e64848)} .csheet h3{font:700 16px/1.2 var(--sans);margin:0} .csheet p{margin:0;font-size:12.5px;line-height:1.55;color:var(--fg2)} .csheet .csheet-note{font-size:11px;color:var(--dim)} .csheet dl{margin:2px 0 0;display:grid;gap:5px} .csheet dl div{display:flex;justify-content:space-between;gap:12px; font:500 12px/1.4 var(--mono)} .csheet dl span{color:var(--dim)} .csheet dl b{color:var(--fg)} .csheet-acts{display:flex;gap:8px;margin-top:4px} .csheet-acts .btn{flex:1;justify-content:center;text-align:center} .csheet-acts .btn.ghost{flex:0 0 auto;min-width:88px} /* Call sheet — crew picker + side toggle + note, and the scored call rows the coin page shows underneath. */ .callsheet .cfld{display:grid;gap:5px;font-size:12px;color:var(--dim)} .callsheet .cfld select,.callsheet .cfld input{width:100%;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-ctrl);color:var(--fg);padding:9px 10px; font:14px var(--sans)} .callsheet .cseg{display:flex;gap:6px} .cseg-b{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-ctrl); color:var(--fg2);padding:8px;font:600 12px var(--sans);cursor:pointer} .cseg-b.on{border-color:var(--acc);color:var(--acc);background:var(--amber-dim)} #bwatch.on{border-color:var(--acc);color:var(--acc);background:var(--amber-dim)} .callsum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .callsum .cs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card); padding:9px 10px;text-align:center} .callsum .cs b{display:block;font:700 16px/1.1 var(--mono);font-variant-numeric:tabular-nums} .callsum .cs span{font-size:10px;color:var(--dim)} .callrow{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 2px;border-top:1px solid var(--line)} .callrow:first-of-type{border-top:0} .callrow .cl{min-width:0}.callrow .cl b{font-size:13px} .callrow .cl small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .callrow .cr{text-align:right;flex:none} .callrow .cr b{font-size:14px}.callrow .cr small{display:block;font-size:10px} /* ── runner list, Phantom-grade trending rows ───────────────────────────── Image-led: the coin's face, its name over what it's worth now, the run multiple and how far it has faded. A trending list, not a spreadsheet. */ .runlist{display:flex;flex-direction:column} .runrow{display:flex;align-items:center;gap:13px;padding:9px 14px; border-bottom:1px solid var(--line);transition:background .12s;container:card / inline-size} /* launchpad label shown on a wire card when there's no dev-buy figure */ .livecard .ld:empty{display:none} .runrow:last-child{border-bottom:0} .runrow:hover{background:var(--panel2)} .runart{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none; background:var(--panel2);border:1px solid var(--line)} .runart.mono{display:inline-flex;align-items:center;justify-content:center; font:700 16px/1 var(--mono);color:var(--dim)} .runmid{flex:1;min-width:0} .runmid b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .runmid small{display:block;font:400 12px/1.3 var(--mono);color:var(--dim); margin-top:2px} .runright{text-align:right;flex:none} .runright b{display:block;font:700 16px/1 var(--mono);font-variant-numeric:tabular-nums} .runright small{display:block;font:500 11px/1 var(--mono);margin-top:4px} .runrow.hot .runart{box-shadow:0 0 0 2px var(--up)} .runrow.cold .runart{opacity:.72} /* copyable contract address inline after the "from" amount — mono, muted, tight, so the row stays one line and the card stays skinny */ .runca{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 6px; vertical-align:baseline;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-tel);cursor:pointer;font:500 10px/1.3 var(--mono);color:var(--dim); transition:color .12s,border-color .12s} .runca:hover{color:var(--acc);border-color:var(--acc)} .runca svg{width:10px;height:10px} /* live state chip on a runner row: running / fading / dead */ .rstate{display:inline-block;font:600 9px/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;padding:2px 5px;border-radius:4px;vertical-align:middle; border:1px solid currentColor;opacity:.9;margin-left:4px} .rstate.up{color:var(--up)}.rstate.acc{color:var(--acc)}.rstate.down{color:var(--down)} .runrow.st-fading .runart{opacity:.82} .runrow.st-dead{opacity:.5} .runrow.st-dead:hover{opacity:.78} .runrow.st-dead .runart{filter:grayscale(.5)} .acc{color:var(--acc)} /* Hunt straight off a runner row. Hidden until hover/focus so the row stays clean, but always keyboard-reachable. */ .runhunt{flex:none;width:32px;height:32px;border-radius:var(--r-ctrl);cursor:pointer; background:var(--amber-dim);border:1px solid var(--acc);color:var(--acc); font-size:14px;line-height:1;opacity:0;transition:opacity .12s,background .12s} .runrow:hover .runhunt,.runhunt:focus-visible{opacity:1} .runhunt:hover{background:var(--acc);color:var(--acc-ink)} @media(hover:none){.runhunt{opacity:1}} /* touch has no hover, always show */ .searchbtn{width:38px;height:38px;flex:none;display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-ctrl); color:var(--fg2);cursor:pointer} .searchbtn:hover{border-color:var(--line2);color:var(--fg)} .searchbtn .i{width:18px;height:18px} /* ── tracked-wallet list + venue picker (coin page) ──────────────────────── Wallets show their address, tappable, not a system label. Venues fold into a single toggle instead of a wrapping cloud of pills. */ .tracklist{display:flex;flex-direction:column} .trackrow{display:flex;align-items:center;gap:12px;padding:10px 0; border-bottom:1px solid var(--line)} .trackrow:last-child{border-bottom:0} .trackid{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .trackid b{font-size:13.5px;font-weight:600} .trackid .addr{display:inline-flex;align-items:center;gap:5px;cursor:pointer; font-family:var(--mono);color:var(--fg)} .trackid .addr .i{width:13px;height:13px;color:var(--dim)} .trackid .addr:hover{color:var(--acc)} .pill.tiny{font-size:8.5px;padding:2px 6px} .trackstat{text-align:right;flex:none;min-width:56px} .trackstat b{display:block;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums} .trackstat small{display:block;font:400 9px/1 var(--mono);color:var(--dim); text-transform:uppercase;letter-spacing:.06em;margin-top:3px} /* Holding vs sold, at a glance — green dot for still-in, dim for exited. */ .hstate{font:600 8.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase; padding:2px 6px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px} .hstate::before{content:"";width:5px;height:5px;border-radius:50%} .hstate.holding{background:var(--green-dim);color:var(--up)} .hstate.holding::before{background:var(--up)} .hstate.sold{background:var(--panel2);color:var(--dim);border:1px solid var(--line)} .hstate.sold::before{background:var(--dim)} .venuepick{position:relative;display:inline-block} .venuetrigger{display:inline-flex;align-items:center;gap:6px;background:var(--panel2); border:1px solid var(--line);color:var(--fg2);border-radius:var(--r-ctrl);padding:6px 11px; cursor:pointer;font:600 12px/1 var(--sans);min-height:32px} .venuetrigger:hover{border-color:var(--acc);color:var(--fg)} .venuemenu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:150px; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:5px; box-shadow:0 14px 34px rgba(0,0,0,.55);display:grid;gap:1px} .venuemenu a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r-tel); color:var(--fg2);font:550 13px/1 var(--sans)} .venuemenu a:hover{background:var(--panel2);color:var(--fg)} /* embedded terminal logo — a small rounded mark before the name */ .vlogo{width:17px;height:17px;border-radius:4px;object-fit:cover;flex:none; background:#0d0d12} .venue .vlogo{width:13px;height:13px;border-radius:3px;margin-right:4px;vertical-align:-2px} /* ── loading skeletons ───────────────────────────────────────────────────── A cold cache after a restart used to look broken; a shimmer reads as loading. NOTE: this CSS was missing before, the skel() helpers rendered invisible. */ @keyframes shimmer{100%{background-position:-200% 0}} .skelbar{height:14px;border-radius:var(--r-tel); background:linear-gradient(90deg,var(--panel2) 25%,var(--line) 37%,var(--panel2) 63%); background-size:200% 100%;animation:shimmer 1.3s linear infinite} @media (prefers-reduced-motion:reduce){.skelbar{animation:none;opacity:.55}} .skelrow{display:flex;align-items:center;gap:12px;padding:11px 14px; border-bottom:1px solid var(--line)} .skelrow .dot{width:42px;height:42px;border-radius:50%;flex:none;background:var(--panel2)} .skelrow .lines{flex:1;display:grid;gap:7px} .skelrow .lines .skelbar:last-child{width:55%;height:11px} .skelrow .r{width:60px;height:26px;border-radius:var(--r-tel);background:var(--panel2)} .skelcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:11px} .kbody .skelcard,.lanebody .skelcard{margin-bottom:8px} .skelgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px;margin-top:14px} @media(max-width:560px){.skelgrid{grid-template-columns:repeat(2,1fr)}} /* ── tables ────────────────────────────────────────────────────────────── */ /* A wide table in a narrow column silently chopped its last column mid-glyph — "+1000." with the % gone. That reads as a broken number, not as scrollable. Two fixes: drop genuinely secondary columns when the space isn't there, and fade the right edge so the remaining scroll is visible rather than guessed. */ .tw{overflow-x:auto;position:relative; background:linear-gradient(to right,transparent 85%,rgba(0,0,0,.45)), var(--panel); background-attachment:local,scroll} .tw::-webkit-scrollbar{height:7px} .tw::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px} @media(max-width:1180px){th.opt,td.opt{display:none}} table{width:100%;border-collapse:collapse;font-size:13px} th{font:600 10px/1 var(--sans);letter-spacing:.1em;color:var(--dim);text-align:left; padding:8px 13px;border-bottom:1px solid var(--line);text-transform:uppercase; white-space:nowrap} td{padding:9px 13px;border-bottom:1px solid #17171f;white-space:nowrap} tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--panel2)} .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .tick{font-weight:650;white-space:nowrap} .up{color:var(--up)}.down{color:var(--down)}.dim{color:var(--dim)} .hot{color:var(--hot)} .addr{font:12px/1 var(--mono);color:var(--fg2);cursor:pointer;display:inline-flex; align-items:center;gap:5px;padding:3px 0} .addr:hover{color:var(--acc2)} .addr .i{width:13px;height:13px;opacity:.5} .addr:hover .i{opacity:1} .sol{width:11px;height:9px;fill:currentColor;opacity:.85;flex:none} .solbtn{display:inline-flex;align-items:center;margin-right:5px;vertical-align:-1px} .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill); font:600 11px/1.4 var(--sans);background:#1c1c26;color:var(--fg2); white-space:nowrap;flex:none} .pill.up{background:#0f2a1d;color:var(--up)} .pill.warn{background:#2e2210;color:var(--hot)} .pill.acc{background:#241f3d;color:var(--acc2)} .pill.down{background:#2c1418;color:var(--down)} .empty{padding:18px 14px;color:var(--dim);text-align:center;font-size:13px} /* empty state that explains WHY (design system): an uppercase status label over a one-line reason, never a bare "nothing here". */ .empty2{display:flex;flex-direction:column;align-items:center;gap:5px; padding:20px 16px;text-align:center} .empty2 b{font:600 11px/1 var(--mono);letter-spacing:.12em;color:var(--fg2)} .empty2 span{font-size:12px;color:var(--dim)} /* ── result panels (never raw JSON) ────────────────────────────────────── */ .res{border:1px solid var(--line);border-radius:var(--r-sm);background:#0a0a0e; overflow:hidden} .res:empty{display:none} .res[hidden]{display:none} .res-head{display:flex;align-items:center;gap:8px;padding:11px 13px; border-bottom:1px solid var(--line);font-weight:600;font-size:13px} .res-head.ok{background:#0f2018;color:var(--up)} .res-head.bad{background:#2a1216;color:var(--down)} .res-head.warn{background:#241a09;color:var(--hot)} .res-head .i{width:17px;height:17px} .kv{display:flex;justify-content:space-between;gap:14px;padding:9px 13px; border-bottom:1px solid #15151d;font-size:13px} .kv:last-child{border-bottom:0} .kv>span{color:var(--dim);flex:none} .kv>b{min-width:0;font:550 13px/1.4 var(--mono);font-variant-numeric:tabular-nums;text-align:right; word-break:break-all;display:flex;align-items:center;gap:4px;justify-content:flex-end} .res .note{padding:10px 13px;color:var(--dim);font-size:12px;border-top:1px solid #15151d} .res .placeholder{padding:11px 13px;color:var(--dim);font-size:12px;text-align:center} .bar{height:5px;background:#1c1c26;border-radius:3px;overflow:hidden;width:110px} .bar i{display:block;height:100%;background:var(--acc)} /* ── wallets: list + drop zones ────────────────────────────────────────── */ .wgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start} @media(max-width:1080px){.wgrid{grid-template-columns:1fr}} .wgrid>*{min-width:0} .panel>h2{display:flex} td.grip,.zrow .grip{color:#4a4a5e;cursor:grab;font-size:12px;user-select:none} tr[draggable="true"]{cursor:grab} tr[draggable="true"]:active{cursor:grabbing} .usedrow td{background:#0c0c11} .ghosted{border:1px dashed var(--line2);border-radius:var(--r-sm);padding:9px 11px; color:var(--dim);font-size:12px;text-align:center} .devname{color:var(--acc);font-weight:650} .rowacts{display:flex;gap:4px;opacity:.55;transition:opacity .12s} tr:hover .rowacts{opacity:1} @media(hover:none){.rowacts{opacity:.85}} /* touch has no hover — keep them usable */ .ico.danger{color:#ff7b88} /* destructive row actions sit apart and stay quiet until you reach for them, so they never read as equal to Fund/Copy/Withdraw */ .rowacts .ico.danger{margin-left:8px;opacity:.6} .rowacts .ico.danger:hover{opacity:1;background:var(--red-dim)} .dropzone.over{border-color:var(--acc);box-shadow:0 0 0 3px rgba(245,181,68,.12)} .zone{padding:12px;display:grid;gap:8px;min-height:112px;align-content:start} .zrow{display:flex;gap:9px;align-items:center;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:12px} .zrow[draggable]{cursor:grab} .zrow[draggable]:active{cursor:grabbing} .zrow[draggable]:hover{border-color:var(--line2)} /* funded/unfunded segmented filter on the wallet list */ .fundfilt{display:inline-flex} .segb{background:var(--panel2);border:1px solid var(--line);border-right:0;color:var(--dim); padding:4px 11px;font:600 11px/1 var(--sans);cursor:pointer;white-space:nowrap} .segb:first-child{border-radius:7px 0 0 7px} .segb:last-child{border-radius:0 7px 7px 0;border-right:1px solid var(--line)} .segb:hover{color:var(--fg2)} .segb.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)} .stagebtn{font-weight:700} .zrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;display:flex; align-items:center;gap:3px} .wname{font-size:12px;color:var(--fg2);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .wbal{font:650 17px/1 var(--mono);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:5px} .wacts{display:flex;gap:6px;flex-wrap:wrap} .wout:empty{display:none} .wout{border-top:1px solid var(--line);padding-top:8px;font-size:12px;display:grid;gap:4px} .kvline{display:flex;justify-content:space-between;gap:10px} .kvline span{color:var(--dim)} .kvline b{font-family:var(--mono);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:3px} .warnline{color:var(--hot)} .confirm{background:#2a1216;border:1px solid #5c1f27;border-radius:var(--r-sm); padding:11px;display:grid;gap:8px} .confirm b{color:#ffb4bd;font-size:12.5px} .confirm ul{margin:0;padding-left:18px;color:var(--fg2);font-size:12px; display:grid;gap:3px} .confirm span{font-size:11.5px;color:var(--dim);line-height:1.45} .confirm span b{color:#ffb4bd} .tag{display:inline-block;font:600 9.5px/1.6 var(--sans);letter-spacing:.04em; text-transform:uppercase;padding:1px 7px;border-radius:var(--r-pill);vertical-align:middle; margin-left:5px} .tag.runner{background:#0f2a1d;color:var(--up);border:1px solid #1d4432} .tag.conviction{background:#241f3d;color:var(--acc2);border:1px solid #342c58} .tag.signal{background:#16222e;color:#7dbaff;border:1px solid #1d3350} .tag.new{background:#2a2110;color:var(--acc);border:1px solid #4a3a17} .legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap} .legend .tag{margin:0} .coin.hi{border-color:#4a3a15;background:linear-gradient(180deg,#15120b,var(--panel))} .coin[data-tag="runner"]{border-left:2px solid var(--up)} .coin[data-tag="conviction"]{border-left:2px solid var(--acc2)} .coin[data-tag="new"]{border-left:2px solid var(--acc)} .coin[data-tag="signal"]{border-left:2px solid #2b4a6b} .src{font-size:10px;padding:2px 7px;border-radius:var(--r-pill);background:#16161f; border:1px solid var(--line);color:var(--dim);margin-left:6px} .src.live{background:#0f2018;border-color:#1d3327;color:var(--up)} .src.guess{background:#2a1a09;border-color:#3d2812;color:var(--hot)} .venues{display:flex;gap:5px;flex-wrap:wrap} .venue{font-size:11px;padding:3px 8px;border-radius:var(--r-pill);background:#16161f; border:1px solid var(--line);color:var(--fg2);white-space:nowrap} .venue:hover{border-color:var(--acc2);color:var(--acc2)} .secret{display:grid;gap:6px;background:#2a1206;border:1px solid #5c2a12; border-radius:var(--r-sm);padding:9px} .secret b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#ffb27a} .secret code{font:11px/1.4 var(--mono);word-break:break-all;cursor:pointer;color:var(--fg)} .secret span{font-size:11px;color:var(--dim)} .ico{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:14px; line-height:1;padding:4px 6px;border-radius:var(--r-tel);min-height:0;position:relative} .ico:hover{background:var(--panel2);color:var(--fg)} .ico svg{width:15px;height:15px;display:block} /* Branded share affordance — lives on every coin card + the coin page. Amber on hover so it reads as the MemeHuntr "put this in front of your crew" action. */ .cshare{color:var(--fg2)} .cshare:hover{background:var(--amber-dim);color:var(--acc)} .coin-actions .cshare{margin-left:auto} /* An icon with no label is a guess. The native title tooltip takes a second to appear and can't be styled, so the label is part of the button. */ .ico[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px); left:50%;transform:translateX(-50%);background:#22222e;color:var(--fg); border:1px solid var(--line2);border-radius:var(--r-tel);padding:4px 8px;font:500 11px/1.2 var(--sans); white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20; box-shadow:0 6px 18px rgba(0,0,0,.5)} .ico[data-tip]:hover::after,.ico[data-tip]:focus-visible::after{opacity:1} tr.archivedrow td{opacity:.45} tr.archivedrow:hover td{opacity:.8} .popout{position:fixed;width:310px;background:var(--panel);border:1px solid var(--line2); border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:40} .pophead{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:grab; border-bottom:1px solid var(--line);background:var(--panel2); border-radius:var(--r) var(--r) 0 0;user-select:none} .pophead:active{cursor:grabbing} .pophead b{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .popbody{padding:10px} /* On a phone a 310px draggable card has no room and the grab-drag fights scroll. Force it into a full-width bottom sheet (!important beats the JS drag inline left/top) and turn the drag handle into a static header. */ @media(max-width:560px){ .popout{position:fixed!important;left:0!important;right:0!important;bottom:0!important; top:auto!important;width:100%!important;transform:none!important; border-radius:18px 18px 0 0;max-height:82vh;overflow:auto; animation:riseIn .24s cubic-bezier(.2,.7,.3,1) both} .popout .popbody{padding-bottom:calc(12px + env(safe-area-inset-bottom))} .pophead{cursor:default} } .popbody .wcard{border:0;padding:0;background:transparent} /* ── bot cards ─────────────────────────────────────────────────────────── */ /* Automation sub-mode tabs — segmented filter over the tool groups */ /* iOS-style segmented control: one inset track, the active segment lifts and carries a checkmark. Used by the tools filter and the hunt Sessions|Ledger. */ .bottabs{display:inline-flex;gap:2px;margin:0 0 12px;padding:3px;max-width:100%; overflow-x:auto;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-card)} .botab{flex:none;background:transparent;border:0;color:var(--dim); border-radius:var(--r-ctrl);padding:6px 14px;cursor:pointer;font:600 12.5px/1 var(--sans); white-space:nowrap;display:inline-flex;align-items:center;gap:5px; transition:color .14s,background .14s} .botab:hover{color:var(--fg2)} .botab.on{background:var(--acc);color:var(--acc-ink);box-shadow:0 1px 3px rgba(0,0,0,.28)} .botab.on::before{content:"✓";font-size:11px;font-weight:800;opacity:.9} /* Fixed 3-up (not auto-fit): the workgroup headers span 1/-1, which keeps every auto-fit track "occupied" so empty tracks never collapse — that's what left the cards stuck at min-width against a half-empty right side. A fixed, responsive column count makes each group of three fill the full width. */ .bots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;align-items:stretch} .bots.tiled{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start} .bots .span2{grid-column:span 2} @media(max-width:1100px){.bots,.bots.tiled{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.bots,.bots.tiled{grid-template-columns:1fr}.bots .span2{grid-column:auto}} /* Funding tool (narrow) beside Running bots (fills the rest). Flex, so when the tab filter hides Funding, Running bots expands to the full width on its own. */ .fundrow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px} .fundrow .fundcol{flex:0 0 360px;max-width:100%} .fundrow .runpanel{flex:1 1 340px;min-width:0} @media(max-width:820px){.fundrow .fundcol{flex:1 1 100%}} /* Preflight modal — polished checklist, green ✓ / red ✕ per item. */ .pfmodal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px} .pfmodal[hidden]{display:none} .pfcard{position:relative;z-index:1;width:min(440px,94vw);background:var(--panel); border:1px solid var(--line);border-radius:var(--r-sheet);padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.55)} .pfhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .pfhead b{font-size:15px} .pfstatus{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px; padding:10px 12px;border-radius:var(--r);margin-bottom:12px} .pfstatus.ok{background:rgba(40,199,111,.10);color:var(--up)} .pfstatus.bad{background:rgba(255,91,91,.10);color:var(--down)} .pfchecks{display:grid;gap:0;margin-bottom:12px} .pfrow{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line)} .pfrow:last-child{border-bottom:0} .pflbl{color:var(--fg2);font-size:13px} .pfval{margin-left:auto;font:12px/1 var(--mono);color:var(--fg)} .pfrow.bad .pfval{color:var(--down)} .pfmark{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#0b0b0d} .pfmark.ok{background:var(--up)} .pfmark.bad{background:var(--down)} .pfpay{display:flex;align-items:center;justify-content:space-between;padding:10px 12px; background:var(--panel2);border-radius:var(--r);font-size:13px;color:var(--fg2)} .pfpay b{font-family:var(--mono);font-size:12.5px;color:var(--fg)} /* Inline preset editing — same compact pill, now an input you type into. The flex + fixed width beat the global full-width input rule so they stay inline. */ .presetrow input.preset.pedit{width:62px!important;flex:0 0 62px;text-align:center; padding:7px 6px;border-color:var(--acc);color:var(--fg);min-width:0} .presetrow input.preset.pedit:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 2px rgba(255,209,102,.25)} .bots.tiled .bot{cursor:pointer;transition:border-color .12s,transform .06s} .bots.tiled .bot:hover{border-color:var(--acc)} .bots.tiled .bot:active{transform:translateY(1px)} .bots.tiled .bot .bot-body,.bots.tiled .bot .bot-foot{display:none} .bots.tiled .bot-head{cursor:pointer} .bots.tiled .bot-head::after{content:"›";margin-left:auto;color:var(--dim);font-size:18px; line-height:1;align-self:center;transition:color .12s} .bots.tiled .bot:hover .bot-head::after{color:var(--acc)} /* tool controls modal — reuses the sheet entrance from the filter modal */ .toolmodal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px} .toolmodal[hidden]{display:none} .toolmodal:not([hidden]) .modal-scrim{animation:scrimIn .18s ease both} .toolcard{position:relative;z-index:1;width:min(440px,94vw);max-height:86vh;overflow:auto; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-sheet); box-shadow:0 22px 60px rgba(0,0,0,.6);animation:sheetIn .24s cubic-bezier(.2,.7,.3,1) both} @media(prefers-reduced-motion:reduce){.toolcard{animation:none}} .toolhead{display:flex;align-items:center;gap:8px;padding:13px 16px 10px; border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1} .toolhead #toolTitle{font:700 15px/1 var(--sans);flex:1} .toolhead .iconbtn{width:28px;height:28px;border-radius:var(--r-ctrl);background:var(--panel2); border:1px solid var(--line);color:var(--fg2);cursor:pointer;font-size:13px;line-height:1;flex:none} .toolhead .iconbtn:hover{border-color:var(--acc);color:var(--fg)} .toolbody{padding:14px 16px 16px} .toolbody .bot-body{padding:0 0 12px} .toolbody .bot-foot{padding:0} /* labeled workspaces inside the automation grid — each header spans the row so the bots read as grouped tools, not one long undifferentiated pile. */ .bots .workgroup{grid-column:1/-1;display:flex;align-items:baseline;gap:10px; flex-wrap:wrap;margin:10px 0 -2px;padding-bottom:6px;border-bottom:1px solid var(--line)} .bots .workgroup:first-child{margin-top:0} .bots .workgroup h4{margin:0;font:650 13.5px/1 var(--sans);letter-spacing:-.01em} .bots .workgroup span{font-size:11.5px;color:var(--dim)} /* Market-Maker risk cockpit — exposure/PnL at a glance above the books */ .mmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mmstat{background:var(--panel);padding:11px 14px} .mmstat .k{font:600 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim);text-transform:uppercase} .mmstat .v{font:700 17px/1.1 var(--mono);font-variant-numeric:tabular-nums;margin-top:6px} .mmstat .v small{font-weight:400} .mmstat .x{font-size:10.5px;margin-top:4px} .bot{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;transition:border-color .14s,transform .14s} .bot:hover{border-color:var(--line2)} .bot.on{border-color:#2e5c44;box-shadow:0 0 0 1px #1d3a2b inset} .bot-head{display:flex;gap:12px;align-items:center;padding:14px 15px 12px; border-bottom:1px solid var(--line)} .bot-ico{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center; font-size:18px;flex:none;background:#1b1b25;border:1px solid var(--line2)} .bot-ico.vol{background:#132033;border-color:#1d3350;color:#7dbaff} .bot-ico.maker{background:#1d1a33;border-color:#2e2a52;color:var(--acc2)} .bot-ico.holder{background:#132a20;border-color:#1e4432;color:var(--up)} .bot-ico.buy{background:#2a2110;border-color:#4a3a17;color:var(--acc)} .bot-ico svg{width:18px;height:18px} /* a muted alert bell reads dimmed + struck, not a different glyph */ .ico.muted{opacity:.45} .ico.muted::after{content:"";position:absolute;width:15px;height:1.5px; background:currentColor;transform:rotate(-45deg)} .ico.muted{position:relative} .bot-ico.sell{background:#2c1417;border-color:#4d2027;color:var(--down)} .bot-ico.fee{background:#132a20;border-color:#1e4432;color:var(--up)} .bot-head h3{margin:0;font-size:14px;font-weight:650;letter-spacing:-.01em} .bot-head p{margin:2px 0 0;font-size:11.5px;color:var(--dim);line-height:1.35} .bot-body{padding:11px 13px;display:grid;gap:11px;align-content:start;flex:1} .bot-body .res{align-self:stretch} .bot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .bot .field{margin:0} .bot .field label{margin-bottom:4px} .bot input,.bot select{min-height:36px;padding:8px 10px;font-size:13px} .bot-foot{margin-top:auto;padding:12px 15px;border-top:1px solid var(--line); background:#0c0c11;display:grid;gap:9px} .bot-cost{display:flex;justify-content:space-between;gap:10px;font-size:11.5px; color:var(--dim)} .bot-cost b{font-family:var(--mono);color:var(--fg2)} .bot-note{font-size:11.5px;color:var(--dim);line-height:1.45} .bot-note b{color:var(--fg2);font-weight:600} .bot .btn{width:100%;justify-content:center} /* Two buttons in a foot row sit side by side (equal width), not stacked. */ .bot-foot .row{display:flex;gap:8px} .bot-foot .row .btn{flex:1 1 0;width:auto;min-width:0} /* Funding router: tighter so the buttons rise above the fold and the page fits. */ .fundcol .bot-body{gap:8px;padding:11px 14px} .fundcol .bot-grid{gap:8px} .fundcol .bot-foot{padding:10px 14px;gap:8px} .fundcol .bot-note{font-size:11px;line-height:1.4} .livedot{width:7px;height:7px;border-radius:50%;background:var(--up); box-shadow:0 0 0 3px rgba(61,220,151,.18);flex:none} /* ── compact chrome (RapidLaunch density) ──────────────────────────────── */ .toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap} /* deposit warning — SOL-only, so USDC/token sends don't get stranded off-balance */ .depwarn{background:var(--amber-dim);border:1px solid rgba(255,184,77,.35); border-radius:var(--r-card);padding:11px 14px;margin-bottom:12px;font-size:12.5px; line-height:1.5;color:var(--fg2)} .depwarn b{color:var(--acc)} /* one-tap convert a mis-deposited USDC balance to SOL — subtle amber pill */ .usdcswap{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px; border-radius:var(--r-pill);background:var(--amber-dim);border:1px solid rgba(255,184,77,.3); color:var(--acc);font:600 11px/1 var(--sans);cursor:pointer;white-space:nowrap; transition:border-color .12s,background .12s;margin-right:4px} .usdcswap:hover{border-color:var(--acc);background:rgba(255,184,77,.16)} .usdcswap svg{flex:none} /* The flex spacer pushed the last button onto a line of its own the moment the row ran out of room, one orphaned control floating under the toolbar. When there isn't width for the split layout, drop the spacer and let the buttons pack together. */ @media(max-width:1150px){.toolbar>span[style*="flex:1"]{display:none}} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel); border:1px solid var(--line);color:var(--fg2);border-radius:var(--r-tel); padding:6px 11px;font:550 12px/1 var(--sans);cursor:pointer;min-height:32px; position:relative;white-space:nowrap} .chip:hover{border-color:var(--line2);color:var(--fg)} .chip.act{background:var(--acc);border-color:transparent;color:var(--acc-ink);font-weight:650} .chip.act:hover{filter:brightness(1.08)} .chip.danger{background:#3a1417;border-color:#5c1f24;color:#ff9ca6} .chip.dimchip{cursor:default;color:var(--dim);font-family:var(--mono);font-weight:400} .chip.dimchip:hover{border-color:var(--line);color:var(--dim)} .solmark{color:var(--acc2)} .panel.tight{margin-bottom:0} .panel.tight>h2{padding:9px 12px;font-size:11px;gap:7px;align-items:center} .count{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill); padding:1px 7px;font:600 10px/1.6 var(--mono);color:var(--fg2); letter-spacing:0;text-transform:none} .hdrnum{font:400 11px/1 var(--mono);color:var(--dim);letter-spacing:0;text-transform:none} .hbtns{display:flex;gap:5px;align-items:center} .hbtns .chip{padding:4px 9px;min-height:26px;font-size:11px} .miniInput{background:#0a0a0e;border:1px solid var(--line2);color:var(--fg); border-radius:var(--r-tel);padding:5px 8px;min-height:26px; font:12px/1 var(--mono);width:66px} .miniInput:focus{outline:none;border-color:var(--acc)} /* align-items:stretch is essential — an earlier `.stack{align-items:center}` rule leaks in and makes these column panels shrink-wrap to content width, so the Distribute boxes rendered narrower than the column and misaligned. */ .stack{display:flex;flex-direction:column;gap:12px;align-items:stretch} .mini{font-size:11px;color:var(--dim);line-height:1.45} .mini b{color:var(--fg2)} .panel-foot{border-top:1px solid var(--line);padding:7px 12px;background:#0c0c11} .panel-foot .mini{display:flex;gap:7px;align-items:center;cursor:pointer} /* A footnote that is a SENTENCE is prose, not a row of chips. The flex rule above was written for the little icon+label feet and turned every word-wrapped note into columns with a stray bold word marooned between them. */ .panel-foot .mini:has(b),.panel-foot .mini.note{display:block;cursor:default; line-height:1.55} table.dense th{padding:7px 12px;font-size:9.5px} table.dense td{padding:7px 12px;vertical-align:middle} .wlabel{font-size:12.5px;font-weight:600} .waddr{margin-left:7px;opacity:.75} .waddr .addr{font-size:11px} .balpill{display:inline-flex;align-items:center;gap:5px;background:#12121a; border:1px solid var(--line);border-radius:var(--r-tel);padding:3px 8px; font:12px/1 var(--mono);color:var(--dim)} .balpill.has{color:var(--fg);border-color:var(--line2)} .balpill .sol{opacity:1;color:var(--acc2)} .crown{color:var(--acc)} /* uploaded ticker-art preview on the launch form */ .imgprev{margin-top:8px} .imgprev img{width:56px;height:56px;border-radius:var(--r);object-fit:cover; border:1px solid var(--line2)} /* Wallet STACK grouping: a launch stack is one dev + the snipers under it. A dev row opens a stack with a hairline above it and an amber tick; its snipers tuck in beneath with a connector rail, so 42 flat wallets read as ~14 stacks. Funded wallets stay bright; empty ones recede so money is easy to find. */ table.dense tr.r-dev>td{border-top:1px solid var(--line2);padding-top:9px} table.dense tr.r-dev>td:first-child{box-shadow:inset 2px 0 0 var(--acc)} table.dense tr.r-sniper .wlabel{padding-left:15px;position:relative;font-weight:500; color:var(--fg2)} table.dense tr.r-sniper .wlabel::before{content:"";position:absolute;left:4px;top:-2px; bottom:6px;width:1px;background:var(--line2)} table.dense tr.r-sniper .wlabel::after{content:"";position:absolute;left:4px;top:50%; width:7px;height:1px;background:var(--line2)} table.dense tr.r-main .wlabel,table.dense tr.r-main>td:first-child{color:var(--up)} table.dense tr.wempty .wlabel{opacity:.6} table.dense tr.wempty .balpill{opacity:.5} table.dense tr.wempty:hover .wlabel,table.dense tr.wempty:hover .balpill{opacity:1} .zone{padding:10px 12px;display:grid;gap:7px;min-height:104px;align-content:start} .drophint{display:grid;place-items:center;gap:8px;min-height:96px;color:var(--dim); font-size:12px} .drophint span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; border:1px dashed var(--line2);font-size:14px} .zrow{padding:6px 9px} .zrow .wlabel{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── wallets: SOL mark, claim picker, drop-target polish ───────────────────── */ .solchip{gap:7px;padding-left:9px} .sollogo{width:14px;height:auto;flex:none} .claimpick{position:relative} .claimmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:196px; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card);padding:5px; box-shadow:0 16px 40px rgba(0,0,0,.5);display:grid;gap:2px} .claimmenu[hidden]{display:none} .claimopt{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;background:none;border:0;border-radius:var(--r-ctrl);padding:8px 11px;cursor:pointer; color:var(--fg);font-size:12.5px;text-align:left} .claimopt:hover{background:var(--panel2)} .cp-name{font-weight:600} .cp-amt{font:600 11px/1 var(--mono);display:flex;align-items:center} .cp-soon{color:var(--dim);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em} /* An empty drop zone reads as a real target: a dashed inset that lights amber on drag-over. Filled, the dashed frame gives way to the wallet rows. */ .zone:has(.drophint){margin:2px 12px 12px;border:1.5px dashed var(--line2); border-radius:var(--r-card);min-height:88px; background:radial-gradient(130% 100% at 50% 0,rgba(245,181,68,.04),transparent 68%); transition:border-color .15s,background .15s} .dropzone.over .zone:has(.drophint){border-color:var(--acc); background:rgba(245,181,68,.06)} .drophint{min-height:84px;gap:10px} .drophint span{width:38px;height:38px;font-size:16px;color:var(--fg2); background:var(--panel2);border:1.5px dashed var(--line2);transition:.15s} .dropzone.over .drophint span{border-color:var(--acc);color:var(--acc); transform:translateY(2px)} /* A number that changes flashes its direction, so a live table reads as alive instead of a static snapshot that happens to refresh. */ @keyframes tkUp{0%{background:rgba(70,200,130,.30)}100%{background:transparent}} @keyframes tkDown{0%{background:rgba(232,96,96,.30)}100%{background:transparent}} .tk-up{animation:tkUp .9s ease-out} .tk-down{animation:tkDown .9s ease-out} /* market cap moves in one direction that matters (up), so its change flashes the MemeHuntr amber rather than green/red — the brand's "something happened" light */ @keyframes tkAmber{0%{background:rgba(255,184,77,.32)}100%{background:transparent}} .tk-amber{animation:tkAmber .9s ease-out;border-radius:3px} /* the split buy/sell halves each carry their own glow on change */ .solbs .bs-b,.solbs .bs-s{border-radius:3px;padding:0 3px;margin:0 -1px} @media(prefers-reduced-motion:reduce){.tk-amber{animation:none}} .livedot2{display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--up);box-shadow:0 0 0 0 rgba(70,200,130,.5); animation:livePulse 1.8s infinite} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(70,200,130,.45)} 70%{box-shadow:0 0 0 6px rgba(70,200,130,0)}100%{box-shadow:0 0 0 0 rgba(70,200,130,0)}} @media(prefers-reduced-motion:reduce){.tk-up,.tk-down,.livedot2{animation:none}} .evmlive{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums; color:var(--up)} .evmlive .dim{color:var(--dim)} /* flow bar: both sides render — green buys, red sells, in proportion */ .flowbar{display:flex;width:100%;height:8px;border-radius:var(--r-tel);overflow:hidden; background:var(--panel2)} .fb-buy{background:var(--up);height:100%;transition:width .3s ease} .fb-sell{background:var(--down);height:100%;transition:width .3s ease} /* ── Signal Heat: one shared vocabulary for how hot a call is ────────────── Six states, punctuation not neon. cold/resolved stay quiet; the amber only earns attention as heat climbs; breaking flips red. Mirrors the React MHHeat atom so both frontends read identically. */ .heat{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600; letter-spacing:.1em;font-family:var(--mono);text-transform:uppercase} .heat .hd{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .heat-cold{color:var(--dim)} .heat-resolved{color:var(--fg2)} .heat-watching{color:var(--acc)} .heat-heating{color:var(--acc)} .heat-runner{color:var(--amber-hot)} .heat-breaking{color:var(--down)} /* Graded live state. RUNNING = climbing now (green, pulsing); it's a STATE, not the RUNNER achievement. Fading pulls back to amber, dead is a cold red dot. */ .heat-running{color:var(--up)} .heat-fading{color:var(--acc)} .heat-dead{color:var(--down);opacity:.85} /* ── Signal Heat motion: the PULSE SPEED IS the reading ───────────────────── Nothing moves for a coin that isn't doing anything; the closer a coin is to a decision, the faster its dot beats. Cold/resolved/dead stay perfectly still on purpose — motion is reserved for coins that have earned it. Fading doesn't pulse, it BREATHES down (losing energy), so it never reads as "heating". */ .heat-watching .hd{animation:heatPulse 2.9s var(--ease) infinite} /* stirring */ .heat-heating .hd{animation:heatPulse 1.7s var(--ease) infinite} /* building */ .heat-breaking .hd{animation:heatPulse 0.95s var(--ease) infinite} /* urgent */ .heat-runner .hd{animation:heatPulse 1.9s var(--ease) infinite} /* alive + hot */ .heat-running .hd{animation:heatPulse 2.4s var(--ease) infinite} /* climbing */ .heat-fading .hd{animation:heatBreath 3.2s ease infinite} /* losing it */ @keyframes heatPulse{0%{box-shadow:0 0 0 0 currentColor} 70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}} @keyframes heatBreath{0%,100%{opacity:1}50%{opacity:.3}} @media(prefers-reduced-motion:reduce){.heat .hd{animation:none}} /* ── Freshness: every live value earns "● LIVE · 1.2s · source", never "Live" */ .fresh{display:inline-flex;align-items:center;gap:6px;font-size:10.5px; font-family:var(--mono)} .fresh .fg{flex:none} .fresh .fsrc{color:var(--dim)} .fresh-live{color:var(--up)} .fresh-fresh{color:var(--fg2)}.fresh-fresh .fg{color:var(--acc)} .fresh-aging{color:var(--dim)} .fresh-stale{color:var(--down)} .fresh-unavailable{color:var(--dim)} /* Click anywhere on a pool row to open the coin; the NE arrow is the affordance, not the only target. */ .clickrow{cursor:pointer;transition:background .1s} .clickrow:hover{background:var(--panel2)} .actcell{text-align:right} .rowgo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-ctrl); background:var(--panel2);border:1px solid var(--line);color:var(--fg2);transition:.12s} .rowgo svg{width:14px;height:14px} .clickrow:hover .rowgo{border-color:var(--acc);color:var(--acc); transform:translate(1px,-1px)} /* ── modal ─────────────────────────────────────────────────────────────── */ #presetScrim{position:fixed;inset:0;background:rgba(4,4,7,.72);z-index:60; display:flex;align-items:center;justify-content:center;padding:20px} #presetScrim[hidden]{display:none} .modal{width:min(560px,94vw);background:var(--panel);border:1px solid var(--line2); border-radius:var(--r);box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden} .modal-head{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 12px} .modal-head b{font-size:15px} .modal-head p{margin:3px 0 0;font-size:12px;color:var(--dim)} .modal-head .ico{margin-left:auto} .modal-body{padding:0 18px 6px;max-height:56vh;overflow:auto} .modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px; border-top:1px solid var(--line);background:#0c0c11} .prow{display:flex;gap:8px;align-items:center;padding:7px 0} .prow.head{border-top:1px solid var(--line);margin-top:8px;padding-top:12px} .pcur{width:150px;flex:none;font:600 12px/1 var(--sans);display:flex;gap:7px; align-items:center;color:var(--fg2);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .prow .miniInput{flex:1;text-align:center;min-height:32px;font-size:13px} .cards-equal{align-items:stretch} .cards-equal>.panel{display:flex;flex-direction:column;margin-bottom:0} .cards-equal>.panel>.body{flex:1;display:flex;flex-direction:column} .cards-equal .bigstat{margin-bottom:12px} .cards-equal .mini{margin-top:auto} .empty{min-height:56px;display:grid;place-items:center} .bigstat b{font-size:26px} .prof{display:grid;place-items:center;gap:9px;padding:22px 0 18px;text-align:center;position:relative} .prof::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%); width:210px;height:132px;pointer-events:none;filter:blur(4px); background:radial-gradient(ellipse at 50% 40%,rgba(255,184,77,.13),transparent 70%)} .prof>*{position:relative} .prof-av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center; font:700 30px/1 var(--sans);color:var(--acc);letter-spacing:.02em;border:2px solid transparent; background:linear-gradient(160deg,#1f1f29,#131318) padding-box, conic-gradient(from 140deg,var(--acc),var(--acc2) 55%,var(--acc)) border-box; box-shadow:0 10px 32px rgba(0,0,0,.55),0 0 26px rgba(255,184,77,.10),inset 0 1px 0 rgba(255,255,255,.06); text-shadow:0 0 18px rgba(255,184,77,.35)} .prof-name{display:flex;gap:9px;align-items:center;margin-top:1px} .prof-name b{font-size:21px;font-weight:680;letter-spacing:-.02em;color:var(--fg)} .prof-tier{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; padding:3px 8px;border-radius:var(--r-tel);line-height:1} .prof-tier.is-op{background:var(--amber-dim);color:var(--acc);border:1px solid rgba(255,184,77,.28)} .prof-tier.is-viewer{background:var(--violet-dim);color:var(--acc2);border:1px solid rgba(155,124,255,.32)} .prof-sub{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; font-size:12px;color:var(--dim)} .prof-sub .ps{padding:0 13px;position:relative;white-space:nowrap} .prof-sub .ps+.ps::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:11px;background:var(--line2)} .prof-sub .ps b{color:var(--fg2);font-weight:650;font-variant-numeric:tabular-nums} .prof-sub .ps.up b{color:var(--up)} .prof-sub .ps.down b{color:var(--down)} /* Earn-card link bar — persistent + full width so swapping MemeHuntr/Creator never resizes the card, and the link reads up top, not buried bottom-right. */ .earnc .linkbar{display:flex;align-items:center;gap:8px;padding:7px 9px 7px 11px;margin-bottom:12px; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-ctrl)} .earnc .linkbar .lb-k{font-size:11px;color:var(--dim);white-space:nowrap} .earnc .linkbar .addr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;cursor:pointer; font-family:var(--mono);font-size:12px;color:var(--fg2)} .earnc .linkbar .chip{flex:none} .bigstat{margin-bottom:10px} .bigstat b{display:flex;align-items:center;gap:6px;font:650 24px/1.1 var(--mono); letter-spacing:-.02em} .bigstat span{display:block;font-size:11px;color:var(--dim);margin-top:5px} .tapeline{display:flex;gap:9px;align-items:flex-start;padding:8px 12px; border-bottom:1px solid #15151d} .tapeline:last-child{border-bottom:0} .tapeline .tt{flex:none;font:11px/1.7 var(--mono);color:var(--dim)} .tapeline .tb{min-width:0;flex:1} .tapeline .th{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .tapeline .tw2{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.4} .livestrip{display:flex;gap:8px;overflow:hidden;padding:10px 12px; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .livestrip:hover .lane{animation-play-state:paused} /* also freeze the lane while a links menu / preview is open, even though the cursor has left the strip to reach the popover below the card */ body.lane-hold .lane{animation-play-state:paused} .lane{display:flex;gap:8px;animation:slide 42s linear infinite} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .livecard{flex:none;min-width:132px;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r-sm);padding:8px 10px;display:grid;gap:3px; transition:border-color .12s} .livecard:hover{border-color:var(--acc)} .livecard .lt{font:650 13px/1.2 var(--sans)} .livecard .ln{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .livecard .ld{font:12px/1 var(--mono);color:var(--fg2)} .livecard .ld.hot{color:var(--acc)} .livecard .la{font-size:10px;color:var(--dim);font-family:var(--mono)} /* ── token intel ───────────────────────────────────────────────────────── */ .intel-top{display:flex;gap:13px;align-items:center;padding:14px} .intel-top h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em} .intel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px;background:var(--line);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .intel-grid .fact{background:var(--panel);padding:9px 12px;display:block} .intel-grid .fact span{display:block;font-size:10px;letter-spacing:.08em; color:var(--dim);text-transform:uppercase} .intel-grid .fact b{display:block;margin-top:3px;font:550 13px/1.3 var(--mono); font-variant-numeric:tabular-nums} /* the authority-check summary now LIVES in the empty grid tail after SOL — a cell that auto-places after the last fact and spans to the row's end, so it fills the gray gap without adding a bar or changing any section's size */ .intel-grid .fact.factspan{grid-column:1 / -1;display:flex;align-items:center;min-width:0} .intel-grid .fact.factspan b{margin:0;font:550 12px/1.3 var(--sans); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .intel-grid .fact.factspan b.fs-ok{color:var(--up)} .intel-grid .fact.factspan b.fs-warn{color:var(--hot)} .intel-foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:11px 14px; font-size:12px} .intel-risk{padding:10px 14px;background:#2a1a09;color:var(--hot);font-size:12px; border-top:1px solid #3d2812} .intel-ok{padding:10px 14px;background:#0f2018;color:var(--up);font-size:12px; border-top:1px solid #1d3327} .prereq{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px; padding:8px 0 2px} .prereq .ok{color:var(--up)} .prereq .need{color:var(--hot)} /* ── Coin Investigation (Research flagship) ──────────────────────────────── The verdict leads: one glance answers "is this safe to touch?" A safety ring scores the read, the case for and against are listed plainly, and every number carries where it came from. Colour is the verdict, never decoration. */ /* Register --s so the ring's conic fill can actually animate (custom props are not animatable otherwise). */ @property --s{syntax:"";inherits:false;initial-value:0} @keyframes vCardUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @keyframes vRingFill{from{--s:0}} @keyframes vItemIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* The card is a neutral order ticket — dark gray, no verdict tint. Colour lives ONLY in the ring, which fills up on load while the score counts to it. */ .verdict{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center; padding:18px 20px;border-radius:var(--r-sheet);border:1px solid var(--line2);margin-bottom:14px; background:var(--panel2);animation:vCardUp .4s cubic-bezier(.2,.7,.3,1) both} .verdict .vbadge{width:96px;text-align:center;color:var(--dim)} .verdict.clean .vbadge{color:var(--up)} .verdict.caution .vbadge{color:var(--acc)} .verdict.danger .vbadge{color:var(--down)} .vring{width:70px;height:70px;border-radius:50%;display:grid;place-items:center; margin:0 auto 7px;font:800 23px/1 var(--mono);font-variant-numeric:tabular-nums; background:conic-gradient(currentColor calc(var(--s,0)*1%),var(--line) 0); position:relative;animation:vRingFill 1s cubic-bezier(.2,.7,.3,1) both} .vring::before{content:"";position:absolute;inset:5px;border-radius:50%; background:var(--panel2)} .vring span{position:relative;z-index:1} .vlabel{font:800 10px/1 var(--mono);letter-spacing:.11em} /* each check ticks in one at a time, like an order card confirming line by line */ .vcol li{animation:vItemIn .34s ease both;animation-delay:calc(var(--i,0)*85ms + .18s)} .vmain h3{margin:0 0 3px;font-size:15.5px;font-weight:680;letter-spacing:-.01em;color:var(--fg)} .vmain .vsum{font-size:12.5px;color:var(--fg2);line-height:1.5} .vlists{display:flex;gap:22px;flex-wrap:wrap;margin-top:9px} /* Each column grows to use the width and its checks flow into as many columns as fit — so a clean coin's 5 checks read as 2 short rows instead of a tall stack, filling the empty right half and shortening the whole card. */ .vcol{flex:1 1 220px;min-width:0} .vcol ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:3px 22px;align-content:start;margin:0;padding:0;list-style:none} .vcol .vh{font:700 9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--dim);margin-bottom:5px} .vcol li{font-size:11.5px;line-height:1.4;display:flex;gap:6px;align-items:flex-start} .vcol.bad li::before{content:"▲";color:var(--down);font-size:8px;margin-top:3px} .vcol.good li::before{content:"✓";color:var(--up);font-size:9px;margin-top:2px} .vcol.unk li::before{content:"?";color:var(--dim);font-weight:700;margin-top:1px} /* concentration bar — where the supply actually sits */ .concwrap{padding:14px} .concbar{height:26px;border-radius:var(--r-tel);overflow:hidden;display:flex;background:var(--panel2); border:1px solid var(--line);margin-bottom:9px} .concbar i{height:100%;font-style:normal;transition:width .4s; animation:concGrow .85s cubic-bezier(.2,.7,.3,1) both} @keyframes concGrow{from{width:0 !important}} /* Safety evidence side by side — authorities left, concentration on the right — so the verdict panel uses the width instead of stacking into a tall column. */ .safetysplit{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start; margin-top:12px} .safetysplit .ssauth,.safetysplit .ssconc{min-width:0} @media(max-width:720px){.safetysplit{grid-template-columns:1fr;gap:8px}} /* Safety verdict layout: the gray SCORE card is a compact vertical stack on the left (ring + headline + checks ticking in). The authority rows + concentration sit to its RIGHT on the plain panel background — no second gray box, no dead space widening the card. */ .safetygrid{display:grid;grid-template-columns:minmax(320px,.85fr) 1fr;gap:16px;align-items:start} @media(max-width:820px){.safetygrid{grid-template-columns:1fr;gap:14px}} /* left column stacks the verdict card, then the coin's socials fill the space that used to sit empty below it (the right column runs taller) */ .sgleft{display:flex;flex-direction:column;gap:14px;min-width:0} .sgsoc{border-top:1px solid var(--line);padding-top:12px} .sgsoc-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 8px 2px} .sgsoc .socgrid{padding:0;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} @media(max-width:520px){.sgsoc .socgrid{grid-template-columns:1fr}} /* the score card sizes to its own content — no stretching to match the taller right column, which was leaving dead gray below the checks */ .sgcard .verdict{margin-bottom:0} /* checks flow into TWO columns inside the card (Flags | Clean, Unknown wraps) so it reads as a short block, not one tall vertical stack */ .sgcard .vlists{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px} .sgcard .vcol{min-width:0} .sgcard .vcol ul{grid-template-columns:1fr;gap:4px} @media(max-width:520px){.sgcard .vlists{grid-template-columns:1fr}} .sgdetail{display:flex;flex-direction:column;gap:14px;min-width:0} /* Binance Meme Rush holder makeup — sniper/insider/bundler/dev bars in the verdict */ .holdercomp{display:flex;flex-direction:column;gap:6px;animation:vItemIn .34s ease both} .hclabel{display:flex;align-items:center;gap:7px;font:700 9px/1 var(--mono); letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:1px} .hcsrc{font:600 8.5px/1 var(--mono);letter-spacing:.04em;color:var(--acc2); background:#241f3d;border-radius:4px;padding:2px 5px;text-transform:none} .hcrow{display:grid;grid-template-columns:76px 1fr 46px;align-items:center;gap:9px;font-size:11.5px} .hcrow .hck{color:var(--fg2);white-space:nowrap} .hcrow .hcbar{height:6px;border-radius:4px;background:var(--panel2);overflow:hidden} .hcrow .hcbar i{display:block;height:100%;background:var(--up);border-radius:4px; animation:concGrow .8s cubic-bezier(.2,.7,.3,1) both} .hcrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg2)} .hcrow.bad .hcbar i{background:var(--down)} .hcrow.bad b{color:var(--down)} .hcflag{font-size:11px;color:var(--down);margin-top:2px} /* RugCheck second-opinion risk chips */ .rugcheck{display:flex;flex-direction:column;gap:6px;animation:vItemIn .34s ease both} .rugrisks{display:flex;gap:6px;flex-wrap:wrap} .rr{font:600 10.5px/1.2 var(--sans);padding:4px 8px;border-radius:var(--r-tel); background:var(--panel2);color:var(--fg2);border:1px solid var(--line)} .rr.bad{background:#2c1418;color:var(--down);border-color:#5c1f24} .rr.warn{background:#2e2210;color:var(--hot);border-color:#4a3612} .rr .rrv{font-style:normal;opacity:.7;margin-left:5px;font-size:9.5px} /* RugCheck score badge in the section label. */ .rugscore{font:700 10px/1 var(--mono);padding:3px 7px;border-radius:var(--r-tel); background:var(--panel2);border:1px solid var(--line);color:var(--fg2)} .rugscore.ok{background:#12241a;color:var(--up);border-color:#1f4a34} .rugscore.warn{background:#2e2210;color:var(--hot);border-color:#4a3612} .rugscore.bad{background:#2c1418;color:var(--down);border-color:#5c1f24} /* explicit ticker name so it always leads its cell, links/rail follow it */ .tkname{font-weight:650} /* a coin name you can tap to open its page — on any card it appears on */ .cointap{cursor:pointer;text-decoration:none;transition:color .12s} .cointap:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc)} .hunt-again{white-space:nowrap} /* migration light rail — rides on any coin card (pools row, wire card, call). Inline on the ticker line (to the RIGHT of the coin), never stacked below. */ .migrow{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:4px} .tick .rowsub~.migrow,.coin-id .migrow{margin-left:0} .coin-id .migrow{margin-top:3px} .migrail{width:64px;height:5px;border-radius:3px;background:var(--panel2);overflow:hidden;flex:none} .migrail i{display:block;height:100%;background:var(--acc);border-radius:3px;transition:width .5s} .migrow b{font:600 10px/1 var(--mono);color:var(--acc);letter-spacing:.02em;white-space:nowrap} .migrow.done .migrail i{background:var(--up)} .migrow.done b{color:var(--up)} /* Topic Rush narratives in the Running-meta panel */ .metatopics{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)} .metatopics:empty{display:none} .mtlabel{display:flex;align-items:center;gap:7px;font:700 9px/1 var(--mono); letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .mtrow{display:flex;gap:7px;flex-wrap:wrap} .mtchip{display:inline-flex;align-items:center;gap:6px;max-width:230px;overflow:hidden; background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill); padding:5px 11px;font:600 11.5px/1.2 var(--sans);color:var(--fg2);white-space:nowrap} .mtchip b{font-family:var(--mono);font-variant-numeric:tabular-nums} .mtchip.up b{color:var(--up)} .mtchip.down b{color:var(--down)} .sgdetail .concwrap{padding:0} /* already inside the plain right column */ /* Act-on-it buttons carry their explanation on hover, not as a static block */ .actrow .btn{position:relative} .actrow .btn[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px); left:50%;transform:translateX(-50%);background:#22222e;color:var(--fg); border:1px solid var(--line2);border-radius:var(--r-tel);padding:6px 9px;font:500 11px/1.35 var(--sans); width:max-content;max-width:230px;text-align:center;opacity:0;pointer-events:none; transition:opacity .12s;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.5)} .actrow .btn[data-tip]:hover::after,.actrow .btn[data-tip]:focus-visible::after{opacity:1} .concbar .c1{background:var(--down)} .concbar .c5{background:var(--acc)} .concbar .c10{background:#6a7cff} .concbar .crest{background:var(--up);opacity:.55} .conclegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--fg2)} .conclegend b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)} .conclegend .sw{display:inline-block;width:9px;height:9px;border-radius:2px; margin-right:5px;vertical-align:middle} .concnote{margin-top:10px;font-size:12px;padding:9px 11px;border-radius:var(--r-ctrl); background:var(--panel2);border-left:2px solid var(--acc);color:var(--fg2);line-height:1.5} .concnote.bundle{border-left-color:var(--down);color:var(--fg)} /* authority checklist */ .authlist{display:flex;flex-direction:column} /* authorities tick in one at a time as the safety card loads, like the checks */ .authlist .authrow{animation:vItemIn .34s ease both} .authlist .authrow:nth-child(1){animation-delay:.14s} .authlist .authrow:nth-child(2){animation-delay:.26s} .authlist .authrow:nth-child(3){animation-delay:.38s} .authrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center; padding:12px 14px;border-bottom:1px solid var(--line)} .authrow:last-child{border-bottom:0} .authrow .aico{width:30px;height:30px;border-radius:var(--r-ctrl);display:grid;place-items:center; font-size:14px;flex:none} .authrow.ok .aico{background:var(--green-dim);color:var(--up)} .authrow.bad .aico{background:var(--red-dim);color:var(--down)} .authrow.unk .aico{background:var(--panel2);color:var(--dim)} .authrow.unk .av{color:var(--dim);background:var(--panel2)} .authrow .an{font-size:13px;font-weight:600} .authrow .ad{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.4} .authrow .av{font:700 10px/1 var(--mono);letter-spacing:.06em;padding:5px 9px;border-radius:var(--r-tel)} .authrow.ok .av{color:var(--up);background:var(--green-dim)} .authrow.bad .av{color:var(--down);background:var(--red-dim)} .srctag{font:600 9.5px/1 var(--mono);letter-spacing:.04em;color:var(--dim); border:1px solid var(--line);border-radius:var(--r-tel);padding:3px 6px} .quickpick{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .quickpick .qp{font:600 11px/1 var(--mono);padding:6px 9px;border-radius:var(--r-tel);cursor:pointer; background:var(--panel2);border:1px solid var(--line);color:var(--fg2)} .quickpick .qp:hover{border-color:var(--line2);color:var(--fg)} .sticky-col{display:flex;flex-direction:column;gap:14px;position:sticky;top:78px; align-self:start} /* ── Launch page compaction (.lp) ────────────────────────────────────────── RapidLaunch-tight: the whole form is scoped under .lp so the density never leaks to other pages. Shorter inputs, smaller labels, tighter fields + panels, compact chips/segments — the premium dense look, same wiring underneath. */ .lp .body{padding:10px 12px} .lp .sticky-col{gap:9px;top:70px} .lp .grid2{gap:10px} .lp .grid2>div{gap:9px} .lp .panel>h2{padding:7px 12px;font-size:11px;letter-spacing:.05em} .lp .field{margin-bottom:8px} .lp label,.lp .lbl{font-size:9px;letter-spacing:.08em;margin-bottom:4px} .lp input:not([type=checkbox]):not([type=radio]),.lp select,.lp textarea{ min-height:33px;padding:6px 10px;font-size:13px;border-radius:var(--r-ctrl)} .lp textarea{min-height:46px;line-height:1.3} .lp select{background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px;padding-right:30px} .lp .field .help,.lp .help{font-size:10px;margin-top:3px;line-height:1.35} .lp .grid3{gap:8px} .lp .btn{min-height:31px;padding:6px 13px;font-size:12.5px} .lp .chip{padding:5px 9px;font-size:11.5px;min-height:0} .lp .seg button{padding:5px 11px;font-size:11.5px} .lp .preset{padding:5px 9px;font-size:12px} .lp .preset.ghost{padding:5px 9px} .lp .switch{font-size:12px;gap:7px} .lp .switch input[type=checkbox]{width:32px!important;height:18px!important} .lp .switch input[type=checkbox]::after{width:13px;height:13px} .lp .switch input[type=checkbox]:checked::after{transform:translateX(14px)} .lp .presetrow{margin-bottom:6px;gap:5px} /* SOCIALS · VANITY MINT · pump.fun all ride ONE line — never wrap the venue chip to its own row. nowrap + tight gaps keep it inline even in the narrow vamp popup column. */ .lp .row.toglrow{gap:11px!important;margin:0 0 9px!important;flex-wrap:nowrap!important; align-items:center} .lp .toglrow .switch{font-size:11px;gap:6px;white-space:nowrap;min-width:0} .lp .toglrow .switch input[type=checkbox]{width:30px!important;height:17px!important} .lp .toglrow .switch input[type=checkbox]::after{width:12px;height:12px} .lp .toglrow .switch input[type=checkbox]:checked::after{transform:translateX(13px)} /* the venue picker is a compact chip pinned to the right of the same line */ .lp .toglrow .venuepick{margin-left:auto;flex:none} .lp .toglrow .venuedd-btn{padding:3px 7px;gap:4px;font-size:11.5px;border-radius:var(--r-tel)} .lp .toglrow .venuedd-btn .vlogo{width:14px;height:14px} .lp .toglrow .venuedd-btn .vddname{font-size:11.5px;font-weight:600} .lp .toglrow .venuedd-btn .vddchev{font-size:8px} /* roadmap modes — visible but honestly disabled ('soon'), same pattern as the soon launch venues. No dead functional buttons in a live-money form. */ .lp .modechips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px} .lp .modechip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px; background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-ctrl); font:600 11.5px/1 var(--sans);color:var(--fg2)} .lp .modechip.soon{opacity:.6;cursor:not-allowed} .lp .modechip .mc-soon{font:800 8px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase; color:var(--acc);background:var(--amber-dim);border-radius:4px;padding:2px 4px} /* ── Mobile flow ──────────────────────────────────────────────────────────── On a phone the two columns stack into one tall column that scrolls inside the vamp sheet. Compact HARD — small inputs, tight rhythm, no sticky rail — so the whole form fits with minimal scroll. */ @media(max-width:560px){ .lp .body{padding:8px 10px} .lp .panel>h2{padding:6px 10px;font-size:10px} .lp .field{margin-bottom:6px} .lp label,.lp .lbl{font-size:8.5px;margin-bottom:2px} .lp input:not([type=checkbox]):not([type=radio]),.lp select,.lp textarea{ min-height:30px;padding:5px 9px;font-size:12.5px;border-radius:var(--r-tel)} .lp textarea{min-height:36px;line-height:1.25} .lp select{background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px} .lp .grid3{gap:6px} .lp .grid2,.lp .grid2>div{gap:8px} .lp .sticky-col{position:static;top:auto;gap:8px} .lp .btn{min-height:30px;padding:6px 12px} .lp #go{min-height:38px;margin-top:2px} .lp .preset{padding:4px 8px;font-size:11.5px;min-height:0} .lp .presetrow{gap:5px;margin-bottom:5px} .lp .seg button{padding:4px 9px;font-size:11px} .lp .modechips{gap:5px;margin:0 0 7px} .lp .modechip{padding:4px 8px;font-size:11px} .lp .row.toglrow{margin:0 0 7px!important} /* the whole form loses its bottom mini-note walls on mobile (global .help is already hidden) — keep only the last preflight reassurance under Launch */ .lp .mini{font-size:10px;margin-top:5px} } .lp .panel{margin-bottom:0} /* the launch CTA gets a subtle sheen sweep (borrowed from the design bank's shine-hover pattern), rebuilt natively so it stays premium and dependency-free */ .lp #go{position:relative;overflow:hidden} .lp #go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg);transition:left .5s ease} .lp #go:hover::after{left:130%} /* "What happens" — a clean numbered-steps info card: each step is a gray card row with an amber numeral badge, so the launch sequence reads at a glance */ .seq{margin:0;padding:12px;display:grid;gap:7px;font-size:12.5px;line-height:1.45; list-style:none;counter-reset:seq} .seq li{position:relative;counter-increment:seq;padding:11px 13px 11px 42px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); color:var(--fg2)} .seq li::before{content:counter(seq);position:absolute;left:11px;top:10px; width:21px;height:21px;border-radius:var(--r-tel);background:var(--amber-dim);color:var(--acc); display:grid;place-items:center;font:700 11px/1 var(--mono)} .seq b{color:var(--fg)} .rulerow{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start; font-size:13px} .rulerow b{color:var(--fg)} .rulerow span{color:var(--fg2);line-height:1.5} .rulerow.warn b{color:var(--hot)} /* ── status bar ────────────────────────────────────────────────────────── */ .statusbar{position:fixed;bottom:0;left:0;right:0;height:30px;z-index:30; background:#0a0a0e;border-top:1px solid var(--line);display:flex; align-items:center;gap:14px;padding:0 12px;font:11px/1 var(--sans); color:var(--dim)} .statusbar .sb{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .statusbar b{font-family:var(--mono);color:var(--fg2);font-weight:500} .statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--up)} .statusbar .dot.off{background:var(--down)} .statusbar a:hover{color:var(--fg)} .statusbar .unitsb{cursor:pointer;user-select:none} .statusbar .unitsb:hover b{color:var(--acc)} .statusbar .unitsb b{min-width:30px;text-align:center} /* Any dual-unit value: tappable, hints at the swap on hover without shouting. */ .dualval{cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .12s,color .12s} .dualval:hover{border-bottom-color:var(--line);color:var(--acc)} main{padding-bottom:38px} /* ── toast ─────────────────────────────────────────────────────────────── */ #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px); background:var(--panel2);border:1px solid var(--line2);color:var(--fg); padding:11px 18px;border-radius:var(--r-sm);font-size:13px;opacity:0; transition:transform .2s,opacity .2s;z-index:50;pointer-events:none; box-shadow:0 8px 30px rgba(0,0,0,.5)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* Followed-wallet activity as a stack of dismissible toast cards, top-right. */ #alertToasts{position:fixed;top:64px;right:16px;z-index:60;display:flex; flex-direction:column;gap:8px;width:280px;max-width:calc(100vw - 32px);pointer-events:none} .atoast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;position:relative; background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-card); padding:11px 30px 11px 12px;box-shadow:0 10px 34px rgba(0,0,0,.5); opacity:0;transform:translateX(18px);transition:opacity .2s,transform .2s} .atoast.in{opacity:1;transform:translateX(0)} .atoast .at-ico{font-size:17px;line-height:1.2;flex:none} .atoast .at-b{min-width:0;flex:1} .atoast .at-top{display:flex;align-items:center;gap:7px;font-size:13px} .atoast .at-top b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .atoast .at-sub{font-size:12px;color:var(--fg2);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap} .atoast-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border:0;background:transparent; color:var(--dim);cursor:pointer;font-size:11px;border-radius:var(--r-tel);line-height:1} .atoast-x:hover{background:rgba(255,255,255,.08);color:var(--fg)} @media(max-width:520px){#alertToasts{top:auto;bottom:74px;right:12px;left:12px;width:auto}} /* Premium page-in: the content settles up once per load. .wrap mounts once per navigation, so this never re-fires on a data refresh. */ @media (prefers-reduced-motion: no-preference){ /* NOT "both": a filling animation on `transform` (even one that resolves to none at rest) permanently turns .wrap into a containing block for every position:fixed descendant inside it — which orphaned #filterSheet off- viewport (it renders inline in feed_page's markup, unlike every other modal, which lives outside .wrap). `to` already matches .wrap's resting state, so dropping the fill-mode is a no-op visually and removes the trap. */ .wrap{animation:pagein .34s cubic-bezier(.2,.7,.3,1)} } @keyframes pagein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* Honour a viewer who asks for less motion — kill animations + transitions. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Themed scrollbars so the main scroll reads on-brand, not as a raw OS bar. The strip scrollbars that opt out (.tabbar, .kanban…) keep their higher-specificity `display:none` and stay hidden. */ *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:var(--r-ctrl); border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box} /* On-brand text selection. */ ::selection{background:var(--acc);color:var(--acc-ink)} /* Pull-to-refresh indicator — a spinner that pulls down from behind the header on touch. Desktop never sees it. */ #ptr{display:none;position:fixed;top:calc(6px + env(safe-area-inset-top)); left:calc(50% - 18px);width:36px;height:36px;border-radius:50%;z-index:41; align-items:center;justify-content:center;background:var(--panel2); border:1px solid var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.45); transform:translateY(-52px);opacity:0} #ptr svg{width:19px;height:19px;color:var(--acc);transition:transform .2s} #ptr.ready svg{transform:rotate(-180deg)} #ptr.spin svg{animation:ptrspin .7s linear infinite} @keyframes ptrspin{to{transform:rotate(360deg)}} @media (hover:none){#ptr{display:flex}} @media (prefers-reduced-motion:reduce){#ptr{transition:none}#ptr.spin svg{animation:none}} /* Coarse-pointer (touch): meet the ~44px tap-target floor without bloating the desktop layout. Scoped to block-level controls so it never reshuffles inline rows. */ @media (hover:none){ .tab{min-height:44px;padding-left:12px;padding-right:12px} /* the base .btn (36px) was missing from this floor entirely while .btn.sm (32px) was bumped to 40px — the "small" variant rendered TALLER than the regular one on touch. Regular now clears the same 44px floor everything else in this block targets; sm keeps its own smaller-but-still-safe 40px, so the size ordering is correct again. */ .btn{min-height:44px} .btn.sm{min-height:40px} .iconbtn{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center} .claimopt,.venuedd-opt,.botab,.hs-mode{min-height:44px} .hstat-tap{min-height:42px} .ico{padding:8px 9px} /* standalone tap controls that were well under 44px on touch */ .bell,.searchbtn,.avatarbtn{width:42px;height:42px} .runhunt{min-width:40px;min-height:40px} /* micro icons in cards (social / edit-pen) — a bigger hit area without bloating the row: pad the tap zone, keep the glyph size */ .soci,.tnpen,.lc-more{min-width:34px;min-height:34px;display:inline-flex; align-items:center;justify-content:center} } @media(max-width:560px){ /* fixed-width mint inputs (Tools/Intel) forced their button to wrap and could bleed a 360px screen — let flex shrink them */ #mint{min-width:0!important} /* stack the 150px-label / text rows in the vault "how your wallets work" list */ .rulerow{grid-template-columns:1fr;gap:5px} } /* our own cookie consent — shown once, choice stored, sits above the status bar */ #cookieBar{position:fixed;left:14px;bottom:40px;z-index:60;width:min(460px,calc(100vw - 28px)); display:flex;gap:14px;align-items:center;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r-card);padding:13px 15px; box-shadow:0 18px 50px rgba(0,0,0,.55)} #cookieBar[hidden]{display:none} .ck-body{flex:1;min-width:0} .ck-body b{font-size:13px} .ck-body p{margin:3px 0 0;font-size:11.5px;color:var(--fg2);line-height:1.5} .ck-acts{display:flex;gap:8px;flex:none} @media(max-width:820px){#cookieBar{bottom:70px}} @media(max-width:560px){#cookieBar{flex-direction:column;align-items:stretch; left:10px;right:10px;width:auto;gap:10px} .ck-acts{justify-content:flex-end}} .spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line2); border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} /* ── mobile overrides: LAST in the sheet on purpose ───────────────────── Every rule below exists to beat a desktop rule. At equal specificity CSS gives it to whichever comes last, so anything here that sits earlier in the file loses without warning. The status bar kept covering the tab bar for exactly that reason. */ /* ── phones ──────────────────────────────────────────────────────────────── The only mobile rule used to be "stack the sidebar on top", which put twelve nav items, each with a description line, above the content. On a phone that is a full screen of navigation before the first coin. Traders open this to look at coins, so the nav becomes a compact horizontal strip and the page starts with data. */ @media(max-width:820px){ /* grid-template-ROWS matters here: the shell is min-height:100vh, so once it becomes a single column its two auto rows stretch to share that height and the nav strip floats in a 110px band of empty screen. Pin the nav to its content and give the remainder to the page. */ /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr) and auto means "at least as wide as my content", so the 6712px wire lane stretched the column past the screen and shoved every row sideways. This one keyword is why the whole app looked shifted and cut off on a phone. */ .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr; align-content:start} #main,#main>.wrap{min-width:0;max-width:100vw} main{grid-column:1} /* single column on mobile — undo the desktop col-2 pin */ /* Five fixed tabs, no scrolling. A nav you have to swipe to see is a nav that hides half the app: every option has to be visible at rest. The other four pages live behind More, which is a sheet, not a sixth tab. */ nav.side{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;z-index:30; border-right:0;border-top:1px solid var(--line);border-bottom:0; background:rgba(10,10,14,.97);backdrop-filter:blur(12px); /* reset the desktop sidebar's column direction — the bottom bar is a horizontal row of tabs, not a vertical stack */ overflow:visible;display:flex;flex-direction:row;gap:0; padding:0 0 env(safe-area-inset-bottom)} nav.side .brand,.navgroup,.navuser{display:none} /* the desktop col-2 pin + hover-reveal descriptions don't apply on the mobile bottom bar — the item label + its tiny description show together, centered */ nav.side a small{display:none} nav.side a{flex:1 1 0;min-width:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px; padding:9px 2px 8px;border:0;border-radius:0;white-space:nowrap; font:600 9.5px/1 var(--sans);color:var(--dim);position:relative} nav.side a .i{width:20px;height:20px} nav.side a.on{color:var(--acc);background:transparent} /* the active mark sits ON the tab, not as a border that shifts the row */ nav.side a.on::before{content:"";position:absolute;top:0;left:22%;right:22%; height:2px;background:var(--acc);border-radius:0 0 3px 3px} nav.side a small,nav.side a .keyed{display:none} /* only the five primaries; the rest are in the sheet */ /* ONE line. A newline inside a selector is a descendant combinator, so the wrapped version read as "any descendant that is not /vault" and hid the icon and label inside every tab that survived. */ /* the wallets tab is /vault hosted and /wallets locally, so BOTH are named here: only one of them is ever in the nav to begin with. Naming just /vault left the local build with four tabs and no wallets. */ nav.side a:not([href="/"]):not([href="/launches"]):not([href="/hunt"]):not([href="/launch"]):not([href="/vault"]):not([href="/wallets"]){display:none} .moretab{display:flex;flex:1 1 0;min-width:0;flex-direction:column; align-items:center;justify-content:center;gap:3px;padding:9px 2px 8px; background:none;border:0;cursor:pointer;color:var(--dim); font:600 9.5px/1 var(--sans)} .moretab .i{width:20px;height:20px} /* the custody note is a paragraph; in a horizontal strip it is a wall of text between the nav and the content. The full version lives on /vault. */ nav.side .safety{display:none} /* header.top is sticky AND the nav above it is sticky, so on a phone two bars would compete for the top of the screen. The header keeps its place in flow and the nav strip is the thing that stays. */ /* GRID header, not flex-wrap — flex-wrap let the bell + avatar stack into a tall column and stretch the banner. Grid pins it: row 1 = [logo | title | bell avatar], row 2 = [search full width]. It cannot misbehave. */ header.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"brand title actions" "search search search"; gap:12px 10px;align-items:center;position:static; padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left)); background:transparent;backdrop-filter:none;border-bottom:1px solid var(--line)} header.top h1{font-size:18px} header.top p{font-size:11.5px} header.top .hbrand{grid-area:brand;display:flex} header.top .htxt{grid-area:title;min-width:0} header.top .hright{grid-area:actions;display:flex;flex-direction:row; align-items:center;gap:10px;margin:0;border-left:0;padding-left:0} header.top .hright .bell,header.top .avatarbtn{width:40px;height:40px} header.top .search,header.top .searchbtn{grid-area:search;width:100%; max-width:none;min-width:0} header.top .search input{min-height:44px;font-size:15px} header.top .hstats{display:none} /* per-page stats live in the body on mobile */ /* content breathes less on a small screen, and the fixed status bar must not sit on top of the last row of whatever you are reading */ /* clear the tab bar, not the status bar */ main{padding:12px max(13px,env(safe-area-inset-right)) calc(74px + env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left))} /* build id, rpc latency and book counts are operator telemetry. On a phone they cost the one row a thumb can actually reach. */ .statusbar{display:none} .panel .body,.panel.tight .body{padding:11px} .statusbar{padding-bottom:env(safe-area-inset-bottom)} .toolbar{gap:6px} /* the total/dust chips are secondary and rendered as orphan "—" buttons on a phone before they populate; the header already carries the balance */ .toolbar .dimchip{display:none} /* ── GMGN two-tone on mobile ──────────────────────────────────────────── Near-black page with GRAY HIGHLIGHT CARDS on the items. Section headers stay as small labels on black; the list items — coins, runner rows, the stat cluster — sit on gray so they pop off the page and read as tappable. This is the look Jay pointed at in GMGN. */ /* NOT overflow-x:hidden — that makes body a scroll container and breaks wheel-scroll (already fixed once: html,body must stay overflow-x:clip). */ html,body{overflow-x:clip} #main>.wrap{padding:4px 10px} .panel{background:none;border:0;border-radius:0;margin:0 0 10px} .panel>h2{background:none;border-bottom:0;padding:12px 4px 8px; font-size:10px;letter-spacing:.11em;color:var(--dim)} .panel .body,.panel.tight .body{padding:0} .panel-foot{background:none;border-top:0;padding:9px 4px 2px} /* the Top-runners explainer is two lines of prose above the data on a phone — the row already shows the state it describes */ #runFoot{display:none} /* the stat cluster is one gray card */ .stats{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); padding:11px 11px;gap:9px;margin:0 0 8px} .stat{background:none;border:0;border-radius:0;padding:0;min-width:0} .stat b{font-size:18px} .stat span{overflow:hidden;text-overflow:ellipsis} /* top-runner rows become gray list-item cards, spaced like GMGN's list */ .runlist{gap:7px} .runrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); padding:10px 12px} .tapeline{padding:9px 4px} .tw table tbody tr{padding:10px 12px} .livestrip{padding:2px 0 10px} .toolbar{padding:0 4px} header.top{padding:10px 14px;border-bottom:1px solid var(--line)} /* ── polish pass, from a real phone ───────────────────────────────────── Everything below is something that broke on a 390px screen and read as sloppy rather than dense. */ /* "LIVE OFF THE WIRE" was stacking one word per line, because the header is a flex row and the title had nothing stopping it from being squeezed to nothing by the status text beside it. The title keeps its line; the detail beside it yields. */ .panel>h2{flex-wrap:wrap;padding:9px 12px;gap:6px;row-gap:3px} .panel>h2>:first-child{white-space:nowrap} /* Filters button rides up onto the title row; the live-status line drops to its own row below it, so the header reads [title count … Filters] / [● LIVE …]. */ .panel>h2 #liveState{order:9;flex-basis:100%;margin-left:0} /* Buy-panel header controls wrap; the verbose fee triplet is dropped (it bled off the right edge) — the detail is one tap away in the Fees popover. */ .panel>h2 .hbtns{flex-wrap:wrap;justify-content:flex-end} .hbtns #txSummary{display:none} /* tighter vertical rhythm so more of the wire fits before a scroll */ .panel{margin-bottom:8px} .panel>h2 .hint{margin-left:auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;max-width:58%} .panel>h2 .hdrnum{min-width:0;line-height:1.45} /* Three equal columns that actually FIT a phone: minmax(0,1fr) lets a column shrink below its content instead of overflowing the screen. The label stays one line and ellipses; the sub-line WRAPS and breaks inside its own column (overflow-wrap:anywhere) instead of spilling into the neighbour and off the right edge — that bleed was a sub-line rendering on one line wider than its column with overflow visible. overflow:hidden on the tile is the backstop. */ .stats{align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px; max-width:100%} .stat{display:flex;flex-direction:column;min-width:0;overflow:hidden} .stat b{font-size:17px} .stat span{letter-spacing:.02em;font-size:8.5px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* One clean ellipsised line — wrapping to two lines just made the cockpit taller and the mid-word cut ("…snip") read as broken. */ .stat small{margin-top:2px;padding-top:2px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; font-size:9px;line-height:1.25} /* the "open" chip was dropping onto its own line and off the bottom of the row. The detail line scrolls sideways instead of breaking. */ .tapeline{padding:7px 12px;gap:8px} .tapeline .tw2{display:flex;align-items:center;gap:6px;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;padding-bottom:1px} .tapeline .tw2::-webkit-scrollbar{display:none} .tapeline .tw2 .venue{flex:none} /* the coin's art was drowning its own ticker on a 132px card */ .lbg{opacity:.18} .livecard{min-width:126px} .hdrdetail{display:none} .lbl-long{display:none} /* Put the coins FIRST. The wire, the meta and the runner board were four widgets and ~900px of preamble before the list anyone opened the page for. They are context, so they follow it. Ordering rather than hiding: nothing is lost, it is just no longer in front. */ /* the panels live in main > .wrap, not directly under main. SCOPED to the Discover page (data-page="/"), because a generic order here reordered every other page's panels too, it floated the coin page's Flow/Position grid above its own header. */ /* :has(#stats) matches ONLY the Discover page, the coin page reuses active="/" for its nav highlight but has #head, not #stats, so it is no longer caught by these ordering rules. */ #main:has(#stats)>.wrap{display:flex;flex-direction:column} #main:has(#stats)>.wrap>.stats{order:1} #main:has(#stats)>.wrap>.grid2{order:2} #main:has(#stats)>.wrap>.panel{order:3} #main:has(#stats)>.wrap>*{order:4} /* ── screen budget ────────────────────────────────────────────────────── GMGN fits five coins on a phone screen. We were fitting three summary numbers. Everything below buys vertical space back. */ /* 1. The three headline stats are a glance, not a section. One row. */ .stats{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-bottom:12px} .stat{padding:10px} .stat b{font-size:17px;gap:4px} .stat span{font-size:8.5px;letter-spacing:.06em;margin-top:4px} .stat small{font-size:9.5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;margin-top:2px} /* 2. Coin cards become rows. The art moves to a 44px thumbnail on the left, the ticker and numbers sit beside it, and the full-bleed watermark goes: on a phone it is a decorative background costing 200px of reading space. */ .cards{grid-template-columns:1fr;gap:8px} .coin{border-radius:var(--r)} /* The art and the fire STAY on a phone. They are what makes a card a coin rather than a spreadsheet row, and this is a memecoin terminal. They are tuned for the smaller card instead of deleted: the watermark sits lower so it reads behind the numbers, and the flames travel the shorter height. */ .coin-bg{opacity:.26} .flames{--riseScale:.5} .flame{font-size:11px} .coin-body{padding:10px;gap:7px} .coin-top{min-height:0;gap:9px;align-items:center} .coin h3{font-size:14px} .coin .sub{font-size:11px} .avatar{width:40px;height:40px} /* four facts in a 2x2 block became four rows; keep them on one line each */ .coin-facts{grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11.5px} .fact b{font-size:11.5px} .venueline,.press{display:none} .coin .rowacts,.coin-actions{gap:6px} /* 3. Filters are a control, not a screen. Chain chips become one scrolling row, the three numbers sit inline, and the explanatory sentence goes: it was three lines of prose above the data people came for. */ .panel .body>.row#chains,#chains{display:flex;flex-wrap:nowrap;overflow-x:auto; gap:6px;padding-bottom:4px;scrollbar-width:none} #chains::-webkit-scrollbar{display:none} #chains>*{flex:none} .grid3{grid-template-columns:repeat(3,1fr);gap:7px} .grid3 .field label{font-size:8.5px;letter-spacing:.05em} .grid3 .field input{min-height:30px;font-size:12px;padding:5px 7px} .help{display:none} /* Tighter forms on a phone — the launch form's field rhythm ate the screen. */ .field{margin-bottom:9px} label,.lbl{margin-bottom:4px} textarea{min-height:64px} .field .help{margin-top:3px} /* 4. A wide table on a 390px screen chopped its last columns mid-number. Each row becomes two lines instead: what it is on top, what it is doing underneath. Scoped per table, because these two carry different columns in different orders and one shared rule mangled whichever it was not written for. */ /* Vault wallets → a COMPACT two-line row on a phone (not a bulky card): row 1 = label + balance, row 2 = address + actions. The dev-buy input is dropped here — it's set on the Launch/Bundle page, and was blank on custody. */ .tw table.wcards thead{display:none} .tw table.wcards{background:none} .wcards tbody tr{display:grid;grid-template-columns:1fr auto;gap:3px 10px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:8px 11px;margin-bottom:6px;align-items:center;cursor:default!important} .wcards tbody td{padding:0!important;border:0!important;white-space:nowrap;min-width:0} .wcards tbody td:nth-child(1){grid-row:1;grid-column:1;font-weight:600;font-size:13.5px} .wcards tbody td:nth-child(3){grid-row:1;grid-column:2;justify-self:end} .wcards tbody td:nth-child(2){grid-row:2;grid-column:1;color:var(--dim);font-size:11px} .wcards tbody td:nth-child(4){display:none} .wcards tbody td:nth-child(5){grid-row:2;grid-column:2;justify-self:end} .wcards .rowacts{display:flex;gap:15px;opacity:1} .wcards td.empty{grid-column:1/-1;text-align:center;padding:14px!important} /* Crew holdings → 2-line card: token + value / who + position. */ .tw table.holds thead{display:none} .tw table.holds{background:none} .holds tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:8px 11px;margin-bottom:6px} .holds tbody td{padding:0!important;border:0!important;white-space:nowrap;min-width:0} .holds tbody td:nth-child(1){grid-row:1;grid-column:1;font-weight:600;overflow:hidden;text-overflow:ellipsis} .holds tbody td:nth-child(4){grid-row:1;grid-column:2;justify-self:end;font-weight:600} .holds tbody td:nth-child(2){grid-row:2;grid-column:1;color:var(--dim);font-size:11px} .holds tbody td:nth-child(3){grid-row:2;grid-column:2;justify-self:end;color:var(--dim);font-size:11px} .holds td.empty{grid-column:1/-1!important;text-align:center;padding:14px!important} /* Hunt ledger → 2-line card: [type coin result] / [status called→now peak]. */ .tw table.ledger thead{display:none} .tw table.ledger{background:none} .ledger tbody tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:8px 11px;margin-bottom:6px;align-items:baseline} .ledger tbody td{padding:0!important;border:0!important;white-space:nowrap;min-width:0} .ledger tbody td:nth-child(1){grid-row:1;grid-column:1} .ledger tbody td:nth-child(2){grid-row:1;grid-column:2;font-weight:600;overflow:hidden;text-overflow:ellipsis} .ledger tbody td:nth-child(6){grid-row:1;grid-column:3;justify-self:end;font-weight:600} .ledger tbody td:nth-child(3){grid-row:2;grid-column:1;color:var(--dim);font-size:11px} .ledger tbody td:nth-child(4){grid-row:2;grid-column:2;color:var(--dim);font-size:11px} .ledger tbody td:nth-child(5){grid-row:2;grid-column:3;justify-self:end;color:var(--dim);font-size:11px} .ledger tbody td:nth-child(7){display:none} .ledger td.empty{grid-column:1/-1!important;text-align:center;padding:14px!important} /* Only the tables that HAVE a mobile card reflow (pools/ranks/runners) hide their headers + zero cell padding. Applying this to every .tw table left holds/ledger/dense as header-less, zero-padding rows you had to scroll blind. Those keep their headers and just scroll inside .tw. */ .tw table.pools thead,.tw table.ranks thead,.tw table.runners thead{display:none} .tw table.pools tbody td,.tw table.ranks tbody td,.tw table.runners tbody td{ padding:0;border:0;white-space:nowrap} .tw table.pools tbody td.empty,.tw table.ranks tbody td.empty, .tw table.runners tbody td.empty{grid-column:1/-1;text-align:center;padding:14px} .tw table.pools,.tw table.ranks,.tw table.runners{background:none} /* A pool row now answers the three questions GMGN answers in one glance: what it is, what is being traded, what it is worth. Identity on the left with its own second line, then 1h volume and transaction split, then market cap and the move. */ table.pools tbody tr{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"art name vol mc" "art meta tx chg"; gap:1px 9px;padding:9px 14px;align-items:center; border-bottom:1px solid var(--line)} table.pools tbody td{white-space:nowrap} table.pools tbody td:nth-child(1){grid-area:art} table.pools tbody td:nth-child(2){grid-area:name;grid-row:1/3; font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis; align-self:center} table.pools tbody td:nth-child(3){grid-area:meta;display:none} table.pools tbody td:nth-child(4){grid-area:vol;text-align:right;font-size:12.5px} table.pools tbody td:nth-child(5){grid-area:tx;text-align:right;font-size:12.5px} table.pools tbody td:nth-child(6){display:none} /* liquidity */ table.pools tbody td:nth-child(7){grid-area:mc;text-align:right;font-size:13px} table.pools tbody td:nth-child(8){grid-area:chg;text-align:right;font-size:12px} table.pools tbody td:nth-child(9){display:none} /* the ranking: wallet, tier, 7d PnL, win rate, then the follow control. Tokens, 5x count and the raw address are detail for a wider screen. */ table.ranks tbody tr{display:grid;grid-template-columns:1fr auto; grid-template-areas:"name pnl" "meta act"; gap:3px 10px;padding:10px;align-items:center; border-bottom:1px solid var(--line)} table.ranks tbody td:nth-child(1){grid-area:name;font-size:13.5px;font-weight:600; overflow:hidden;text-overflow:ellipsis} table.ranks tbody td:nth-child(2){grid-area:meta} table.ranks tbody td:nth-child(2) .pill{font-size:9px;padding:2px 6px} table.ranks tbody td:nth-child(3){grid-area:pnl;text-align:right;font-size:14px; font-weight:650} table.ranks tbody td:nth-child(4){grid-area:meta;justify-self:end; font-size:11px;color:var(--dim)} table.ranks tbody td:nth-child(5), table.ranks tbody td:nth-child(6), table.ranks tbody td:nth-child(7){display:none} table.ranks tbody td:nth-child(8){grid-area:act;justify-self:end} table.ranks tbody td:nth-child(8) .btn{padding:5px 10px;font-size:11.5px;min-height:0} /* the runner board: rank, coin, multiple / what it reached, what is left. Left as a raw 8-column table it crushed every number into its neighbour ("$204.8K$84.1K59%"). The multiple is the headline, so it leads. */ table.runners tbody tr{display:grid;grid-template-columns:auto 1fr auto auto; grid-template-areas:"rank name name mult" "rank ath now off"; gap:2px 8px;padding:9px 10px;align-items:center; border-bottom:1px solid var(--line)} table.runners tbody td:nth-child(1){grid-area:rank;font-size:11px} table.runners tbody td:nth-child(2){grid-area:name;font-size:13.5px;font-weight:600} table.runners tbody td:nth-child(3){grid-area:mult;text-align:right;font-size:14px} table.runners tbody td:nth-child(4){display:none} /* "from" */ table.runners tbody td:nth-child(5){grid-area:ath;font-size:11px;color:var(--dim)} table.runners tbody td:nth-child(6){grid-area:now;font-size:11px} table.runners tbody td:nth-child(7){grid-area:off;text-align:right;font-size:11px} table.runners tbody td:nth-child(8){display:none} /* row opens it */ /* the ATH/now pair needs to read as a journey, not two loose numbers */ table.runners tbody td:nth-child(5)::after{content:"→"; margin-left:5px;color:var(--line2)} /* 5. The page header was ~250px before a single row of data: title, a subtitle nobody reads twice, a wallet total the status bar already shows, and the search. Keep the title and the search. */ header.top p{display:none} header.top .hstats{display:none} header.top{padding:9px 14px;gap:8px} .panel>h2{padding:9px 12px;font-size:10px} .panel{margin-bottom:10px} } @media(max-width:430px){ .statusbar{font-size:10px;gap:9px;padding-left:9px;padding-right:9px} }