/*
 * The beta's screens, in GhosterDex's own language.
 *
 * ## What this file used to get wrong
 *
 * It defined its own palette: blue-tinted slate greys, 12px radii, a mint pill
 * for every action. Everything it produced was internally consistent and looked
 * like a different application bolted onto this one. GhosterDex is neutral grey
 * not blue, its cards are 24px not 12px, and its primary action is a silver
 * gradient pill rather than a coloured block. It also has a light theme, which a
 * hardcoded dark screen simply ignores.
 *
 * So there is no palette here now. Every colour, radius, font and shadow is the
 * app's own variable from styles.css, which means these screens follow the app
 * wherever it goes, including into light mode, and cannot drift from it.
 *
 * ## The one idea worth keeping
 *
 * A market screen shows the market's numbers and your numbers at once, and it
 * helps to be able to tell them apart without reading. So market data sits at
 * --text-dim and yours comes forward to --text, with --success reserved for
 * things you own rather than for every tick. That is a weighting, not a second
 * palette: it is the same restraint the rest of the app already uses between a
 * label and its value.
 *
 * Fallbacks are given on every var() because these files load before the app's
 * stylesheet on a cold start, and an unstyled trading screen for one frame is
 * worse than a slightly wrong one.
 */

.gl {
  /* Market data: present, readable, one step back. */
  --gl-market: var(--text-dim, #9aa4b2);
  --gl-market-dim: var(--text-faint, #5f6873);
  --gl-market-faint: var(--text-faint, #5f6873);

  /* Yours: the app's own foreground. */
  --gl-mine: var(--text, #f5f6f8);
  --gl-live: var(--success, #34e8a4);
  --gl-loss: var(--red, #ff5c7a);
  --gl-risk: var(--amber, #f0c46a);

  /* The market's direction, drained a step so a ticking screen stays calm. */
  --gl-bid: color-mix(in srgb, var(--success, #34e8a4) 68%, var(--text-faint, #5f6873));
  --gl-ask: color-mix(in srgb, var(--red, #ff5c7a) 68%, var(--text-faint, #5f6873));
  --gl-bid-wash: color-mix(in srgb, var(--success, #34e8a4) 13%, transparent);
  --gl-ask-wash: color-mix(in srgb, var(--red, #ff5c7a) 13%, transparent);
  --gl-live-soft: color-mix(in srgb, var(--success, #34e8a4) 15%, transparent);
  --gl-loss-soft: color-mix(in srgb, var(--red, #ff5c7a) 15%, transparent);
  --gl-risk-soft: color-mix(in srgb, var(--amber, #f0c46a) 14%, transparent);

  /* Surfaces and edges, straight from the app's elevation ladder. */
  --gl-void: var(--bg, #050609);
  --gl-deep: var(--bg-elev, #0d0f13);
  --gl-panel: var(--glass, rgba(255, 255, 255, 0.04));
  --gl-panel-2: var(--glass-2, rgba(255, 255, 255, 0.08));
  --gl-edge: var(--stroke, rgba(255, 255, 255, 0.11));
  --gl-edge-soft: var(--stroke-soft, rgba(255, 255, 255, 0.06));

  /* The app's rounding, which is a lot rounder than a trading screen expects
     and is most of why the old version felt foreign. */
  --gl-radius: var(--radius-md, 16px);
  --gl-radius-lg: var(--radius-lg, 24px);
  --gl-radius-sm: var(--radius-sm, 12px);

  --gl-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  font-family: var(--font, Inter, system-ui, sans-serif);
}

.gl *,
.gl *::before,
.gl *::after {
  box-sizing: border-box;
}

/* Numbers must not reflow as they tick. */
.gl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── the full-screen shell ──────────────────────────────────────────────────
   Only perps takes the whole screen. Everything else is a panel over the app. */

.gl-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--gl-void);
  color: var(--gl-market);
  overscroll-behavior: contain;
  /* Comes up from slightly below and slightly small, which reads as the screen
     arriving rather than being swapped in. Short enough not to be in the way. */
  animation: gl-screen-in 0.28s var(--gl-ease) both;
}
@keyframes gl-screen-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
.gl-screen.gl-leaving {
  animation: gl-screen-out 0.2s var(--gl-ease) both;
}
@keyframes gl-screen-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}

.gl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  flex: none;
}
.gl-back {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px 8px 6px 0;
  color: var(--gl-mine);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.gl-back svg {
  flex: none;
}
.gl-back:active {
  opacity: 0.55;
}

/* ── a floating panel over the app ──────────────────────────────────────────
   For everything that is not perps. Sits on the app rather than replacing it,
   because the app underneath is still where you are. */

.gl-float {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gl-float-scrim {
  position: absolute;
  inset: 0;
  background: var(--backdrop, rgba(1, 2, 4, 0.72));
  backdrop-filter: blur(4px);
  animation: gl-fade 0.22s var(--gl-ease) both;
}
.gl-float-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--sheet-bg, #0d0f13);
  backdrop-filter: blur(24px);
  border-top-left-radius: var(--gl-radius-lg);
  border-top-right-radius: var(--gl-radius-lg);
  border-top: 1px solid var(--gl-edge-soft);
  color: var(--gl-mine);
  animation: gl-float-in 0.3s var(--gl-ease) both;
}
@keyframes gl-float-in {
  from {
    transform: translateY(26px);
    opacity: 0.45;
  }
}
.gl-float.gl-leaving .gl-float-card {
  animation: gl-float-out 0.2s var(--gl-ease) both;
}
.gl-float.gl-leaving .gl-float-scrim {
  animation: gl-fade 0.2s var(--gl-ease) reverse both;
}
@keyframes gl-float-out {
  to {
    transform: translateY(22px);
    opacity: 0;
  }
}

/* ── the readout that no exchange has ─────────────────────────────────────── */

.gl-veil {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 9px;
  padding: 0 11px;
  height: 31px;
  flex: none;
  border-radius: 999px;
  background: var(--gl-live-soft);
  border: 1px solid color-mix(in srgb, var(--success, #34e8a4) 26%, transparent);
  font-size: 11.5px;
  color: var(--gl-mine);
  text-align: left;
}
.gl-veil-eye {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--gl-live);
}
.gl-veil-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}
.gl-veil-body b {
  color: var(--gl-live);
  font-weight: 600;
}
.gl-veil-more {
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--gl-live);
  font: inherit;
  font-weight: 600;
}

/* Proof of life, not an alarm. */
.gl-veil-eye::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--gl-live);
  opacity: 0;
  animation: gl-breathe 3.4s var(--gl-ease) infinite;
}
@keyframes gl-breathe {
  0% { transform: scale(0.55); opacity: 0.45; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

/* ── mine vs the market ─────────────────────────────────────────────────────
   A weighting, not a second palette. */

.gl-mine {
  color: var(--gl-mine);
  position: relative;
}
.gl-mine::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: var(--gl-live);
}

/* ── sheets, matching the app's own ─────────────────────────────────────────── */

.gl-sheet {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gl-scrim {
  position: absolute;
  inset: 0;
  background: var(--backdrop, rgba(1, 2, 4, 0.72));
  backdrop-filter: blur(4px);
  animation: gl-fade 0.2s var(--gl-ease) both;
}
.gl-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  /* A sheet scrolls up and down and NEVER sideways. Setting only overflow-y
     is not the same as saying that: CSS resolves the other axis from
     `visible` to `auto`, so the card quietly became scrollable in both
     directions, and any rail wider than the screen made it so. Swiping the
     category rail then dragged the whole sheet across once the rail hit its
     end, leaving the rows off-screen with their prices stranded at the
     edge. */
  overflow-x: hidden;
  background: var(--sheet-bg, #0d0f13);
  backdrop-filter: blur(24px);
  border-top-left-radius: var(--gl-radius-lg);
  border-top-right-radius: var(--gl-radius-lg);
  border-top: 1px solid var(--gl-edge-soft);
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  animation: gl-rise 0.28s var(--gl-ease) both;
}
.gl-grab {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--gl-edge);
  margin: 4px auto 14px;
}
.gl-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--gl-mine);
}
@keyframes gl-fade {
  from { opacity: 0; }
}
@keyframes gl-rise {
  from { transform: translateY(18px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-screen, .gl-screen.gl-leaving, .gl-scrim, .gl-card,
  .gl-float-scrim, .gl-float-card, .gl-veil-eye::after {
    animation: none;
  }
}

/* The app's primary action: a silver gradient pill, not a coloured block. This
   single rule is most of what made the old version feel like somebody else's
   app. */
.gl-cta {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--grad, linear-gradient(135deg, #ffffff, #dde5ee 55%, #93a2b5));
  color: var(--cta-text, #0a0d12);
  font-family: var(--font, Inter, sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow:
    0 16px 40px -12px color-mix(in srgb, var(--ink, #fff) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
  transition: transform 0.13s, filter 0.15s;
}
.gl-cta:active {
  transform: scale(0.98);
  filter: brightness(1.06);
}
.gl-cta[disabled] {
  background: var(--bg-elev-2, #13161b);
  color: var(--gl-market-faint);
  border: 1px solid var(--gl-edge-soft);
  box-shadow: none;
}

.gl-prose {
  display: grid;
  gap: 12px;
}
.gl-prose p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gl-market);
}
.gl-prose b {
  color: var(--gl-mine);
  font-weight: 600;
}

/* ── the payment control, shared ─────────────────────────────────────────────
   Every screen that spends money uses this exact markup, so it is styled once
   here rather than four times in three stylesheets. Label left, coin pill
   right: the shape the Gifts flow settled on. */
.gl-payrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  background: none;
  border: 0;
  text-align: left;
}
.gl-paylabel {
  font: 500 14.5px Inter, system-ui, sans-serif;
  color: var(--gl-market-dim, #9aa7bb);
}
.gl-paypill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.gl-paypill img,
.gl-paypill .pd-coin,
.gl-paypill .fd-logo {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  flex: none;
}
.gl-paypill b {
  font: 700 15px Inter, system-ui, sans-serif;
  color: var(--gl-mine, #eef2f8);
  white-space: nowrap;
}
.gl-paysub {
  font-size: 13px;
  color: var(--gl-market-dim, #9aa7bb);
  white-space: nowrap;
}
.gl-paychev {
  color: var(--gl-market-faint, #7c8798);
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);
  flex: none;
}
.gl-payrow:active .gl-paypill {
  background: rgba(255, 255, 255, 0.09);
}

/* The grab zone. touch-action only applies to the element a touch STARTS on,
   which is why listening on the card itself never received a real finger: the
   browser had already claimed the gesture for scrolling. */
.gl-draghandle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  touch-action: none;
  z-index: 3;
}
.gl-card {
  position: relative;
}

/* The overlay dock rides above the screens (gl-screen at 3000) but BELOW
   their sheets (3100, 3300), which is the app's own relationship: its dock
   sits at z-index 28, under the nav at 30 and under a sheet at 41, so a
   swap's pending puck spends the whole flow hidden behind the modal that is
   already narrating it.

   This was 3350, above everything, and the puck was drawn on top of the Add
   funds sheet while that sheet was telling the same story: two surfaces
   claiming one job, and the owner circled the collision. The dock's purpose
   survives intact, because it exists for when you LEAVE the sheet, and the
   moment you do there is nothing above it any more. */
/* Doubled selectors on purpose: the app's own .dock rule carries the same
   single-class specificity and loads later, so a bare .fd-dock ties and
   loses. Two classes outrank it whatever the stylesheet order. */
.dock.fd-dock,
.dock-puck.fd-dock {
  z-index: 3050;
}

/* ── the v2.6 capsule bar, returned by owner request ─────────────────────
   Not a reconstruction: these rules are lifted verbatim from the v2.6
   build's own compiled stylesheet (GhosterDex-test.apk in the stable
   folder), then re-scoped with doubled selectors so they outrank the 2.7
   slab whatever the load order. The 2.7 beam and seam are hidden; the
   active tab wears v2.6's own glass lozenge and underline tick. */
.bottom-nav.bottom-nav {
  position: fixed;
  bottom: 14px;
  left: 50%;
  right: auto;
  transform: translate(-50%);
  width: calc(100% - 28px);
  max-width: 452px;
  height: 68px;
  z-index: 30;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 22px 50px -14px rgba(0, 0, 0, 0.55),
    inset 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: stretch;
  padding: 6px;
  padding-bottom: 6px;
  margin-bottom: env(safe-area-inset-bottom);
  overflow: visible;
}
/* The 2.7 slab's keyboard slide wrote a bare translateY, which would undo
   the capsule's centering; v2.6's own rule keeps both transforms. */
body.kb-open .bottom-nav.bottom-nav {
  transform: translate(-50%) translateY(28px);
}
.bottom-nav.bottom-nav::before {
  display: none;
}
.bottom-nav .nav-beam,
.bottom-nav .nav-spill {
  display: none;
}
.bottom-nav .nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 18px;
  transition: color 0.18s, background 0.18s;
}
.bottom-nav .nav-item.on {
  color: var(--text);
  background: var(--glass-2);
  box-shadow: inset 0 0 0 1px var(--stroke-soft),
    inset 0 1px 0 var(--bump-hi),
    0 6px 14px -9px var(--bump-shadow);
}
.bottom-nav .nav-item.on svg {
  color: var(--ink);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ink) 60%, transparent));
}
/* v2.6's underline tick, verbatim including its later transition kill. */
.bottom-nav .nav-item::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ink) 70%, transparent);
  transform: scaleX(0);
  transition: none;
}
.bottom-nav .nav-item.on::before {
  transform: scaleX(1);
}

/* A sheet thrown away by the thumb has already animated out: its exit is
   the swipe itself. Without this the leaving keyframes re-assert their own
   transform, outranking the inline one, and the card springs back up to
   fade in place — a ghost over the page after the gesture has finished. */
.gl-float-card.gl-swiped,
.gl-card.gl-swiped {
  animation: none !important;
}

/* ── the trading black ────────────────────────────────────────────────────
 *
 * Measured, not eyeballed. Sampling a Bybit frame and one of ours side by
 * side: half of their screen is within 2 of #000000, and 66% of ours was
 * #050609. The difference is not only that ours is lighter, it is that ours
 * is BLUE: every solid surface in the app palette carries a blue channel
 * roughly 1.3 to 1.8 times its red, and against a neutral reference that
 * reads as a slightly cold grey rather than as black.
 *
 *   app        --bg #050609   --bg-elev #0d0f13   --bg-elev-2 #13161b
 *   reference       #000000          neutral            neutral
 *
 * The tokens are redefined at the source rather than one rule at a time,
 * because .gl already derives everything from them (--gl-void is
 * var(--bg)), and so do the app classes this screen borrows: the dock, the
 * result markup, the sheets. One block, and every surface inside a trading
 * screen turns neutral together.
 *
 * Scoped to .gl on purpose. This is the surface the owner compared; the rest
 * of the wallet keeps the palette it was designed in until that is a decision
 * rather than a side effect.
 */
/* WAS a hardcoded copy of the values above. That was right for exactly as long
   as the app palette was still blue: the neutral black has since moved into
   :root in styles.css, where --bg is #000000 and the ladder is #0a0a0b /
   #141416 / #1e1e21 — the same numbers this block was pinning. So in dark mode
   it had become a duplicate that changed nothing.
   In LIGHT mode it was the bug. :root[data-theme='light'] turns --text dark and
   --bg near-white, but this block still forced --bg to #000000 and the strokes
   to white-at-low-alpha, so the trading screen kept a black background while
   its text went dark: unreadable, and reported as "not even in light mode".
   Deriving from the app tokens keeps dark mode byte-identical and lets light
   mode simply work, which is what the file's own header promised. */
.gl {
  --gl-void: var(--bg, #000000);
  --gl-deep: var(--bg-elev, #0a0a0b);
  /* --gl-accent was used ten times in perps-pro.css and DEFINED NOWHERE, so
     every one of them silently took the literal fallback #34e8a4 — the dark
     palette's green. Invisible while the app was dark-only; in light mode that
     green sits at 1.44 contrast on a near-white background, which is how the
     buy side of the ratio bar became unreadable. Named here, from the app's own
     success colour, so dark is unchanged and light follows. */
  --gl-accent: var(--success, #34e8a4);
  /* Sheets were the one surface the palette never reached: .gl-card reads
     var(--sheet-bg, …) and the app's own --sheet-bg is a translucent panel, so
     a full-screen trading sheet read as lifted rather than as the screen. It
     stays pinned to the page colour, which is now whichever page colour the
     theme is using. */
  --sheet-bg: var(--bg, #000000);
}

/* The faint tier needs more weight on a light background than on a dark one.
 *
 * Measured on the deployed screen rather than guessed. The app's --text-faint
 * is #5f6873 in dark and #97a1ac in light, and both are used by the same perps
 * rules (--gl-market-dim and --gl-market-faint are both var(--text-faint), and
 * 41 + 35 rules read them). Against each theme's own page colour that comes out
 * at 3.5 in dark and 2.2 in light: the same design intention, but a full tier
 * weaker where it can least afford it, which is why light mode read as washed
 * out even after the backgrounds were fixed.
 *
 * Lifted to ~3.9 — just past dark's 3.5, because de-emphasised text on a light
 * ground needs a little more to hold its shape. It is not pushed to 4.5: that
 * is the bar for body text, and this tier exists to recede. Scoped to .gl, so
 * the rest of the wallet keeps the token it was designed with.
 */
:root[data-theme='light'] .gl {
  --text-faint: #6f7b88;

  /* The green is the other half of that story, and it is worse: #0b9e6b was
   * picked to glow on black, and on #f2f4f8 it lands at 3.1 for the funding
   * link and 2.6 for the leverage chip, where it sits on its own tint. It is
   * not decoration here — it is the bid side of the book and the direction of
   * a trade, so it has to be read at 10px and at a glance.
   *
   * Dropped to a luminance that clears 4.5 against the page. Red is left as it
   * is at 4.3: the two now sit within a hair of each other in lightness, which
   * is what keeps long and short reading as a matched pair rather than one
   * shouting over the other.
   *
   * Scoped to .gl on purpose. The token is app-wide, and three chips elsewhere
   * (.rc-badge, .rc-self-tag, and the live pill) put near-black text ON this
   * green — darkening it globally would take those from 5.6 to 3.8 and trade
   * one failure for three. */
  --success: #068055;
}

/* A sheet that is the same black as the page behind it has no fill left to
   separate it, and the scrim cannot help: rgba(1,2,4,.72) over black is still
   black. So the edge does the whole job, and it has to be strong enough to be
   read as one. This is how an all-black interface expresses elevation at all,
   and it is why the reference app's surfaces are divided by hairlines rather
   than by greys. */
.gl .gl-card {
  /* Hairline, not a white line. The literal rgba(255,255,255,.14) was the only
     thing separating a sheet from the page, and on a light background white on
     white is nothing at all — the sheet lost its edge entirely. color-mix
     against the app's own foreground gives the same faint rule in both themes. */
  border-top: 1px solid color-mix(in srgb, var(--text, #f5f6f8) 16%, transparent);
}
.gl .gl-grab {
  background: color-mix(in srgb, var(--text, #f5f6f8) 24%, transparent);
}