/* GENERATED by tools/assemble.cjs from src/css/axiom/{shell,pulse}.css. Do not edit: edit the part sources. */

/* ---- src/css/axiom/shell.css ---- */
/* ANXIOM shell styles (docs/specs/axiom-shell.md §4; CONTRACT 3.4 / 3.5 / 4.3.2b).
   Shared primitives, nav, popovers / menus, image preview, tracked-trades panel, bottom bar, view hosts and the
   stub card. Builds on the tokens, grid and utilities of base.css. Assembled into public/css/axiom.css. */

:root {
  --pair-spacex: 125 196 255;
  --pair-tesla: 255 118 102;
}

#axiom {
  font-family: var(--font-ax);
  font-size: 13px;
  color: rgb(var(--text-primary));
  font-variant-numeric: tabular-nums;
}
#axiom button {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------------------
   Shared primitives (§4.2)
   --------------------------------------------------------------------------------------------------------- */

/* SOL glyph: three slanted bars (top / bottom lean right, middle leans left), one bottom-left -> top-right gradient */
.ax-sol {
  display: inline-block;
  width: 11px;
  height: 9px;
  flex: none;
  vertical-align: -1px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='20' x2='24' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239945FF'/%3E%3Cstop offset='1' stop-color='%2314F195'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M4 0H24L20 4H0ZM0 8H20L24 12H4ZM4 16H24L20 20H0Z'/%3E%3C/svg%3E");
}

.ax-simchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  padding: 0 4px;
  margin-left: 6px;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 3px;
  font: 700 9px/1 var(--font-ax);
  letter-spacing: 0.06em;
  color: rgb(var(--text-secondary));
  vertical-align: middle;
}

/* round icon button */
.ax-ibtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 16px;
  color: rgb(var(--text-secondary));
  transition: background-color 0.12s, color 0.12s;
}
.ax-ibtn:hover {
  background: rgb(var(--background-tertiary));
  color: rgb(var(--text-primary));
}
.ax-ibtn.sm {
  width: 26px;
  height: 26px;
  font-size: 15px;
}
.ax-ibtn.on {
  background: rgb(var(--background-tertiary));
  color: rgb(var(--primary-color));
}
.ax-ibtn.dot::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--primary-color));
}
.ax-ibtn.spin i {
  animation: ax-spin 0.5s ease-out;
}
@keyframes ax-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ax-flex {
  flex: 1 1 auto;
  min-width: 0;
}
.ax-vsep {
  width: 1px;
  height: 14px;
  flex: none;
  background: rgb(var(--secondary-stroke));
}
.ax-wsep {
  width: 1px;
  height: 12px;
  flex: none;
  background: rgb(var(--secondary-stroke));
}
.axb-chip .ax-wsep {
  height: 10px;
}
.ax-wn {
  display: inline-block;
  min-width: 1ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* quick-buy pill */
.ax-qbgroup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 4px 0 9px;
  flex: none;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 999px;
  color: rgb(var(--text-primary));
  font-size: 12px;
}
.ax-qbgroup > i {
  font-size: 12px;
  color: rgb(var(--text-primary));
}
.ax-qbgroup input {
  width: 30px;
  height: 22px;
  padding: 0 2px;
  border: 0;
  outline: none;
  background: transparent;
  font: 500 12px var(--font-ax);
  color: rgb(var(--text-primary));
}
.ax-qbgroup input:focus {
  background: rgb(var(--background-tertiary));
  border-radius: 4px;
}
.ax-qbsol {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: rgb(var(--text-secondary));
  font-size: 12px;
}
.ax-qbsep {
  width: 1px;
  height: 14px;
  margin: 0 2px;
  flex: none;
  background: rgb(var(--secondary-stroke));
}
.ax-pchips {
  display: inline-flex;
  gap: 1px;
}
.ax-pchip {
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(var(--text-secondary));
}
.ax-pchip:hover {
  color: rgb(var(--text-primary));
  background: rgb(var(--background-tertiary));
}
.ax-pchip.on {
  color: rgb(var(--primary-color));
}

/* nav wallet chip (the balance box reserves ~6 digits so the chip never changes width) */
.ax-wchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  flex: none;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 999px;
  background: rgb(var(--background-secondary));
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--text-primary));
}
.ax-wchip > i {
  font-size: 15px;
  color: rgb(var(--text-secondary));
}
.ax-wchip .mono {
  min-width: 4.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ax-wchip:hover {
  background: rgb(var(--background-tertiary));
}

/* coin config badges */
.ax-pair,
.ax-fee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  padding: 0 5px 0 4px;
  border-radius: 3px;
  flex: none;
  font: 600 10px/1 var(--font-ax);
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
}
.ax-pair i,
.ax-fee i {
  font-size: 11.5px;
  line-height: 1;
}
.ax-pair.spacex {
  color: rgb(var(--pair-spacex));
  background: rgb(var(--pair-spacex) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--pair-spacex) / 0.26);
}
.ax-pair.tesla {
  color: rgb(var(--pair-tesla));
  background: rgb(var(--pair-tesla) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--pair-tesla) / 0.26);
}
.ax-fee.div {
  color: rgb(var(--primary-yellow));
  background: rgb(var(--primary-yellow) / 0.09);
}
.ax-fee.split {
  color: rgb(var(--text-secondary));
  background: rgb(var(--secondary-stroke) / 0.55);
}

/* launchpad glyph in a coloured ring */
.ax-platb {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9.5px;
  line-height: 1;
  color: var(--plat);
  border: 1px solid var(--plat);
  background: color-mix(in srgb, var(--plat) 16%, var(--ax-bg));
}
.ax-platb i {
  line-height: 1;
}
/* fallback colours from the glyph inside, for elements without an inline --plat (an inline value wins) */
.axtr-img:has(.ri-capsule-fill),
.ax-platb:has(.ri-capsule-fill) {
  --plat: var(--pad-pump, #4fd18b);
}
.axtr-img:has(.ri-fire-fill),
.ax-platb:has(.ri-fire-fill) {
  --plat: var(--pad-bonk, #ff8c3a);
}
.axtr-img:has(.ri-shopping-bag-3-fill),
.ax-platb:has(.ri-shopping-bag-3-fill) {
  --plat: var(--pad-bags, #7b8cff);
}
.axtr-img:has(.ri-moon-fill),
.ax-platb:has(.ri-moon-fill) {
  --plat: var(--pad-moonshot, #f4d94e);
}
.axtr-img:has(.ri-sparkling-fill),
.ax-platb:has(.ri-sparkling-fill) {
  --plat: var(--pad-believe, #3fcdf0);
}
.axtr-img:has(.ri-planet-fill),
.ax-platb:has(.ri-planet-fill) {
  --plat: var(--pad-jupstudio, #c58bff);
}

/* ---------------------------------------------------------------------------------------------------------
   Popovers and menus (§4.2): div.tx-pop.ax-pop, appended to <body>
   --------------------------------------------------------------------------------------------------------- */
.tx-pop.ax-pop {
  position: fixed;
  z-index: 800;
  width: 280px;
  min-width: 180px;
  padding: 6px;
  border-radius: 6px;
  background: rgb(var(--background-tertiary));
  border: 1px solid rgb(var(--secondary-stroke));
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  font-family: var(--font-ax);
  font-size: 13px;
  line-height: 1.35;
  color: rgb(var(--text-primary));
}
.ax-pop-h {
  display: flex;
  align-items: center;
  padding: 6px 8px 8px;
  font-size: 13px;
  font-weight: 600;
}
.ax-pop-note {
  margin: 0;
  padding: 4px 8px 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(var(--text-secondary));
}
.ax-pop-dim {
  font-size: 12px;
  color: rgb(var(--text-secondary));
}
.ax-pop-wal {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 4px;
  font-size: 12px;
}
.ax-pop-bal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 10px;
  font-size: 20px;
}
.ax-pop-bal .ax-sol {
  width: 16px;
  height: 13px;
}

/* menu row */
.ax-mrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: rgb(var(--text-primary));
}
.ax-mrow:hover {
  background: rgb(var(--secondary-stroke) / 0.6);
}
.ax-mrow i {
  color: rgb(var(--text-secondary));
}
.ax-mrow-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ax-mrow-l small {
  font-size: 11px;
  color: rgb(var(--text-secondary));
  white-space: normal;
}
.ax-mrow.static {
  cursor: default;
}
.ax-mrow.static:hover {
  background: none;
}
.ax-mrow.stack {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

/* on/off switch (the knob is the ::after) */
.ax-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgb(var(--secondary-stroke));
  transition: background-color 0.15s;
}
.ax-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--text-secondary));
  transition: transform 0.15s, background-color 0.15s;
}
.ax-switch.on {
  background: rgb(var(--primary-color));
}
.ax-switch.on::after {
  background: #fff;
  transform: translateX(12px);
}

/* section label */
.ax-pop-sec {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 8px 2px;
  padding-top: 8px;
  border-top: 1px solid rgb(var(--primary-stroke));
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--text-tertiary));
}
.ax-pop-sec i {
  font-size: 12px;
  color: rgb(var(--text-secondary));
}
.ax-pop-h + .ax-pop-sec {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* segmented control + quick-buy size drawings (Pulse's Display menu) */
.ax-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgb(var(--background-tertiary));
  border: 1px solid rgb(var(--primary-stroke));
}
.ax-seg button {
  height: 44px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(var(--text-secondary));
  transition: color 0.12s, background-color 0.12s;
}
.ax-seg button:hover {
  color: rgb(var(--text-primary));
}
.ax-seg button.on {
  color: rgb(var(--text-primary));
  background: rgb(var(--primary-color) / 0.16);
  box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / 0.55);
}
.axp-qbs-ic {
  display: block;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--text-tertiary));
}
.axp-qbs-ic.small,
[data-v="small"] > .axp-qbs-ic {
  width: 16px;
  height: 6px;
}
.axp-qbs-ic.large,
[data-v="large"] > .axp-qbs-ic {
  width: 22px;
  height: 8px;
}
.axp-qbs-ic.mega,
[data-v="mega"] > .axp-qbs-ic {
  width: 30px;
  height: 11px;
  border-radius: 3px;
}
.axp-qbs-ic.ultra,
[data-v="ultra"] > .axp-qbs-ic {
  width: 30px;
  height: 18px;
  border-radius: 3px;
}
.ax-seg button.on .axp-qbs-ic {
  background: rgb(var(--primary-color));
}
.ax-seg button.on .axp-qbs-ic.ultra,
.ax-seg button.on[data-v="ultra"] > .axp-qbs-ic {
  box-shadow: 0 0 9px rgb(var(--primary-color) / 0.7);
}
.tx-pop.ax-pop.axp-cmenu {
  width: 240px;
  padding: 4px;
}

/* ---------------------------------------------------------------------------------------------------------
   Image preview card (§4.2): fixed at 0,0 and moved with translate(); never takes pointer events
   --------------------------------------------------------------------------------------------------------- */
.ax-prev {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 960;
  width: 238px;
  padding: 8px 8px 9px;
  border-radius: 8px;
  background: rgb(var(--background-secondary));
  border: 1px solid rgb(var(--secondary-stroke));
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.6);
  font-family: var(--font-ax);
  font-size: 13px;
  line-height: 1.35;
  color: rgb(var(--text-primary));
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out, visibility 0s linear 0.1s;
}
.ax-prev.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.1s ease-out, visibility 0s;
}
.ax-prev-img {
  width: 220px;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(var(--background-tertiary));
}
.ax-prev-img img {
  width: 220px;
  height: 220px;
  object-fit: cover;
}
.ax-prev-r1 {
  display: flow-root;
  margin-top: 8px;
  min-width: 0;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.ax-prev-tk {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  margin-right: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.ax-prev-cfg {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-right: 6px;
  white-space: nowrap;
}
.ax-prev-cfg:empty {
  display: none;
}
.ax-prev-nm {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  padding-top: 1px;
  font-size: 13px;
  color: rgb(var(--text-secondary));
}
.ax-prev-r2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgb(var(--text-secondary));
}
.ax-prev-ca {
  font-family: var(--font-mono);
  font-size: 11px;
}
.ax-prev-age {
  color: rgb(var(--increase));
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------------
   Nav (§4.4): row 1 52 px + row 2 32 px + 1 px border = 85 px
   --------------------------------------------------------------------------------------------------------- */
#ax-nav {
  container: axnav / inline-size;
  background: var(--ax-bg);
  border-bottom: 1px solid rgb(var(--primary-stroke));
}
.ax-nav1 {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid rgb(var(--primary-stroke));
}
.ax-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin-right: 8px;
  color: rgb(var(--text-primary));
}
.ax-logo svg {
  display: block;
  flex: none;
}
.ax-logo > span:not(.ax-simchip) {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ax-logo .ax-simchip {
  margin-left: 0;
}

.ax-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.ax-tab {
  flex: none;
  height: 32px;
  padding: 0 11px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--text-primary));
  transition: background-color 0.12s, color 0.12s;
}
.ax-tab:hover {
  background: rgb(var(--background-secondary));
}
.ax-tab.on {
  color: rgb(var(--primary-color));
  background: rgb(var(--background-secondary));
  border-color: rgb(var(--primary-stroke));
}

.ax-nav-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ax-search {
  width: 220px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px 0 12px;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 999px;
  font-size: 13px;
  color: rgb(var(--text-secondary));
}
.ax-search > i {
  font-size: 15px;
  color: rgb(var(--text-primary));
}
.ax-search-ph {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-search kbd {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgb(var(--secondary-stroke));
  font: 500 11px var(--font-ax);
  color: rgb(var(--text-primary));
}
.ax-search:hover {
  border-color: rgb(var(--text-tertiary));
  background: rgb(var(--background-secondary));
}

/* auth slot: filled by auth.js, hidden while empty */
.ax-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
}
.ax-auth:empty {
  display: none;
}

/* "Sign up" referral link (rendered only when TX.CONFIG.axiomReferralUrl is set) */
.ax-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 32px;
  padding: 0 9px 0 13px;
  gap: 3px;
  border-radius: 999px;
  border: 1px solid rgb(var(--primary-color) / 0.45);
  background: rgb(var(--primary-color) / 0.08);
  color: rgb(var(--primary-color));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.ax-signup i {
  font-size: 14px;
  opacity: 0.75;
  transition: transform 0.15s, opacity 0.15s;
}
.ax-signup:hover {
  background: rgb(var(--primary-color) / 0.16);
  border-color: rgb(var(--primary-color) / 0.9);
  color: rgb(var(--primary-color-hover));
}
.ax-signup:hover i {
  opacity: 1;
  transform: translate(1px, -1px);
}
.ax-signup:focus-visible {
  outline: 2px solid rgb(var(--primary-color));
  outline-offset: 2px;
}

.ax-deposit {
  height: 32px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgb(var(--primary-color));
  color: #0b0b0f;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.12s;
}
.ax-deposit:hover {
  background: rgb(var(--primary-color-hover));
}

/* row 2: only the trades toggle; the game HUD and the room bar float in the free space to its right */
.ax-nav2 {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  min-width: 0;
}

@container axnav (max-width: 1600px) {
  .ax-search {
    width: 190px;
  }
  .ax-signup {
    padding: 0 9px 0 11px;
  }
}
@container axnav (max-width: 1400px) {
  .ax-search {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .ax-search-ph,
  .ax-search kbd {
    display: none;
  }
  .ax-tab {
    padding: 0 8px;
    font-size: 13.5px;
  }
  .ax-logo {
    margin-right: 2px;
  }
}
@container axnav (max-width: 1000px) {
  .ax-deposit {
    display: none;
  }
}
@container axnav (max-width: 900px) {
  .ax-tab {
    font-size: 13px;
  }
  .ax-wchip .ri-arrow-down-s-line {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   Tracked-trades panel (§4.5): 320 px open, 38 px rail closed (no width transition)
   --------------------------------------------------------------------------------------------------------- */
.axtr {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-height: 0;
  background: var(--ax-bg);
  border-right: 1px solid rgb(var(--primary-stroke));
}
.axtr.closed {
  width: 38px;
}
.axtr.closed .axtr-panel,
.axtr.open .axtr-rail {
  display: none;
}
.axtr-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.axtr-h1 {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 6px 0 12px;
  flex: none;
}
.axtr-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.axtr-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--increase));
  box-shadow: 0 0 0 3px rgb(var(--increase) / 0.14);
}
.axtr-qb-g {
  height: 26px;
  padding: 0 8px 0 9px;
  gap: 3px;
}
.axtr-qb-g input {
  width: 30px;
  text-align: right;
}

.axtr-filterrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  margin: 0 8px 6px;
  padding: 0 8px;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 4px;
  color: rgb(var(--text-secondary));
}
.axtr-filter {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: rgb(var(--text-primary));
}

/* shared grid of the column header and the rows */
.axtr-th,
.axtr-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 0.55fr) minmax(0, 1.9fr) 54px 38px;
  column-gap: 5px;
  align-items: center;
  padding: 0 8px;
}
.axtr-th {
  flex: none;
  height: 28px;
  font-size: 11px;
  color: rgb(var(--text-tertiary));
  border-top: 1px solid rgb(var(--primary-stroke));
  border-bottom: 1px solid rgb(var(--primary-stroke));
}
.axtr-th .r {
  text-align: right;
}

.axtr-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.axtr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 24px 12px;
  font-size: 12px;
  color: rgb(var(--text-tertiary));
}
.axtr-empty i {
  font-size: 20px;
}

.axtr-row {
  position: relative;
  min-height: 34px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgb(var(--primary-stroke) / 0.45);
}
.axtr-row.buy {
  background: rgb(var(--increase) / 0.035);
}
.axtr-row.sell {
  background: rgb(var(--decrease) / 0.045);
}
.axtr-row:hover {
  background: rgb(var(--background-tertiary));
}

.axtr-age {
  font-size: 11px;
  color: rgb(var(--text-secondary));
  white-space: nowrap;
  text-decoration: underline dotted rgb(var(--text-tertiary));
  text-underline-offset: 2px;
}
.axtr-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-weight: 500;
}
.axtr-name .emoji {
  flex: none;
  font-size: 11px;
}
.axtr-row.buy .axtr-name,
.axtr-row.buy .axtr-amt {
  color: rgb(var(--increase));
}
.axtr-row.sell .axtr-name,
.axtr-row.sell .axtr-amt {
  color: rgb(var(--decrease));
}

.axtr-tok {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.axtr-img {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.axtr-img img {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  background: rgb(var(--background-tertiary));
  box-shadow: 0 0 0 1px var(--plat, transparent);
}
.axtr-plat {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  font-size: 7.5px;
  line-height: 1;
  color: var(--plat);
  border: 1px solid var(--plat);
  background: color-mix(in srgb, var(--plat) 18%, var(--ax-bg));
}
.axtr-plat i {
  line-height: 1;
}
/* ticker never cut: the glyphs and the age wrap to a second line instead */
.axtr-tt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 5px;
  min-width: 0;
}
.axtr-tk {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.axtr-cfg {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.axtr-cfg:empty {
  display: none;
}
.axtr-cfg .ax-pair,
.axtr-cfg .ax-fee {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}
.axtr-cfg i {
  font-size: 11.5px;
}
.axtr-tage {
  flex: 0 1000 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  color: rgb(var(--increase) / 0.8);
}
.axtr-amt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  text-align: right;
  font-weight: 500;
}
.axtr-mc {
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  color: rgb(var(--text-secondary));
}

/* ⚡ quick buy: only on hovered rows of a panel with .qb-on; overlays the MC column */
.axtr-qb {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgb(var(--primary-color));
  color: #0b0b0f;
  font-size: 12px;
}
.axtr.qb-on .axtr-row:hover .axtr-qb {
  display: inline-grid;
  place-items: center;
}

.axtr-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}
.axtr-rail-l {
  margin-top: 6px;
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgb(var(--text-tertiary));
}

/* ---------------------------------------------------------------------------------------------------------
   Bottom bar (§4.6): 32 px incl. its top border
   --------------------------------------------------------------------------------------------------------- */
.axb {
  container: axbottom / inline-size;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  overflow: hidden;
  border-top: 1px solid rgb(var(--primary-stroke));
  background: var(--ax-bg);
  font-size: 12px;
  color: rgb(var(--text-secondary));
}
.axb-l {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 0;
}
.axb-r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.axb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid rgb(var(--primary-stroke));
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--text-primary));
  transition: background-color 0.12s, border-color 0.12s;
}
.axb-chip i {
  color: rgb(var(--text-secondary));
}
.axb-chip:hover {
  background: rgb(var(--background-secondary));
  border-color: rgb(var(--secondary-stroke));
}
.axb-px {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-weight: 500;
  color: rgb(var(--text-secondary));
}
.axb-conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11.5px;
  color: rgb(var(--text-tertiary));
}
.axb-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--increase));
}
.axb-disc {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgb(var(--text-tertiary));
}
.axb-j7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid rgb(var(--primary-color) / 0.5);
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(var(--primary-color));
}
.axb-j7:hover {
  background: rgb(var(--primary-color) / 0.12);
}
.axb-j7side {
  font-weight: 500;
  color: rgb(var(--text-secondary));
}
/* core's Donate / X / Copy CA pills (base.css look) never shrink in the bar */
.axb .dn-btn,
.axb .tx-x,
.axb .tx-ca {
  flex: none;
}

@container axbottom (max-width: 1100px) {
  .axb-disc-a {
    display: none;
  }
}
@container axbottom (max-width: 720px) {
  .axb-conn {
    display: none;
  }
}
@container axbottom (max-width: 600px) {
  .axb-px {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   View hosts and the stub card (§4.7)
   --------------------------------------------------------------------------------------------------------- */
.ax-host {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}
.ax-host-off {
  display: none !important;
}
.ax-stub {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ax-stub-card {
  width: min(420px, 100%);
  padding: 32px 28px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgb(var(--primary-stroke));
  background: rgb(var(--background-secondary));
}
.ax-stub-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 12px;
  font-size: 24px;
  color: rgb(var(--primary-color));
  background: rgb(var(--primary-color) / 0.12);
}
.ax-stub-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.ax-stub-card p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(var(--text-secondary));
}
.ax-stub-card p.ax-stub-sub {
  color: rgb(var(--text-primary));
}
.ax-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-top: 12px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgb(var(--primary-color));
  color: #0b0b0f;
  font-weight: 600;
}
.ax-btn-primary:hover {
  background: rgb(var(--primary-color-hover));
}

/* ---- src/css/axiom/pulse.css ---- */
/* ===========================================================================================================
   PULSE: the ANXIOM Pulse board (docs/specs/axiom-pulse.md §4). Part 2 of css/axiom.css (after the shell part).
   Tokens come from base.css (rgb(var(--x)) triplets; --ax-bg is a plain colour). Container queries: the header
   row is container "axphead", every column is container "axcol" (card layouts follow the column width).
   =========================================================================================================== */

/* ---- 4.1 root and header row ----------------------------------------------------------------------------- */
.axp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 10px 8px;
  font-variant-numeric: tabular-nums;
}
.axp-head {
  container: axphead / inline-size;
  height: 50px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.axp-title {
  margin: 0 6px 0 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: none;
}

/* launchpad filter group */
.axp-plats {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(var(--primary-stroke));
  background: rgb(var(--background-secondary));
}
.axp-plat {
  width: 26px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--plat, rgb(var(--text-tertiary)));
  transition:
    color 0.12s,
    background-color 0.12s,
    opacity 0.12s;
}
.axp-plat > i {
  opacity: 0.38;
  transition: opacity 0.12s;
}
.axp-plats:has(.axp-plat.all.on) .axp-plat:not(.all) > i {
  opacity: 0.8;
}
.axp-plat:hover > i,
.axp-plat.on > i,
.axp-plat.all > i {
  opacity: 1;
}
.axp-plat.on:not(.all) {
  color: var(--plat);
  background: color-mix(in srgb, var(--plat) 15%, rgb(var(--background-tertiary)));
}
.axp-plat.all {
  color: rgb(var(--text-tertiary));
}
.axp-plat.all:hover {
  color: rgb(var(--text-primary));
}
.axp-plat.all.on {
  color: rgb(var(--primary-color));
  background: rgb(var(--background-tertiary));
}

/* header quick-buy pill */
.axp-hqb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 3px 0 10px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(var(--primary-color) / 0.55);
  background: rgb(var(--primary-color) / 0.06);
  font-size: 12px;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.axp-hqb > i {
  font-size: 13px;
  line-height: 1;
  color: rgb(var(--primary-color));
  transition: color 0.15s;
}
.axp-hqb-l {
  color: rgb(var(--text-secondary));
  white-space: nowrap;
}
.axp-hqb input {
  width: 38px;
  height: 22px;
  padding: 0 5px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  background: rgb(var(--background-tertiary));
  font: 600 12.5px var(--font-ax);
  color: rgb(var(--text-primary));
  text-align: center;
  transition: color 0.15s;
}
.axp-hqb input:focus {
  box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / 0.7);
}
.axp-hqb .ax-sol {
  width: 11px;
  height: 9px;
}
.axp-hqb-tog {
  width: 38px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color 0.15s;
}
.axp-hqb-tog:hover {
  background: rgb(var(--background-tertiary));
}
.axp-hqb.off {
  border-color: rgb(var(--secondary-stroke));
  background: none;
}
.axp-hqb.off > i,
.axp-hqb.off input {
  color: rgb(var(--text-tertiary));
}

/* Display button */
.axp-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--background-tertiary));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.12s;
}
.axp-display > i {
  font-size: 16px;
  line-height: 1;
}
.axp-display:hover {
  background: rgb(var(--secondary-stroke));
}

@container axphead (max-width: 900px) {
  .axp-plats,
  .axp-hqb-l {
    display: none;
  }
}
@container axphead (max-width: 640px) {
  .axp-display {
    font-size: 0;
    padding: 0 8px;
  }
  .axp-display > i {
    font-size: 16px;
  }
}

/* ---- 4.2 columns grid ------------------------------------------------------------------------------------ */
.axp-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgb(var(--primary-stroke));
  border-radius: 4px;
  overflow: hidden;
  background: var(--ax-bg);
}
.axp-col {
  container: axcol / inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid rgb(var(--primary-stroke));
}
.axp-col:last-child {
  border-right: 0;
}
.axp-ch {
  height: 42px;
  flex: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid rgb(var(--primary-stroke));
  transition: box-shadow 0.15s;
}
.axp-col.is-paused .axp-ch {
  box-shadow: inset 0 -1px 0 rgb(var(--primary-yellow) / 0.7);
}
.axp-ctitle {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* no blue notification dot inside column headers */
.axp-ch .ax-ibtn.dot::before,
.axp-ch .ax-ibtn.dot::after {
  content: none;
  display: none;
}

/* paused pill + "+N new" bubble */
.axp-paused {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px 0 5px;
  flex: none;
  border-radius: 999px;
  color: rgb(var(--primary-yellow));
  background: rgb(var(--primary-yellow) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--primary-yellow) / 0.3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.axp-paused > i {
  font-size: 12px;
  line-height: 1;
}
.axp-pn {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  margin-left: 3px;
  border-radius: 999px;
  color: #0b0b0f;
  background: rgb(var(--primary-yellow));
  font-size: 10px;
  font-weight: 700;
}

/* column search box */
.axp-fwrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 10px;
  flex: 0 1 190px;
  min-width: 70px;
  overflow: hidden;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 999px;
  color: rgb(var(--text-tertiary));
  font-size: 12px;
  transition: border-color 0.12s;
}
.axp-fwrap:focus-within {
  border-color: rgb(var(--primary-color) / 0.7);
}
.axp-fwrap > i {
  flex: none;
  font-size: 12px;
  line-height: 1;
}
.axp-filter {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 12px var(--font-ax);
  color: rgb(var(--text-primary));
}
.axp-filter::placeholder {
  color: rgb(var(--text-secondary));
}
.axp-fclear {
  flex: none;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: rgb(var(--text-secondary));
}
.axp-fclear:hover {
  color: rgb(var(--text-primary));
}

/* column quick-buy amount (extends the shell's .ax-qbgroup) */
.axp-cqb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 6px 0 9px;
  flex: none;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 999px;
  font-size: 12px;
  color: rgb(var(--text-primary));
}
.ax-qbgroup.axp-cqb {
  padding: 0 6px 0 9px;
}
.axp-cqb > i {
  font-size: 12px;
  line-height: 1;
  color: rgb(var(--text-primary));
}
.axp-cqb .axp-qbin {
  width: 30px;
  height: 22px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 12px var(--font-ax);
  color: rgb(var(--text-primary));
}
.axp-cqb .axp-qbin:focus {
  background: rgb(var(--background-tertiary));
  border-radius: 4px;
}

@container axcol (max-width: 560px) {
  .axp-col.is-paused .axp-fwrap:not(:focus-within):has(.axp-fclear.hidden) {
    flex: 0 0 30px;
    min-width: 30px;
    padding: 0 8px;
  }
  .axp-col.is-paused .axp-fwrap:not(:focus-within):has(.axp-fclear.hidden) .axp-filter::placeholder {
    color: transparent;
  }
}
@container axcol (max-width: 360px) {
  .axp-fwrap {
    flex-basis: 110px;
  }
  .axp-ch .ax-ibtn.dot {
    display: none;
  }
  .axp-pn {
    padding: 0 4px;
  }
}
@container axcol (max-width: 330px) {
  .axp-ch {
    gap: 4px;
    padding-left: 9px;
  }
  .axp-ctitle {
    font-size: 13px;
  }
  .axp-fwrap {
    flex: 0 0 30px;
    min-width: 30px;
    padding: 0 8px;
  }
  .axp-fwrap:focus-within {
    flex: 0 0 120px;
  }
  .axp-fwrap .axp-filter::placeholder {
    color: transparent;
  }
  .axp-ch .ax-ibtn {
    display: none;
  }
}

/* column body, empty state, dashed tail card */
.axp-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
.axp-list {
  position: relative;
  isolation: isolate;
}
.axp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 16px;
  text-align: center;
  color: rgb(var(--text-tertiary));
  font-size: 12.5px;
}
.axp-empty-ic {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--primary-stroke));
  background: rgb(var(--background-secondary));
  color: rgb(var(--text-secondary));
  font-size: 20px;
}
.axp-empty-ic::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgb(var(--primary-color) / 0.5);
  pointer-events: none;
  animation: axp-ping 2.2s ease-out infinite;
}
@keyframes axp-ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}
.axp-tail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 12px 16px;
  padding: 14px;
  border-radius: 6px;
  border: 1px dashed rgb(var(--secondary-stroke));
  color: rgb(var(--text-tertiary));
  font-size: 11.5px;
  line-height: 1.4;
}
.axp-tail-ic {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgb(var(--background-secondary));
  color: rgb(var(--text-secondary));
  font-size: 18px;
}
.axp-col[data-col='final'] .axp-tail-ic {
  color: rgb(var(--primary-yellow));
  background: rgb(var(--primary-yellow) / 0.08);
}
.axp-col[data-col='migrated'] .axp-tail-ic {
  color: rgb(var(--increase));
  background: rgb(var(--increase) / 0.08);
}
.axp-tail-t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.axp-tail-t > b {
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--text-secondary));
}

/* ---- 4.3 card grid (wide layout: columns > 700 px) ------------------------------------------------------- */
.axc {
  --axg: 10px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'l r1 sell box box'
    'l m sell box box';
  row-gap: 3px;
  padding: 10px 8px 10px 12px;
  border-bottom: 1px solid rgb(var(--primary-stroke) / 0.8);
  background-color: var(--ax-bg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.axc:hover {
  background-color: rgb(var(--background-secondary));
}

/* ---- 4.5 card elements ----------------------------------------------------------------------------------- */
.axc-l {
  grid-area: l;
  width: 68px;
  margin-right: var(--axg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.axc-av {
  position: relative;
  width: 68px;
  height: 68px;
  flex: none;
  padding: 2px;
  border-radius: 4px;
  border: 1px solid var(--plat, rgb(var(--secondary-stroke)));
  background: rgb(var(--background-secondary));
}
.axc-av > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
  background: rgb(var(--background-tertiary));
}
.axc-plat {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--plat);
  background: color-mix(in srgb, var(--plat) 18%, var(--ax-bg));
  box-shadow: 0 0 0 1.5px var(--ax-bg);
  color: var(--plat);
  font-size: 10.5px;
  line-height: 1;
}
.axc:hover .axc-plat {
  box-shadow: 0 0 0 1.5px rgb(var(--background-secondary));
}
.axc-devn {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  border: 1px solid rgb(var(--secondary-stroke));
  background: var(--ax-bg);
  color: rgb(var(--text-secondary));
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  white-space: nowrap;
}
.axc-youb {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  height: 14px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgb(var(--primary-color));
  box-shadow: 0 0 0 1.5px var(--ax-bg);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.04em;
}
.axc:hover .axc-youb {
  box-shadow: 0 0 0 1.5px rgb(var(--background-secondary));
}
.axc-bond {
  width: 100%;
  height: 2px;
  flex: none;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 1px;
  background: rgb(var(--secondary-stroke) / 0.7);
}
.axc-bond > i {
  display: block;
  height: 100%;
  background: var(--plat, rgb(var(--increase)));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s;
}
.axc-ca {
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  letter-spacing: -0.01em;
  color: rgb(var(--text-secondary));
  white-space: nowrap;
}

/* identity row (wide: one inline flow, name + copy move down together when they do not fit) */
.axc-r1 {
  grid-area: r1;
  display: flow-root;
  min-width: 0;
  font-size: 14px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.axc-id {
  display: contents;
}
.axc-hide {
  display: inline-grid;
  place-items: center;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 4px;
  border: 1px solid rgb(var(--decrease) / 0.35);
  background: rgb(var(--decrease) / 0.14);
  color: rgb(var(--decrease));
  font-size: 14px;
  line-height: 1;
}
.axc-hide:hover {
  background: rgb(var(--decrease) / 0.28);
}
.axc.is-hid .axc-hide {
  border-color: rgb(var(--increase) / 0.35);
  background: rgb(var(--increase) / 0.12);
  color: rgb(var(--increase));
}
.axc-tk {
  display: inline-block;
  vertical-align: top;
  margin-right: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.axc-cfg {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-right: 6px;
}
.axc-ext {
  float: right;
  display: flex;
  align-items: center;
  height: 22px;
}
.axc-ext > * {
  margin-left: 6px;
}
.axc-nw {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  padding-top: 2px;
}
.axc-nm {
  font-size: 14px;
  line-height: 18px;
  color: rgb(var(--text-secondary));
}
.axc-copy {
  display: inline-grid;
  place-items: center;
  vertical-align: top;
  height: 18px;
  margin-left: 5px;
  color: rgb(var(--text-secondary));
  font-size: 12.5px;
  line-height: 1;
}
.axc-copy:hover {
  color: rgb(var(--text-primary));
}
.axc-copy.done {
  color: rgb(var(--increase));
}
.axc-pct {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px 0 4px;
  border-radius: 999px;
  background: rgb(var(--primary-yellow) / 0.08);
  color: rgb(var(--primary-yellow));
  font-size: 11px;
  white-space: nowrap;
}
.axc-pct > i {
  font-size: 10px;
  opacity: 0.8;
}
.axc-you {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 5px 0 4px;
  border-radius: 3px;
  background: rgb(var(--primary-color));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.axc-you > i {
  font-size: 10px;
}

/* middle stats */
.axc-m {
  grid-area: m;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.axc-r2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  height: 20px;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
}
.axc-age {
  color: rgb(var(--increase) / 0.72);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.axc-age.fresh {
  color: rgb(var(--increase));
}
.axc-socials {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.axc-so {
  display: inline-grid;
  place-items: center;
  color: rgb(var(--text-secondary));
  font-size: 14px;
  line-height: 1;
}
.axc-so:hover {
  color: rgb(var(--text-primary));
}
.axc-st {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: rgb(var(--text-primary));
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.axc-st > i {
  color: rgb(var(--text-secondary));
  font-size: 13px;
  line-height: 1;
}
.axc-st.kol > i {
  color: rgb(var(--primary-orange));
}
.axc-st.has {
  gap: 2px;
}
.axc-kav {
  display: inline-flex;
  align-items: center;
}
.axc-kav > .axc-kimg {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ax-bg);
}
.axc-kav > .axc-kimg + .axc-kimg {
  margin-left: -7px;
}
.axc:hover .axc-kav > .axc-kimg {
  box-shadow: 0 0 0 1.5px rgb(var(--background-secondary));
}
.axc-r3 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 15px;
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--text-secondary));
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}
.axc-r3 .axc-st {
  color: rgb(var(--text-secondary));
  font-size: 11px;
}
.axc-r3 .axc-st > i {
  font-size: 12px;
}
.axc-handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(var(--primary-light-blue));
}
.axc-dev {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: rgb(var(--text-secondary));
}
.axc-r4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  height: 20px;
  min-width: 0;
  overflow: hidden;
}
.axc-pill,
.axc-paid {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.axc-pill {
  border: 1px solid rgb(var(--secondary-stroke) / 0.9);
  background: rgb(var(--background-secondary) / 0.6);
}
.axc-pill > i,
.axc-paid > i {
  font-size: 11px;
  line-height: 1;
}
.axc-pill.good {
  color: rgb(var(--increase));
}
.axc-pill.bad {
  color: rgb(var(--decrease));
}
.axc-paid {
  font-weight: 600;
  color: rgb(var(--increase));
  background: rgb(var(--increase) / 0.12);
}

/* sell column: PnL + Sell 100% */
.axc-sell {
  grid-area: sell;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  margin-left: var(--axg);
  padding-bottom: 2px;
}
.axc-pnl {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.1;
  white-space: nowrap;
}
.axc.is-held .axc-pnl {
  display: flex;
}
.axc-pnl > b {
  color: rgb(var(--increase));
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.01em;
}
.axc-pnl > small {
  color: rgb(var(--increase) / 0.8);
  font-size: 11px;
  font-weight: 500;
}
.axc-pnl > small > .ax-sol {
  vertical-align: -1px;
}
.axc-sellbtn {
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: rgb(var(--text-tertiary));
  font-size: 11px;
  white-space: nowrap;
}
.axc-sellbtn:hover {
  border-color: rgb(var(--primary-stroke));
  color: rgb(var(--text-secondary));
}
.axc.is-held .axc-sellbtn {
  border-color: rgb(var(--decrease) / 0.45);
  background: rgb(var(--decrease) / 0.08);
  color: rgb(var(--decrease));
  font-weight: 600;
}
.axc.is-held .axc-sellbtn:hover {
  background: rgb(var(--decrease) / 0.18);
}

/* MC box */
.axc-box {
  grid-area: box;
  position: relative;
  width: 154px;
  min-width: 0;
  margin-left: var(--axg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 8px 5px 6px;
  border-radius: 4px;
  background: rgb(var(--background-secondary) / 0.75);
}
.axc:hover .axc-box {
  background: rgb(var(--background-tertiary));
}
.axc-box .lbl {
  color: rgb(var(--text-secondary));
  font-size: 11px;
}
.axc-b1 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.axc-b1 > .lbl:nth-child(3),
.axc-b1 > .axc-mc {
  margin-left: 2px;
}
.axc-v {
  font-size: 13.5px;
  font-weight: 600;
}
.axc-mc {
  position: relative;
  padding: 0 3px;
  margin-right: -3px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  transition:
    color 0.3s,
    background-color 0.3s;
}
.axc-box.big .axc-b1 {
  gap: 2px;
  letter-spacing: -0.04em;
}
.axc-box.big .axc-b1 > .lbl:nth-child(3),
.axc-box.big .axc-b1 > .axc-mc {
  margin-left: 0;
}
.axc-mc.t1 {
  color: rgb(var(--primary-light-blue));
}
.axc-mc.t2 {
  color: rgb(var(--primary-yellow));
}
.axc-mc.t3 {
  color: rgb(var(--increase));
}
.axc-mc.up {
  color: rgb(var(--increase));
  background: rgb(var(--increase) / 0.1);
  transition: none;
}
.axc-mc.dn {
  color: rgb(var(--decrease));
  background: rgb(var(--decrease) / 0.1);
  transition: none;
}
.axc-hot {
  display: none;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  color: rgb(var(--primary-orange));
  font-size: 12px;
  line-height: 16px;
  animation: axc-flame 0.7s ease-in-out infinite alternate;
}
.axc.is-moon .axc-hot {
  display: block;
}
.axc.is-moon .axc-b1 > .lbl:nth-child(3) {
  visibility: hidden;
}
@keyframes axc-flame {
  from {
    transform: scale(0.85) translateY(1px);
    opacity: 0.75;
  }
  to {
    transform: scale(1.12);
    opacity: 1;
  }
}
.axc-b2 {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.axc-b2 > .lbl.tx {
  margin-left: 5px;
}
.axc-txbar {
  width: 22px;
  height: 3px;
  flex: none;
  margin-left: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(var(--decrease));
}
.axc-txbar > i {
  display: block;
  height: 100%;
  background: rgb(var(--increase));
  transform-origin: left center;
}

/* ---- 4.6 quick-buy button sizes (base = Small) ----------------------------------------------------------- */
.axc-qb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 24px;
  min-width: 0;
  flex-shrink: 1;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgb(var(--primary-color));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.1s,
    box-shadow 0.12s,
    transform 0.06s;
}
.axc-qb > i {
  font-size: 12px;
  line-height: 1;
}
.axc-qb:hover {
  background: rgb(var(--primary-color-hover));
}
.axc-qb:active {
  transform: scale(0.94);
}
.axc.is-buying .axc-qb {
  background: rgb(var(--increase));
  color: #0b0b0f;
}
.axp.qb-large .axc-qb {
  height: 30px;
  gap: 3px;
  padding: 0 14px 0 11px;
  font-size: 13.5px;
}
.axp.qb-large .axc-qb > i {
  font-size: 14px;
}
.axp.qb-mega .axc-qb {
  align-self: stretch;
  height: 36px;
  gap: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgb(var(--primary-color-hover)), rgb(var(--primary-color)));
  box-shadow: 0 2px 8px rgb(var(--primary-color) / 0.2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.axp.qb-mega .axc-qb > i {
  font-size: 16px;
}
.axp.qb-mega .axc-qb:hover {
  box-shadow:
    0 0 0 1px rgb(var(--primary-color-hover)),
    0 3px 14px rgb(var(--primary-color) / 0.42);
}
.axp.qb-mega .axc.is-buying .axc-qb {
  background: rgb(var(--increase));
}
.axp.compact.qb-mega .axc-qb {
  height: 30px;
  font-size: 14px;
}

/* Ultra: the whole MC box is the button (only while quick buy is on) */
.axp.qb-ultra:not(.no-qb) .axc-box {
  width: 168px;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 9px 6px 8px;
  border-radius: 6px;
  background: linear-gradient(170deg, rgb(var(--primary-color) / 0.12) 10%, rgb(var(--primary-color) / 0.42));
  box-shadow:
    inset 0 0 0 1px rgb(var(--primary-color) / 0.6),
    0 0 14px rgb(var(--primary-color) / 0.16);
}
.axp.qb-ultra:not(.no-qb) .axc-box:hover {
  background: linear-gradient(170deg, rgb(var(--primary-color) / 0.16) 10%, rgb(var(--primary-color) / 0.5));
}
.axp.qb-ultra:not(.no-qb) .axc-b1,
.axp.qb-ultra:not(.no-qb) .axc-b2 {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.axp.qb-ultra:not(.no-qb) .axc-qb {
  position: absolute;
  inset: 0;
  height: auto;
  align-items: flex-end;
  gap: 4px;
  padding: 0 0 7px;
  border-radius: 6px;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}
.axp.qb-ultra:not(.no-qb) .axc-qb > i {
  color: rgb(var(--primary-yellow));
  font-size: 17px;
}
.axp.qb-ultra:not(.no-qb) .axc-qb:hover {
  background: rgb(var(--primary-color) / 0.26);
  box-shadow:
    inset 0 0 0 1px rgb(var(--primary-color)),
    0 0 22px rgb(var(--primary-color) / 0.4);
}
.axp.qb-ultra:not(.no-qb) .axc-qb:active {
  background: rgb(var(--primary-color) / 0.4);
  transform: none;
}
.axp.qb-ultra:not(.no-qb) .axc.is-buying .axc-qb {
  background: rgb(var(--increase) / 0.35);
  color: #fff;
}
.axp.qb-ultra:not(.no-qb) .axc.is-held .axc-box {
  box-shadow:
    inset 0 0 0 1px rgb(var(--increase) / 0.6),
    0 0 14px rgb(var(--primary-color) / 0.16);
}
.axp.no-qb .axc-qb {
  display: none;
}

/* migrating overrides every size and the held / buying looks */
.axc.is-migrating .axc-qb,
.axc.is-migrating .axc-sellbtn {
  border-color: transparent !important;
  background: rgb(var(--secondary-stroke)) !important;
  box-shadow: none !important;
  color: rgb(var(--text-tertiary)) !important;
  text-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}
.axc.is-migrating .axc-qb > i {
  color: inherit !important;
}
.axc.is-migrating .axc-qb > .ri-flashlight-fill,
.axc.is-migrating .axc-qbl {
  display: none;
}
.axc-qbm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.axp.qb-ultra:not(.no-qb) .axc.is-migrating .axc-box {
  background: rgb(var(--secondary-stroke) / 0.45) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--secondary-stroke)) !important;
}
.axp.qb-ultra:not(.no-qb) .axc.is-migrating .axc-qb {
  background: transparent !important;
}
.axc.is-dead .axc-qb {
  background: rgb(var(--secondary-stroke)) !important;
  box-shadow: none !important;
  color: rgb(var(--text-secondary)) !important;
}

/* ---- 4.7 card states (single-class rules: source order decides the edge / tint precedence) ---------------- */
.axc.is-off {
  display: none;
}
.axc.is-hid {
  opacity: 0.4;
}
.axc.is-dead {
  opacity: 0.42;
  filter: grayscale(1);
}
.axc.is-you {
  box-shadow: inset 2px 0 0 rgb(var(--primary-color));
  background-image: linear-gradient(
    90deg,
    rgb(var(--primary-color) / 0.1),
    rgb(var(--primary-color) / 0.025) 45%,
    transparent 75%
  );
}
.axc.is-you .axc-av {
  box-shadow:
    0 0 0 1px rgb(var(--primary-color) / 0.5),
    0 0 14px rgb(var(--primary-color) / 0.35);
}
.axc.pnl-up .axc-av,
.axc.pnl-big .axc-av,
.axc.pnl-insane .axc-av {
  transition: box-shadow 0.35s;
}
.axc.pnl-up {
  box-shadow: inset 2px 0 0 rgb(var(--increase));
  background-image: linear-gradient(90deg, rgb(var(--increase) / 0.07), rgb(var(--increase) / 0.015) 40%, transparent 70%);
}
.axc.pnl-up .axc-av {
  box-shadow:
    0 0 0 1px rgb(var(--increase) / 0.6),
    0 0 12px rgb(var(--increase) / 0.25);
}
.axc.pnl-big {
  box-shadow: inset 2px 0 0 rgb(var(--increase));
  background-image: linear-gradient(90deg, rgb(var(--increase) / 0.13), rgb(var(--increase) / 0.035) 50%, transparent 85%);
}
.axc.pnl-big .axc-av {
  box-shadow:
    0 0 0 1px rgb(var(--increase) / 0.8),
    0 0 18px rgb(var(--increase) / 0.4);
}
.axc.pnl-big .axc-pnl > b {
  font-size: 16px;
  text-shadow: 0 0 14px rgb(var(--increase) / 0.6);
}
.axc.pnl-insane {
  box-shadow: inset 3px 0 0 rgb(var(--increase));
  background-image: linear-gradient(
    90deg,
    rgb(var(--increase) / 0.18),
    rgb(var(--primary-yellow) / 0.05) 55%,
    rgb(var(--increase) / 0.04)
  );
}
.axc.pnl-insane .axc-av {
  box-shadow:
    0 0 0 1px rgb(var(--increase)),
    0 0 24px rgb(var(--increase) / 0.55);
}
.axc.pnl-insane::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(var(--increase)),
    rgb(var(--primary-yellow)),
    rgb(var(--increase)),
    rgb(var(--primary-yellow)),
    rgb(var(--increase))
  );
  background-size: 200% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: axc-border 2.4s linear infinite;
}
@keyframes axc-border {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}
.axc.pnl-insane .axc-pnl > b {
  font-size: 18px;
  background: linear-gradient(
    90deg,
    rgb(var(--increase)),
    rgb(var(--primary-yellow)),
    rgb(var(--increase)),
    rgb(var(--primary-yellow)),
    rgb(var(--increase))
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgb(var(--increase) / 0.5));
  animation: axc-border 1.6s linear infinite;
}
.axc.pnl-dn {
  box-shadow: inset 2px 0 0 rgb(var(--decrease) / 0.7);
}
.axc.pnl-dn .axc-pnl > b,
.axc.pnl-dn .axc-pnl > small {
  color: rgb(var(--decrease));
}
.axc.is-grad {
  box-shadow: inset 2px 0 0 rgb(var(--primary-yellow));
  background-image: linear-gradient(90deg, rgb(var(--primary-yellow) / 0.1), transparent 55%);
}
.axc.is-migrating {
  box-shadow: inset 2px 0 0 rgb(var(--primary-yellow));
}
/* held avatar flash on an MC change: overrides every ring, no transition */
.axc.tick-up .axc-av {
  box-shadow:
    0 0 0 2px rgb(var(--increase)),
    0 0 26px rgb(var(--increase) / 0.7);
  transition: none;
}
.axc.tick-dn .axc-av {
  box-shadow:
    0 0 0 1px rgb(var(--decrease)),
    0 0 14px rgb(var(--decrease));
  transition: none;
}
.axc.x-burst {
  animation: axc-burst 0.9s ease-out;
}
@keyframes axc-burst {
  from {
    background-color: rgb(var(--increase) / 0.2);
  }
  to {
    background-color: var(--ax-bg);
  }
}

/* milestone pop */
.axc-x {
  position: absolute;
  top: 50%;
  right: 178px;
  z-index: 3;
  pointer-events: none;
  color: rgb(var(--primary-yellow));
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgb(var(--primary-yellow) / 0.6),
    0 2px 2px rgb(0 0 0 / 0.65);
  animation: axc-pop 1.25s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.axc-x.big {
  color: rgb(var(--increase));
  font-size: 32px;
  text-shadow:
    0 0 16px rgb(var(--increase) / 0.7),
    0 2px 2px rgb(0 0 0 / 0.65);
}
@keyframes axc-pop {
  0% {
    opacity: 0;
    transform: translateY(-40%) scale(0.4);
  }
  18% {
    opacity: 1;
    transform: translateY(-50%) scale(1.25);
  }
  32% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-140%) scale(1);
  }
}

/* migration countdown badge + graduation chip (row 2, right after the age) */
.axc-migb,
.axc-grad {
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px 0 4px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}
.axc-migb {
  display: inline-flex;
  color: rgb(var(--primary-yellow));
  background: rgb(var(--primary-yellow) / 0.14);
  box-shadow: inset 0 0 0 1px rgb(var(--primary-yellow) / 0.45);
}
.axc-migb > i {
  font-size: 11px;
}
.axc-migb > b {
  min-width: 3.1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* right after the age the badge tucks in a little, so "3m + Migrating 2.3s" still fits the 136 px stats track of
   a 369 px column (as on the reference frames) instead of wrapping out of the clipped row */
.axc-age + .axc-migb {
  margin-left: -3px;
}
.axc.is-held .axc-migb {
  order: -1;
  margin-left: 0;
}
.axc.is-held .axc-migl {
  display: none;
}
.axc-grad {
  display: none;
  color: #0b0b0f;
  background: rgb(var(--primary-yellow));
}
.axc.is-grad .axc-grad {
  display: inline-flex;
}

/* ---- 4.8 display toggles --------------------------------------------------------------------------------- */
.axp.no-pills .axc-r4 {
  display: none;
}
.axp.no-r3 .axc-r3 {
  display: none;
}
.axp.no-sell .axc-sellbtn {
  display: none;
}
.axp.compact .axc {
  padding-top: 7px;
  padding-bottom: 7px;
}
.axp.compact .axc .axc-l,
.axp.compact .axc .axc-av {
  width: 54px;
}
.axp.compact .axc .axc-av {
  height: 54px;
}
.axp.compact .axc-ca {
  display: none;
}

/* ---- 4.3 card layouts by column width (order matters: 700, 560, 440, 330, 340, 240) ----------------------- */
@container axcol (max-width: 700px) {
  .axc {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'l id id id cp'
      'l nm nm box box'
      'l m sell box box';
  }
  .axc-r1,
  .axc-nw {
    display: contents;
  }
  .axc-id {
    grid-area: id;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
  }
  .axc-ext {
    float: none;
    margin-left: auto;
  }
  .axc-nm {
    grid-area: nm;
    min-width: 0;
  }
  .axc-copy {
    grid-area: cp;
    align-self: start;
    height: 22px;
    margin-left: 6px;
  }
  .axc-pct,
  .axc-you {
    display: none;
  }
  .axc-youb {
    display: block;
  }
}
@container axcol (max-width: 560px) {
  .axc:not(.is-held) .axc-sell {
    display: none;
  }
  .axc-box {
    width: 154px;
  }
  .axp.qb-ultra:not(.no-qb) .axc-box {
    width: 158px;
  }
  .axc-x {
    right: 174px;
  }
}
@container axcol (max-width: 440px) {
  .axc {
    --axg: 8px;
    padding-left: 10px;
  }
  .axc-l,
  .axc-av {
    width: 56px;
  }
  .axc-av {
    height: 56px;
  }
  .axc-tk {
    font-size: 14px;
  }
  .axc-nm {
    font-size: 13px;
  }
  .axc-pct,
  .axc-sellbtn {
    display: none;
  }
  .axc-pnl > b {
    font-size: 13px;
  }
  .axc.pnl-big .axc-pnl > b {
    font-size: 14px;
  }
  .axc.pnl-insane .axc-pnl > b {
    font-size: 15px;
  }
  .axc-box {
    width: 142px;
    padding: 4px 6px 4px 4px;
  }
  .axp.qb-ultra:not(.no-qb) .axc-box {
    width: 150px;
  }
  .axc-v {
    font-size: 12.5px;
  }
  .axc-mc {
    font-size: 14.5px;
  }
  .axc-b2 > .lbl.tx,
  .axc-tx,
  .axc-txbar {
    display: none;
  }
  .axc-r2 {
    column-gap: 6px;
  }
  .axp.qb-large .axc-qb {
    height: 28px;
    padding: 0 10px 0 8px;
    font-size: 13px;
  }
  .axp.qb-mega .axc-qb {
    height: 32px;
    font-size: 13.5px;
  }
  .axp.qb-ultra:not(.no-qb) .axc-qb {
    font-size: 14px;
  }
  .axc-x {
    right: 154px;
  }
  .axc-grad {
    gap: 0;
    padding: 0 4px;
    font-size: 0;
  }
  .axc-grad > i {
    font-size: 11px;
  }
  .axc-cfg {
    gap: 3px;
  }
  .axc-cfg .ax-fee {
    padding: 0 3px;
  }
  .axc-cfg .ax-fee > i {
    display: none;
  }
}
@container axcol (max-width: 330px) {
  .axc {
    --axg: 6px;
    padding: 8px 6px 8px 8px;
  }
  .axc-ca,
  .axc-r3,
  .axc-devn,
  .axc-hide {
    display: none;
  }
  .axc-box {
    width: 92px;
    padding: 4px 5px;
  }
  .axp.qb-ultra:not(.no-qb) .axc-box {
    width: 96px;
    padding: 5px 6px;
  }
  .axp .axc .axc-qb {
    padding: 0 8px 0 6px;
  }
  .axc-qbm {
    font-size: 11.5px;
    letter-spacing: -0.01em;
  }
  .axc-qbm > i {
    display: none;
  }
  .axp.qb-ultra:not(.no-qb) .axc-qb {
    padding: 0 0 5px;
    font-size: 13px;
  }
  .axp.qb-ultra:not(.no-qb) .axc-qb > i {
    font-size: 14px;
  }
  .axc-tk {
    margin-right: 4px;
    font-size: 13.5px;
  }
  .axc-nm {
    font-size: 12.5px;
    line-height: 17px;
  }
  .axc-copy {
    height: 17px;
  }
  .axc-cfg {
    margin-right: 4px;
  }
  .axc-cfg .ax-pair,
  .axc-cfg .ax-fee {
    height: 17px;
  }
  .axc-cfg .ax-pair-l,
  .axc-cfg .ax-fee > i {
    display: none;
  }
  .axc-cfg .ax-fee {
    padding: 0 3px;
  }
  .axc-cfg .ax-fee-l {
    font-size: 9.5px;
  }
  .axc-ext > * {
    margin-left: 4px;
  }
}
@container axcol (max-width: 340px) {
  .axc-l,
  .axc-av {
    width: 44px;
  }
  .axc-av {
    height: 44px;
  }
  .axc-b1 > .lbl:first-child,
  .axc-v,
  .axc-st.kol,
  .axc-st.pro,
  .axc-pnl > small {
    display: none;
  }
  .axc-x {
    right: 106px;
  }
  .axc-cfg .ax-pair {
    gap: 2px;
    padding: 0 4px 0 3px;
    font-size: 9.5px;
  }
  .axc-cfg .ax-pair > i {
    font-size: 10px;
  }
}
@container axcol (max-width: 240px) {
  .axc {
    grid-template-areas:
      'id id id id cp'
      'nm nm nm nm nm'
      'l m sell box box';
  }
}

/* ---- 4.10 popovers (Display, Help, column filters, Vamp menu) -------------------------------------------- */
.tx-pop.ax-pop.axp-dpop {
  width: 304px;
}
.tx-pop.ax-pop.axp-hpop {
  width: 312px;
}
.tx-pop.ax-pop.axp-cmenu {
  width: 240px;
  padding: 4px;
}
.axp-damt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--text-secondary));
  font-size: 12px;
}
.axp-damt > i {
  color: rgb(var(--primary-color));
  font-size: 13px;
}
.axp-damt input {
  width: 56px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgb(var(--secondary-stroke));
  border-radius: 4px;
  outline: 0;
  background: rgb(var(--background-secondary));
  color: rgb(var(--text-primary));
  font: 600 12.5px var(--font-ax);
  text-align: right;
}
.axp-damt input:focus {
  border-color: rgb(var(--primary-color) / 0.8);
}
.ax-seg.axp-qbsize {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid rgb(var(--primary-stroke));
  background: rgb(var(--background-secondary));
}
.axp-qbsize > button {
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  color: rgb(var(--text-secondary));
  font-size: 11.5px;
  font-weight: 500;
  transition:
    color 0.12s,
    background-color 0.12s;
}
.axp-qbsize > button:hover {
  color: rgb(var(--text-primary));
}
.axp-qbsize > button.on {
  background: rgb(var(--primary-color) / 0.16);
  box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / 0.55);
  color: rgb(var(--text-primary));
}
.axp-qbs-ic {
  display: block;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--text-tertiary));
  transition:
    background-color 0.12s,
    box-shadow 0.12s;
}
.axp-qbs-ic.qbs-small {
  width: 16px;
  height: 6px;
}
.axp-qbs-ic.qbs-large {
  width: 22px;
  height: 8px;
}
.axp-qbs-ic.qbs-mega {
  width: 30px;
  height: 11px;
  border-radius: 3px;
}
.axp-qbs-ic.qbs-ultra {
  width: 30px;
  height: 18px;
  border-radius: 3px;
}
.axp-qbsize > button.on .axp-qbs-ic {
  background: rgb(var(--primary-color));
}
.axp-qbsize > button.on .axp-qbs-ic.qbs-ultra {
  box-shadow: 0 0 9px rgb(var(--primary-color) / 0.7);
}
.axp-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  color: rgb(var(--text-secondary));
  font-size: 12px;
}
.axp-legend-b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  flex: none;
}
.axp-padlg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 8px 8px;
}
.axp-padlg-i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plat) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plat) 30%, transparent);
  color: var(--plat);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.axp-padlg-i > i {
  font-size: 12px;
  line-height: 1;
}

/* ---- 4.9 reduced motion ---------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .axc.pnl-insane::after,
  .axc.pnl-insane .axc-pnl > b,
  .axc-hot,
  .axp-empty-ic::after {
    animation: none;
  }
}