/* Bearco Buy panel - one place to buy a token once or on repeat, from any page.
   Uses the shared --bc-* palette; the panel is a slide-over on wide screens, a bottom sheet on phones. */
.bb-root { position: fixed; inset: 0; z-index: 9000; display: none; font: 13.5px/1.5 var(--bc-mono); color: var(--bc-text);
  /* the panel carries the shared palette itself, so it looks the same on pages that don't load bearco-core.css */
  --bc-bg: #0B0F10; --bc-panel: #12181A; --bc-card: #171F21; --bc-card2: #1D2628; --bc-border: #26302F;
  --bc-text: #EEF5F2; --bc-dim: #8FA39D; --bc-green: #39FF88; --bc-red: #FF5C5C; --bc-blue: #3DA9FF; --bc-orange: #FFA630;
  --bc-accent: var(--bc-green); --bc-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
.bb-root * { box-sizing: border-box; }
.bb-root .bc-btn { background: var(--bc-card2); color: var(--bc-accent); border: 1px solid var(--bc-border); border-radius: 8px; font: 600 12.5px var(--bc-mono); padding: 7px 12px; cursor: pointer; }
.bb-root .bc-btn:hover:not([disabled]) { border-color: var(--bc-accent); }
.bb-root .bc-btn[disabled] { color: var(--bc-dim); opacity: .7; cursor: not-allowed; }
.bb-root .bc-chip { background: transparent; color: var(--bc-dim); border: 1px solid var(--bc-border); border-radius: 999px; padding: 3px 10px; font: 12px var(--bc-mono); cursor: pointer; }
.bb-root .bc-chip.on { color: #061008; background: var(--bc-accent); border-color: var(--bc-accent); }
.bb-root .bc-select, .bb-root .bc-input { background: var(--bc-card2); color: var(--bc-text); border: 1px solid var(--bc-border); border-radius: 8px; padding: 6px 10px; font: 13px var(--bc-mono); }
.bb-root .bc-input:focus, .bb-root .bc-select:focus { outline: none; border-color: var(--bc-accent); }
.bb-root .bc-ico { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bc-card2); flex: none; }
.bb-root .bc-ico-txt { display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--bc-mono); color: var(--bc-accent); border: 1px solid var(--bc-border); }
.bb-root .bc-dim { color: var(--bc-dim); }
.bb-root.open { display: block; }
.bb-scrim { position: absolute; inset: 0; background: rgba(4, 8, 6, .72); backdrop-filter: blur(2px); }
.bb-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--bc-panel); border-left: 1px solid var(--bc-border);
  display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(0, 0, 0, .5); transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.bb-root.open .bb-panel { transform: none; }
@media (max-width: 640px) {
  .bb-panel { top: auto; left: 0; width: 100vw; max-height: 92vh; border-left: 0; border-top: 1px solid var(--bc-border); border-radius: 16px 16px 0 0; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .bb-panel { transition: none; } }

.bb-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--bc-border); }
.bb-head .bc-ico { width: 36px; height: 36px; }
.bb-title { flex: 1; min-width: 0; }
.bb-title b { font-size: 16px; display: block; }
.bb-title span { color: var(--bc-dim); font-size: 12px; }
.bb-price { text-align: right; font-size: 12px; color: var(--bc-dim); white-space: nowrap; }
.bb-price b { display: block; color: var(--bc-text); font-size: 13px; }
.bb-live { padding: 5px 9px; font-size: 11px; }
@media (max-width: 420px) { .bb-live { padding: 5px 7px; } }
.bb-x { background: none; border: 0; color: var(--bc-dim); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.bb-x:hover, .bb-x:focus-visible { color: var(--bc-text); outline: none; background: var(--bc-card2); }

.bb-body { flex: 1; overflow: auto; padding: 14px 16px 20px; }

/* the flow line - the one thing that should be memorable here */
.bb-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; padding: 14px 12px; margin: 0 0 14px;
  background: linear-gradient(180deg, rgba(57, 255, 136, .07), rgba(57, 255, 136, .02)); border: 1px solid rgba(57, 255, 136, .22); border-radius: 12px; }
.bb-flow .n { text-align: center; min-width: 0; }
.bb-flow .n b { display: block; font-size: 15px; color: var(--bc-text); overflow-wrap: anywhere; line-height: 1.25; }
.bb-flow .n span { display: block; font-size: 11px; color: var(--bc-dim); margin-top: 2px; }
.bb-flow .a { color: var(--bc-green); font-size: 16px; opacity: .8; }
.bb-flow.live b { animation: bb-pulse .5s ease-out; }
@keyframes bb-pulse { from { color: var(--bc-green); } to { color: var(--bc-text); } }
.bb-flow.done { border-color: var(--bc-green); background: rgba(57, 255, 136, .12); }
.bb-flow.done .n b { color: var(--bc-green); }

.bb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.bb-label { font-size: 12px; color: var(--bc-dim); margin: 14px 0 6px; }
.bb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-chips .bc-chip { font: 600 13px var(--bc-mono); padding: 7px 14px; }
.bb-chips input { width: 92px; }
.bc-input.bb-num { font-size: 13px; padding: 6px 10px; }

.bb-seg { display: inline-flex; border: 1px solid var(--bc-border); border-radius: 10px; overflow: hidden; }
.bb-seg button { background: var(--bc-card2); color: var(--bc-dim); border: 0; padding: 8px 18px; font: 600 13px var(--bc-mono); cursor: pointer; }
.bb-seg button + button { border-left: 1px solid var(--bc-border); }
.bb-seg button.on { background: var(--bc-accent); color: #061008; }
.bb-seg button:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: -2px; }

.bb-repeat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.bb-repeat label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--bc-dim); }
.bb-repeat .bc-select, .bb-repeat .bc-input { font-size: 13px; padding: 7px 10px; }
.bb-total { font-size: 12px; color: var(--bc-dim); margin-top: 6px; }
.bb-total b { color: var(--bc-text); }

.bb-fine { font-size: 12px; color: var(--bc-dim); margin: 10px 0 0; }
.bb-fine .bb-floor { background: var(--bc-card2); border: 1px solid var(--bc-border); border-radius: 999px; color: var(--bc-text); cursor: pointer; font: 600 11.5px var(--bc-mono); padding: 2px 9px; }
.bb-fine .bb-floor:hover { border-color: var(--bc-accent); }
.bb-body a { color: var(--bc-dim); } .bb-body a:hover { color: var(--bc-text); }

.bb-go { width: 100%; margin-top: 16px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--bc-accent); background: rgba(57, 255, 136, .14); color: var(--bc-green);
  font: 700 15px var(--bc-mono); cursor: pointer; }
.bb-go:hover:not([disabled]) { background: rgba(57, 255, 136, .22); }
.bb-go[disabled] { opacity: .55; cursor: wait; }
.bb-go:focus-visible { outline: 2px solid var(--bc-green); outline-offset: 2px; }

.bb-msg { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; border: 1px solid; }
.bb-msg.bad { border-color: rgba(255, 92, 92, .5); background: rgba(255, 92, 92, .08); color: #ffb3b3; }
.bb-msg.ok { border-color: rgba(57, 255, 136, .4); background: rgba(57, 255, 136, .07); color: #bfffd9; }
.bb-msg.warn { border-color: rgba(255, 166, 48, .5); background: rgba(255, 166, 48, .08); color: #ffd79a; }

/* guided setup - a short rail of what's left to do */
.bb-steps { display: grid; gap: 8px; margin: 0 0 14px; }
.bb-step { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--bc-border); border-radius: 12px; background: var(--bc-card); }
.bb-step.done { opacity: .55; }
.bb-step.now { border-color: rgba(57, 255, 136, .5); background: var(--bc-card2); }
.bb-step i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bc-border); display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--bc-mono); color: var(--bc-dim); font-style: normal; }
.bb-step.done i { background: var(--bc-green); color: #061008; border-color: var(--bc-green); }
.bb-step.now i { color: var(--bc-green); border-color: var(--bc-green); }
.bb-step b { display: block; font-size: 13px; }
.bb-step p { margin: 3px 0 0; font-size: 12px; color: var(--bc-dim); }
.bb-step .bb-row { margin: 8px 0 0; }
.bb-seed { background: #0a0f0d; border: 1px dashed var(--bc-orange); border-radius: 8px; padding: 10px; letter-spacing: .05em; word-break: break-all; user-select: all; margin: 8px 0; font-size: 12.5px; }
.bb-qr { background: #fff; padding: 6px; border-radius: 8px; width: 132px; height: 132px; }
.bb-qr svg { width: 120px; height: 120px; display: block; }
.bb-fund { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.bb-fund code { display: block; font-size: 11px; word-break: break-all; color: var(--bc-text); }
.bb-bal { font-size: 12px; color: var(--bc-dim); margin-top: 6px; }
.bb-bal b { color: var(--bc-text); }
.bb-step .bc-input { font-size: 13px; padding: 7px 10px; flex: 1 1 140px; min-width: 0; }
.bb-step .bc-btn { padding: 7px 12px; font-size: 12.5px; }
.bb-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bc-text); margin: 8px 0; }

/* plans at the bottom */
.bb-plans { margin-top: 18px; border-top: 1px solid var(--bc-border); padding-top: 12px; }
.bb-plan { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--bc-border); font-size: 12.5px; }
.bb-plan span { color: var(--bc-dim); font-size: 12px; }
.bb-plan .pill { font-size: 10.5px; border: 1px solid var(--bc-border); border-radius: 999px; padding: 1px 8px; color: var(--bc-dim); }
.bb-plan .pill.active { color: var(--bc-green); border-color: rgba(57, 255, 136, .5); }
.bb-plans a { color: var(--bc-dim); font-size: 12px; }

/* a small trigger button pages can drop anywhere */
.bb-trigger { background: rgba(57, 255, 136, .14); color: var(--bc-green); border: 1px solid rgba(57, 255, 136, .55); border-radius: 8px; padding: 4px 12px; font: 700 12px var(--bc-mono); cursor: pointer; }
.bb-trigger:hover { background: rgba(57, 255, 136, .22); }

/* buy / sell switch and the percentage sliders */
.bb-side { margin: 0 0 12px; }
.bb-side button.on.sell { background: var(--bc-orange); color: #1a0f00; }
.bb-amt { margin: 4px 0 2px; }
.bb-slider { width: 100%; accent-color: var(--bc-green); height: 28px; cursor: pointer; }
.bb-slider.sell { accent-color: var(--bc-orange); }
.bb-amt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 2px; }
.bb-amt-row b { font-size: 15px; min-width: 44px; }
.bb-amt-row .bb-num { width: 110px; margin-left: auto; }
.bb-every { display: flex; gap: 6px; }
.bb-every .bc-input { width: 70px; }
.bb-every .bc-select { flex: 1; }
.bb-go.sell { border-color: var(--bc-orange); background: rgba(255, 166, 48, .14); color: var(--bc-orange); }
.bb-go.sell:hover:not([disabled]) { background: rgba(255, 166, 48, .22); }
.bb-flow.done.sell { border-color: var(--bc-orange); }
.bb-trigger.sell { background: rgba(255, 166, 48, .12); color: var(--bc-orange); border-color: rgba(255, 166, 48, .55); }
.bb-trigger.sell:hover { background: rgba(255, 166, 48, .2); }

.bb-root .bb-msg-link { display: inline-block; margin-left: 6px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.bb-root .bb-walletsw { margin: 0 0 10px; align-items: center; gap: 8px; font-size: 12px; }
.bb-root .bb-wname { font-weight: 600; color: var(--bc-text); }
/* wallet address / QR card (2026-11-05) */
.bb-root .bb-winfo-btn { margin-left: auto; font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; color: var(--bc-green); background: transparent; border: 1px solid color-mix(in srgb, var(--bc-green) 45%, transparent); }
.bb-root .bb-winfo-btn:hover, .bb-root .bb-winfo-btn.on { background: color-mix(in srgb, var(--bc-green) 14%, transparent); }
.bb-root .bb-winfo { margin: -2px 0 12px; padding: 10px 12px; border: 1px solid var(--bc-line, rgba(255,255,255,.12)); border-radius: 10px; background: rgba(255,255,255,.03); }
.bb-root .bb-winfo .bb-fund { margin-top: 0; }
.bb-root .bb-winfo-main { min-width: 0; flex: 1; }
.bb-root .bb-winfo .bb-label { margin: 0 0 4px; }
.bb-root .bb-winfo .bb-row { margin: 8px 0 6px; }
.bb-root .bb-winfo-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.bb-root .bb-winfo-link { color: var(--bc-green); text-decoration: none; }
.bb-root .bb-winfo-link:hover { text-decoration: underline; }
.bb-root .bb-winfo-bal { margin-top: 8px; font-size: 12.5px; }
.bb-root .bb-winfo .bb-fine { margin: 6px 0 0; }
/* latest transactions popup (2026-11-05) */
.bb-root .bb-tx-btn { margin-left: 0; }
.bb-root .bb-winfo-btn:first-of-type { margin-left: auto; }
.bb-root .bb-tx-pop { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,6,6,.62); }
.bb-root .bb-tx-card { width: min(440px, 100%); max-height: min(78vh, 640px); display: flex; flex-direction: column; background: var(--bc-panel); border: 1px solid var(--bc-border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; }
.bb-root .bb-tx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bc-border); font-size: 12px; }
.bb-root .bb-tx-head b { font-size: 14px; }
.bb-root .bb-tx-x { background: none; border: 0; color: var(--bc-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bb-root .bb-tx-x:hover { color: var(--bc-text); }
.bb-root .bb-tx-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.bb-root .bb-tx-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 14px; color: var(--bc-text); text-decoration: none; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.04); }
.bb-root .bb-tx-row:hover { background: var(--bc-card); }
.bb-root .bb-tx-row i { font-style: normal; text-align: center; font-weight: 700; color: var(--bc-dim); }
.bb-root .bb-tx-row.k-buy i, .bb-root .bb-tx-row.k-in i { color: var(--bc-green); }
.bb-root .bb-tx-row.k-sell i, .bb-root .bb-tx-row.k-out i { color: var(--bc-orange); }
.bb-root .bb-tx-row.k-fail i, .bb-root .bb-tx-row.k-fail .bb-tx-text { color: var(--bc-red); }
.bb-root .bb-tx-text { min-width: 0; overflow-wrap: anywhere; }
.bb-root .bb-tx-row small { white-space: nowrap; }
.bb-root .bb-tx-empty { padding: 18px 14px; text-align: center; }
.bb-root .bb-tx-empty.bad { color: var(--bc-red); }
.bb-root .bb-tx-foot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--bc-border); font-size: 12px; }
.bb-root .bb-tx-foot .bc-btn { margin-right: auto; }
@media (max-width: 400px) { .bb-root .bb-winfo .bb-fund { flex-direction: column; align-items: center; } }

/* DCA explainer + first-time tip (2026-10-18) */
.bb-why { margin: 8px 0 2px; font-size: 12.5px; color: var(--bc-dim); }
.bb-why summary { cursor: pointer; color: var(--bc-green); width: max-content; list-style: none; }
.bb-why summary::-webkit-details-marker { display: none; }
.bb-why summary::before { content: "ⓘ "; }
.bb-why p { margin: 6px 0 0; line-height: 1.45; }
.bb-hint { color: var(--bc-green) !important; opacity: .85; }
.bb-need{display:inline-block;margin-top:4px;font-size:12px}.bb-need.ok{color:var(--bc-dim)}.bb-need.low{color:#FF5A6E}

.bb-bk{margin:6px 0 10px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:12px}.bb-bk-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--bc-dim)}.bb-bk-row b{font-variant-numeric:tabular-nums;color:inherit;font-weight:600}.bb-bk-row.avail{margin-top:4px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);color:var(--bc-text,#fff)}.bb-bk-row.avail b{color:#3DDC97}

/* Recent transactions: the receipt glyph lands in the blank row (2026-10-19) */
.bb-recent{margin-top:12px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px}
.bb-rx{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:12.5px;border-top:1px solid rgba(255,255,255,.05);border-radius:6px}
.bb-rx:first-of-type{border-top:0}
.bb-rx-dot{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 11px ui-monospace,Menlo,monospace;color:#0B0F10}
.bb-rx.pending .bb-rx-dot{border:2px dashed rgba(255,225,77,.55);animation:bbRxSpin 2.4s linear infinite}
.bb-rx.ok .bb-rx-dot{background:#FFE14D}.bb-rx.fail .bb-rx-dot{background:#FF5A6E}.bb-rx.stale .bb-rx-dot{border:2px solid var(--bc-dim)}
.bb-rx-txt{flex:1;min-width:0}.bb-rx.fail .bb-rx-txt{color:#FF5A6E}.bb-rx.stale .bb-rx-txt{color:var(--bc-dim)}
.bb-rx-wait{flex:1;min-width:0;position:relative;height:16px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.05)}
.bb-rx-wait i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,225,77,.22),transparent);animation:bbRxShim 1.3s linear infinite}
.bb-rx-wait em{position:relative;font-style:normal;font-size:11px;color:var(--bc-dim);padding-left:8px;line-height:16px}
.bb-rx-t{color:var(--bc-dim);font-size:11px;white-space:nowrap}.bb-rx-t a{color:inherit}
.bb-rx.just{animation:bbRxPop .9s ease-out}.bb-rx.just .bb-rx-dot{animation:bbRxDot .5s ease-out}
@keyframes bbRxSpin{to{transform:rotate(360deg)}}
@keyframes bbRxShim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes bbRxPop{0%{background:rgba(255,225,77,.35)}100%{background:transparent}}
@keyframes bbRxDot{0%{transform:scale(1.8)}60%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bb-rx.pending .bb-rx-dot,.bb-rx-wait i,.bb-rx.just,.bb-rx.just .bb-rx-dot{animation:none}}
[data-land].just{animation:bbRxPop .9s ease-out;border-radius:6px}
@media (prefers-reduced-motion:reduce){[data-land].just{animation:none}}

/* Receive Verification (2026-10-24, /shared/bearco-receive.js) - the Conduit app's glyph train into the receiving
   wallet's Recent transactions, for a Buy-once and the first buy of an auto-buy. */
/* .bb-rv* (Receive Verification) moved to /shared/bearco-receive.css (2026-11-04); bearco-receive.js loads it */

/* Buy / Start pressed (2026-10-24): a quick run through greens so it's obvious it went, before the panel closes */
.bb-go.pressed,.bb-go.pressed[disabled]{opacity:1;animation:bbGoPress .55s ease-out forwards}
@keyframes bbGoPress{
  0%{background:#39FF88;color:#06140C;border-color:#39FF88;box-shadow:0 0 0 0 rgba(57,255,136,.7)}
  30%{background:#1FD36E;color:#06140C;border-color:#1FD36E;box-shadow:0 0 0 8px rgba(57,255,136,.25)}
  60%{background:#14A85C;color:#E9FFF2;border-color:#14A85C;box-shadow:0 0 0 14px rgba(57,255,136,0)}
  100%{background:#0E7A43;color:#E9FFF2;border-color:#2BFF7A;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.bb-go.pressed{animation:none;background:#14A85C;color:#E9FFF2}}

/* Connect Xaman (2026-10-27) */
.bb-root .bb-xor { margin: 12px 0 6px; color: var(--bc-dim); font-size: 12.5px; border-top: 1px dashed var(--bc-border); padding-top: 10px; }
.bb-root .bb-payfrom { margin-bottom: 10px; }
.bb-root .bb-payfrom button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bb-root .bb-payfrom .bxc-logo { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.bb-root .bb-xline { margin-top: 6px; }
.bb-root .bb-xline:empty { display: none; }
.bb-root .bb-xfund { margin: 8px 0 10px; flex-wrap: wrap; }
.bb-root .bb-xfund .bb-num { width: 90px; }
.bb-root .bb-xview { display: inline-block; margin: 6px 0 2px; font-size: 12px; color: #8FB2FF; text-decoration: none; }
.bb-root .bb-xview:hover { color: #fff; }

/* limit orders (2026-11-01) */
.bb-seg3 { display: flex; } .bb-seg3 button { flex: 1; padding: 8px 10px; white-space: nowrap; }
@media (max-width: 420px) { .bb-seg3 button { padding: 8px 6px; font-size: 12px; } }
.bb-pxrow { margin: 6px 0 4px; } .bb-pxin { flex: 1; min-width: 140px; font-size: 15px; }
.bb-pxchips { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 6px; }
.bb-chipx { background: transparent; color: var(--bc-dim); border: 1px solid var(--bc-border); border-radius: 999px; padding: 3px 9px; font: 12px var(--bc-mono); cursor: pointer; }
.bb-chipx:hover:not([disabled]) { border-color: var(--bc-accent); color: var(--bc-text); }
.bb-exprow { margin: 8px 0 0; } .bb-exprow .bc-select { flex: none; }
.bb-orders { margin: 0 0 12px; }
.bb-order { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--bc-border); font-size: 12.5px; }
.bb-order b { font-size: 11px; letter-spacing: 1px; } .bb-order.buy b { color: var(--bc-green); } .bb-order.sell b { color: var(--bc-red); }
.bb-order small { color: var(--bc-dim); }
.bb-ocancel { background: transparent; color: var(--bc-dim); border: 1px solid var(--bc-border); border-radius: 8px; padding: 3px 10px; font: 600 11.5px var(--bc-mono); cursor: pointer; }
.bb-ocancel:hover:not([disabled]) { color: var(--bc-red); border-color: var(--bc-red); }
.bb-orders > .bc-btn { margin-top: 8px; }
.bb-cross { color: var(--bc-orange); font-size: 12px; margin: 6px 0 0; }

/* ladder (2026-11-01) */
.bb-ladtog { display: inline-flex; margin-top: 8px; } .bb-ladtog button { padding: 6px 14px; font-size: 12px; }
.bb-ladside { border: 1px solid var(--bc-border); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; background: var(--bc-card); }
.bb-ladside.buy { border-left: 3px solid var(--bc-green); } .bb-ladside.sell { border-left: 3px solid var(--bc-red); }
.bb-ladside-h { display: flex; gap: 8px; align-items: baseline; font-size: 12px; } .bb-ladside.buy .bb-ladside-h b { color: var(--bc-green); } .bb-ladside.sell .bb-ladside-h b { color: var(--bc-red); }
.bb-ladrow { margin: 8px 0 4px; gap: 6px; font-size: 12.5px; }
.bb-pctin { display: inline-flex; align-items: center; gap: 2px; color: var(--bc-dim); }
.bb-pct { width: 70px; } .bb-n { width: 58px; }
.bb-skewrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
.bb-skew { accent-color: var(--bc-accent); }
.bb-skewtxt { margin: 2px 0 0; } .bb-skew-v { color: var(--bc-text); }
.bb-draghint { font-weight: 400; letter-spacing: 0; text-transform: none; }
.bb-ladviz { background: #0a0e0f; border: 1px solid var(--bc-border); border-radius: 10px; padding: 4px; margin: 6px 0; touch-action: none; }
.bb-ladsvg { width: 100%; height: auto; display: block; font-family: var(--bc-mono); user-select: none; }
.bb-ladh { cursor: ns-resize; } .bb-ladh:focus { outline: none; } .bb-ladh:focus rect:nth-child(2), .bb-ladh:hover rect:nth-child(2) { stroke-width: 2.2; }
body.bb-dragging, body.bb-dragging * { cursor: ns-resize !important; user-select: none !important; }
.bb-total .bb-up { color: var(--bc-green); } .bb-total .bb-dn { color: var(--bc-red); }
.bb-ladtbl { max-height: 280px; overflow-y: auto; border-top: 1px solid var(--bc-border); margin: 6px 0; font-size: 12px; }
.bb-ladr { display: grid; grid-template-columns: 38px 1fr 52px 1fr 1fr 24px; gap: 6px; align-items: center; padding: 3px 2px; border-bottom: 1px dotted var(--bc-border); }
.bb-ladr .num { text-align: right; font-variant-numeric: tabular-nums; } .bb-ladr small { color: var(--bc-dim); text-align: right; }
.bb-ladr b { font-size: 10.5px; letter-spacing: 1px; } .bb-ladr.buy b { color: var(--bc-green); } .bb-ladr.sell b { color: var(--bc-red); }
.bb-ladr.off { opacity: .4; } .bb-ladr.off .num:first-of-type { text-decoration: line-through; }
.bb-ladx { background: transparent; border: 1px solid var(--bc-border); color: var(--bc-dim); border-radius: 6px; width: 22px; height: 20px; padding: 0; cursor: pointer; font: 12px var(--bc-mono); }
.bb-ladx:hover { color: var(--bc-text); border-color: var(--bc-dim); }
.bb-ladmid { text-align: center; color: var(--bc-text); font-size: 11px; padding: 4px 0; border-top: 1px dashed var(--bc-dim); border-bottom: 1px dashed var(--bc-dim); margin: 2px 0; }
.bb-ladcancel { margin: 8px 6px 0 0; }
.bb-flow-lad { justify-content: flex-start; }
/* docked beside a full-size chart while laddering (2026-11-01): no dimmed backdrop, the page behind stays usable */
.bb-root.bb-dock { pointer-events: none; }
.bb-root.bb-dock .bb-scrim { display: none; }
.bb-root.bb-dock .bb-panel { pointer-events: auto; box-shadow: -12px 0 30px rgba(0,0,0,.45); }
.bb-bighint { margin: 2px 0 6px; }
@media (max-width: 640px) {
  .bb-root.bb-dock .bb-panel { max-height: 50vh; box-shadow: 0 -12px 30px rgba(0,0,0,.5); }
}
/* big ladder chart beside the docked panel, on pages that have no chart of their own (2026-11-01) */
.bb-lc { position: absolute; left: 0; top: 0; bottom: 0; right: min(460px, 100vw); pointer-events: auto; background: #070b0c; border-right: 1px solid var(--bc-border); display: flex; flex-direction: column; padding: 12px 14px 10px; gap: 8px; }
.bb-lc-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; } .bb-lc-h b { color: var(--bc-accent); letter-spacing: 1px; font-size: 13px; } .bb-lc-sp { flex: 1; }
.bb-lc-ivs { display: flex; gap: 4px; } .bb-chipx.on { background: var(--bc-accent); color: #061008; border-color: var(--bc-accent); }
.bb-lc-box { position: relative; flex: 1; min-height: 0; border: 1px solid var(--bc-border); border-radius: 10px; overflow: hidden; }
.bb-lc-plot { position: absolute; inset: 0; }
.bb-lc-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bc-dim); text-align: center; padding: 20px; background: rgba(7,11,12,.6); z-index: 3; pointer-events: none; }
.bb-lc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bb-lch { position: absolute; transform: translateY(-50%); pointer-events: auto; cursor: ns-resize; touch-action: none; user-select: none; font: 700 11px var(--bc-mono); padding: 4px 10px; border-radius: 999px; background: #0B0F10; border: 1.5px solid currentColor; box-shadow: 0 2px 10px rgba(0,0,0,.6); white-space: nowrap; }
.bb-lch-buy { color: var(--bc-green); } .bb-lch-sell { color: var(--bc-red); }
.bb-lch:hover, .bb-lch:focus { outline: none; background: #121a1c; box-shadow: 0 0 0 3px rgba(238,245,242,.12), 0 2px 10px rgba(0,0,0,.6); }
@media (max-width: 640px) {
  .bb-lc { right: 0; bottom: 50vh; border-right: 0; border-bottom: 1px solid var(--bc-border); padding: 8px 8px 6px; }
  .bb-lc-h > span.bc-dim { display: none; }
}
.bb-lc[hidden], .bb-lc-msg[hidden] { display: none !important; }
.bb-flow.bb-flow-lad:not(.live):not(.done) { display: none; }

/* beside the chart (2026-11-07): from the token page and Quick Look the panel docks with no backdrop, like the ladder dock */
.bb-root.bb-side { pointer-events: none; }
.bb-root.bb-side .bb-scrim { display: none; }
.bb-root.bb-side .bb-panel { pointer-events: auto; box-shadow: -12px 0 30px rgba(0,0,0,.45); }
@media (max-width: 640px) { .bb-root.bb-side .bb-panel { max-height: 50vh; box-shadow: 0 -12px 30px rgba(0,0,0,.5); } }
@media (min-width: 641px) and (max-width: 900px) {   /* tablets: beside-the-chart panel becomes a bottom half so the chart above stays visible */
  .bb-root.bb-side:not(.bb-dock) .bb-panel { top: auto; left: 0; width: 100vw; max-height: 50vh; border-left: 0; border-top: 1px solid var(--bc-border); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.5); }
}