/* Trading terminal. Loads after theme.css. Same "chip & ledger" identity as
   the landing page, but the gamified flourish (chip-cut corners, gold
   glow) is confined to jackpot-adjacent surfaces — the winner banner, the
   rebate panel — while anything showing real trade math (chart, order
   form, trade log) stays a clean rectangular ledger card. Numbers should
   never look like they're part of the game. */

body { font-size: 13.5px; }

.app {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px 64px;
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-strong);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-link { display: flex; align-items: center; gap: 9px; }

.chip-mark { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.brand-link:hover .chip-mark { transform: rotate(24deg) scale(1.08); }

.brand .name {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.net-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--red);
  color: var(--red);
  background: rgba(255,107,122,0.08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 100px;
}

.net-badge-muted:empty { display: none; }

.wallet-area { display: flex; align-items: center; gap: 10px; }

.wallet-balance {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  display: none;
}

@keyframes wallet-balance-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.wallet-balance.visible { display: inline; animation: wallet-balance-in 0.3s ease; }

/* ---------- Layout ---------- */
/* The old two-column .grid/.stack layout (chart+trades | buy/sell+extras)
 * was replaced by the fullscreen terminal shell below — see
 * body.terminal-fullscreen. Nothing in terminal.html references .grid/
 * .stack any more (confirmed no other page using this stylesheet does
 * either), so there's nothing left to keep here. */

@media (max-width: 560px) {
  .app { padding: 16px 14px 48px; }
  .panel { padding: 16px; }
  body { font-size: 13px; }
}

/* ---------- Reactive overlay theme ----------
 * Defaults here match the hardcoded look this replaced; js/chartControls.js
 * (applyOverlayTheme) overwrites these three on load and on every chart
 * color change (background/text specifically — see chartTheme.js), so
 * every floating panel that sits on top of the chart (.chart-hud,
 * .chart-actions, .widget-btn, .widget-popup, .trade-widget,
 * .drawing-toolbar) stays legible no matter what background/text color the
 * user picks in the chart-colors popover, instead of a fixed dark chip that
 * could blend into a light custom background. */
:root {
  --overlay-bg: rgba(18, 20, 30, 0.92);
  --overlay-border: var(--border-strong);
  --overlay-text: var(--text-dim);
}

/* ---------- Fullscreen terminal shell ----------
 * Scoped to body.terminal-fullscreen (set only in terminal.html) so
 * news.html/admin.html — which also load this stylesheet and share .app/
 * .panel/.topbar/.winner-banner — are completely unaffected.
 *
 * The whole page is permanently one fullscreen screen: the chart fills
 * everything below a slim topbar overlay, buy/sell floats as a persistent
 * card (.trade-widget), and Recent trades/Rebate/Team/Referral/Market info
 * are all popup widgets (.widget-bar triggers → .widget-popup) rather than
 * inline panels competing with the chart for space. No page scroll —
 * everything here is position: fixed over a height-locked shell. */

body.terminal-fullscreen { overflow: hidden; height: 100vh; }
body.terminal-fullscreen .app { display: flex; flex-direction: column; height: 100vh; max-width: none; padding: 0; }

/* Slim translucent overlay bar instead of a normal-flow header that would
 * push the chart down. */
body.terminal-fullscreen .topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 15;
  margin: 0;
  padding: 10px 20px;
  background: rgba(10, 11, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-strong);
}

/* Compact overlay strip just under the topbar, instead of a full-width
 * block that pushes the chart down. */
body.terminal-fullscreen .winner-banner {
  position: fixed;
  top: 60px;
  left: 16px;
  right: 16px;
  z-index: 12;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 18px;
  font-size: 12.5px;
}

body.terminal-fullscreen .chart-row {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 8px 8px;
}

/* ---------- App-shell entrance ----------
 * The skeleton screen (see further down) sits at z-index:300, fully
 * covering the real topbar/chart/widgets while data is still loading — so
 * these can start invisible with no flash of unstyled content, and simply
 * fade + rise into place underneath as the skeleton fades out on top of
 * them (see revealApp() in app.js, which adds .app-loaded to <body> at
 * the same moment it starts that skeleton fade). Staggered per element
 * instead of the whole app appearing in one flat pop. Scoped to
 * body.terminal-fullscreen specifically — admin.html/news.html load this
 * same stylesheet for .topbar/.panel but have no skeleton screen of their
 * own, so they'd otherwise inherit a topbar permanently stuck at opacity:0. */
body.terminal-fullscreen .topbar,
body.terminal-fullscreen .chart-row,
body.terminal-fullscreen .widget-bar,
body.terminal-fullscreen .trade-widget,
body.terminal-fullscreen .mobile-tabbar {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.terminal-fullscreen.app-loaded .topbar { opacity: 1; transform: none; }
body.terminal-fullscreen.app-loaded .chart-row { opacity: 1; transform: none; transition-delay: 70ms; }
body.terminal-fullscreen.app-loaded .widget-bar { opacity: 1; transform: none; transition-delay: 130ms; }
body.terminal-fullscreen.app-loaded .trade-widget { opacity: 1; transform: none; transition-delay: 190ms; }
body.terminal-fullscreen.app-loaded .mobile-tabbar { opacity: 1; transform: none; transition-delay: 150ms; }

/* ---------- Little widgets (Recent trades / Rebate / Team / Referral /
   Market info) — see js/app.js's widget-bar/widget-popup controller.
   A row of small trigger buttons plus a single floating popup panel; only
   one widget's content shows at a time. ---------- */

.widget-bar {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.widget-bar-scroll {
  display: flex;
  gap: 6px;
  min-width: 0;
}

/* #widget-bar-toggle stays visible when collapsed (see below) — everything
 * else in the row hides, so there's still a way to bring it back. */
.widget-bar.collapsed .widget-bar-scroll { display: none; }

.widget-bar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  color: var(--overlay-text);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.widget-bar-toggle:hover { color: var(--green); }
.widget-bar-toggle:active { transform: scale(0.85); }
.widget-bar-toggle svg { width: 14px; height: 14px; pointer-events: none; }
/* Chevron points down ("collapse") by default, flips to point up
 * ("expand") once collapsed. */
.widget-bar.collapsed .widget-bar-toggle svg { transform: rotate(180deg); }

.widget-btn {
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  color: var(--overlay-text);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.widget-btn:hover { color: var(--text); transform: translateY(-1px); }
.widget-btn:active { transform: translateY(0) scale(0.94); }
.widget-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(46,230,184,0.14);
  box-shadow: var(--shadow-glow-green), var(--shadow-sm);
}

/* Same chip-cut + gradient-stripe treatment as .trade-widget, for a
 * consistent "chip" language across every floating widget. */
.widget-popup {
  position: fixed;
  z-index: 21;
  top: 112px;
  right: 16px;
  width: 340px;
  max-height: calc(100vh - 132px);
  overflow: auto;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  color: var(--overlay-text);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: var(--shadow-lg);
  padding: 21px 18px 18px;
  /* Re-triggers every time [hidden] toggles off (see js/app.js's
   * openWidget) — a little pop on open feels a lot better than an instant
   * appear/disappear. */
  animation: widget-pop-in 0.2s cubic-bezier(0.16,1,0.3,1);
  transform-origin: top right;
}

@keyframes widget-pop-in {
  0% { transform: scale(0.9) translateY(-6px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.widget-popup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
}

.widget-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.widget-popup-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.widget-popup-close:hover { color: var(--text); }

/* Recent trades' table gets its own scroll region instead of expanding the
 * whole popup — the popup itself already scrolls (see .widget-popup) as a
 * fallback, but a fixed inner max-height keeps the table from single-
 * handedly blowing past that before other content (title, hint text) even
 * gets a chance to show. */
#widget-content-trades .table-scroll { max-height: 50vh; }

/* Buy/sell — always visible, floating; collapsible (see
 * #trade-widget-collapse-btn/.trade-widget-body below) but not a
 * click-to-open widget like the ones above. */
/* Gold/teal gradient chip edge along the top — same --gradient used for the
 * curve progress fill — plus a chip-cut corner, echoing the jackpot ticket
 * motif (.panel-rebate/.winner-banner in theme.css) on the terminal's main
 * action card instead of confining it to jackpot-only surfaces. The stripe
 * is a ::before rather than a top border-image, which would smear the
 * gradient unevenly across all four (mismatched-width) sides instead of
 * staying a clean top accent. */
.trade-widget {
  position: fixed;
  z-index: 15;
  right: 16px;
  bottom: 16px;
  width: 320px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  color: var(--overlay-text);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: var(--shadow-lg);
  padding: 23px 20px 20px;
}

.trade-widget::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
}

/* The "cha-ching" moment — restarted by pulseElement() right after a trade
 * confirms (see the submit-trade handler in app.js). */
.trade-widget.success-flash { animation: trade-success-glow 0.8s ease; }

@keyframes trade-success-glow {
  0% { box-shadow: 0 0 0 0 rgba(46,230,184,0.7), var(--shadow-lg); }
  30% { box-shadow: 0 0 0 6px rgba(46,230,184,0.3), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 0 rgba(46,230,184,0), var(--shadow-lg); }
}

/* Collapsed: only the title row and the bottom collapse handle stay
 * visible, shrunk to a slim pill instead of the full card. */
.trade-widget.collapsed { max-height: none; overflow: visible; }
.trade-widget.collapsed .trade-widget-body { display: none; }
.trade-widget.collapsed .panel-title { margin-bottom: 0; }
.trade-widget.collapsed .trade-widget-collapse-bottom { margin-top: 0; }

.widget-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--overlay-text);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.widget-collapse-btn:hover { color: var(--green); }
.widget-collapse-btn:active { transform: scale(0.85); }
.widget-collapse-btn svg { width: 13px; height: 13px; pointer-events: none; }
/* Chevron points down ("collapse") by default, flips to point up
 * ("expand") once collapsed. */
.trade-widget.collapsed .widget-collapse-btn svg { transform: rotate(180deg); }

/* A full-width bottom handle rather than a small top-corner button — same
 * chevron convention (down = collapse, flips to up = expand) as
 * .chart-hud-toggle above, just anchored to the other edge of the card. */
.trade-widget-collapse-bottom {
  width: 100%;
  height: 16px;
  margin-top: 12px;
  opacity: 0.6;
}
.trade-widget-collapse-bottom:hover { opacity: 1; }

/* Hidden by default (desktop); the media query below turns it into the
 * primary mobile navigation. Declared here, ahead of that block, so the
 * media query's own `display: flex` reliably wins under 900px regardless
 * of source order — the usual mobile-first-safe ordering used once more
 * further down for .mobile-tab. */
.mobile-tabbar { display: none; }

/* Replayed on every tab switch (see the four mobile-tab-* rules below that
 * apply it) — an element animates fresh whenever it goes from display:none
 * to displayed, so this doesn't need any JS-side class juggling to
 * retrigger each time. */
@keyframes tab-pane-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  /* ---------- Mobile mode: three dedicated full-screen tabs ----------
   * Desktop's whole design is "the chart is a fullscreen background,
   * everything else floats on top of it" — .chart-hud/.widget-bar/
   * .trade-widget are all position:fixed overlays. That works because a
   * desktop viewport has far more height than any of them need, so they
   * never actually compete with the chart for space.
   *
   * A phone doesn't have that surplus. The previous mobile mode tried to
   * solve this by stacking everything in .app's flex column instead —
   * chart-hud, widget-bar and the trade dock all fighting for a share of
   * one short viewport at the same time — which meant the chart itself
   * was left with whatever sliver was left over, often less than half the
   * screen, with a wall of secondary UI above and below it.
   *
   * This mode gives Chart, Trade and Activity (the old widget-bar/
   * widget-popup pair, renamed here since it's no longer a small popup)
   * each the *entire* screen below the topbar, one at a time, switched by
   * the persistent bottom tab bar (see .mobile-tabbar below and
   * setMobileTab() in js/app.js, which just toggles a `mobile-tab-*` class
   * on <body> — every rule here keys off that class). Only the topbar and
   * an active winner-banner stay visible across all three, since wallet
   * balance and jackpot alerts matter regardless of which tab is open. */

  body.terminal-fullscreen .topbar {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Right-aligns the balance/address on their own wrapped line instead of
   * sitting flush left under the logo. */
  .wallet-area { margin-left: auto; }

  body.terminal-fullscreen .winner-banner {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    max-width: none;
    margin: 8px 12px 0;
  }

  /* .widget-bar/.widget-popup/.trade-widget are fully tab-gated — only one
   * of Trade/Activity's content is ever on screen. .chart-row is
   * different: it stays visible on *every* tab (see below), because a lot
   * of trades are timed off it — "wait till the curve crosses a point,
   * then buy" doesn't work if switching to Trade to actually place that
   * buy hides the number you were watching. Only the candlestick canvas
   * itself (plus its action buttons and the drawing-tools column) is
   * Chart-tab-only; the ticker bar above it (.chart-hud — mint, price,
   * curve progress) isn't. */
  .widget-bar,
  .widget-popup,
  body.terminal-fullscreen .trade-widget {
    display: none;
  }

  /* ---------- Chart row: ticker always on, canvas Chart-tab-only ---------- */

  body.terminal-fullscreen .chart-row {
    display: flex;
    position: static;
    flex: none;
    min-height: 0;
    top: auto;
    padding: 0 8px 8px;
  }
  /* Only the Chart tab lets this grow to fill the screen — on Trade/
   * Activity it shrinks to exactly its ticker's height (see .chart-wrap's
   * min-height:0 below), leaving the rest of the screen to whichever of
   * those two is active. */
  body.mobile-tab-chart.terminal-fullscreen .chart-row { flex: 1; animation: tab-pane-in 0.25s ease; }

  /* The chart owns one flex column of its own: the ticker header, then —
   * Chart tab only — the candles filling whatever's left below it. Extra
   * specificity (body.terminal-fullscreen ...): the base `.chart-wrap`
   * rule (further down this file) sets `min-height: 260px` at equal
   * selector specificity, and being textually later would otherwise win
   * on source order alone, which would stop this from ever shrinking down
   * to just the ticker on Trade/Activity. */
  body.terminal-fullscreen .chart-wrap { display: flex; flex-direction: column; min-height: 0; }

  /* Flat, full-width header bar instead of a floating card cut into the
   * candles — on the Chart tab it's not sitting on top of the candles any
   * more (the tab has the full screen to itself), and on every other tab
   * there's no chart underneath it at all, so there's nothing left to see
   * through or cut a chip corner around either way. Same content as
   * desktop (mint/status, price/delta, the collapsible mode-toggle +
   * progress bar), just shrunk down and laid out as a normal toolbar. */
  /* Extra specificity (body.terminal-fullscreen ...), not just for style:
   * the base `.chart-hud { ... }` rule (further down this file, in its own
   * section) sets the exact same properties — position/width/clip-path/
   * border/background/box-shadow — at equal specificity, and would win on
   * source order alone if this were a plain `.chart-hud { ... }` here. */
  body.terminal-fullscreen .chart-hud {
    position: static;
    flex: none;
    width: auto;
    max-width: none;
    clip-path: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-alt);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 8px 12px 10px;
  }
  .chart-hud .panel-title { margin-bottom: 6px; font-size: 10px; }
  .chart-hud .price-row { margin-bottom: 8px; }
  .chart-hud .price-main { font-size: 19px; }
  .chart-hud .chart-mode-row { gap: 5px; }
  .chart-hud .chart-mode-btn { padding: 5px 9px; font-size: 10.5px; }
  .chart-hud .progress-outer { margin-top: 10px; }

  /* The canvas, its action buttons and the drawing-tools column only make
   * sense while Chart is the active tab — on Trade/Activity there's no
   * chart left underneath the ticker for any of them to act on. */
  body:not(.mobile-tab-chart) #chart-container,
  body:not(.mobile-tab-chart) #chart-container-advanced,
  body:not(.mobile-tab-chart) .chart-actions,
  body:not(.mobile-tab-chart) .chart-popover {
    display: none;
  }
  #chart-container, #chart-container-advanced { flex: 1; min-height: 0; }

  /* .chart-actions is absolutely positioned against .chart-wrap as a
   * whole, not against the canvas alone — .chart-wrap's box includes
   * .chart-hud above the canvas (see the flex column set up above), so a
   * top-anchored position would land on top of the mint/price ticker
   * instead of the chart. Staying bottom-left like desktop (see the
   * non-mobile rule further down this file) but with a bigger bottom
   * offset: on a phone the chart only gets a fraction of desktop's
   * height, so the time-axis labels along the bottom edge take up a much
   * bigger share of it, and the desktop offset sat right on top of them.
   * Extra specificity (body.terminal-fullscreen ...), not just for style:
   * the base `.chart-actions`/`.chart-popover` rules (further down this
   * file) set this same `bottom` at equal specificity, and being
   * textually later would otherwise win on source order alone. */
  body.terminal-fullscreen .chart-actions { bottom: 34px; }
  body.terminal-fullscreen .chart-popover { bottom: 72px; }

  /* On desktop, collapsing the hud hides the mint/price ticker along with
   * everything else — there's no shortage of chart to spare, so "collapsed"
   * just means "get it out of the way entirely." On a phone the ticker is
   * the one thing worth keeping visible at all times (see .chart-hud-extra
   * in terminal.html); only the mode toggle + progress bar — genuinely
   * secondary next to a live price — collapse away. */
  body.terminal-fullscreen .chart-hud.collapsed { padding: 8px 12px 10px; }
  body.terminal-fullscreen .chart-hud.collapsed .chart-hud-toggle { margin-bottom: 8px; }
  body.terminal-fullscreen .chart-hud.collapsed .chart-hud-body { display: block; }
  .chart-hud.collapsed .chart-hud-extra { display: none; }

  /* The drawing toolbar is a permanent-width sibling column next to the
   * chart — on desktop that's a minor 38px bite out of a wide chart; on a
   * phone it's a meaningful chunk of the whole screen for a power-user
   * feature most mobile visitors won't reach for. Simplest fix, matching
   * how most mobile trading UIs drop advanced drawing tools entirely:
   * hide it below the desktop/tablet breakpoint. */
  body.terminal-fullscreen .drawing-toolbar-mount { display: none; }

  /* ---------- Trade tab ----------
   * Full screen, not a floating card: the chip-cut corner/shadow/backdrop
   * blur that read as "a card sitting on top of the chart" on desktop
   * would just look like unexplained clipping on its own full-bleed
   * screen, so those drop the same way .chart-hud's do above. The
   * collapse handle goes too — there's no chart underneath left to
   * protect, so "collapsed" has nothing left to accomplish. Buy/Sell,
   * slippage and the cost breakdown all stay permanently visible instead
   * of being tucked behind a tap, which is the one thing the old
   * always-collapsed-by-default mobile trade widget couldn't afford to do. */
  body.mobile-tab-trade.terminal-fullscreen .trade-widget {
    display: flex;
    flex-direction: column;
    position: static;
    flex: 1;
    min-height: 0;
    width: auto;
    max-height: none;
    overflow-y: auto;
    clip-path: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: tab-pane-in 0.25s ease;
  }
  body.mobile-tab-trade.terminal-fullscreen .trade-widget.collapsed .trade-widget-body { display: block; }
  .trade-widget-collapse-bottom { display: none; }
  .trade-widget .panel-title { font-size: 12px; margin-bottom: 18px; }

  /* ---------- Activity tab ----------
   * The old Trades/Rebate/Team/Referral/Market-info pill row (.widget-bar)
   * becomes this screen's own sub-navigation — a sticky segmented control
   * above the content — instead of a small floating row competing with
   * the chart for the top-right corner. */
  body.mobile-tab-activity .widget-bar {
    display: flex;
    position: static;
    margin: 0;
    max-width: none;
    flex: none;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    animation: tab-pane-in 0.25s ease;
  }

  /* No longer meaningful once the pill row is a permanent sub-nav rather
   * than an optional floating strip — the bottom tab bar is now the only
   * way in or out of this screen. */
  .widget-bar-toggle { display: none; }

  /* Five pills don't fit a phone's width on one line — rather than
   * wrapping (which would push the last pill half off-screen with no page
   * scroll to fall back on) this scrolls horizontally on its own. The
   * trailing mask-image fade is meant to read as "there's more, keep
   * scrolling" — but the mask is painted against this element's own box,
   * which stays put while only its content scrolls, so without the
   * padding-right below it permanently dims the last 28px of that box
   * even once you've scrolled all the way and Market info (last in the
   * row) has nothing left after it to hint at. The padding pushes that
   * last pill fully clear of the fade zone; once scrolled to the end, the
   * fade lands on the empty gutter after it instead. */
  .widget-bar-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
  .widget-bar-scroll::-webkit-scrollbar { display: none; }
  .widget-bar-scroll .widget-btn { flex: none; }
  body.mobile-tab-activity .widget-btn { padding: 9px 15px; font-size: 11.5px; }

  body.mobile-tab-activity .widget-popup {
    display: block;
    position: static;
    flex: 1;
    min-height: 0;
    width: auto;
    max-height: none;
    overflow-y: auto;
    border: none;
    clip-path: none;
    box-shadow: none;
    /* Overrides the base .widget-popup's own widget-pop-in (a small-card
     * scale-up) — this is a full-height pane now, not a floating popup, so
     * the same flat fade+rise every other tab pane uses fits better. */
    animation: tab-pane-in 0.25s ease;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* The 50vh cap on desktop/the old popup existed to keep the table from
   * blowing past the popup's own limited height — moot now that Activity
   * has the whole screen, so the table can use all of it. */
  body.mobile-tab-activity #widget-content-trades .table-scroll { max-height: none; }

  /* ---------- Bottom tab bar ---------- */

  .mobile-tabbar {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 11, 18, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-strong);
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 0 5px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .mobile-tab svg { width: 20px; height: 20px; pointer-events: none; }
  .mobile-tab:active { transform: scale(0.92); }
  .mobile-tab.active { color: var(--green); background: rgba(46,230,184,0.1); }

  /* .mobile-tabbar now owns the bottom edge on mobile — .motion-toggle
   * (theme.css, shared across every page) would otherwise float on top of
   * it in the bottom-left corner. music-widget already hides on mobile
   * for the same reason (see theme.css); same precedent, applied here. */
  .motion-toggle { display: none; }
}

/* ---------- Panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel:hover { border-color: var(--border-strong); }

.panel-muted {
  background: var(--surface-alt);
  box-shadow: none;
}

/* jackpot-adjacent surface — carries the chip-cut ticket motif */
.panel-rebate {
  border-color: var(--amber);
  background: linear-gradient(160deg, rgba(255,176,32,0.08), var(--surface) 60%);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* ---------- Team panel ----------
   Deliberately plain — not the jackpot ticket motif (gold is reserved for
   jackpot/game content elsewhere on this page); violet is the site's
   quiet secondary accent, used here since this is a social/organizational
   feature, not a payout one — the payout itself is unchanged. */

.team-members {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  padding: 7px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.team-chip .mono { color: var(--violet); font-weight: 700; }

.team-plus { color: var(--text-faint); font-weight: 700; font-size: 13px; }

.team-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

#team-address-input {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#team-address-input::placeholder { color: var(--text-faint); }

#team-address-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,230,184,0.15); }

#team-msg { margin-top: 12px; }

#team-linked-state .stat-grid { margin-top: 0; }
#team-linked-state .btn { margin-top: 18px; }

#referral-copy-btn { margin-top: 18px; }

.panel-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title .accent { color: var(--green); }
.accent-violet { color: var(--violet); }
.accent-amber { color: var(--amber); font-size: 11px; font-weight: 700; }
.accent-muted { color: var(--text-faint); font-size: 11px; }

.hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; margin: 0 0 10px; }

.hint-link { display: block; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 8px; }
.hint-link:hover { text-decoration: underline; }

/* #footer-program's full base58 program address has no spaces to break
 * on, so it overflows the 340px-wide Market info popup (any viewport,
 * not just mobile) unless told where it can wrap. */
#footer-program { word-break: break-all; }

/* ---------- Price header ---------- */

.price-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.price-main {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
}

.price-main .unit {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
}

.price-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid transparent;
}

.price-delta.up { color: var(--green); background: rgba(46,230,184,0.1); border-color: var(--green); animation: flash-pop 0.4s; }
.price-delta.down { color: var(--red); background: rgba(255,107,122,0.1); border-color: var(--red); animation: flash-pop 0.4s; }

/* The big number itself flashes too, not just the delta badge next to it —
 * see pulseElement()/renderCurveStats() in app.js, which restarts this
 * class every time market cap actually moves. */
#price-value.price-tick-up { animation: price-tick-up 0.5s ease; }
#price-value.price-tick-down { animation: price-tick-down 0.5s ease; }

@keyframes price-tick-up {
  0% { color: var(--green); transform: scale(1.12); }
  100% { color: var(--text); transform: scale(1); }
}
@keyframes price-tick-down {
  0% { color: var(--red); transform: scale(1.12); }
  100% { color: var(--text); transform: scale(1); }
}
.price-delta.flat { color: var(--text-faint); background: var(--surface-alt); border-color: var(--border); }

@keyframes flash-pop {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.status-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; }

/* ---------- Chart ---------- */

.chart-mode-row { display: flex; gap: 7px; margin-bottom: 12px; }

.chart-mode-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.chart-mode-btn:active { transform: scale(0.94); }

.chart-mode-btn:hover { color: var(--text); }
.chart-mode-btn.active { border-color: var(--green); color: var(--green); background: rgba(46,230,184,0.1); }

.chart-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.chart-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  /* Fills whatever height .chart-row (position: fixed, see the fullscreen
   * shell section above) ends up with, via .chart-row's own
   * align-items: stretch — no fixed height needed, on any viewport size,
   * since terminal.html is permanently fullscreen now. */
  height: auto;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

/* Always-on price ticker + mode toggle + progress bar, overlaid top-left
 * on the chart — real terminals keep this visible permanently, unlike the
 * Recent trades/Rebate/Team/Referral/Market info widgets (see .widget-bar
 * below), which are click-to-open. Translucent so candles stay visible
 * behind it; compact width so it doesn't crowd the chart itself. Chip-cut
 * corner + amber-tinted border ties it to the jackpot motif (see
 * .panel-rebate/.winner-banner in theme.css) — curve progress is jackpot
 * progress, after all. Collapsible via #chart-hud-toggle, same pattern as
 * .trade-widget/.widget-bar. */
.chart-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  width: 260px;
  max-width: calc(100% - 24px);
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,176,32,0.35);
  color: var(--overlay-text);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 10px 16px 14px;
  box-shadow: var(--shadow-sm);
}
.chart-hud .panel-title { margin-bottom: 10px; }
.chart-hud .price-row { margin-bottom: 12px; }
.chart-hud .price-main { font-size: 22px; }
.chart-hud .chart-mode-row { margin-bottom: 0; }
.chart-hud .progress-outer { margin-top: 14px; }

.chart-hud-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
  border: none;
  background: none;
  color: var(--overlay-text);
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.chart-hud-toggle:hover { opacity: 1; color: var(--green); }
.chart-hud-toggle:active { transform: scale(0.85); }
.chart-hud-toggle svg { width: 13px; height: 13px; pointer-events: none; }

.chart-hud.collapsed { padding: 6px 16px; }
.chart-hud.collapsed .chart-hud-toggle { margin-bottom: 0; }
.chart-hud.collapsed .chart-hud-body { display: none; }
.chart-hud.collapsed .chart-hud-toggle svg { transform: rotate(180deg); }

#chart-container,
#chart-container-advanced { width: 100%; height: 100%; }

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
  padding: 0 20px;
}

/* ---------- Drawing toolbar (see js/drawingTools.js) ----------
   A real column next to the chart — a sibling inside .chart-row, not an
   overlay on top of the candles — mirroring TradingView's own left-side
   drawing toolbar, which likewise sits outside the plotting area. Sized by
   .drawing-toolbar-mount (a plain flex child); align-items:stretch on
   .chart-row makes it match .chart-wrap's height automatically, and
   overflow-y:auto is just a safety net for the shorter mobile chart. */

.drawing-toolbar-mount { flex: none; display: flex; }

.drawing-toolbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  width: 38px;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  scrollbar-width: none;
}
.drawing-toolbar::-webkit-scrollbar { display: none; }

.drawing-toolbar-sep { height: 1px; flex: none; background: var(--border); margin: 3px 2px; }

/* Sets the color new drawings use (or recolors whichever one is currently
 * selected — see js/drawingTools.js) — a plain native color input, same
 * pattern as the chart-colors popover's own swatches, just round to read
 * as "this is a color swatch" rather than "this is a form field" in a
 * narrow icon rail. */
.drawing-color-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.drawing-color-swatch input[type="color"] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--overlay-border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.drawing-color-swatch input[type="color"]:hover { border-color: var(--green); transform: scale(1.08); }
.drawing-color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.drawing-color-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.drawing-color-swatch input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }

.drawing-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.drawing-handle { touch-action: none; }

.drawing-text-input {
  position: absolute;
  z-index: 7;
  background: var(--surface);
  border: 1px solid var(--green);
  color: var(--text);
  font: 12px var(--sans);
  padding: 3px 7px;
  border-radius: 4px;
  outline: none;
  min-width: 90px;
}

.drawing-emoji-picker {
  position: absolute;
  z-index: 7;
  display: flex;
  gap: 3px;
  padding: 6px;
  background: rgba(18, 20, 30, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.drawing-emoji-picker button {
  font-size: 17px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
}
.drawing-emoji-picker button:hover { background: var(--surface-alt); }

/* ---------- Chart action row + colors popover ----------
   Overlaid on top of the chart canvas rather than reserving a side column —
   the chart still spans the full container underneath. The whole terminal
   is permanently fullscreen now (see body.terminal-fullscreen above), so
   there's no more separate "expand the chart" toggle/state — removed along
   with #chart-fullscreen-btn (see terminal.html/chartControls.js). */

.chart-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--overlay-text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.chart-action-btn svg { width: 15px; height: 15px; pointer-events: none; }

.chart-action-btn:hover { background: var(--surface-alt); color: var(--text); }
.chart-action-btn:active { transform: scale(0.9); }

.chart-action-btn.active {
  background: rgba(46, 230, 184, 0.14);
  border-color: var(--green);
  color: var(--green);
}

/* Bottom-left — not top-right (.widget-bar owns that corner now) and not
 * bottom-right (.trade-widget floats there), see the fullscreen shell
 * section above. */
.chart-actions {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.chart-popover {
  position: absolute;
  bottom: 48px;
  left: 10px;
  z-index: 6;
  width: 200px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.chart-popover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.chart-popover-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.chart-popover-close:hover { color: var(--text); }

.chart-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.chart-color-row input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

@media (max-width: 560px) {
  .chart-popover { width: calc(100% - 20px); }
}

/* ---------- Stats ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

/* Reuses .trades-table's row-fade-in keyframe (defined further down this
 * file — @keyframes aren't order-sensitive) — replays whenever an ancestor
 * that was display:none (a just-opened widget popup, a newly-active
 * mobile tab) becomes visible, same mechanic as the table rows. */
.stat { border-top: 1px solid var(--border); padding-top: 10px; transition: border-color 0.2s ease; animation: row-fade-in 0.35s ease both; }
.stat:hover { border-color: var(--green); }
.stat:nth-child(1) { animation-delay: 0ms; }
.stat:nth-child(2) { animation-delay: 40ms; }
.stat:nth-child(3) { animation-delay: 80ms; }
.stat:nth-child(4) { animation-delay: 120ms; }
.stat:nth-child(5) { animation-delay: 160ms; }
.stat:nth-child(6) { animation-delay: 200ms; }

.stat .label {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.stat .value { font-family: var(--mono); font-size: 14px; color: var(--text); font-weight: 700; }
.stat .value.break { font-size: 11px; word-break: break-all; font-weight: 500; }
.stat-wide { grid-column: 1 / -1; }

/* collapsible "advanced" details */

.advanced { margin-top: 8px; }

.advanced summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-faint);
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  gap: 6px;
}

.advanced summary::-webkit-details-marker { display: none; }

.advanced summary::before {
  content: "▶";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 9px;
  color: var(--amber);
}

.advanced[open] summary::before { transform: rotate(90deg); }
.advanced summary:hover { color: var(--green); }

.advanced-grid { margin-top: 16px; }

/* ---------- Progress bar ---------- */

.progress-outer { margin-top: 20px; }

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.progress-bar {
  height: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--gradient);
  background-size: 200% 100%;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  animation: gradient-cycle 6s ease infinite;
}

/* Extra glow pulse layered on top of (not replacing) the ambient shimmer
 * above, every time the curve actually gets closer to completing —
 * restarted by pulseElement()/renderCurveStats() in app.js. */
.progress-fill.grew { animation: gradient-cycle 6s ease infinite, progress-grew-glow 0.6s ease; }

@keyframes progress-grew-glow {
  0% { box-shadow: 0 0 0 0 rgba(46,230,184,0.7); }
  50% { box-shadow: 0 0 16px 4px rgba(46,230,184,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(46,230,184,0); }
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  animation: progress-shine 2.6s ease-in-out infinite;
}

@keyframes progress-shine {
  100% { transform: translateX(100%); }
}

@keyframes gradient-cycle {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.progress-fill.complete {
  background: linear-gradient(90deg, var(--amber), var(--amber-soft));
}

/* ---------- Trade panel ---------- */

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 5px;
  border: 1px solid var(--border);
}

.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 11px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 7px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tab:active { transform: scale(0.95); }

.tab.active[data-side="buy"] { background: var(--surface); color: var(--green); }
.tab.active[data-side="sell"] { background: var(--surface); color: var(--red); }

.tab:not(.active):hover { color: var(--text); }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.amount-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 12px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.amount-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,230,184,0.15); }

.amount-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  min-width: 0;
}

/* Custom quick-% buttons already cover the up/down use case a spinner
 * exists for — the browser's own +/- arrows (barely visible against this
 * dark background, and cramped up against .suffix at this field's width)
 * only ever add visual clutter, on both number inputs in this widget. */
.amount-input input[type="number"],
.slippage-row input[type="number"] {
  -moz-appearance: textfield;
}
.amount-input input[type="number"]::-webkit-outer-spin-button,
.amount-input input[type="number"]::-webkit-inner-spin-button,
.slippage-row input[type="number"]::-webkit-outer-spin-button,
.slippage-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount-input .suffix { color: var(--text-faint); font-size: 11px; font-weight: 700; margin-left: 8px; }

.quick-amounts { display: flex; gap: 7px; margin-top: 9px; }

.quick-amounts button {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  padding: 9px 0;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.quick-amounts button:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.quick-amounts button:active { transform: translateY(0) scale(0.94); background: rgba(46,230,184,0.1); }

.slippage-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* This row had no hover/active/transition at all before — completely flat
 * next to every other button on the page. */
.slippage-row button {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.slippage-row button:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); }
.slippage-row button:active { transform: translateY(0) scale(0.94); }
.slippage-row button.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255,176,32,0.1);
  box-shadow: var(--shadow-glow-amber);
}

.slippage-row input {
  width: 64px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slippage-row input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,176,32,0.15); }

.summary { margin-top: 4px; }

#submit-trade { margin-top: 14px; }

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
  border-top: 1px dashed var(--border-strong);
}

.summary-line .val { color: var(--text); font-weight: 700; font-family: var(--mono); }
.summary-line .val.impact-mid { color: var(--amber); }
.summary-line .val.impact-high { color: var(--red); }

.trade-msg {
  margin-top: 14px;
  font-size: 12px;
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: none;
  word-break: break-word;
}

.trade-msg.show { display: block; animation: flash-pop 0.3s; }
.trade-msg.info { border-color: var(--border-strong); color: var(--text); background: var(--surface-alt); }
.trade-msg.ok { border-color: var(--green); color: var(--green); background: rgba(46,230,184,0.08); }
.trade-msg.err { border-color: var(--red); color: var(--red); background: rgba(255,107,122,0.08); }

.trade-msg a { color: var(--amber); font-weight: 700; text-decoration: underline; }

/* ---------- Trades feed ---------- */

/* lets the table scroll horizontally on narrow screens instead of forcing
 * the whole page (and every ancestor flex/grid item) wider than the
 * viewport — tables don't shrink below their content's natural width.
 * (Vertical scrolling for the Recent trades widget specifically is capped
 * separately — see #widget-content-trades .table-scroll above.) */
.table-scroll { overflow-x: auto; overflow-y: auto; min-height: 0; }

.trades-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.trades-table th {
  text-align: left;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9.5px;
  padding: 8px;
  border-bottom: 1px solid var(--border-strong);
}

.trades-table td {
  font-family: var(--mono);
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.trades-table tr:hover td { background: var(--surface-alt); }

/* Replays on every render, not just the first — table bodies here are
 * always fully replaced via innerHTML (see renderGames/loadTrades/etc.),
 * so every refresh creates fresh <tr> nodes and this fires again on its
 * own, no JS retrigger needed. Staggered by position for the first
 * screenful of rows; rows past that just share the last delay rather than
 * needing an entry per row. */
@keyframes row-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.trades-table tbody tr { animation: row-fade-in 0.3s ease both; }
.trades-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.trades-table tbody tr:nth-child(2) { animation-delay: 25ms; }
.trades-table tbody tr:nth-child(3) { animation-delay: 50ms; }
.trades-table tbody tr:nth-child(4) { animation-delay: 75ms; }
.trades-table tbody tr:nth-child(5) { animation-delay: 100ms; }
.trades-table tbody tr:nth-child(6) { animation-delay: 125ms; }
.trades-table tbody tr:nth-child(7) { animation-delay: 150ms; }
.trades-table tbody tr:nth-child(8) { animation-delay: 175ms; }

.side-tag { font-weight: 800; letter-spacing: 0.4px; font-size: 10px; }
.side-tag.buy { color: var(--green); }
.side-tag.sell { color: var(--red); }

.mono-addr { color: var(--text-faint); font-size: 11.5px; }
.mono-addr a { color: var(--text-dim); }
.mono-addr a:hover { color: var(--green); }

.empty-row td { text-align: center; padding: 28px 0; color: var(--text-faint); }

/* Former standalone footer's "Program: <address>" line now lives inline in
 * the Market info widget instead (see #widget-content-info in
 * terminal.html) — no more persistent footer strip to style separately. */

/* coin-flip loading spinner */

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient);
  animation: coin-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes coin-spin {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) scale(0.7); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* ---------- Loading skeleton ----------
   Sits above everything (including the wallet gate) until app.js has both
   attempted the silent wallet reconnect and finished the initial data
   fetch. Mimics the real fullscreen-chart + floating-widgets shape (see
   body.terminal-fullscreen above) rather than the old two-column card
   layout — swapping it out reads as a reveal, not a layout jump. */

.skeleton-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  overflow: auto;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.skeleton-screen.fade-out { opacity: 0; pointer-events: none; }

.skeleton-screen .app { display: block; height: auto; }
.skeleton-screen .topbar { position: relative; }

.skel-brand { width: 88px; height: 20px; }
.skel-walletbtn { width: 128px; height: 40px; border-radius: var(--radius-sm); }

.skel-fullscreen-chart {
  height: calc(100vh - 120px);
  min-height: 300px;
  border-radius: var(--radius-sm);
  margin: 0 20px;
}

/* Mimics .widget-bar — a row of small pill placeholders, top-right. */
.skel-widget-dots {
  position: fixed;
  top: 70px;
  right: 36px;
  width: 220px;
  height: 30px;
  border-radius: 100px;
}

/* Mimics .trade-widget — a floating card, bottom-right. */
.skel-floating-trade {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}

.skel-line { height: 14px; border-radius: 6px; }

.skel-tabs { height: 44px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.skel-input { height: 48px; border-radius: var(--radius-sm); margin-bottom: 11px; }
.skel-quick { height: 34px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.skel-cta { height: 46px; border-radius: var(--radius-sm); margin-top: 16px; }

@media (max-width: 900px) {
  .skel-floating-trade { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .skel-widget-dots { width: 160px; }
}

@media (max-width: 560px) {
  .skel-fullscreen-chart { margin: 0 14px; }
}

/* ---------- Wallet gate ---------- */

.wallet-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 18, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}

.wallet-gate[hidden] { display: none; }

.wallet-gate-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 34px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: gate-pop 0.35s cubic-bezier(0.16,1,0.3,1);
}

@keyframes gate-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.glyph-lg {
  margin-bottom: 16px;
  filter: drop-shadow(0 0 10px rgba(255,176,32,0.3));
}

.wallet-gate-card h2 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
  letter-spacing: -0.1px;
}

.wallet-gate-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 22px;
}

.gate-back {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
}

.gate-back:hover { color: var(--green); }

/* the gate card is centered text throughout — this one field reads better
 * left-aligned, like every other labeled input in the app */
.gate-referral-field { text-align: left; }

#gate-referral-input {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  color: var(--text);
  font-size: 13.5px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#gate-referral-input::placeholder { color: var(--text-faint); text-transform: none; }

#gate-referral-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,230,184,0.15); }

/* ---------- Wallet-connect tour ---------- */

/* full-screen click catcher — advances the tour and stops clicks from
 * reaching whatever's underneath the dimmed backdrop */
.tour-catch {
  position: fixed;
  inset: 0;
  z-index: 400;
  cursor: pointer;
  background: transparent;
}

/* the "hole" in the dimmed backdrop: a transparent box positioned exactly
 * over the target element, with a huge box-shadow spread painting the dim
 * everywhere else — no separate backdrop element needed */
.tour-highlight {
  position: fixed;
  z-index: 401;
  pointer-events: none;
  border: 2px solid var(--green);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px rgba(6,7,18,0.74), 0 0 24px rgba(46,230,184,0.35);
  transition: top 0.35s cubic-bezier(0.16,1,0.3,1), left 0.35s cubic-bezier(0.16,1,0.3,1),
              width 0.35s cubic-bezier(0.16,1,0.3,1), height 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* bottom-pinned sheet rather than positioned relative to each target —
 * targets range from the topbar to the trades table, so this sidesteps
 * per-element collision/overflow math entirely, on every viewport size */
.tour-bubble {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  max-width: 400px;
  z-index: 402;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 18px 20px 20px;
  animation: tour-pop 0.3s cubic-bezier(0.16,1,0.3,1);
}

@keyframes tour-pop {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.tour-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tour-step-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green);
}

.tour-skip {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
}

.tour-skip:hover { color: var(--text); }

.tour-bubble h3 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.tour-bubble p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 16px;
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tour-actions .btn { padding: 9px 18px; font-size: 12px; }

.tour-dots { display: flex; gap: 6px; }

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.2s ease, transform 0.2s ease;
}

.tour-dot.active { background: var(--green); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .tour-highlight { transition: none; }
}

/* ---------- Static terminal preview (token-coming-soon only) ----------
 * This page has no wallet/chart/trade code behind it — the markup is a
 * frozen copy of the real terminal's own built-in empty states ("--",
 * disabled inputs), never populated by anything. Blurred + demoted behind
 * the building card below rather than shown crisp: a sharp but inert UI
 * reads as broken, not "coming soon". `filter` here also makes this the
 * containing block for its position:fixed descendants (the topbar/
 * chart-row/widget-bar/trade-widget all use it) — safe only because
 * body.terminal-fullscreen .app already gets an explicit height:100vh
 * above, so they still size against the full viewport, just via .app's
 * box instead of the initial containing block. */
.terminal-preview-blur {
  filter: blur(7px) saturate(0.8) brightness(0.85);
  pointer-events: none;
  user-select: none;
}

.terminal-building-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 11, 18, 0.35);
}

.terminal-building-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: 40px 32px 34px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevate-2);
  animation: winner-pop 0.4s cubic-bezier(0.16,1,0.3,1);
}

.terminal-building-card .chip-mark { display: block; margin: 0 auto 18px; }
.terminal-building-card .status-badge { margin-bottom: 16px; }
.terminal-building-card .btn + .btn { margin-top: 10px; }

.terminal-building-card h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0 0 12px;
}

.terminal-building-card p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 22px;
}