/* Cexlens mobile design system v2. Source of truth: Cexlens Mobile Production.dc.html.
   Scope: add class "cx" on <body> of every mobile page (max-width: 860px).
   Token names match assets/css/ai-space-mobile-v1.css so both can live together. */

@media (max-width: 860px) {
body.cx {
  /* surfaces */
  --bg-page:#f3f2ee; --bg-card:#fbfaf7; --bg-card2:#ecebe5; --bg-input:#fff; --bg-hover:#efeafd;
  /* text */
  --text-hi:#14211d; --text-md:#2a3430; --text-mid:#5a625d; --text-lo:#7a817c; --text-off:#9aa29d;
  /* lines */
  --border:rgba(20,33,29,.14); --line:rgba(20,33,29,.08); --axis:rgba(20,33,29,.25);
  /* brand */
  --accent:#6a3df0; --accent-2:#4d27bd; --tint:#efeafd; --tint-line:rgba(106,61,240,.45);
  /* semantic (text / fill / tint) */
  --bull:#1f7a57; --bull-fill:#4fb38f; --bull-tint:#e2f1ea;
  --bear:#b8434b; --bear-fill:#d97a83; --bear-tint:#f7e3e4;
  --warn:#9a6a00; --warn-tint:#f6ecd6;
  --info:#2a5ada; --info-tint:#e3eaf8;
  --neutral-tint:#ecebe5;
  /* hatch for locked values */
  --hatch:repeating-linear-gradient(135deg,#ecebe5 0 3px,#f6f5f1 3px 6px);
  /* type */
  --font-ui:var(--font-ai); --font-mono:var(--mono);
  /* spacing */
  --side:16px; --gap-block:10px; --gap-ctl:6px; --pad:12px;
  /* sizes */
  --h-ctl:34px; --h-row:44px; --h-btn:40px; --h-btn-lg:46px; --h-head:38px; --h-chip:30px; --h-input:44px;

  background:var(--bg-page); color:var(--text-hi); font-family:var(--font-ui);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
body.cx *{box-sizing:border-box}
body.cx a{color:var(--accent-2); text-decoration:none}
body.cx a:hover{color:var(--accent)}
/* Whole-row links keep row text colours; only link rows and inline links are accent. */
body.cx a.cx-row, body.cx a.cx-call, body.cx a.cx-opt{color:var(--text-hi)}

/* ---------- type ---------- */
.cx .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.cx .caps{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.cx .caps-l{font-family:var(--font-mono); font-size:10px; font-weight:400; letter-spacing:.1em; color:var(--text-mid); text-transform:uppercase; white-space:nowrap}
.cx .dim{font-family:var(--font-mono); font-size:10.5px; color:var(--text-lo); white-space:nowrap}
.cx .t-title{font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.015em; text-wrap:balance}
.cx .t-h1{font-size:24px; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.cx .t-body{font-size:13px; color:var(--text-md); line-height:1.45}
.cx .t-sub{font-size:12px; color:var(--text-mid)}
.cx .num-xl{font-family:var(--font-mono); font-size:26px; font-weight:600; line-height:1}
.cx .num-l{font-family:var(--font-mono); font-size:18px; font-weight:600}
.cx .num{font-family:var(--font-mono); font-size:13px; font-weight:600; white-space:nowrap}
.cx .up{color:var(--bull)} .cx .down{color:var(--bear)} .cx .acc{color:var(--accent-2)}

/* ---------- layout ---------- */
.cx-page{display:flex; flex-direction:column; min-height:100dvh}
.cx-content{flex:1; display:flex; flex-direction:column; gap:var(--gap-block); padding:10px var(--side) 16px}
.cx-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-ctl)}
.cx-grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-ctl)}

/* ---------- top bar (do not change) ---------- */
.cx-top{flex:none; position:sticky; top:0; z-index:20; background:var(--bg-card); border-bottom:1px solid rgba(20,33,29,.12)}
.cx-top__spectrum{display:grid; grid-template-columns:repeat(3,1fr); height:3px}
.cx-top__spectrum i:nth-child(1){background:#6a3df0} .cx-top__spectrum i:nth-child(2){background:#e8875b} .cx-top__spectrum i:nth-child(3){background:#4fb38f}
.cx-top__bar{position:relative; height:48px; display:flex; align-items:center; gap:2px; padding:0 6px 0 4px}
.cx-top__title{position:absolute; left:50%; transform:translateX(-50%); font-size:16px; font-weight:700; white-space:nowrap}
.cx-top__clock{margin-left:auto; display:flex; flex-direction:column; align-items:center; padding-right:6px}
.cx-top__clock b{font-family:var(--font-mono); font-size:8.5px; font-weight:400; letter-spacing:.1em; color:var(--text-mid)}
.cx-top__clock span{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--accent)}
/* Shared controls are registered in the canonical library block in assets/style.css. */
.cx-back{display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-top:1px solid var(--line); font-size:13px; font-weight:600}
body.cx a.cx-back{color:var(--text-hi)}
.cx-back__actions{margin-left:auto; display:flex; gap:14px; color:var(--text-mid)}

/* ---------- card content ---------- */
.cx-card__head{display:flex; align-items:center; gap:8px; min-height:var(--h-head); padding:0 var(--pad)}
.cx-card__head > :last-child:not(:first-child){margin-left:auto; display:flex; align-items:center; gap:6px}
.cx-card__body{padding:0 var(--pad) var(--pad); display:flex; flex-direction:column; gap:8px}
.cx-sep{border-top:1px solid var(--line)}
.cx-link-row{display:grid; grid-template-columns:minmax(0,1fr) 18px; align-items:center; height:42px; padding:0 10px 0 var(--pad); border-top:1px solid var(--line); font-size:13px; font-weight:700; color:var(--accent-2)}
.cx-link-row::after{content:"chevron_right"; font-family:'Material Symbols Outlined'; font-size:18px; color:var(--text-off)}

/* ---------- list row (fixed right column, top-aligned) ---------- */
.cx-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; align-items:start; min-height:var(--h-row); padding:10px var(--pad); border:0; border-top:1px solid var(--line); border-radius:0; background:transparent}
.cx-row--chev{grid-template-columns:auto minmax(0,1fr) auto 16px; padding-right:10px}
.cx-row__main{display:flex; flex-direction:column; gap:2px; min-width:0}
.cx-row__title{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cx-row__sub{font-size:12px; color:var(--text-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cx-row__right{display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
.cx-row--stripe-up{box-shadow:inset 3px 0 0 var(--bull-fill)} .cx-row--stripe-down{box-shadow:inset 3px 0 0 var(--bear-fill)} .cx-row--stripe-flat{box-shadow:inset 3px 0 0 rgba(20,33,29,.2)}
.cx-row--now{background:var(--tint)}

/* event type square: 28px, icon in type colour */
.cx-type{flex:none; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; --c:var(--text-mid); color:var(--c); background:color-mix(in srgb,var(--c) 8%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.cx-type--whale{--c:#2a5ada} .cx-type--mm{--c:#9a6a00} .cx-type--signal{--c:#6a3df0} .cx-type--edge,.cx-type--setup{--c:#1f7a57} .cx-type--perps{--c:#14211d} .cx-type--spike,.cx-type--session{--c:#5a625d}
.cx-type--sm{width:16px; height:16px}

/* coin / exchange / wallet marks */
.cx-coin{flex:none; width:16px; height:16px; border-radius:50%} .cx-coin--lg{width:22px; height:22px}
.cx-coin--letter{display:inline-flex; align-items:center; justify-content:center; background:var(--c,#5a625d); color:#fff; font-family:var(--font-mono); font-size:8px; font-weight:700}
.cx-idn{flex:none; width:28px; height:28px; display:grid; grid-template-columns:1fr 1fr} /* identicon: bg = palette[hash%6], cells = hash bits */
.cx-avatar{flex:none; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700} /* letter avatar, square */
.cx-mark--locked{filter:grayscale(1); opacity:.6}

/* ---------- tags (allowed: ONTO OFF ACCUMULATING DISTRIBUTING NEUTRAL PENDING CONFIRMED RIGHT WRONG BULLISH BEARISH CRITICAL WHALE MM NEW) ---------- */
.cx-tag{flex:none; display:inline-flex; align-items:center; padding:2px 6px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; white-space:nowrap; color:var(--text-mid); background:var(--neutral-tint)}
.cx-tag--up{color:var(--bull); background:var(--bull-tint)} .cx-tag--down{color:var(--bear); background:var(--bear-tint)}
.cx-tag--warn{color:var(--warn); background:var(--warn-tint)} .cx-tag--acc{color:var(--accent-2); background:var(--tint)} .cx-tag--info{color:var(--info); background:var(--info-tint)}
.cx-tag--outline{background:none; padding:1px 5px; font-size:9px; box-shadow:inset 0 0 0 1px currentColor}

/* ---------- control placement ---------- */
.cx-filters{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr); gap:var(--gap-ctl)}
.cx-filters--with-btn{grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr) 34px}
.cx-search{height:40px; padding:0 10px}

/* bottom sheet */
.cx-scrim{position:fixed; inset:0; z-index:40; background:rgba(20,33,29,.35); display:flex; flex-direction:column; justify-content:flex-end}
.cx-sheet{display:flex; flex-direction:column; max-height:85dvh; background:var(--bg-card); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom,0)}
.cx-sheet__grip{align-self:center; width:36px; height:4px; margin:8px 0 2px; background:rgba(20,33,29,.2)}
.cx-sheet__head{display:flex; align-items:center; min-height:40px; padding:0 var(--pad)}
.cx-sheet__list{overflow:auto}
.cx-opt{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; min-height:44px; padding:0 var(--pad); border-top:1px solid var(--line); font-size:13.5px; font-weight:600}
.cx-opt[aria-selected="true"]{background:var(--tint); font-weight:700}
.cx-check{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1.5px rgba(20,33,29,.35)}
.cx-check[aria-checked="true"]{background:var(--accent); box-shadow:none; color:#fff}
.cx-sheet__foot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:6px; padding:10px var(--pad); border-top:1px solid var(--line)}

/* ---------- locks ---------- */
.cx-lock-line{display:flex; align-items:center; gap:8px; padding:9px var(--pad); background:var(--tint); font-size:12.5px; color:var(--text-md)}
.cx-lock-line::before{content:"lock"; font-family:'Material Symbols Outlined'; font-size:15px; color:var(--accent-2)}
.cx-lock-line.is-delay::before{content:"schedule"}
.cx-lock-line b{font-weight:700; color:var(--text-hi)} .cx-lock-line a{margin-left:auto; font-weight:700; white-space:nowrap}
.cx-hatch{flex:none; display:inline-flex; align-items:center; height:18px; width:var(--w,64px); padding:0 5px; background:var(--hatch); border:1px solid var(--border)}
.cx-hatch::before{content:"lock"; font-family:'Material Symbols Outlined'; font-size:11px; color:var(--text-lo)}
.cx-hatch-bar{height:6px; background:var(--hatch)}
.cx-more-row{display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:center; height:40px; padding:0 var(--pad); border-top:1px solid var(--line); font-size:13px; font-weight:600; color:var(--text-mid)}
.cx-unlock{display:flex; flex-direction:column; gap:8px; padding:14px var(--pad); background:var(--tint)}

/* ---------- metric visuals ---------- */
.cx-share{display:flex; height:var(--h,4px); gap:2px} .cx-share > i{background:var(--bear-fill)} .cx-share > i + i{flex:1; background:var(--bull-fill)}
.cx-scale{position:relative; height:14px} /* diverging: track, centre tick, fill from centre, square marker */
.cx-scale__track{position:absolute; left:0; right:0; top:6px; height:2px; background:var(--bg-card2)}
.cx-scale__mid{position:absolute; left:50%; top:1px; bottom:1px; width:1px; background:rgba(20,33,29,.35)}
.cx-scale__fill{position:absolute; top:5px; height:4px; background:var(--c,var(--text-hi))}
.cx-scale__dot{position:absolute; top:2px; width:10px; height:10px; margin-left:-5px; background:var(--c,var(--text-hi))}
.cx-scale__ends{display:flex; justify-content:space-between}
.cx-bullet{position:relative; height:12px; background:var(--bg-card2)} .cx-bullet__fill{position:absolute; inset:0 auto 0 0} .cx-bullet__usual{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text-hi)}
.cx-pips{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px} .cx-pips > i{height:var(--h,16px); background:var(--bear-fill)} .cx-pips > i.on{background:var(--bull-fill)}
.cx-bars{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--g,2px)} /* diverging bars around a 1px axis; NOW bar = accent */
.cx-bars__axis{position:absolute; left:0; right:0; height:1px; background:var(--axis)}
.cx-heat{display:grid; gap:3px} .cx-heat > i{aspect-ratio:1} .cx-heat > i.today{box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- AI bar + bottom nav (do not change) ---------- */
.cx-ai{flex:none; display:flex; align-items:center; gap:8px; height:52px; padding:0 10px; background:var(--bg-card); border-top:1px solid rgba(20,33,29,.12)}
.cx-ai__avatar{flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--tint); border:1.5px solid var(--accent)}
.cx-ai__avatar img{width:100%; height:100%; transform:scale(1.9)} /* default agent: jelly */
.cx-ai__avatar--letter{display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; background:var(--c)} /* own agent */
.cx-ai__text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.cx-ai__name{font-size:12.5px; font-weight:700} .cx-ai__prompt{font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cx-ai__credits{flex:none; display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 9px; background:var(--bg-card2); border:1px solid var(--border); font-family:var(--font-mono); font-size:11px; font-weight:600}
.cx-nav{flex:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:58px; background:var(--bg-card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0)}
.cx-nav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10.5px; font-weight:500; color:var(--text-mid)}
.cx-nav a[aria-current="page"]{font-weight:700; color:var(--text-hi)}
.cx-nav a .dot{position:absolute; top:2px; right:10px; width:6px; height:6px; border-radius:50%}

/* ---------- empty / loading ---------- */
.cx-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; text-align:center}
.cx-empty__icon{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--tint); color:var(--accent-2)}
.cx-skel{display:block; height:10px; background:var(--bg-card2)}

/* ---------- CxUI parts (js/cx-ui.js) ---------- */
.cx-mark{flex:none; display:inline-flex; width:var(--s,22px); height:var(--s,22px)}
.cx-mark > img, .cx-mark > span{margin:0 !important; width:100% !important; height:100% !important}
.cx-i{font-size:16px; line-height:1}
.cx-card__meta .dim, .cx-card__meta .caps-l{white-space:nowrap}
.cx-idn i{display:block}
.cx-avatar{font-family:var(--font-ui)}
.cx-unlock__title{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--text-hi)}
.cx-unlock__title .cx-i{font-size:18px; color:var(--accent-2)}
.cx-unlock__point{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-hi)}
.cx-unlock__point .cx-i{font-size:16px; color:var(--bull)}
.cx-unlock .cx-btn{margin-top:4px}
.cx-unlock__ctx{margin-top:-2px; font-size:12.5px; line-height:1.45; color:var(--text-mid)}
.cx-unlock__alt{display:flex; justify-content:center; gap:4px; font-size:12.5px; color:var(--text-mid)}
.cx-unlock__alt a{font-weight:700}
.cx-unlock--plain{background:none; padding:12px var(--pad)}
.cx-empty__title{font-size:15px; font-weight:700; color:var(--text-hi)}
.cx-empty__icon .cx-i{font-size:22px}
.cx-error-line{display:flex; align-items:center; gap:10px; padding:10px var(--pad); font-size:12.5px; color:var(--text-md)}
.cx-error-line span{flex:1; min-width:0}
.cx-spark{display:block; width:100%; height:20px}
.cx-spark-empty{display:block; height:20px}
.cx-row--skel{align-items:center}
.cx-skel--mark{width:22px; height:22px}
.cx-row__main .cx-skel + .cx-skel{margin-top:6px}
.cx-stale{color:var(--text-off)}
/* graded call row (Intel fired, Setups): coin, title + tag, result + age right,
   one reason line, price line + verdict. Left stripe follows the verdict. */
.cx-call{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:6px 10px; align-items:center; padding:10px 12px 10px 14px; border-top:1px solid var(--line); box-shadow:inset 3px 0 0 var(--stripe,rgba(20,33,29,.2)); color:var(--text-hi)}
.cx-lock-line + .cx-call{border-top:0}
.cx-call__title{display:flex; align-items:center; gap:6px; min-width:0}
.cx-call__title b{font-size:14px}
.cx-call__right{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.cx-call__right .num{font-size:15px}
.cx-call__reason{grid-column:2 / span 2; font-size:12.5px; line-height:1.4; color:var(--text-md)}
.cx-call__foot{grid-column:2 / span 2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center}
.cx-call__verdict{display:inline-block; width:64px; text-align:right; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--text-mid)}
.cx-call.is-right .cx-call__verdict{color:var(--bull)} .cx-call.is-wrong .cx-call__verdict{color:var(--bear)}
/* event row (CxUI.eventRow): type square, coin + title (up to 2 lines), one line,
   optional PRICE SINCE, value + age in the fixed right column */
.cx-ev{grid-template-columns:28px minmax(0,1fr) auto; color:var(--text-hi)}
.cx-ev .cx-row__main{gap:3px}
.cx-ev__title{display:flex; align-items:flex-start; gap:6px; min-width:0; font-size:13.5px; font-weight:700; line-height:1.3}
.cx-ev__title > .cx-mark{margin-top:2px}
.cx-ev__title > span:last-child{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cx-ev__since{font-family:var(--font-mono); font-size:10px; color:var(--text-mid)}
.cx-ev__since b{font-weight:700; color:var(--text-mid)} .cx-ev__since b.up{color:var(--bull)} .cx-ev__since b.down{color:var(--bear)}
.cx-ev__val{font-size:14px}
.cx-ev__lock .cx-i{font-size:15px; color:var(--text-off)}
.cx-ev__age{text-transform:uppercase}
.cx-lock-line + .cx-ev{border-top:0}
.cx-view{display:flex; flex-direction:column; gap:var(--gap-block); padding:10px var(--side) 16px}
.cx-view[hidden]{display:none}

/* ---------- account ready (R4, CxUI.accountReady) ---------- */
.cx-ready{position:fixed; inset:0; z-index:10001; display:flex; flex-direction:column; gap:var(--gap-block); padding:0 var(--side) calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; background:var(--bg-page); color:var(--text-hi)}
.cx-ready__top{display:flex; align-items:center; justify-content:space-between; height:56px; flex:none}
.cx-ready__kicker{display:flex; align-items:center; gap:8px}
.cx-ready__kicker > .cx-i{width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--bull); background:var(--bull-tint)}
.cx-ready__title{margin:0; font-size:24px; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.cx-ready__opened{display:flex; align-items:center; gap:10px; padding:10px var(--pad); background:var(--tint); font-size:13px; color:var(--text-md)}
body.cx a.cx-ready__row, a.cx-ready__row{grid-template-columns:28px minmax(0,1fr) auto; align-items:center; color:var(--text-hi)}
.cx-ready__row .cx-row__title{gap:6px; font-weight:600; white-space:normal; overflow:visible}
.cx-ready__row .cx-row__title .num{font-size:13.5px}
.cx-ready__foot{margin-top:auto; display:flex; flex-direction:column; gap:12px; padding-top:12px}
.cx-ready__free{text-align:center; font-size:13.5px; font-weight:700}
}

/* Event route «Binance → bc1q…»: exchange mark + name, wallet as a mono address (CxUI.routeHtml). */
.cx-route{display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; vertical-align:middle}
.cx-route__cex{display:inline-flex; align-items:center; gap:4px; flex:none}
.cx-route__cex b{font-weight:600; color:var(--text-hi)}
.cx-route__addr{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.95em}
.cx-route__arr{flex:none; color:var(--text-lo)}