/* ===========================================================
   BASE — design tokens, reset, typography, shared primitives

   SYSTEM RULES (enforced throughout):
   · Type scale: 10 / 11 / 12 / 13 / 14 / 16 / 20 / 26 / 34 — no half-pixels
   · Weights: 400 body · 500 label · 600 heading · 700 emphasis — only four
   · Spacing: multiples of 4 only
   · Motion: two durations — 120ms interactive, 180ms structural
   · Green and red are SEMANTIC (up/down) and never used for branding
   =========================================================== */

:root {
  /* --- Surfaces: sampled from Binance's live spot terminal --- */
  /* Pure neutral black — no hue at all, R = G = B on every step. Chosen by
     the owner over both navy (hue 221, which fought the gold) and the logo's
     olive (hue 84, which read as green). With no tint in the ground, the
     gold accent and the green/red price colours are the only colour on the
     page, which is the point.

     Relative luminance is held to the values these replace — which were in
     turn held to Binance's — so the whole type scale keeps the contrast it
     was verified at. Worst dark pairings: --text-4 3.92 against a 3:1 bar,
     every content tier above 4.5. */
  --bg-base:      #0C0C0C;
  --bg-surface:   #181818;
  --bg-elevated:  #252525;
  --bg-hover:     #303030;
  --bg-input:     #121212;

  /* --- Lines --- */
  --border:       #333333;   /* inner dividers */
  --border-soft:  #272727;
  --border-bright:#4D4D4D;

  /* --- Text (verified AA against #181A20) --- */
  --text:         #EAECEF;  /* 14.69:1 */
  --text-2:       #B7BDC6;  /*  9.20:1 */
  --text-3:       #9AA2AC;  /*  6.74:1 — #929AA5 dropped to 4.12:1 on a tape
                                row carrying BOTH a depth-bar tint and a
                                flash highlight, which is a real state the
                                timestamp column sits in */
  --text-4:       #848D9B;  /*  5.19:1 — was #707A8A at 4.01:1, under AA */

  /* --- Brand: Binance yellow. Hue 48deg, 109deg from green and 56deg from
         red, so it never competes with the up/down semantics. 12.18:1. --- */
  /* Binance ships TWO golds and so do we, because one cannot do both jobs:
     #FCD535 is the brand fill (their Sign Up button, our Connect wallet) and
     #F0B90B is the ink for gold TEXT. Our old single #E4A82A was a dull ochre
     — deltaE2000 12.65 from the real brand yellow, which is 5.5x a just-
     noticeable difference — and it was doing both jobs badly. As text it is
     dimmer than #F0B90B on every ground; as a fill it is the main reason the
     interface read muted next to theirs. */
  --accent:       #F0B90B;   /*  9.65:1 on panel — gold TEXT and lines */
  --accent-alt:   #D9A400;   /*  7.67:1 — the hover partner            */
  --accent-fill:  #FCD535;   /*  brand FILL; identical in both themes  */
  --on-accent-fill: #0C0C0C; /* 13.6:1 on that fill                    */
  --accent-dim:   rgba(240, 185, 11, 0.12);
  --accent-glow:  rgba(240, 185, 11, 0.22);
  --accent-line:  rgba(240, 185, 11, 0.26);

  /* --- Market semantics (Binance exact) --- */
  --up:           #2EBD85;
  --up-soft:      #32D296;
  --up-dim:       rgba(46, 189, 133, 0.12);
  --down:         #F6465D;
  --down-soft:    #FF6B7D;
  --down-dim:     rgba(246, 70, 93, 0.12);
  /* --warn was #F0B90B, which is now exactly --accent — a caution state and
     the brand colour rendering as the same yellow. Moved to orange: 18deg of
     hue away, and legible on every ground rather than the 3:1 decorative bar
     it used to be held to. */
  --warn:         #FF9332;   /* 5.92:1 on the worst ground */
  --warn-dim:     rgba(255, 147, 50, 0.12);
  --warn-line:    rgba(255, 147, 50, 0.24);

  /* --- Moving-average overlays (Binance exact) --- */
  --ma7:          #F0B90B;
  --ma25:         #E252C8;
  --ma99:         #8A6FE8;

  /* --- Label colour on a filled semantic/accent surface --- */
  --on-accent:    #0C0C0C;
  --on-up:        #0C0C0C;
  /* White on #F6465D is 3.53:1 — the SELL button label was the one control
     in the app whose text missed AA while its BUY twin sat at 8.05:1. Dark
     ink on the same red is 5.49:1 and makes the pair symmetric. */
  --on-down:      #0C0C0C;

  /* Semantic colour has to do two jobs too. --up/--down stay exactly
     Binance's for FILLS (buttons, candles, depth bars, the parts that are
     shape rather than glyph); these are the INK versions for price text.
     In dark the fill colours already pass, so up-text is the same value. */
  --up-text:      #2EBD85;   /* 7.23:1 on panel */
  --down-text:    #FF6B7D;   /* 6.34:1 on panel — #F6465D is 4.31:1 on elevated */

  /* --- Misc surfaces that were previously hardcoded --- */
  /* These three were hard-coded rgba(0,0,0,...) at eight sites across four
     stylesheets, so they never changed with the theme: a .62 black scrim and
     a .55 edge shadow are correct over a dark app and soot over a white one.
     The shimmer is the mirror image — rgba(255,255,255,.025) is a
     mathematically null animation on a white panel. */
/* ---- Depth ----
     A trading terminal is read, not admired, so the gloss goes on CONTROLS
     and never on the data surfaces: the book, the tape and the chart stay
     matte because a gradient behind a price column is a legibility tax.

     Three cheap effects, all of them things a real material does:
     a lit top edge on a raised surface, a soft shadow under it, and a
     gradient on the one element that is meant to be pressed. */
  --lift-edge:    rgba(255, 255, 255, 0.055);  /* the 1px highlight on top   */
  --lift-shadow:  rgba(0, 0, 0, 0.28);         /* what a raised panel casts  */
  --gloss-top:    rgba(255, 255, 255, 0.14);   /* gradient stop on a button  */
  --gloss-bottom: rgba(0, 0, 0, 0.06);
  --focus-ring:   #FCD535;
  --focus-halo:   #0C0C0C;
  --scrim:        rgba(0, 0, 0, 0.62);
  --edge-shadow:  rgba(0, 0, 0, 0.55);
  --shimmer:      rgba(255, 255, 255, 0.045);
  --scroll-thumb-hover: #464646;
  --overlay-top:  rgba(12, 12, 12, 0.72);
  --overlay-btm:  rgba(12, 12, 12, 0.94);
  --nav-glass:    rgba(12, 12, 12, 0.72);
  --nav-glass-2:  rgba(12, 12, 12, 0.90);
  --grad-3:       #A78BFA;
  --pulse-rgb:    46, 189, 133;

  /* Without this, native <select> popups, scrollbars and form controls render
     in the OS theme regardless of the page theme — a light page on a dark OS
     drops a dark dropdown into it. Never declared anywhere before. */
  color-scheme: dark;

  /* --- Type --- */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Numbers are set in the UI face with tabular figures, not a coding font.
     Binance does the same: `font-variant-numeric: tabular-nums` on a
     proportional face gives identical column alignment while the digits stay
     narrower and quieter, so more fits per column and the book does not read
     like a code editor. JetBrains Mono's slashed zero and serifed one are a
     strong voice that a price column does not want. */
  --font-mono: Inter, -apple-system, 'system-ui', 'Segoe UI', system-ui, sans-serif;

  --fs-2xs: 10px;  --fs-xs: 11px;  --fs-sm: 12px;   --fs-base: 13px;
  --fs-md:  14px;  --fs-lg: 16px;  --fs-xl: 20px;   --fs-2xl: 26px;  --fs-3xl: 34px;

  --fw-body: 400;  --fw-label: 500;  --fw-head: 600;  --fw-bold: 700;

  /* --- Spacing (4px grid) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* --- Radii --- */
  --r-sm: 5px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px;

  /* --- Motion: exactly two --- */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 180ms cubic-bezier(.4, 0, .2, 1);

  /* --- Structural heights (unified) --- */
  /* Measured off Binance's live trade page at 1512x950 by probing
     elementFromPoint rather than guessing selectors — the body default is a
     misleading 16px that every component overrides.

       order book row     12px / 400 / line-height 18px / row 18px
       market list row    12px / 400 / line-height 18px / row 25px
       market trades row  12px / 400 / line-height 18px / row 18px
       form field         14px / 500 / line-height 22px
       tab label          14px / 500 / line-height 24px
       panel title        16px / 500 / line-height 24px

     Their scale is three clean steps: 12 for dense data, 14 for anything
     interactive, 16 for panel titles. Ours ran 10/12/13, so titles were
     undersized while the data rows were over-spaced — compressed hierarchy
     and looser density at the same time, which is why it read as less
     finished despite an identical palette. */
  --fs-data:  12px;   /* book, tape, market list */
  --fs-ui:    14px;   /* inputs, tabs, buttons */
  --fs-title: 14px;   /* panel headings — Binance renders 14/500/21 */
  --lh-data:  18px;
  --lh-ui:    22px;
  --lh-title: 21px;

  --h-panel-head: 40px;
  --h-control:    36px;
  --h-row:        18px;   /* Binance: 18px, measured */
  --h-brow:       20px;   /* order-book row; raised on touch in the mobile block */

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
}

/* ===========================================================
   LIGHT THEME

   Every surface, line and grey below was read off Binance's own light
   theme with getComputedStyle (their body carries `theme-root light` and
   a `theme=light` cookie), so this is their palette rather than an
   inversion of ours. Same UI, same measurements, different ground.

   Two values are deliberately NOT theirs, both for contrast:

     · The accent. Binance's yellow is a brand mark on a dark ground; at
       #E4A82A on white it measures 2.11:1, unreadable as text. Our gold
       darkens to #96680A here — 4.91:1 on white, which passes AA — and
       the label on a filled accent button flips to white, because black
       on that gold is 4.28:1 and just misses.

     · --ma7. Binance's #F0B90B measures 1.80:1 on white, under even the
       3:1 floor for a graphical line. #B8860B clears it. ma25 and ma99
       already pass at 3.35 and 3.80 and are left alone.

   Known and matched anyway: Binance prints --up (#2EBD85) at 2.40:1 and
   --down (#F6465D) at 3.53:1 on white, both under 4.5:1 for the price
   text they carry. Those two colours are how a trader reads a book at a
   glance, and changing them would be changing the product rather than
   the theme. The darker pair that would pass is #0E9F6E / #D93B4F if
   that trade is ever wanted.
   =========================================================== */
:root[data-theme="light"] {
  /* Three of these used to be byte-identical to the surface they were
     painted on: --bg-elevated == --bg-base, --bg-input == --bg-surface, and
     --bg-hover == --border. A fill the same colour as its ground is not a
     subtle fill, it is no fill — every input, every unselected segment and
     every hover had nothing but a 1.17:1 border doing the work. That is the
     measurable version of "flat". The dark theme never had this: its
     equivalent steps are all non-zero. */
  /* Neutral, like the dark ramp — R = G = B, no tint. Built from deliberate
     luminance targets rather than by nudging, because nudging is how
     --bg-elevated once ended up byte-identical to --bg-base. Monotonic,
     every pair separated:

       hover .8308 -> base .8714 -> elevated .9301 -> input .9560 -> panel 1.0

     The panel stays pure #FFFFFF, one step brighter than the grey ground it
     sits on, so a panel still reads as a sheet laid on the page. */
  --bg-base:      #FFFFFF;
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #F5F5F5;
  --bg-hover:     #F5F5F5;
  --bg-input:     #FAFAFA;

  --border:       #EDEDED;   /* 1.39:1 on white */
  --border-soft:  #F5F5F5;
  --border-bright:#DDDDDD;

  /* The lightest grey that still clears 4.5:1 on the page ground is #707070 —
     everything above that fails, which is why the old --text-4 at #9C9C9C
     (2.43:1 at worst) could never be made to work. It was documented as
     "decorative/label only", but it carries .fld-lbl at 14px/500, every input
     placeholder, the order-book and tape column headers and the 24h stat
     labels: 59 rules, most of them content. Rather than move 59 rules off the
     token, the ramp is rebuilt so all four tiers fit under that ceiling with
     even luminance steps (.055/.042/.058) — a better hierarchy than before,
     and no tier a reader has to squint at. */
  --text:         #000000;   /* 18.58:1 worst ground */
  --text-2:       #474747;   /*  8.81:1 */
  --text-3:       #6B6B6B;   /*  6.30:1 */
  --text-4:       #757575;   /*  4.63:1 on the new deeper ground */

  /* Light does NOT take the gold. The owner's instruction was Binance's light
     layout with our colour on it: "instead of their gold use our black". So
     every accent in this theme — CTA fill, active state, focus ring, link —
     is the logo's black, and what sits on it is white. Dark keeps the gold,
     where black on near-black would be nothing at all. */
  --accent:       #0C0C0C;   /* 19.56:1 on white */
  --accent-alt:   #000000;   /* the hover partner; dark's #D9A400 gold would
                                otherwise be inherited straight through */
  --accent-fill:  #0C0C0C;   /* black CTA, white label on it */
  --on-accent-fill: #FFFFFF;
  --accent-dim:   rgba(12, 12, 12, 0.06);
  --accent-glow:  rgba(12, 12, 12, 0.14);
  --accent-line:  rgba(12, 12, 12, 0.22);

  /* Binance's own light-mode green and red, byte for byte, because the owner
     asked for their colours on the numbers: #2EBD85 is 2.26:1 on white and
     #F6465D is 3.58:1, both under AA for text this small. check-palette.js
     reports them as the two KNOWN exceptions rather than silently passing —
     a deliberate divergence stays visible. */
  --up-text:      #2EBD85;   /* 2.26:1 on white */
  --down-text:    #F6465D;   /* 3.58:1 on white */

  --warn:         #A34E00;   /* 4.82:1 — #B8860B was 2.98:1 on the page ground */
  --warn-dim:     rgba(163, 78, 0, 0.12);
  --warn-line:    rgba(163, 78, 0, 0.26);
  --ma7:          #B8860B;

  --on-accent:    #FFFFFF;
  --on-down:      #0C0C0C;

  --grad-3:       #7C5CE6;   /* #A78BFA was 2.50:1 on the light hero */
  /* On white the same three effects have to inverpolarity or they vanish:
     a white highlight on a white panel is nothing, so the edge darkens
     instead and the shadow lightens. */
  --lift-edge:    rgba(16, 20, 28, 0.045);
  --lift-shadow:  rgba(16, 20, 28, 0.10);
  --gloss-top:    rgba(255, 255, 255, 0.30);
  --gloss-bottom: rgba(16, 20, 28, 0.05);
  --focus-ring:   #0C0C0C;
  --focus-halo:   #FFFFFF;
  --scrim:        rgba(16, 20, 28, 0.45);
  --edge-shadow:  rgba(16, 20, 28, 0.14);
  --shimmer:      rgba(16, 20, 28, 0.055);
  --scroll-thumb-hover: #BFBFBF;
  --overlay-top:  rgba(255, 255, 255, 0.72);
  --overlay-btm:  rgba(255, 255, 255, 0.94);
  --nav-glass:    rgba(255, 255, 255, 0.72);
  --nav-glass-2:  rgba(255, 255, 255, 0.90);

  color-scheme: light;

  /* Dark shadows at .4-.6 alpha are soot on a white ground — but the
     correction had gone too far the other way. A single 1px shadow at 6%
     does not lift anything; a light interface reads as layered because of
     its shadows, not because of its ground contrast (white on #EEF1F5 is
     1.13:1, and no ground dark enough to beat that leaves room for text).
     Two layers: a tight one for the edge, a wide soft one for the lift. */
  --shadow-sm: 0 1px 2px rgba(16,20,28,.07), 0 2px 6px rgba(16,20,28,.04);
  --shadow-md: 0 2px 6px rgba(16,20,28,.07), 0 8px 24px rgba(16,20,28,.07);
  --shadow-lg: 0 4px 12px rgba(16,20,28,.08), 0 24px 60px rgba(16,20,28,.14);
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  text-rendering: auto;
}
body { overflow-x: hidden; }

/* Tracking stays at normal, as Binance does. Negative tracking is a
   display-size correction; applying it to 10-16px UI text is what makes
   an interface feel crunchy rather than smooth. Only true display type
   below opts into tightening. */
h1,h2,h3,h4,h5 { margin: 0; font-weight: var(--fw-head); letter-spacing: normal; line-height: 1.16; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Tabular figures everywhere numbers appear, or columns wobble on every tick. */
.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: normal;
}

/* The generic price classes. Every order-book row, tape line and 24h
   change cell lands here, so this is where the text/fill split pays off:
   ink for glyphs, --up/--down untouched for anything shaped. */
.up   { color: var(--up-text); }
.down { color: var(--down-text); }
.muted{ color: var(--text-2); }
.dim  { color: var(--text-3); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--s6); }
.row  { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap-4 { gap: var(--s1); } .gap-6 { gap: 6px; } .gap-8 { gap: var(--s2); } .gap-12 { gap: var(--s3); }
.gap-16 { gap: var(--s4); } .gap-24 { gap: var(--s6); }
.ta-r { text-align: right; }

/* ---------- Brand mark ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--s2); font-weight: var(--fw-head); letter-spacing: normal; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 14px var(--accent-glow);
  flex-shrink: 0; overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.logo-mark svg { width: 15px; height: 15px; display: block; }
.logo-text { font-size: var(--fs-lg); letter-spacing: -0.01em; }
.logo-text .tld { color: var(--text-3); font-weight: var(--fw-label); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--h-control); padding: 0 var(--s4);
  border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: var(--fw-label);
  letter-spacing: normal; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-primary {
  /* A flat fill reads as a coloured rectangle; the same fill with a light
     source reads as a button. The gradient is 14% at the top and 6% dark at
     the bottom — enough to imply a surface, far too little to muddy the
     13.55:1 the label sits at. */
  background-color: var(--accent-fill);
  background-image: linear-gradient(180deg, var(--gloss-top) 0%,
                                            transparent 46%,
                                            var(--gloss-bottom) 100%);
  color: var(--on-accent-fill); font-weight: var(--fw-head);
  box-shadow: var(--shadow-sm),
              0 0 0 1px var(--lift-edge) inset,
              0 1px 0 rgba(255,255,255,.22) inset;
  transition: filter var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); filter: brightness(0.97); }
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 18px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); filter: brightness(.96); }
.btn-ghost { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-bright); }
.btn-ghost:active { background: var(--bg-elevated); }
.btn-sm { height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 var(--s6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
/* opacity dims the label and the fill together, so a disabled primary CTA
   came out at 1.88:1 — the reader cannot tell what the button they cannot
   press would have done. Disabled controls are exempt from WCAG 1.4.3, so
   this is a legibility fix rather than a conformance one: explicit colours
   hold the label at 4.27:1 light / 3.91:1 dark while still reading as off. */
.btn:disabled {
  background: var(--bg-hover); color: var(--text-4);
  border-color: var(--border); box-shadow: none;
  opacity: 1; pointer-events: none;
}

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: var(--fw-label);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-2);
}
.pill-accent { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex-shrink: 0; }
.dot-live { animation: pulse 2.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), .5); }
  70%  { box-shadow: 0 0 0 6px rgba(var(--pulse-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0); }
}

/* ---------- Cards ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }

/* ---------- Live-data flash ---------- */
@keyframes flashUp   { 0% { background: var(--up-dim); }   100% { background: transparent; } }
@keyframes flashDown { 0% { background: var(--down-dim); } 100% { background: transparent; } }
.flash-up   { animation: flashUp .5s ease-out; }
.flash-down { animation: flashDown .5s ease-out; }

/* ---------- Focus: one visible ring on every interactive element ----------
   A single accent-coloured ring is invisible on an accent-coloured button:
   the gold ring on the gold Connect-wallet fill measured 1.26:1 in dark.
   The halo is a second ring in the opposite polarity sitting in the offset
   gap, so the indicator is always bounded by 13.55:1 (dark) / 5.48:1 (light)
   of its own contrast regardless of what it lands on. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Composed pair badges (XRP mark + issuer sub-badge) ---------- */
.pbadge { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.pbadge-main { display: block; width: 100%; height: 100%; }
.pbadge-main svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.pbadge-sub {
  position: absolute; right: -2px; bottom: -2px; line-height: 0;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-base);
  background: var(--bg-base);
}
.pbadge-sub svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.wrow .pbadge-sub, .im-row .pbadge-sub { box-shadow: 0 0 0 1.5px var(--bg-base); }


/* ---------- Display type: the only place tracking tightens ---------- */
.display-tight { letter-spacing: -0.03em; }