/* CyberLeek — brand surface for cyberleek.rhchain.network.
   Dark-first on purpose: the mascot is a neon cyber-armoured leek and the
   product is a live ticker people stare at. A light theme is still one click
   away (house rule), and every colour below is a token so the swap is total. */

:root {
  --bg: #05080f;
  --bg-2: #0a1018;
  --panel: rgba(14, 22, 34, .78);
  --panel-solid: #0e1622;
  --line: rgba(90, 220, 255, .16);
  --line-2: rgba(90, 220, 255, .30);
  --ink: #e8f6ff;
  --ink-2: #93a9bd;
  --ink-3: #62788c;
  --leek: #4ade80;
  --leek-dim: #16a34a;
  --cyan: #22d3ee;
  --blue: #2f6bff;
  --up: #35e08a;
  --down: #ff5d6c;
  --warn: #ffb020;
  --glow: 0 0 24px rgba(34, 211, 238, .25);
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="light"] {
  --bg: #f4f7fb;
  --bg-2: #eaf0f7;
  --panel: rgba(255, 255, 255, .92);
  --panel-solid: #ffffff;
  --line: rgba(16, 42, 66, .12);
  --line-2: rgba(16, 42, 66, .22);
  --ink: #0d1b2a;
  --ink-2: #46617a;
  --ink-3: #6b829a;
  --leek: #15803d;
  --cyan: #0891b2;
  --blue: #1d4ed8;
  --up: #0f9d58;
  --down: #d92d3c;
  --glow: 0 6px 20px rgba(16, 42, 66, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Backdrop: a faint circuit grid + two coloured pools of light. Pure CSS —
   no image request, and it degrades to a flat background if gradients fail. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(47, 107, 255, .20), transparent 60%),
    radial-gradient(760px 520px at 92% 4%, rgba(74, 222, 128, .13), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 42%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .30;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000 20%, transparent 78%);
}
html[data-theme="light"] body::after { opacity: .55; }

.wrap { width: min(1140px, 92vw); margin: 0 auto; }

/* ------------------------------------------------------------------ head */
header.top {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .55)); }
.brand span b { color: var(--leek); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.top nav a {
  color: var(--ink-2); text-decoration: none; font-size: .86rem;
  padding: 7px 11px; border-radius: 9px;
}
.top nav a:hover { color: var(--ink); background: var(--panel); }
.iconbtn {
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: .95rem;
  display: grid; place-items: center;
}
.iconbtn:hover { border-color: var(--cyan); }

/* ------------------------------------------------------------------ hero */
.hero { padding: 44px 0 22px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; }
.mark { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem;
        letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 2s infinite; }
.dot.stale { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.dot.dead { background: var(--down); box-shadow: 0 0 10px var(--down); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.02; margin: 12px 0 6px; letter-spacing: -.02em; }
h1 .g { background: linear-gradient(100deg, var(--leek), var(--cyan) 60%, var(--blue));
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { color: var(--ink-2); font-size: 1.06rem; max-width: 46ch; margin: 0 0 20px; }

.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price { font-family: var(--mono); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.02em; }
.chip {
  font-family: var(--mono); font-size: .82rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel);
}
.chip.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.chip.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.changes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.changes .chip b { display: block; font-size: .66rem; color: var(--ink-3); letter-spacing: .12em; font-weight: 600; }

.hero-art { position: relative; display: grid; place-items: center; }
.hero-art img { width: min(320px, 76%); filter: drop-shadow(0 18px 46px rgba(34, 211, 238, .35)); animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.hero-art::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, .30), transparent 66%); filter: blur(28px);
}

/* ------------------------------------------------------------------- CA */
.ca {
  margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--glow);
}
.ca .lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--ink-3); }
.ca code { font-family: var(--mono); font-size: .84rem; word-break: break-all; color: var(--ink); }
.btn {
  font: inherit; font-size: .82rem; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-solid); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn.primary {
  background: linear-gradient(100deg, var(--leek-dim), var(--blue));
  border: 0; color: #fff; font-weight: 600; box-shadow: 0 6px 22px rgba(47, 107, 255, .35);
}
.btn.primary:hover { color: #fff; filter: brightness(1.12); }

/* ---------------------------------------------------------------- panels */
section { padding: 26px 0; }
.h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.h2 h2 { font-size: 1.06rem; margin: 0; letter-spacing: .01em; }
.h2 .note { font-size: .78rem; color: var(--ink-3); font-family: var(--mono); }

.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; backdrop-filter: blur(8px);
}
.card:hover { border-color: var(--line-2); }
.card .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card .v { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.card .s { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }

/* bar showing 24h buy vs sell pressure */
.bar { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--down) 55%, transparent); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--leek), var(--up)); }

/* ----------------------------------------------------------------- chart */
.chartcard { padding: 16px 16px 8px; }
.chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chart-now-price { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; }
.ranges { margin-left: auto; display: flex; gap: 4px; }
.ranges button {
  font: inherit; font-family: var(--mono); font-size: .74rem; padding: 5px 10px; cursor: pointer;
  background: transparent; color: var(--ink-3); border: 1px solid transparent; border-radius: 8px;
}
.ranges button[aria-pressed="true"] { color: var(--cyan); border-color: var(--line-2); background: var(--panel-solid); }
/* THE CANVAS MUST HAVE A LAYOUT BOX. #chart is the <section>; the canvas is
   #chartc. Sizing the section left the canvas with no box, so it fell back to
   its raw pixel attributes and drew itself across the entire page, over the
   cards below. The box is set here and read back by chart.js. */
.chart-box { position: relative; height: 300px; margin: 4px 0 6px; }
.chart-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* ----------------------------------------------------------------- facts */
.facts { grid-template-columns: repeat(2, 1fr); }
.fact { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact .badge { font-family: var(--mono); font-size: .7rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge.ok { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); border: 1px solid color-mix(in srgb, var(--up) 40%, transparent); }
.badge.bad { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); border: 1px solid color-mix(in srgb, var(--down) 40%, transparent); }
.badge.unk { color: var(--ink-3); border: 1px solid var(--line-2); }
.fact .t { font-size: .9rem; }
.fact .t small { display: block; color: var(--ink-3); font-size: .78rem; }

/* ----------------------------------------------------------------- table */
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th { text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
          text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.name { font-family: var(--sans); }
.tbl a { color: var(--cyan); text-decoration: none; }
.tbl a:hover { text-decoration: underline; }
.scroller { overflow-x: auto; }

.links { display: flex; flex-wrap: wrap; gap: 10px; }

footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 22px 0 40px; color: var(--ink-3); font-size: .82rem; }
footer a { color: var(--ink-2); }
.disclaimer { max-width: 74ch; margin-top: 8px; }

.skel { color: var(--ink-3); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 26px; }
  .hero-art { order: -1; }
  .hero-art img { width: 190px; }
  .grid.stats { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr; }
  .top nav a.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .dot { animation: none; }
}

/* ------------------------------------------------------------------ prose */
/* The written sections carry the search intent — "how to buy", "is it safe",
   the contract address — so they get real typographic care, not leftovers. */
#about p, #buy li, #verify p { color: var(--ink-2); max-width: 78ch; }
#about p, #verify p { margin: 0 0 14px; }
#about strong, #verify strong, #buy strong { color: var(--ink); }
#buy ol { margin: 0; padding-left: 22px; }
#buy li { margin-bottom: 12px; }
#about code, #buy code, .qa code { font-family: var(--mono); font-size: .88em;
  background: color-mix(in srgb, var(--cyan) 12%, transparent); padding: 2px 6px;
  border-radius: 6px; word-break: break-all; }
#about a, #verify a, .qa a { color: var(--cyan); }

.qa { border-bottom: 1px solid var(--line); padding: 4px 0; }
.qa:last-child { border-bottom: 0; }
.qa summary { cursor: pointer; padding: 10px 0; list-style: none; display: flex;
  align-items: center; gap: 10px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "+"; font-family: var(--mono); color: var(--cyan); font-size: 1.1rem; }
.qa[open] summary::before { content: "−"; }
.qa summary h3 { font-size: .98rem; margin: 0; font-weight: 600; }
.qa p { color: var(--ink-2); margin: 0 0 14px 26px; max-width: 78ch; }
table caption { caption-side: top; }

/* ---------------------------------------------------------------- url band */
/* The site address, centered and big, at the top of the page — it exists so a
   SCREENSHOT of this tracker still tells the viewer where to find it. Sized in
   vw at the small end so it never wraps mid-domain on a phone. */
.urlband {
  display: block; text-align: center; text-decoration: none; color: inherit;
  margin: 18px auto 0; padding: 14px 22px; max-width: 760px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 10%, transparent),
    color-mix(in srgb, var(--blue) 7%, transparent));
  box-shadow: var(--glow);
}
.urlband:hover { border-color: var(--cyan); }
.urlband-txt {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.9rem); letter-spacing: .01em; line-height: 1.2;
  background: linear-gradient(100deg, var(--leek), var(--cyan) 55%, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(34, 211, 238, .20);
}
.urlband-txt b { font-weight: 700; }
.urlband-sub {
  display: block; margin-top: 5px; color: var(--ink-3);
  font-size: .74rem; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
html[data-theme="light"] .urlband-txt { text-shadow: none; }

/* ------------------------------------------------------------ ABSOLUTE LIVE */
/* The button is deliberately loud: pressing it changes what EVERYONE on the
   site sees, and a control with that reach should not look like a toggle
   somebody flips by accident. */
.livebtn {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px;
  margin-top: 12px; padding: 12px 16px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--warn) 12%, transparent),
    color-mix(in srgb, var(--cyan) 8%, transparent));
  transition: border-color .15s, transform .08s;
}
.livebtn:hover { border-color: var(--warn); }
.livebtn:active { transform: translateY(1px); }
.livebtn-bolt { font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 0 10px var(--warn)); }
.livebtn-txt { display: flex; flex-direction: column; gap: 2px; }
.livebtn-txt b { font-family: var(--mono); font-size: .86rem; letter-spacing: .12em; }
.livebtn-txt small { color: var(--ink-3); font-size: .74rem; }
.livebtn-clock {
  margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  color: var(--warn); letter-spacing: .04em;
}

/* Running: the whole site is on one-second polling, for every visitor. */
.livebtn.on {
  border-color: var(--up);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--up) 16%, transparent),
    color-mix(in srgb, var(--cyan) 10%, transparent));
  animation: liveglow 2.4s ease-in-out infinite;
}
.livebtn.on .livebtn-bolt { filter: drop-shadow(0 0 12px var(--up)); }
.livebtn.on .livebtn-clock { color: var(--up); }
@keyframes liveglow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 26%, transparent); }
  50%      { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--up) 22%, transparent); }
}

/* The LIVE tab on the chart only exists while there is a tape to show. */
.ranges .tab-live { color: var(--up); font-weight: 700; }
.ranges .tab-live[aria-pressed="true"] {
  color: var(--up); border-color: color-mix(in srgb, var(--up) 55%, transparent);
  background: color-mix(in srgb, var(--up) 12%, transparent);
}

/* A tick that moved the price flashes the direction it moved. */
@keyframes flashup   { from { color: var(--up);   } to { color: inherit; } }
@keyframes flashdown { from { color: var(--down); } to { color: inherit; } }
.tick-up   { animation: flashup .6s ease-out; }
.tick-down { animation: flashdown .6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .livebtn.on { animation: none; }
  .tick-up, .tick-down { animation: none; }
}
@media (max-width: 620px) {
  .livebtn-txt small { display: none; }
}

/* A range reaching further back than the pool has existed shows the same line
   as the next one down. Dimmed rather than hidden: the reader should see that
   the limit is the token's age, not the tracker's. */
.ranges button.beyond { opacity: .42; }

/* =====================================================================
   COPY-THE-BOT HERO  (#copybot)
   The page headline: the autonomous CyberLeek AI trading bot, its live
   scoreboard, the trade tape, how it works and the copy-trade API.
   Everything is token-driven so it reads correctly in light and dark.
   ===================================================================== */
.copybot {
  margin: 22px 0 6px;
  padding: 30px clamp(16px, 3vw, 34px) 34px;
  border: 1px solid var(--line-2);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(680px 340px at 12% -30%, color-mix(in srgb, var(--leek) 16%, transparent), transparent 70%),
    radial-gradient(680px 360px at 92% -20%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 72%),
    var(--panel);
  box-shadow: var(--glow), inset 0 1px 0 color-mix(in srgb, var(--cyan) 14%, transparent);
  backdrop-filter: blur(10px);
  overflow: hidden;
  position: relative;
}
/* a faint sweeping sheen along the top edge — pure motion, no request */
.copybot::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--leek), var(--cyan), var(--blue), transparent);
  background-size: 220% 100%;
  animation: cbSheen 6s linear infinite;
  opacity: .8;
}
@keyframes cbSheen { from { background-position: 200% 0 } to { background-position: -20% 0 } }

.cb-warming {
  margin: 0 0 18px; padding: 10px 14px; border-radius: 10px;
  font-family: var(--mono); font-size: .82rem; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* ---- headline ---- */
.cb-head { text-align: center; margin-bottom: 26px; }
.cb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--up); padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--up) 45%, transparent);
  background: color-mix(in srgb, var(--up) 12%, transparent);
}
.cb-badge.stale { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cb-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor; animation: cbPulse 1.6s infinite; }
@keyframes cbPulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.7) } }

.cb-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 14px 0 6px;
  background: linear-gradient(100deg, var(--leek), var(--cyan) 48%, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cyan) 28%, transparent));
  animation: cbGlow 3.2s ease-in-out infinite;
}
@keyframes cbGlow {
  0%,100% { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--cyan) 22%, transparent)); }
  50%     { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--leek) 40%, transparent)); }
}
.cb-lede { margin: 0; color: var(--ink-2); font-size: clamp(1rem, 2.6vw, 1.32rem); font-weight: 500; }

/* ---- scoreboard ---- */
.cb-board { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; }
.cb-stat {
  background: color-mix(in srgb, var(--panel-solid) 60%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.cb-stat-hero {
  border-color: color-mix(in srgb, var(--leek) 40%, transparent);
  background:
    radial-gradient(340px 160px at 20% 0%, color-mix(in srgb, var(--leek) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel-solid) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leek) 12%, transparent);
}
.cb-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-big {
  font-family: var(--mono); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.04; margin: 6px 0 2px; color: var(--ink);
}
.cb-big.up { color: var(--up); text-shadow: 0 0 26px color-mix(in srgb, var(--up) 40%, transparent); }
.cb-big.down { color: var(--down); text-shadow: 0 0 26px color-mix(in srgb, var(--down) 40%, transparent); }
.cb-v { font-family: var(--mono); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 8px 0 2px; }
.cb-s { font-size: .76rem; color: var(--ink-2); font-family: var(--mono); }
.cb-stance {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3);
}
.cb-stance.buying { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent);
  background: color-mix(in srgb, var(--up) 12%, transparent); }
.cb-stance.selling { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent);
  background: color-mix(in srgb, var(--down) 12%, transparent); }
.cb-stance.holding { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent); }

/* a value that just changed flashes once */
@keyframes cbFlash { from { background: color-mix(in srgb, var(--cyan) 26%, transparent); } to { background: transparent; } }
.cb-flash { animation: cbFlash .7s ease-out; border-radius: 6px; }

/* ---- signals strip ---- */
.cb-signals { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.cb-sig {
  font-family: var(--mono); font-size: .74rem; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel);
  display: inline-flex; align-items: center; gap: 7px;
}
.cb-sig b { color: var(--ink); font-weight: 700; }
.cb-sig.up b { color: var(--up); }
.cb-sig.down b { color: var(--down); }
.cb-sig.warn b { color: var(--warn); }

/* ---- two-column body ---- */
.cb-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 18px; }
.cb-side { display: flex; flex-direction: column; gap: 16px; }
.cb-panel {
  background: color-mix(in srgb, var(--panel-solid) 55%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.cb-panel-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cb-panel-h h3 { margin: 0; font-size: 1rem; letter-spacing: .01em; }
.cb-note { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-left: auto; }

/* ---- trade tape ---- */
.cb-tape { max-height: 430px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  padding-right: 2px; }
.cb-row {
  display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-solid) 40%, transparent);
}
.cb-row.cb-new { animation: cbRowIn .5s ease-out; }
@keyframes cbRowIn { from { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--cyan) 16%, transparent); }
  to { opacity: 1; transform: none; } }
.cb-chip {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 8px; white-space: nowrap;
}
.cb-chip.buy  { color: var(--up);   background: color-mix(in srgb, var(--up) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--up) 42%, transparent); }
.cb-chip.sell { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); border: 1px solid color-mix(in srgb, var(--down) 42%, transparent); }
.cb-chip.skim { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); }
.cb-chip.bail { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent); }
.cb-row-mc { font-family: var(--mono); font-weight: 700; font-size: .84rem; }
.cb-row-px { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.cb-row-reason { font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tx { font-family: var(--mono); font-size: .74rem; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.cb-tx:hover { text-decoration: underline; }
.cb-empty { color: var(--ink-3); font-family: var(--mono); font-size: .84rem; text-align: center; padding: 30px 0; }

/* ---- how it works ---- */
.cb-style { margin: 0 0 12px; color: var(--cyan); font-size: .9rem; font-weight: 500; }
.cb-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cb-rules li { position: relative; padding-left: 26px; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.cb-rules li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  font-family: var(--mono); font-weight: 700; color: var(--leek);
}
.cb-disc { margin: 14px 0 0; font-size: .72rem; color: var(--ink-3); }

/* ---- copy-trade API ---- */
.cb-api-lead { margin: 0 0 12px; font-size: .88rem; color: var(--ink-2); }
.cb-endpoint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px; box-shadow: var(--glow);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 10%, transparent), color-mix(in srgb, var(--blue) 7%, transparent));
}
.cb-method { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  color: var(--leek); padding: 2px 7px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--leek) 45%, transparent);
  background: color-mix(in srgb, var(--leek) 12%, transparent); }
.cb-endpoint code { font-family: var(--mono); font-size: .82rem; color: var(--ink); flex: 1; min-width: 0;
  word-break: break-all; }
.cb-copybtn { margin-left: auto; }
.cb-copybtn.done { border-color: var(--up); color: var(--up); }
.cb-code {
  margin: 12px 0 0; padding: 12px 14px; overflow-x: auto; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.cb-code code { font-family: var(--mono); font-size: .8rem; color: var(--leek); white-space: pre; }
.cb-eps { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cb-ep { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 40%, transparent); }
.cb-ep code { font-family: var(--mono); font-size: .78rem; color: var(--cyan); }
.cb-ep small { color: var(--ink-3); font-size: .72rem; }
.cb-cors { margin: 12px 0 0; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .04em; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .cb-board { grid-template-columns: 1fr 1fr; }
  .cb-stat-hero { grid-column: 1 / -1; }
  .cb-cols { grid-template-columns: 1fr; }
  .cb-tape { max-height: 360px; }
}
@media (max-width: 560px) {
  .cb-board { grid-template-columns: 1fr; }
  .cb-row { grid-template-columns: auto 1fr auto; }
  .cb-row-px { display: none; }
  .cb-row-reason { grid-column: 1 / -1; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .copybot::before, .cb-title, .cb-badge-dot, .cb-row.cb-new, .cb-flash { animation: none; }
}
.ranges button.beyond[aria-pressed="true"] { opacity: .8; }

/* ---- copybot mobile hardening ----
   1fr = minmax(auto,1fr); the auto minimum won't shrink below the widest child
   (long URL / curl pre / big numbers), so a grid track grew past the viewport
   and .copybot{overflow:hidden} clipped the text at the right edge on phones.
   minmax(0,…) tracks + min-width:0 on the flex/grid children let them shrink and
   wrap; long strings break instead of forcing width. */
.cb-board { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.cb-cols  { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.cb-stat, .cb-panel, .cb-side, #cb-tape, .cb-board > *, .cb-cols > *, .cb-row > * { min-width: 0; }
.cb-big, .cb-v, .cb-s, .cb-lede, .cb-api-lead, .cb-rules li, .cb-style,
.cb-ep code, .cb-endpoint code, .cb-disc, .cb-note { overflow-wrap: anywhere; word-break: break-word; }
.cb-code { max-width: 100%; }
.cb-code code { word-break: normal; }          /* keep the curl on one scrollable line */
@media (max-width: 900px) {
  .cb-board { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cb-cols  { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px) {
  .cb-board { grid-template-columns: minmax(0,1fr); }
  .copybot  { padding: 20px 15px; }
  .cb-title { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }
  .cb-big   { font-size: clamp(2rem, 11vw, 2.8rem); }
  .cb-endpoint code { font-size: .74rem; }
}

/* ============ RHchain top bar + online counter + hero promo (2026-08-19) ============ */
.rhbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 16px;font-size:.82rem;
  background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 22%,var(--panel-solid)),var(--panel-solid));
  border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.rhbar-brand{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:.01em}
.rhbar-brand b{color:var(--cyan)}
.rhbar-arrow{opacity:.7}
.rhbar-online{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-2)}
.rhbar-online b{color:var(--up);font-variant-numeric:tabular-nums;font-weight:800}
.rhbar-online-dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 9px var(--up);
  animation:cbPulse 1.7s infinite}
.rhbar-actions{margin-left:auto;display:inline-flex;gap:8px;align-items:center}
.rhbar-login{color:var(--ink);text-decoration:none;padding:4px 12px;border-radius:8px;border:1px solid var(--line-2)}
.rhbar-login:hover{border-color:var(--cyan);color:var(--cyan)}
.rhbar-register{color:#04121f;background:linear-gradient(180deg,var(--leek),var(--leek-dim));
  text-decoration:none;padding:5px 14px;border-radius:8px;font-weight:700;box-shadow:var(--glow)}
.rhbar-register:hover{filter:brightness(1.08)}

/* shrink the mascot so the copy-trader promo + price lead the hero */
.hero-art{max-width:160px;margin-left:auto}
.hero-art img{max-width:100%;height:auto}
@media(max-width:900px){.hero-art{max-width:120px}}

/* hero promo button that jumps to the copy-trader (now below the chart) */
.herobot{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;
  border-radius:12px;text-decoration:none;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--leek) 40%,transparent);
  background:radial-gradient(400px 120px at 0% 0%,color-mix(in srgb,var(--leek) 14%,transparent),transparent 70%),
    color-mix(in srgb,var(--panel-solid) 55%,transparent);
  box-shadow:var(--glow);transition:transform .12s var(--up-ease,ease),border-color .12s}
.herobot:hover{transform:translateY(-1px);border-color:var(--leek)}
.herobot-ic{font-size:1.7rem;flex:none}
.herobot-txt{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.herobot-txt b{font-size:.98rem;color:var(--ink)}
.herobot-txt small{color:var(--ink-2);font-size:.8rem}
.herobot-go{margin-left:auto;font-size:1.3rem;color:var(--leek);animation:cbBob 1.6s ease-in-out infinite}
@keyframes cbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.herobot-go,.rhbar-online-dot{animation:none}}

/* tip / ZOLTAN match promo (small, visible) */
.cb-tip{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--leek) 30%,transparent);
  background:color-mix(in srgb,var(--leek) 7%,transparent)}
.cb-tip-ic{font-size:1.3rem;flex:none;line-height:1.3}
.cb-tip-body p{margin:0 0 8px;font-size:.82rem;color:var(--ink-2);line-height:1.5}
.cb-tip-body b{color:var(--ink)}
.cb-tip-body a{color:var(--cyan);text-decoration:none;font-weight:600}
.cb-tip-body a:hover{text-decoration:underline}
.cb-tip-wallet{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-tip-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.cb-tip-wallet code{font-family:var(--mono);font-size:.74rem;color:var(--ink);word-break:break-all;flex:1;min-width:120px}

/* engine forecast panel */
.cb-fcwrap{margin:16px 0 4px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-solid) 55%,transparent)}
.cb-fchead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cb-fchead h3{margin:0;font-size:1rem}
.cb-fchead .cb-small{color:var(--ink-3);font-weight:400;font-size:.74rem}
.cb-fc-strength{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem}
.cb-fc-score{font-size:1.4rem;font-weight:800}
.cb-fc-lbl{color:var(--ink-2)}
.cb-fc-meterbar{display:inline-block;width:80px;height:7px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 30%,transparent);overflow:hidden}
.cb-fc-meterbar i{display:block;height:100%;border-radius:99px}
.cb-fcgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.cb-fc-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:9px;
  background:color-mix(in srgb,var(--ink-3) 8%,transparent);border:1px solid var(--line);min-width:0}
.cb-fc-cell.up{border-color:color-mix(in srgb,var(--up) 40%,transparent)}
.cb-fc-cell.down{border-color:color-mix(in srgb,var(--down) 40%,transparent)}
.cb-fc-h{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.cb-fc-pct{font-family:var(--mono);font-weight:800;font-size:.82rem}
.cb-fc-cell.up .cb-fc-pct{color:var(--up)}
.cb-fc-cell.down .cb-fc-pct{color:var(--down)}
.cb-fc-cell.flat .cb-fc-pct{color:var(--ink-2)}
.cb-fc-mc{font-family:var(--mono);font-size:.62rem;color:var(--ink-3)}
.cb-fc-bar{width:6px;height:34px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 18%,transparent);
  display:flex;align-items:flex-end;overflow:hidden;margin-top:3px}
.cb-fc-bar i{width:100%;border-radius:99px;background:var(--cyan)}
.cb-fc-cell.up .cb-fc-bar i{background:var(--up)}.cb-fc-cell.down .cb-fc-bar i{background:var(--down)}
.cb-fc-note{margin:10px 0 0;font-size:.7rem;color:var(--ink-3)}
@media(max-width:640px){.cb-fcgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* live chat (top of page) */
.chat{margin:0 0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);
  box-shadow:var(--glow);overflow:hidden}
.chat-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.chat-title{font-weight:700;font-size:.86rem;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 9px var(--up);animation:cbPulse 1.7s infinite}
.chat-sub{font-size:.72rem;color:var(--ink-3)}
.chat-log{height:132px;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;font-size:.84rem}
.chat-empty{color:var(--ink-3);font-size:.8rem;margin:auto}
.chat-row{line-height:1.35;word-break:break-word}
.chat-u{font-weight:700;margin-right:6px}
.chat-t{color:var(--ink-2)}
.chat-form{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel-solid) 40%,transparent)}
.chat-user{flex:0 0 110px;min-width:0}
.chat-msg{flex:1;min-width:0}
.chat-user,.chat-msg{padding:7px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-family:inherit;font-size:.82rem}
.chat-user:focus,.chat-msg:focus{outline:none;border-color:var(--cyan)}
.chat-send{padding:7px 16px;border:0;border-radius:8px;background:linear-gradient(180deg,var(--leek),var(--leek-dim));color:#04121f;font-weight:700;cursor:pointer}
.chat-send:disabled{opacity:.5;cursor:default}
@media(max-width:560px){.chat-user{flex-basis:88px}}

/* chat: more room + full-screen + floating price */
.chat-log{height:220px}                                   /* more room by default */
.chat-fs{margin-left:auto;background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:7px;width:30px;height:26px;cursor:pointer;font-size:1rem;line-height:1;flex:none}
.chat-fs:hover{color:var(--cyan);border-color:var(--cyan)}
/* floating price bar (full-screen only) */
.chat-pricebar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 16%,var(--panel-solid)),var(--panel-solid))}
.chat-pb-tk{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3)}
.chat-pb-price{font-family:var(--mono);font-weight:800;font-size:1.5rem;color:var(--ink)}
/* full-screen mode */
.chat.fs{position:fixed;inset:0;z-index:9999;margin:0;border-radius:0;border:0;display:flex;flex-direction:column}
.chat.fs .chat-pricebar{position:sticky;top:0;z-index:2}
.chat.fs .chat-log{flex:1;height:auto}
.chat.fs .chat-fs::after{content:""}
body.chat-open{overflow:hidden}

/* tips strip — very top */
.tipbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 16px;font-size:.78rem;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--leek) 9%,var(--panel-solid));color:var(--ink-2)}
.tipbar-msg b{color:var(--ink)}
.tipbar-addr{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);word-break:break-all;flex:1;min-width:120px}
.tipbar-copy{margin-left:auto;padding:3px 12px;border-radius:7px;border:1px solid var(--leek);
  background:transparent;color:var(--leek);font-weight:700;cursor:pointer;font-family:inherit;font-size:.74rem}
.tipbar-copy:hover{background:color-mix(in srgb,var(--leek) 15%,transparent)}
@media(max-width:560px){.tipbar-addr{display:none}}

/* real-results + service offer pitch */
.cb-pitch{margin:16px 0 4px;padding:16px 18px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--leek) 35%,transparent);
  background:radial-gradient(500px 160px at 10% 0%,color-mix(in srgb,var(--leek) 12%,transparent),transparent 70%),color-mix(in srgb,var(--panel-solid) 55%,transparent)}
.cb-pitch-hd{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.cb-pitch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.cb-pitch-stat{display:flex;flex-direction:column;gap:2px}
.cb-pitch-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.cb-pitch-v{font-family:var(--mono);font-weight:800;font-size:1.3rem;color:var(--ink)}
.cb-pitch-big .cb-pitch-v{font-size:1.7rem}
.cb-pitch-v.up{color:var(--up)}.cb-pitch-v.down{color:var(--down)}
.cb-pitch-offer p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.cb-pitch-offer b{color:var(--ink)}
.cb-pitch-offer a{color:var(--leek);font-weight:700;text-decoration:none;white-space:nowrap}
.cb-pitch-offer a:hover{text-decoration:underline}
.cb-pitch-fine{margin:10px 0 0;font-size:.68rem;color:var(--ink-3)}
@media(max-width:560px){.cb-pitch-row{grid-template-columns:1fr 1fr}.cb-pitch-big{grid-column:1/-1}}

/* very-top live position + P/L strip */
.cb-top{margin:0 0 18px}
.cb-top-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  padding:14px 16px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--leek) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--leek) 12%,transparent),transparent),color-mix(in srgb,var(--panel-solid) 60%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--leek) 20%,transparent) inset}
.cb-top-cell{display:flex;flex-direction:column;gap:3px;min-width:0;
  padding-left:12px;border-left:2px solid color-mix(in srgb,var(--ink-3) 25%,transparent)}
.cb-top-cell:first-child{border-left:0;padding-left:0}
.cb-top-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cb-top-v{font-family:var(--mono);font-weight:800;font-size:1.45rem;color:var(--ink);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-top-hl .cb-top-v{font-size:1.75rem}
.cb-top-v.up{color:var(--up)}.cb-top-v.down{color:var(--down)}
.cb-top-sub{font-size:.66rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){.cb-top-in{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.cb-top-v{font-size:1.2rem}.cb-top-hl .cb-top-v{font-size:1.4rem}}

/* live decision console — terminal look */
.cb-console{margin:16px 0;border-radius:12px;overflow:hidden;
  border:1px solid #1e2a1e;background:#0a0f0a;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.cb-console-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:linear-gradient(180deg,#121a12,#0d130d);border-bottom:1px solid #1e2a1e}
.cb-console-dot{width:9px;height:9px;border-radius:50%;background:#38e07b;
  box-shadow:0 0 8px #38e07b;animation:cbpulse 1.6s infinite}
@keyframes cbpulse{0%,100%{opacity:1}50%{opacity:.35}}
.cb-console-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:#7be0a0;font-weight:800}
.cb-console-sub{font-family:var(--mono);font-size:.62rem;color:#4a6a52;margin-left:auto}
.cb-console-log{height:300px;overflow-y:auto;padding:8px 10px;
  font-family:var(--mono);font-size:.72rem;line-height:1.55;background:#080c08;color:#7fae8a;
  scrollbar-width:thin;scrollbar-color:#1e2a1e #080c08}
.cb-console-log::-webkit-scrollbar{width:8px}.cb-console-log::-webkit-scrollbar-thumb{background:#1e2a1e;border-radius:4px}
.cb-console-line{display:grid;grid-template-columns:62px 54px 58px 1fr;gap:8px;padding:1px 0;white-space:nowrap;overflow:hidden}
.cb-console-line .t{color:#4a6a52}
.cb-console-line .a{font-weight:800}
.cb-console-line .mc{color:#6a8a72}
.cb-console-line .r{color:#8fbf9a;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.cb-console-line.hold{opacity:.75}
.cb-console-line.hold .a{color:#4a6a52}
.cb-console-line.buy .a{color:#38e07b}
.cb-console-line.buy{background:rgba(56,224,123,.06)}
.cb-console-line.sell .a{color:#ff6b6b}
.cb-console-line.sell{background:rgba(255,107,107,.06)}
.cb-console-line.skim .a{color:#ffd166}
.cb-console-line.skim{background:rgba(255,209,102,.07)}
.cb-console-line.dim{color:#4a6a52;grid-template-columns:1fr}
@media(max-width:520px){.cb-console-line{grid-template-columns:52px 46px 1fr}.cb-console-line .mc{display:none}}

/* buys / sells ledger with per-trade P/L */
.cb-ledger{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.cb-led-col{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--panel-solid) 55%,transparent)}
.cb-led-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;font-weight:800}
.cb-led-hd .buys{color:var(--up)}.cb-led-hd .sells{color:var(--down)}
.cb-led-n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);font-weight:700;letter-spacing:0}
.cb-led-realized{margin-left:auto;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:0}
.cb-led-realized.up{color:var(--up)}.cb-led-realized.down{color:var(--down)}
.cb-led-list{max-height:280px;overflow-y:auto;padding:4px 0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cb-led-list::-webkit-scrollbar{width:7px}.cb-led-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.cb-led-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:baseline;
  padding:4px 12px;font-family:var(--mono);font-size:.74rem;font-variant-numeric:tabular-nums;
  border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.cb-led-row .lt{color:var(--ink-3)}
.cb-led-row .lp{color:var(--ink-2)}
.cb-led-row .ls{color:var(--ink-3);font-size:.68rem;text-align:right}
.cb-led-row .lpl{font-weight:700;text-align:right;min-width:56px}
.cb-led-row .lpl.up{color:var(--up)}.cb-led-row .lpl.down{color:var(--down)}
.cb-led-empty{padding:14px 12px;font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
@media(max-width:600px){.cb-ledger{grid-template-columns:1fr}.cb-led-row{grid-template-columns:40px 1fr auto}.cb-led-row .ls{display:none}}
.cb-led-cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 2px 0}
.cb-led-cap b{color:var(--ink-2);font-weight:700}

/* with-bot vs buy-and-hold */
.cb-vsbot{margin:0 0 18px;padding:14px 16px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--leek) 30%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--leek) 8%,transparent),transparent),color-mix(in srgb,var(--panel-solid) 55%,transparent)}
.cb-vsbot-hd{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.cb-vsbot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cb-vsbot-cell{display:flex;flex-direction:column;gap:3px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--ink-3) 22%,transparent)}
.cb-vsbot-cell:first-child{border-left:0;padding-left:0}
.cb-vsbot-cell .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.cb-vsbot-cell .k em{font-style:normal;opacity:.7}
.cb-vsbot-cell .v{font-family:var(--mono);font-weight:800;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.cb-vsbot-cell.hl .v{color:var(--leek)}
.cb-vsbot-cell .v.up{color:var(--up)}.cb-vsbot-cell .v.down{color:var(--down)}
.cb-vsbot-note{margin:12px 0 0;font-size:.72rem;color:var(--ink-3);line-height:1.5}
@media(max-width:560px){.cb-vsbot-row{grid-template-columns:1fr}.cb-vsbot-cell{border-left:0;padding-left:0}}