/* ============================================================
   F-shared — LOW-FI MONOCHROME token-detail system (NEYN-12112)
   Shared by exp-social-F1/F2/F3. Derived from exp-social-F-figma-mono.
   STRICT design system:
     colors = #000 / #888 / #DDD / #FFF only
              + ONE accent blue #0A6CFF, used ONLY on deltas.
     type   = Inter; ONLY 12px and 20px font sizes anywhere.
              hierarchy comes from weight (400/500/600/700), not size.
              (footer wordmark watermark is the one large/#DDD exception.)
   Layout thesis this pass (v30):
     - the SWAP lives ALONE in a narrow right rail (Uniswap/Matcha/Robinhood
       pattern) so nothing scrolls behind it — the old "info scrolls behind the
       pinned swap" bug is gone. Everything that used to sit under the swap now
       lives in the wide left column (F1/F3) or is split masthead↔left (F2).
     - mobile: right rail is hidden; swap becomes a docked bottom CTA that opens
       a full-screen swap sheet (× to close). Page = the left column, single col.
   ============================================================ */
:root{
  --black:#000; --grey:#888; --line:#DDD; --bg:#FFF; --blue:#0A6CFF;
  --font:'Inter', system-ui, -apple-system, sans-serif;
  --maxw:1280px;
  --rail:372px;                  /* narrow right rail = swap width */
  --navh:62px; --sliverh:46px;   /* nav sets --navh in JS to its real height */
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); }
body{ font-family:var(--font); color:var(--black); font-size:12px; line-height:1.5;
      -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.f12{ font-size:12px; } .f20{ font-size:20px; }
button{ font-family:inherit; }

/* ---------- TOPNAV (boxed to maxw) — sticky ---------- */
.topnav{ display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:60; background:var(--bg);
  padding-left:max(20px, calc((100% - var(--maxw))/2));
  padding-right:max(20px, calc((100% - var(--maxw))/2));
  padding-top:14px; padding-bottom:14px; }

/* ---------- COLLAPSED IDENTITY SLIVER (fixed, appears on scroll) ---------- */
.sliver{ position:fixed; top:var(--navh); left:0; right:0; height:var(--sliverh); z-index:55;
  background:var(--bg); border-bottom:1px solid var(--blue);   /* thin blue = new this pass */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-left:max(20px, calc((100% - var(--maxw))/2));
  padding-right:max(20px, calc((100% - var(--maxw))/2));
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; }
.scrolled .sliver{ opacity:1; transform:none; pointer-events:auto; }
.sliver .sl{ font-size:12px; color:var(--grey); display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.sliver .sl b{ font-size:12px; font-weight:700; color:var(--black); }
.sliver .sl .sep{ color:var(--line); }
/* compact Trade button in the sliver — swap is off-screen once you scroll, so keep the action reachable */
.sliver .sltrade{ font-size:12px; font-weight:600; color:var(--bg); background:var(--black);
  border:none; border-radius:7px; padding:7px 14px; cursor:pointer; white-space:nowrap; }

/* ---------- DOCKED TRADE BAR (mobile only) ---------- */
.tradebar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:transparent; align-items:center; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
/* white fade above the floating pill so the feed dissolves under it */
.tradebar::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:36px;
  background:linear-gradient(to top, var(--bg) 0%, rgba(255,255,255,0) 100%); pointer-events:none; }
.tradebar .tb-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--bg); background:var(--black);
  border:none; border-radius:12px; padding:15px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.16); }
.tradebar .tb-btn .swp{ font-size:12px; }
.tradebar .tb-info{ font-size:12px; color:var(--bg); opacity:.72; }

.brand{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  letter-spacing:0.02em; color:var(--black); }
.bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.bars i{ width:2px; background:var(--grey); display:block; }
.bars i:nth-child(1){ height:40%; } .bars i:nth-child(2){ height:70%; } .bars i:nth-child(3){ height:100%; }
.search{ flex:1; min-width:0; max-width:480px; height:34px; border:1px solid var(--line); border-radius:8px;
  display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--grey); font-size:12px; }
.search .mag{ width:12px; height:12px; border:1.5px solid var(--grey); border-radius:50%; position:relative; flex-shrink:0; }
.search .mag::after{ content:""; position:absolute; right:-3px; bottom:-2px; width:5px; height:1.5px; background:var(--grey); transform:rotate(45deg); }
.search .ph{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search .slash{ font-size:12px; color:var(--line); font-weight:600; }
.navspace{ flex:1; }
.navright{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--black); font-weight:500; }
.doc{ width:12px; height:14px; border:1px solid var(--grey); border-radius:2px; position:relative; }
.doc::before,.doc::after{ content:""; position:absolute; left:2px; right:2px; height:1px; background:var(--grey); }
.doc::before{ top:4px; } .doc::after{ top:7px; }

/* ---------- HEADER / MASTHEAD ---------- */
.header{ position:relative; overflow:hidden; padding-top:30px; padding-bottom:26px;
  padding-left:max(22px, calc((100% - var(--maxw))/2));
  padding-right:max(22px, calc((100% - var(--maxw))/2)); }
.chartbg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.chartbg svg{ position:absolute; inset:0; width:100%; height:100%; }
.header > *{ position:relative; z-index:1; }
.hid{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.havatar{ width:48px; height:48px; border-radius:12px; background:var(--line); margin-bottom:10px; }
.hname{ font-size:20px; font-weight:700; color:var(--black); letter-spacing:-0.01em;
  display:flex; align-items:baseline; gap:8px; }
.hname .tk{ font-size:20px; font-weight:600; color:var(--grey); }
.hcontract{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:var(--grey); }
.copy{ width:11px; height:11px; border:1px solid var(--grey); border-radius:2px; position:relative; flex-shrink:0; cursor:pointer; }
.copy::after{ content:""; position:absolute; left:-3px; top:-3px; width:8px; height:8px; border:1px solid var(--grey); border-radius:2px; background:var(--bg); }
.hbadges{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
.hpill{ font-size:12px; font-weight:500; color:var(--grey); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.hchain{ margin-top:10px; font-size:12px; color:var(--grey); }
/* DELTA 1 — launcher identity (BLUE) */
.launchby{ display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font-size:12px; font-weight:600; color:var(--blue);
  border:1px solid var(--blue); border-radius:999px; padding:4px 10px 4px 6px; }
.launchby .sq{ width:14px; height:14px; border-radius:3px; background:var(--line); flex-shrink:0; }
.launchby .new{ font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--blue); }
/* DELTA 2 — Manage button (BLUE), top-right of masthead */
.manage{ position:absolute; top:18px; right:max(22px, calc((100% - var(--maxw))/2)); z-index:3;
  font-size:12px; font-weight:600; color:var(--blue); background:var(--bg);
  border:1px solid var(--blue); border-radius:8px; padding:6px 12px; cursor:pointer; }
/* DELTA 3 — chart expand affordance (BLUE), top-right of chart backdrop */
.chartexp{ position:absolute; top:54px; right:max(22px, calc((100% - var(--maxw))/2)); z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--blue); background:var(--bg);
  border:1px solid var(--blue); border-radius:8px; padding:6px 11px; cursor:pointer; }
/* glance row */
.glance{ display:flex; gap:46px; margin-top:22px; justify-content:center; flex-wrap:wrap; }
.g{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.g .v{ font-size:20px; font-weight:700; color:var(--black); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.g .v .d{ font-size:12px; font-weight:600; color:var(--grey); margin-left:6px; letter-spacing:0; }
.g .k{ font-size:12px; font-weight:500; color:var(--grey); }
/* sliver delta — same grey, so the ± reads as live data not a "new this pass" blue mark */
.sliver .sl .d{ font-weight:600; color:var(--grey); }

/* MASTHEAD MARKET+TRUST STRIP (F2 only — the "distributed" verdict band) */
.mhstrip{ max-width:var(--maxw); margin:22px auto 0; border-top:1px solid var(--line); padding-top:16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; }
.mhstat{ display:inline-flex; align-items:baseline; gap:7px; }
.mhstat .k{ font-size:12px; color:var(--grey); }
.mhstat .v{ font-size:12px; font-weight:700; color:var(--black); font-variant-numeric:tabular-nums; }
.mhsep{ width:1px; height:14px; background:var(--line); }
.mhtrust{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.mhbadge{ font-size:12px; font-weight:600; color:var(--grey); border:1px solid var(--line);
  border-radius:6px; padding:2px 9px; display:inline-flex; align-items:center; gap:5px; }
.mhbadge.ok::before{ content:"✓"; color:var(--black); font-weight:700; }
/* thin-liq flag, inline blue */
.mhstrip .liqflag{ margin-top:0; }

/* ---------- BODY (wide left + narrow swap rail) ---------- */
.body{ display:grid; grid-template-columns:minmax(0,1fr) var(--rail); align-items:stretch; gap:0;
  padding-left:max(0px, calc((100% - var(--maxw))/2));
  padding-right:max(0px, calc((100% - var(--maxw))/2)); }
.col-left{ min-width:0; border-right:1px solid var(--line); padding-bottom:8px; }
.col-right{ min-width:0; }
/* swap alone in the rail — pins under nav+sliver; nothing scrolls behind it now */
/* .rpad must stretch to the full (grid-stretched) col-right height, else the
   sticky card has no room to travel and scrolls away with its tight wrapper */
.rpad{ padding:14px 16px; height:100%; }
.swap-card{ position:sticky; top:calc(var(--navh) + var(--sliverh) + 12px); z-index:5; }

/* section heading inside the left column (used when info boxes move left) */
.lsec{ padding:16px 18px 0; }
.lsec-t{ font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); }

/* ---------- ACTIVITY FEED ---------- */
.activity{ }
.acthead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 12px; }
.actbar{ display:flex; gap:6px; }
.acthead .actcount{ font-size:12px; color:var(--grey); }
.chip{ font-size:12px; font-weight:500; color:var(--grey); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px; cursor:pointer; }
.chip.on{ background:var(--black); color:var(--bg); border-color:var(--black); font-weight:600; }
.actwrap{ position:relative; }
.actlist{ padding:0 0 6px; }
.row{ display:grid; grid-template-columns:16px 1fr auto 36px; gap:10px; align-items:center;
  padding:11px 18px; border-top:1px solid var(--line); }
.row .sq{ width:16px; height:16px; border-radius:4px; background:var(--line); flex-shrink:0; }
.row .txt{ min-width:0; font-size:12px; line-height:1.45; }
.row .txt b{ font-weight:700; color:var(--black); }
.row .txt span{ color:var(--grey); }
.row .amt{ font-size:12px; font-weight:600; color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.row .time{ font-size:12px; color:var(--grey); text-align:right; white-space:nowrap; }

/* CAP mode (F1/F2): capped height + fade + Expand toggle */
.activity.cap .actlist{ max-height:452px; overflow:hidden; }
.activity.cap.expanded .actlist{ max-height:none; }
.activity.cap .actwrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%); pointer-events:none; }
.activity.cap.expanded .actwrap::after{ display:none; }
.act-expand{ display:none; width:100%; text-align:center; font-size:12px; font-weight:600; color:var(--blue);
  background:var(--bg); border:none; border-top:1px solid var(--line); padding:12px; cursor:pointer; }
.activity.cap .act-expand{ display:block; }

/* FIXED mode (F3 / Uniswap): fixed-height internal scroll, loads more, never grows */
.activity.fixed .actlist{ height:400px; overflow-y:auto; }
.activity.fixed .actwrap::after{ display:none; }
.activity.fixed .act-expand{ display:none; }

/* ---------- CARDS / GROUPS ---------- */
.card{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg); }
.ctitle{ font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--grey); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kv{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--line); }
.kv:first-of-type{ border-top:none; }
.kv .k{ font-size:12px; color:var(--grey); }
.kv .v{ font-size:12px; font-weight:600; color:var(--black); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kv .v .mut{ color:var(--grey); font-weight:500; }
.tag{ font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--grey); border:1px solid var(--line); border-radius:4px; padding:1px 7px; }
.clink{ font-size:12px; font-weight:600; color:var(--grey); }

/* SWAP */
.swaptabs{ display:flex; gap:6px; margin-bottom:12px; }
.swaptab{ font-size:12px; font-weight:600; color:var(--black); border:1px solid var(--line);
  border-radius:8px; padding:6px 14px; cursor:pointer; }
.swaptab.off{ color:var(--grey); }
.pay{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.pay .lbl{ font-size:12px; color:var(--grey); }
.pay .row2{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.pay .num{ font-size:20px; font-weight:600; color:var(--grey); font-variant-numeric:tabular-nums; }
.pay .cur{ font-size:12px; font-weight:600; color:var(--grey); display:inline-flex; align-items:center; gap:4px; }
.swaparrow{ width:30px; height:30px; margin:-3px auto 5px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--grey); font-size:12px; background:var(--bg); }
.chips{ display:flex; gap:6px; margin:10px 0 12px; }
.qchip{ flex:1; text-align:center; font-size:12px; font-weight:500; color:var(--grey);
  border:1px solid var(--line); border-radius:6px; padding:6px 0; cursor:pointer; }
.connect{ width:100%; text-align:center; font-size:12px; font-weight:600; color:var(--black);
  border:1px solid var(--grey); background:var(--bg); border-radius:8px; padding:11px; cursor:pointer; }

/* blue grouping containers + labels */
.group{ border:1px solid var(--blue); border-radius:14px; padding:11px; }
.glabel{ font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--blue); margin-bottom:9px; padding:0 3px; }
.group .card + .card{ margin-top:11px; }
.group .origin + .card, .group .card + .origin{ margin-top:11px; }

/* DELTA 5 — thin-liquidity / slippage flag (BLUE) */
.liqflag{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; padding:7px 9px;
  border:1px solid var(--blue); border-radius:8px; font-size:12px; font-weight:500; color:var(--blue); }
.liqflag .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; }

/* DELTA 6 — top-holders ranked mini-list (BLUE) */
.holders-d{ margin-top:4px; }
.hrow{ display:grid; grid-template-columns:14px 1fr auto; gap:9px; align-items:center; padding:6px 0; }
.hrow .rank{ font-size:12px; font-weight:700; color:var(--blue); text-align:right; }
.hrow .who{ font-size:12px; color:var(--blue); min-width:0; }
.hrow .who .lab{ font-size:12px; font-weight:600; color:var(--blue); border:1px solid var(--blue);
  border-radius:4px; padding:0 5px; margin-left:6px; }
.hrow .pct{ font-size:12px; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; }
.hrow.sys .who, .hrow.sys .rank, .hrow.sys .pct{ font-weight:400; opacity:0.62; }
.hview{ font-size:12px; font-weight:600; color:var(--blue); margin-top:6px; display:inline-block; }

/* DELTA 7 — Launch origin card (BLUE) */
.origin{ border:1px solid var(--blue); border-radius:12px; padding:13px; }
.origin .ot{ font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--blue); margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.origin .ocast{ display:flex; gap:10px; align-items:flex-start; }
.origin .osq{ width:28px; height:28px; border-radius:6px; background:var(--line); flex-shrink:0; }
.origin .obody{ min-width:0; font-size:12px; color:var(--blue); }
.origin .ohandle{ font-weight:700; color:var(--blue); }
.origin .oview{ font-size:12px; font-weight:600; color:var(--blue); white-space:nowrap; }

/* two-up grid for left-column info boxes on wide screens */
.linfo{ padding:14px 18px 4px; display:grid; gap:14px; }
.linfo.two{ grid-template-columns:1fr 1fr; align-items:start; }
.linfo .span2{ grid-column:1 / -1; }

/* ---------- MANAGE DRAWER (injected by f-manage.js) ---------- */
.mbackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:79; opacity:0;
  pointer-events:none; transition:opacity .2s ease; }
.mbackdrop.open{ opacity:1; pointer-events:auto; }
.mdrawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px, 100%); z-index:80;
  background:var(--bg); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1); }
.mdrawer.open{ transform:none; }
.mdhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.mdhead .mt{ font-size:20px; font-weight:700; color:var(--black); }
.mdhead .msub{ font-size:12px; color:var(--grey); margin-top:4px; display:flex; align-items:center; gap:6px; }
.mdhead .mwallet{ font-weight:600; color:var(--blue); }
.mdx{ font-size:20px; line-height:1; color:var(--grey); background:none; border:none; cursor:pointer; padding:2px 4px; }
.mdbody{ overflow-y:auto; padding:8px 20px 28px; }
.msec{ padding:15px 0; border-bottom:1px solid var(--line); }
.msec:last-child{ border-bottom:none; }
.msec .mst{ font-size:12px; font-weight:700; color:var(--black); display:flex; align-items:center; gap:8px; }
.msec .mdesc{ font-size:12px; color:var(--grey); margin-top:4px; line-height:1.5; }
.msec .mctl{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mfield{ flex:1; min-width:0; height:34px; border:1px solid var(--line); border-radius:8px;
  padding:0 11px; font-size:12px; color:var(--black); font-family:inherit; }
.mfield::placeholder{ color:var(--grey); }
.mbtn{ font-size:12px; font-weight:600; color:var(--bg); background:var(--black); border:none;
  border-radius:8px; padding:9px 16px; cursor:pointer; white-space:nowrap; }
.mbtn.ghost{ color:var(--black); background:var(--bg); border:1px solid var(--grey); }
.mflag{ font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  border-radius:4px; padding:1px 7px; }
.mflag.live{ color:var(--grey); border:1px solid var(--line); }
.mflag.perm{ color:var(--grey); border:1px solid var(--line); }
.mflag.prop{ color:var(--blue); border:1px solid var(--blue); }
.msec.proposed{ border:1px solid var(--blue); border-radius:12px; padding:14px; margin-top:14px; }
.mtoggle{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--blue); font-weight:600; }
.mtoggle .sw{ width:30px; height:17px; border-radius:999px; border:1px solid var(--blue); position:relative; }
.mtoggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--blue); }

/* ---------- MOBILE SWAP SHEET (injected by f-app.js) ---------- */
.ssbackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:69; opacity:0;
  pointer-events:none; transition:opacity .2s ease; }
.ssbackdrop.open{ opacity:1; pointer-events:auto; }
.swapsheet{ position:fixed; left:0; right:0; bottom:0; z-index:70; height:92vh; max-height:92vh;
  background:var(--bg); border-top-left-radius:18px; border-top-right-radius:18px;
  border-top:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); }
.swapsheet.open{ transform:none; }
.sshead{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.sshead .swaptabs{ margin-bottom:0; }
.ssx{ font-size:20px; line-height:1; color:var(--grey); background:none; border:none; cursor:pointer; padding:2px 4px; }
.ssbody{ overflow-y:auto; padding:16px 18px calc(20px + env(safe-area-inset-bottom)); }

/* toast */
.ftoast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:99;
  font-size:12px; font-weight:600; color:var(--bg); background:var(--black); border-radius:8px;
  padding:11px 18px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.ftoast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- FOOTER ---------- */
.footer{ position:relative; overflow:hidden; margin-top:30px; padding-top:36px;
  padding-left:max(20px, calc((100% - var(--maxw))/2));
  padding-right:max(20px, calc((100% - var(--maxw))/2)); }
.fcols{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr 1.3fr; gap:24px; }
.fcol .fh{ font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.fcol .fprice{ font-size:12px; color:var(--grey); }
.fclank{ display:inline-block; margin-top:10px; font-size:12px; font-weight:600; color:var(--bg);
  background:var(--black); border-radius:8px; padding:8px 14px; cursor:pointer; }
.fcol a, .fcol .fl{ display:block; font-size:12px; color:var(--grey); margin-bottom:6px; }
.fdisc{ position:relative; z-index:1; margin-top:24px; font-size:12px; color:var(--grey); max-width:var(--maxw); line-height:1.6; }
.watermark{ position:relative; z-index:0; margin-top:8px; text-align:center;
  font-size:200px; font-weight:700; letter-spacing:0.02em; color:var(--line); line-height:0.8;
  user-select:none; pointer-events:none; overflow:hidden; }

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .body{ grid-template-columns:1fr; }        /* single column = the left column */
  .col-left{ border-right:none; }
  .col-right{ display:none; }                 /* swap rail hidden on phone */
  .linfo.two{ grid-template-columns:1fr; }    /* stack the info boxes */
  .glance{ gap:24px; }
  .fcols{ grid-template-columns:1fr 1fr; }
  .watermark{ font-size:84px; }
  .manage,.chartexp{ position:static; display:inline-flex; margin:0 6px 10px 0; }
  .mhstrip{ justify-content:flex-start; }
  .tradebar{ display:flex; }                  /* docked CTA appears */
  .sliver .sltrade{ display:none; }           /* CTA is the bottom bar on mobile */
  body{ padding-bottom:78px; }                /* clear the floating pill */
  /* on phone the activity never uses the desktop caps — it just flows to the bottom */
  .activity.cap .actlist,
  .activity.fixed .actlist{ max-height:none; height:auto; overflow:visible; }
  .activity.cap .actwrap::after{ display:none; }
  .activity.cap .act-expand{ display:none; }
}
@media (min-width:901px){
  .manage.m-inline{ display:none; }           /* guard: keep only the absolute masthead one on desktop */
}