/* TX Gym: Axiom shell (nav, tracked-trades panel, bottom bar, stub view) and
   the Pulse view. Built on the Axiom tokens in base.css (rgb(var(--x)) triplets).
   Axiom look: very dark, Geist, 4px radii, tiny gray labels, teal up, pink down. */

#axiom { font-family: var(--font-ax); font-size: 13px; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; }
#axiom button { white-space: nowrap; }
.ax-flex { flex: 1 1 auto; min-width: 0; }
.ax-sol {
  display: inline-block; flex: 0 0 auto; width: 11px; height: 9px; vertical-align: -1px;
  background: 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='1' x2='1' y2='0'%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 0h20l-4 4H0zM0 8h20l4 4H4zM4 16h20l-4 4H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ax-simchip {
  display: inline-flex; align-items: 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: .06em; color: rgb(var(--text-secondary)); vertical-align: middle;
}
.ax-vsep { width: 1px; height: 14px; background: rgb(var(--secondary-stroke)); flex: 0 0 auto; }

/* icon buttons */
.ax-ibtn {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; position: relative;
  display: inline-grid; place-items: center; color: rgb(var(--text-secondary)); font-size: 16px;
  transition: background-color .12s, color .12s;
}
.ax-ibtn.sm { width: 26px; height: 26px; font-size: 15px; }
.ax-ibtn:hover { background: rgb(var(--background-tertiary)); color: rgb(var(--text-primary)); }
.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 .5s ease-out; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* quick-buy amount group: ⚡ [2] ≡⌄ | P1 P2 P3 */
.ax-qbgroup {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; flex: 0 0 auto;
  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; border: 0; outline: 0; background: transparent; padding: 0 2px;
  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; background: rgb(var(--secondary-stroke)); margin: 0 2px; }
.ax-pchips { display: inline-flex; align-items: center; 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)); }

/* wallet chip (nav + pulse header) */
.ax-wchip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; flex: 0 0 auto;
  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:hover { background: rgb(var(--background-tertiary)); }
.ax-wchip > i { font-size: 15px; color: rgb(var(--text-secondary)); }

/* ------------------------------------------------------------------ nav */
#ax-nav { border-bottom: 1px solid rgb(var(--primary-stroke)); background: var(--ax-bg); container-type: inline-size; container-name: axnav; }
.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: 0 0 auto; color: rgb(var(--text-primary)); margin-right: 8px; }
.ax-logo span:not(.ax-simchip) { font-size: 19px; font-weight: 500; letter-spacing: .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; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.ax-tab {
  height: 32px; padding: 0 11px; border-radius: 4px; border: 1px solid transparent; flex: 0 0 auto;
  font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); transition: background-color .12s, color .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: 0 0 auto; }
.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; color: rgb(var(--text-secondary)); font-size: 13px;
}
.ax-search:hover { border-color: rgb(var(--text-tertiary)); background: rgb(var(--background-secondary)); }
.ax-search > i { font-size: 15px; color: rgb(var(--text-primary)); }
.ax-search-ph { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.ax-search kbd {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(var(--secondary-stroke)); display: grid; place-items: center;
  font: 500 11px var(--font-ax); color: rgb(var(--text-primary));
}
.ax-chain {
  height: 32px; padding: 0 9px 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid rgb(var(--primary-stroke)); font-size: 13px; font-weight: 600;
}
.ax-chain:hover { background: rgb(var(--background-secondary)); }
.ax-chain i { color: rgb(var(--text-secondary)); }
.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 .12s;
}
.ax-deposit:hover { background: rgb(var(--primary-color-hover)); }
.ax-circle { width: 32px; height: 32px; border-radius: 50%; background: rgb(var(--background-tertiary)); display: grid; place-items: center; font-size: 16px; }
.ax-circle:hover { background: rgb(var(--secondary-stroke)); }
.ax-circle.on { color: rgb(var(--primary-yellow)); }
.ax-me { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.ax-me img { width: 30px; height: 30px; border-radius: 50%; }
.ax-me-badge {
  position: absolute; top: -4px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: rgb(var(--decrease)); color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
}

.ax-nav2 { height: 32px; display: flex; align-items: center; gap: 4px; padding: 0 10px; min-width: 0; }

@container axnav (max-width: 1400px) {
  .ax-search { width: 168px; }
  .ax-chain { display: none; }
  .ax-tab { padding: 0 8px; font-size: 13.5px; }
  .ax-logo { margin-right: 2px; }
}
@container axnav (max-width: 1180px) {
  .ax-search { width: 34px; padding: 0; justify-content: center; }
  .ax-search-ph, .ax-search kbd { display: none; }
  .ax-chain { display: none; }
}
@container axnav (max-width: 900px) {
  .ax-circle, .ax-me { display: none; }
  .ax-tab { padding: 0 8px; font-size: 13px; }
}

/* ------------------------------------------------------ popovers / menus */
.ax-pop { width: 280px; font-family: var(--font-ax); font-size: 13px; color: rgb(var(--text-primary)); border-radius: 6px; padding: 6px; }
.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; color: rgb(var(--text-secondary)); font-size: 12px; line-height: 1.45; }
.ax-pop-dim { color: rgb(var(--text-secondary)); font-size: 12px; }
.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; }
.ax-mrow {
  width: 100%; display: flex; align-items: center; justify-content: space-between; 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) / .6); }
.ax-mrow-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ax-mrow-l small { color: rgb(var(--text-secondary)); font-size: 11px; white-space: normal; }
.ax-mrow i { color: rgb(var(--text-secondary)); }
.ax-switch { position: relative; width: 28px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: rgb(var(--secondary-stroke)); transition: background-color .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 .15s, background-color .15s; }
.ax-switch.on { background: rgb(var(--primary-color)); }
.ax-switch.on::after { transform: translateX(12px); background: #fff; }
.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; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--text-tertiary));
}
.ax-pop-h + .ax-pop-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.ax-pop-sec i { font-size: 12px; color: rgb(var(--text-secondary)); }
.ax-mrow.static { cursor: default; }
.ax-mrow.static:hover { background: none; }
.ax-mrow.stack { flex-direction: column; align-items: stretch; gap: 7px; }

/* segmented control (Display → quick-buy size) */
.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: background-color .12s, color .12s;
}
.ax-seg button:hover { color: rgb(var(--text-primary)); }
.ax-seg button.on { background: rgb(var(--primary-color) / .16); color: rgb(var(--text-primary)); box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .55); }
/* tiny drawings of each button size */
.axp-qbs-ic { display: block; border-radius: 999px; background: rgb(var(--text-tertiary)); }
.ax-seg button.on .axp-qbs-ic { background: rgb(var(--primary-color)); }
.axp-qbs-ic.small { width: 16px; height: 6px; }
.axp-qbs-ic.large { width: 22px; height: 8px; }
.axp-qbs-ic.mega { width: 30px; height: 11px; border-radius: 3px; }
.axp-qbs-ic.ultra { width: 30px; height: 18px; border-radius: 3px; box-shadow: 0 0 8px rgb(var(--primary-color) / .0); }
.ax-seg button.on .axp-qbs-ic.ultra { box-shadow: 0 0 9px rgb(var(--primary-color) / .7); }

/* large image preview on avatar hover */
.ax-prev {
  position: fixed; left: 0; top: 0; z-index: 960; width: 238px; padding: 8px 8px 9px; border-radius: 8px; pointer-events: none;
  font-family: var(--font-ax); color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums;
  background: rgb(var(--background-secondary)); border: 1px solid rgb(var(--secondary-stroke)); box-shadow: 0 18px 44px rgb(0 0 0 / .6);
  opacity: 0; visibility: hidden; transition: opacity .1s ease-out, visibility 0s linear .1s;
}
.ax-prev.on { opacity: 1; visibility: visible; transition: opacity .1s ease-out; }
.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: flex; align-items: baseline; gap: 6px; margin-top: 8px; min-width: 0; }
.ax-prev-tk { font-size: 15px; font-weight: 600; flex: 0 0 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-prev-nm { font-size: 13px; color: rgb(var(--text-secondary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.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; }

/* --------------------------------------------- left tracked-trades panel */
#ax-trades.axtr { border-right: 1px solid rgb(var(--primary-stroke)); background: var(--ax-bg); display: flex; flex-direction: column; }
#ax-trades.axtr.open { width: 320px; }
#ax-trades.axtr.closed { width: 38px; }
.axtr.open .axtr-rail, .axtr.closed .axtr-panel { display: none; }
.axtr-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.axtr-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; }
.axtr-rail-l { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; letter-spacing: .14em; color: rgb(var(--text-tertiary)); margin-top: 6px; }
.axtr-h1 { height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 6px; flex: 0 0 auto; }
.axtr-tab { position: relative; height: 26px; padding: 0 7px; border-radius: 4px; font-size: 12.5px; font-weight: 500; color: rgb(var(--text-secondary)); display: inline-flex; align-items: center; gap: 2px; }
.axtr-tab:hover { color: rgb(var(--text-primary)); }
.axtr-tab.on { color: rgb(var(--text-primary)); background: rgb(var(--background-tertiary)); }
.axtr-dot { position: absolute; top: 3px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--decrease)); }
.axtr-h2 { height: 36px; display: flex; align-items: center; gap: 2px; padding: 0 6px; flex: 0 0 auto; }
.axtr-h2 .ax-qbgroup input { width: 26px; }
.axtr-filterrow { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px; padding: 0 8px; height: 28px; border: 1px solid rgb(var(--secondary-stroke)); border-radius: 4px; color: rgb(var(--text-secondary)); }
.axtr-filter { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.axtr-th, .axtr-row { display: grid; grid-template-columns: 22px minmax(0, .8fr) minmax(0, 1.5fr) 60px 40px; align-items: center; column-gap: 6px; padding: 0 8px; }
.axtr-th { height: 28px; flex: 0 0 auto; font-size: 11px; color: rgb(var(--text-secondary)); border-top: 1px solid rgb(var(--primary-stroke)); border-bottom: 1px solid rgb(var(--primary-stroke)); }
.axtr-th .r, .axtr-row .axtr-amt, .axtr-row .axtr-mc { text-align: right; justify-content: flex-end; }
.axtr-th i { font-size: 12px; }
.axtr-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.axtr-empty { padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgb(var(--text-tertiary)); font-size: 12px; }
.axtr-empty i { font-size: 20px; }
.axtr-row { position: relative; height: 34px; font-size: 12px; cursor: pointer; border-bottom: 1px solid rgb(var(--primary-stroke) / .45); }
.axtr-row.buy { background: rgb(var(--increase) / .035); }
.axtr-row.sell { background: rgb(var(--decrease) / .045); }
.axtr-row:hover { background: rgb(var(--background-tertiary)); }
.axtr-row.is-new { animation: axt-in .9s ease-out; }
@keyframes axt-in { from { background-color: rgb(var(--primary-color) / .16); } }
.axtr-age { font-size: 11px; color: rgb(var(--text-secondary)); 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 { font-size: 11px; flex: 0 0 auto; }
.axtr-row.buy .axtr-name { color: rgb(var(--increase)); }
.axtr-row.sell .axtr-name { color: rgb(var(--decrease)); }
.axtr-tok { display: flex; align-items: center; gap: 5px; min-width: 0; }
.axtr-tok img { width: 20px; height: 20px; border-radius: 3px; flex: 0 0 auto; object-fit: cover; background: rgb(var(--background-tertiary)); }
.axtr-tok b { font-weight: 600; flex: 0 1 auto; min-width: 2.6em; }
.axtr-tage { color: rgb(var(--increase) / .8); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.axtr-amt { display: flex; align-items: center; gap: 3px; font-weight: 500; }
.axtr-row.buy .axtr-amt { color: rgb(var(--increase)); }
.axtr-row.sell .axtr-amt { color: rgb(var(--decrease)); }
.axtr-mc { color: rgb(var(--text-secondary)); font-size: 11px; }
.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; }

/* ------------------------------------------------------------ bottom bar */
#ax-bottom.axb {
  height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px; overflow: hidden;
  border-top: 1px solid rgb(var(--primary-stroke)); background: var(--ax-bg); font-size: 12px; color: rgb(var(--text-secondary));
  container-type: inline-size; container-name: axbottom;
}
.axb-l, .axb-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* what does not fit drops whole onto a hidden second line (never "$150.00" cut to "$15") */
.axb-l { flex: 0 1 auto; overflow: hidden; height: 24px; flex-wrap: wrap; align-content: flex-start; row-gap: 12px; }
.axb-l > * { flex-shrink: 0; }
.axb-r { flex: 1 1 auto; justify-content: flex-end; }
.axb-preset {
  height: 22px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  background: rgb(var(--primary-color) / .16); color: rgb(var(--primary-color)); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.axb-preset:hover { background: rgb(var(--primary-color) / .26); }
.axb-chip {
  height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid rgb(var(--primary-stroke)); flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--text-primary)); font-size: 12px;
}
.axb-chip i { color: rgb(var(--text-secondary)); }
.axb-links { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; overflow: hidden; height: 24px; }
.axb-link { height: 22px; padding: 0 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; color: rgb(var(--text-secondary)); border: 1px solid transparent; }
.axb-link:hover { color: rgb(var(--text-primary)); }
.axb-link.on { color: rgb(var(--text-primary)); border-color: rgb(var(--primary-stroke)); background: rgb(var(--background-secondary)); }
.axb-prices { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: 4px; }
.axb-px { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.axb-px.btc { color: rgb(var(--primary-orange)); }
.axb-px.eth { color: rgb(var(--primary-light-blue) / .85); }
.axb-px.sol { color: rgb(var(--increase)); }
.axb-conn {
  height: 22px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: rgb(var(--increase) / .12); color: rgb(var(--increase)); font-weight: 600; font-size: 11px;
}
.axb-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--increase)); box-shadow: 0 0 0 3px rgb(var(--increase) / .18); }
.axb-j7 {
  height: 22px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  border: 1px solid rgb(var(--primary-color) / .6); color: rgb(var(--primary-color)); font-weight: 600; font-size: 11.5px;
}
.axb-j7:hover { background: rgb(var(--primary-color) / .14); }
.axb-j7side { color: rgb(var(--text-secondary)); font-weight: 500; }
.axb-disc { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgb(var(--text-tertiary)); font-size: 11px; }
.axb-icons { display: flex; align-items: center; flex: 0 0 auto; }
@container axbottom (max-width: 1500px) { .axb-links .axb-link:nth-child(n+4) { display: none; } }
@container axbottom (max-width: 1150px) { .axb-links { display: none; } }
@container axbottom (max-width: 860px) { .axb-px.btc, .axb-px.eth, .axb-icons { display: none; } }

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

/* ================================================================ PULSE */
.axp { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 10px 8px; min-width: 0; }
.axp-head { height: 50px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; container-type: inline-size; container-name: axphead; }
.axp-title { margin: 0 6px 0 2px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; flex: 0 0 auto; }
.axp-plats { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 999px; border: 1px solid rgb(var(--primary-stroke)); background: rgb(var(--background-secondary)); flex: 0 0 auto; }
.axp-plat { width: 26px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; color: rgb(var(--text-tertiary)); transition: color .12s, background-color .12s; }
.axp-plat:hover { color: rgb(var(--text-primary)); }
.axp-plat.on { color: var(--plat, rgb(var(--primary-color))); background: rgb(var(--background-tertiary)); }
.axp-plat.all.on { color: rgb(var(--primary-color)); }
.axp-folders { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.axp-folder {
  height: 26px; padding: 0 9px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgb(var(--secondary-stroke)); color: rgb(var(--text-secondary)); font-size: 12px; background: rgb(var(--background-secondary));
}
.axp-folder:hover { color: rgb(var(--text-primary)); }
.axp-folder.on { color: rgb(var(--primary-color)); border-color: rgb(var(--primary-color) / .7); background: rgb(var(--primary-color) / .12); }
/* the header pill: lightning, Quick Buy, [2], SOL, on/off */
.axp-hqb {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 3px 0 10px; flex: 0 0 auto;
  border: 1px solid rgb(var(--primary-color) / .55); border-radius: 999px; font-size: 12px; color: rgb(var(--text-primary));
  background: rgb(var(--primary-color) / .06); transition: border-color .15s, background-color .15s;
}
.axp-hqb > i { color: rgb(var(--primary-color)); font-size: 13px; }
.axp-hqb-l { color: rgb(var(--text-secondary)); }
.axp-hqb input { width: 38px; height: 22px; border: 0; outline: 0; background: rgb(var(--background-tertiary)); border-radius: 4px; padding: 0 5px; font: 600 12.5px var(--font-ax); text-align: center; }
.axp-hqb input:focus { box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .7); }
.axp-hqb-tog { height: 24px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; }
.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)); }
.axp-display {
  height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: rgb(var(--background-tertiary)); font-size: 13px; font-weight: 600;
}
.axp-display:hover { background: rgb(var(--secondary-stroke)); }
.axp-display i { font-size: 16px; }
.axp-wallet { height: 30px; font-size: 12.5px; }
@container axphead (max-width: 1180px) { .axp-folders, .axp-wallet { display: none; } }
@container axphead (max-width: 900px) { .axp-plats, .axp-hqb-l, .axp-head > .ax-pchips { display: none; } }
@container axphead (max-width: 640px) { .axp-display { padding: 0 8px; font-size: 0; gap: 0; } .axp-display i { font-size: 16px; } }

/* Display menu */
.ax-pop.axp-dpop { width: 304px; }
.axp-dpop .ax-seg { background: rgb(var(--background-secondary)); }
.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)); }
.axp-damt input {
  width: 56px; height: 26px; border: 1px solid rgb(var(--secondary-stroke)); outline: 0; border-radius: 4px; padding: 0 7px;
  background: rgb(var(--background-secondary)); font: 600 12.5px var(--font-ax); color: rgb(var(--text-primary)); text-align: right;
}
.axp-damt input:focus { border-color: rgb(var(--primary-color) / .8); }

.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 { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid rgb(var(--primary-stroke)); container-type: inline-size; container-name: axcol; }
.axp-col:last-child { border-right: 0; }
.axp-ch { height: 42px; flex: 0 0 auto; 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 .15s; }
.axp-ctitle { font-size: 14px; font-weight: 600; flex: 0 0 auto; }
/* paused (pointer over the column): amber pill + "+N new", amber underline on the header */
.axp-col.is-paused .axp-ch { box-shadow: inset 0 -1px 0 rgb(var(--primary-yellow) / .7); }
/* narrow columns make room for the pill by folding an empty search box to its icon */
@container axcol (max-width: 560px) {
  .axp-col.is-paused .axp-fwrap:not(:focus-within):has(.axp-fclear.hidden) { flex-basis: 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; }
}
.axp-paused {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px; flex: 0 0 auto;
  background: rgb(var(--primary-yellow) / .12); color: rgb(var(--primary-yellow)); font-size: 11px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(var(--primary-yellow) / .3); animation: axp-pin .14s ease-out;
}
.axp-paused > i { font-size: 12px; }
.axp-pn { margin-left: 3px; height: 14px; padding: 0 5px; border-radius: 999px; line-height: 14px; font-size: 10px; font-weight: 700; color: #0b0b0f; background: rgb(var(--primary-yellow)); }
.axp-pn:not(.hidden) { animation: axp-pin .18s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes axp-pin { from { transform: scale(.7); opacity: 0; } }
.axp-fwrap {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 10px; flex: 0 1 190px; min-width: 70px;
  border: 1px solid rgb(var(--secondary-stroke)); border-radius: 999px; color: rgb(var(--text-tertiary)); font-size: 12px;
}
.axp-fwrap:focus-within { border-color: rgb(var(--primary-color) / .7); }
.axp-fwrap > i { font-size: 12px; }
.axp-filter { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; color: rgb(var(--text-primary)); }
.axp-filter::placeholder { color: rgb(var(--text-secondary)); }
.axp-fclear { color: rgb(var(--text-secondary)); font-size: 13px; display: grid; }
.axp-fclear:hover { color: rgb(var(--text-primary)); }
.axp-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; }
.axp-list { position: relative; isolation: isolate; } /* sliding cards (z-index -1) stay above the column background */

/* empty column + the dashed "what lands here" card under the last coin of a sparse column */
.axp-empty { padding: 56px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgb(var(--text-tertiary)); font-size: 12.5px; text-align: center; }
.axp-empty-ic {
  position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  color: rgb(var(--text-secondary)); background: rgb(var(--background-secondary)); border: 1px solid rgb(var(--primary-stroke));
}
.axp-empty-ic::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgb(var(--primary-color) / .5); animation: axp-ping 2.2s ease-out infinite; }
@keyframes axp-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.axp-tail {
  display: flex; align-items: center; gap: 12px; margin: 12px 12px 16px; padding: 14px 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: 0 0 auto; border-radius: 8px; display: grid; place-items: center; font-size: 18px; color: rgb(var(--text-secondary)); background: rgb(var(--background-secondary)); }
.axp-tail-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.axp-tail-t b { color: rgb(var(--text-secondary)); font-size: 12.5px; font-weight: 600; }
.axp-col[data-col="final"] .axp-tail-ic { color: rgb(var(--primary-yellow)); background: rgb(var(--primary-yellow) / .08); }
.axp-col[data-col="migrated"] .axp-tail-ic { color: rgb(var(--increase)); background: rgb(var(--increase) / .08); }

@container axcol (max-width: 470px) { .axp-cqb .ax-qbsol, .axp-cqb .ax-qbsep, .axp-cqb .ax-pchips { display: none; } .axp-cqb { padding-right: 6px; } }
@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-basis: 30px; min-width: 30px; padding: 0 8px; } .axp-fwrap:focus-within { flex-basis: 120px; } .axp-filter::placeholder { color: transparent; } .axp-ch .ax-ibtn { display: none; } }

/* ---------------------------------------------------------------- card
   Cards are opaque (--ax-bg) and isolated: tints are background-image layers, the
   insert flash is a ::before under the content, so cards sliding underneath a new
   one never show through. */
.axc {
  position: relative; isolation: isolate; display: flex; align-items: stretch; gap: 10px; padding: 10px 8px 10px 12px;
  border-bottom: 1px solid rgb(var(--primary-stroke) / .8); cursor: pointer; user-select: none; -webkit-user-select: none;
  background-color: var(--ax-bg); transition: background-color .1s;
}
.axc:hover { background-color: rgb(var(--background-secondary)); }
.axc.is-off { display: none; }
.axc.is-hid { opacity: .4; }
.axc.is-new { z-index: 1; }
.axc.is-new::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--primary-color) / .30), rgb(var(--primary-color) / .10) 55%, rgb(var(--primary-color) / .05));
  box-shadow: inset 2px 0 0 rgb(var(--primary-color));
  animation: axc-flash 1.5s cubic-bezier(.3, 0, .6, 1) forwards;
}
@keyframes axc-flash { 0%, 18% { opacity: 1; } 100% { opacity: 0; } }
/* the token left the market while its column was paused */
.axc.is-dead { opacity: .42; filter: grayscale(1); }
.axc.is-dead .axc-qb { background: rgb(var(--secondary-stroke)); color: rgb(var(--text-secondary)); box-shadow: none; }

/* your own deploy */
.axc.is-you { box-shadow: inset 2px 0 0 rgb(var(--primary-color)); background-image: linear-gradient(90deg, rgb(var(--primary-color) / .10), rgb(var(--primary-color) / .025) 45%, transparent 75%); }
.axc.is-you .axc-av { box-shadow: 0 0 0 1px rgb(var(--primary-color) / .5), 0 0 14px rgb(var(--primary-color) / .35); }
.axc-you {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 5px 0 4px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; background: rgb(var(--primary-color)); color: #fff;
}
.axc-you i { font-size: 10px; }

/* a coin you hold: PnL on the card, green glow while it pumps */
.axc.is-held .axc-box { box-shadow: inset 0 0 0 1px rgb(var(--increase) / .28); }
.axc.pnl-up { box-shadow: inset 2px 0 0 rgb(var(--increase)); background-image: linear-gradient(90deg, rgb(var(--increase) / .07), rgb(var(--increase) / .015) 40%, transparent 70%); }
.axc.pnl-big { box-shadow: inset 2px 0 0 rgb(var(--increase)); background-image: linear-gradient(90deg, rgb(var(--increase) / .13), rgb(var(--increase) / .035) 50%, transparent 85%); }
.axc.pnl-insane { box-shadow: inset 3px 0 0 rgb(var(--increase)); background-image: linear-gradient(90deg, rgb(var(--increase) / .18), rgb(var(--primary-yellow) / .05) 55%, rgb(var(--increase) / .04)); }
.axc.pnl-dn { box-shadow: inset 2px 0 0 rgb(var(--decrease) / .7); }
.axc.pnl-up .axc-av, .axc.pnl-big .axc-av, .axc.pnl-insane .axc-av { box-shadow: 0 0 0 1px rgb(var(--increase) / .6), 0 0 12px rgb(var(--increase) / .25); transition: box-shadow .35s; }
.axc.pnl-big .axc-av { box-shadow: 0 0 0 1px rgb(var(--increase) / .8), 0 0 18px rgb(var(--increase) / .4); }
.axc.pnl-insane .axc-av { box-shadow: 0 0 0 1px rgb(var(--increase)), 0 0 24px rgb(var(--increase) / .55); }
.axc.is-held.tick-up .axc-av { box-shadow: 0 0 0 2px rgb(var(--increase)), 0 0 26px rgb(var(--increase) / .7); transition: none; }
.axc.is-held.tick-dn .axc-av { box-shadow: 0 0 0 1px rgb(var(--decrease) / .8), 0 0 14px rgb(var(--decrease) / .35); transition: none; }
.axc.pnl-insane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; padding: 1px;
  background: linear-gradient(90deg, rgb(var(--increase)), rgb(var(--primary-yellow)), rgb(var(--increase)) 50%, rgb(var(--primary-yellow)), rgb(var(--increase)));
  background-size: 200% 100%; animation: axc-shine 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes axc-shine { to { background-position: -200% 0; } }
.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 { font-size: 14px; font-weight: 700; color: rgb(var(--increase)); letter-spacing: -.01em; }
.axc-pnl small { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: rgb(var(--increase) / .8); }
.axc.pnl-dn .axc-pnl b, .axc.pnl-dn .axc-pnl small { color: rgb(var(--decrease)); }
.axc.pnl-big .axc-pnl b { font-size: 16px; text-shadow: 0 0 14px rgb(var(--increase) / .6); }
.axc.pnl-insane .axc-pnl b {
  font-size: 18px; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, rgb(var(--increase)), rgb(var(--primary-yellow)) 50%, rgb(var(--increase))); background-size: 200% 100%;
  animation: axc-shine 1.6s linear infinite; filter: drop-shadow(0 0 8px rgb(var(--increase) / .5));
}
/* 2x 3x 5x 10x ... pops once per coin */
.axc-x {
  position: absolute; right: 178px; top: 50%; z-index: 3; pointer-events: none;
  font: 800 22px/1 var(--font-ax); letter-spacing: -.02em; color: rgb(var(--primary-yellow));
  text-shadow: 0 0 16px rgb(var(--primary-yellow) / .7), 0 2px 0 rgb(0 0 0 / .5);
  animation: axc-x 1.25s cubic-bezier(.2, .9, .3, 1) forwards;
}
.axc-x.big { font-size: 32px; color: rgb(var(--increase)); text-shadow: 0 0 22px rgb(var(--increase) / .8), 0 2px 0 rgb(0 0 0 / .5); }
@keyframes axc-x {
  0% { transform: translateY(-30%) scale(.4); opacity: 0; }
  18% { transform: translateY(-50%) scale(1.25); opacity: 1; }
  32% { transform: translateY(-55%) scale(1); opacity: 1; }
  100% { transform: translateY(-140%) scale(1); opacity: 0; }
}
.axc.x-burst { animation: axc-burst .9s ease-out; }
@keyframes axc-burst { from { background-color: rgb(var(--increase) / .2); } }

/* a coin on its moonshot run */
.axc-hot { display: none; font-size: 12px; margin-right: 2px; color: rgb(var(--primary-orange)); }
.axc.is-moon .axc-hot { display: inline-block; animation: axc-hot .7s ease-in-out infinite alternate; }
@keyframes axc-hot { from { transform: scale(.85) translateY(1px); opacity: .75; } to { transform: scale(1.12); opacity: 1; } }

/* migrated a moment ago: gold sweep + chip */
.axc-grad { display: none; flex: 0 0 auto; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 4px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #0b0b0f; background: rgb(var(--primary-yellow)); }
.axc.is-grad .axc-grad { display: inline-flex; animation: axp-pin .25s cubic-bezier(.3, 1.6, .5, 1); }
.axc.is-grad { box-shadow: inset 2px 0 0 rgb(var(--primary-yellow)); }
.axc.is-grad::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(var(--primary-yellow) / .14) 45%, rgb(var(--primary-yellow) / .26) 50%, rgb(var(--primary-yellow) / .14) 55%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0; animation: axc-sweep 1.5s ease-out 2;
}
@keyframes axc-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.axc-l { flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.axc-av { position: relative; width: 68px; height: 68px; padding: 2px; border-radius: 4px; border: 1px solid var(--plat); background: rgb(var(--background-secondary)); }
.axc-av img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; background: rgb(var(--background-tertiary)); }
.axc-plat {
  position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9.5px; color: var(--plat); background: var(--ax-bg); border: 1px solid var(--plat);
}
.axc-devn {
  position: absolute; top: -7px; right: -7px; height: 14px; padding: 0 4px; border-radius: 7px;
  font-size: 9px; font-weight: 600; line-height: 12px; color: rgb(var(--text-secondary)); background: var(--ax-bg); border: 1px solid rgb(var(--secondary-stroke));
}
.axc-bond { width: 100%; height: 2px; border-radius: 1px; overflow: hidden; background: rgb(var(--secondary-stroke) / .7); margin-top: 3px; }
.axc-bond i { display: block; height: 100%; background: var(--plat); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.axc-ca { font-size: 10.5px; color: rgb(var(--text-secondary)); white-space: nowrap; letter-spacing: -.01em; }

.axc-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 3px; }
.axc-r1 { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; overflow: hidden; }
.axc-hide {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 4px; display: grid; place-items: center; font-size: 14px;
  color: rgb(var(--decrease)); background: rgb(var(--decrease) / .14); border: 1px solid rgb(var(--decrease) / .35);
}
.axc-hide:hover { background: rgb(var(--decrease) / .28); }
.axc.is-hid .axc-hide { color: rgb(var(--increase)); background: rgb(var(--increase) / .12); border-color: rgb(var(--increase) / .35); }
.axc-tk { font-size: 15px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.axc-nm { font-size: 14px; color: rgb(var(--text-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.axc-copy { color: rgb(var(--text-secondary)); font-size: 12.5px; flex: 0 0 auto; display: grid; }
.axc-copy:hover { color: rgb(var(--text-primary)); }
.axc-copy.done { color: rgb(var(--increase)); }
.axc-pct {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px 0 4px; border-radius: 999px;
  font-size: 11px; color: rgb(var(--primary-yellow)); background: rgb(var(--primary-yellow) / .08);
}
.axc-pct i { font-size: 10px; opacity: .8; }
.axc-r2 { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; align-content: flex-start; height: 20px; white-space: nowrap; overflow: hidden; font-size: 12px; }
.axc-age { font-size: 13.5px; font-weight: 600; color: rgb(var(--increase) / .72); flex: 0 0 auto; }
.axc-age.fresh { color: rgb(var(--increase)); }
.axc-socials { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.axc-so { font-size: 14px; color: rgb(var(--text-secondary)); display: grid; }
.axc-so:hover { color: rgb(var(--text-primary)); }
.axc-st { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; color: rgb(var(--text-primary)); font-size: 12px; font-weight: 500; }
.axc-st i { color: rgb(var(--text-secondary)); font-size: 13px; }
.axc-st.kol i { color: rgb(var(--primary-orange)); }
.axc-r3 { display: flex; align-items: center; gap: 8px; height: 15px; overflow: hidden; white-space: nowrap; font-size: 11px; color: rgb(var(--text-secondary)); }
.axc-r3 .axc-st { font-size: 11px; color: rgb(var(--text-secondary)); }
.axc-r3 .axc-st i { font-size: 12px; }
.axc-handle { color: rgb(var(--primary-light-blue)); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.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; column-gap: 4px; row-gap: 4px; align-content: flex-start; height: 20px; overflow: hidden; }
.axc-pill {
  flex: 0 0 auto; height: 19px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; border: 1px solid rgb(var(--secondary-stroke) / .9); background: rgb(var(--background-secondary) / .6);
}
.axc-pill i { font-size: 11px; }
.axc-pill.good { color: rgb(var(--increase)); }
.axc-pill.bad { color: rgb(var(--decrease)); }
.axc-paid {
  flex: 0 0 auto; height: 19px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: rgb(var(--increase)); background: rgb(var(--increase) / .12);
}

.axc-sell { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 5px; padding-bottom: 2px; }
.axc-sellbtn { height: 22px; padding: 0 8px; border-radius: 4px; font-size: 11px; color: rgb(var(--text-tertiary)); border: 1px solid transparent; }
.axc-sellbtn:hover { color: rgb(var(--text-secondary)); border-color: rgb(var(--primary-stroke)); }
.axc.is-held .axc-sellbtn { color: rgb(var(--decrease)); border-color: rgb(var(--decrease) / .45); background: rgb(var(--decrease) / .08); font-weight: 600; }
.axc.is-held .axc-sellbtn:hover { background: rgb(var(--decrease) / .18); }

.axc-box {
  position: relative; flex: 0 0 auto; min-width: 152px; 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) / .75);
}
.axc:hover .axc-box { background: rgb(var(--background-tertiary)); }
.axc-box .lbl { font-size: 11px; color: rgb(var(--text-secondary)); }
.axc-b1 { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.axc-b1 .lbl + .axc-mc, .axc-v + .lbl { margin-left: 2px; }
.axc-v { font-size: 13.5px; font-weight: 600; }
.axc-mc { font-size: 16px; font-weight: 600; padding: 0 3px; margin-right: -3px; border-radius: 3px; transition: color .3s, background-color .3s; }
.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) / .1); transition: none; }
.axc-mc.dn { color: rgb(var(--decrease)); background: rgb(var(--decrease) / .1); transition: none; }
.axc-b2 { display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 12px; font-weight: 500; }
.axc-b2 .lbl.tx { margin-left: 5px; }
.axc-txbar { width: 22px; height: 3px; border-radius: 2px; overflow: hidden; background: rgb(var(--decrease)); margin-left: 3px; }
.axc-txbar i { display: block; height: 100%; background: rgb(var(--increase)); transform-origin: 0 50%; }

/* quick buy: Small (default) / Large / Mega / Ultra (Display menu) */
.axc-qb {
  height: 24px; padding: 0 11px 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  background: rgb(var(--primary-color)); color: #fff; font-size: 12px; font-weight: 600;
  transition: background-color .1s, box-shadow .12s, transform .06s;
}
.axc-qb i { font-size: 12px; }
.axc-qb:hover { background: rgb(var(--primary-color-hover)); }
.axc-qb:active { transform: scale(.94); }
.axc.is-buying .axc-qb { background: rgb(var(--increase)); color: #0b0b0f; }
.axp.no-qb .axc-qb { display: none; }
.axp.qb-large .axc-qb { height: 30px; padding: 0 14px 0 11px; font-size: 13.5px; gap: 3px; }
.axp.qb-large .axc-qb i { font-size: 14px; }
.axp.qb-mega .axc-qb {
  align-self: stretch; height: 36px; border-radius: 6px; font-size: 15px; font-weight: 700; gap: 4px;
  background: linear-gradient(180deg, rgb(var(--primary-color-hover)), rgb(var(--primary-color))); box-shadow: 0 3px 12px rgb(var(--primary-color) / .28);
}
.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 4px 18px rgb(var(--primary-color) / .5); }
.axp.qb-mega .axc.is-buying .axc-qb { background: rgb(var(--increase)); }
/* Ultra: the whole right block is the button; stats stay readable on top of it */
.axp.qb-ultra:not(.no-qb) .axc-box {
  min-width: 168px; padding: 6px 9px 6px 8px; border-radius: 6px; justify-content: flex-start; gap: 3px;
  background: linear-gradient(170deg, rgb(var(--primary-color) / .12) 10%, rgb(var(--primary-color) / .42));
  box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .6), 0 0 14px rgb(var(--primary-color) / .16);
}
.axp.qb-ultra:not(.no-qb) .axc:hover .axc-box { background: linear-gradient(170deg, rgb(var(--primary-color) / .16) 10%, rgb(var(--primary-color) / .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; padding: 0 0 7px; border-radius: 6px; align-items: flex-end; gap: 4px;
  background: transparent; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.axp.qb-ultra:not(.no-qb) .axc-qb i { font-size: 17px; color: rgb(var(--primary-yellow)); }
.axp.qb-ultra:not(.no-qb) .axc-qb:hover { background: rgb(var(--primary-color) / .26); box-shadow: inset 0 0 0 1px rgb(var(--primary-color-hover)), 0 0 22px rgb(var(--primary-color) / .5); }
.axp.qb-ultra:not(.no-qb) .axc-qb:active { transform: none; background: rgb(var(--primary-color) / .4); }
.axp.qb-ultra:not(.no-qb) .axc.is-buying .axc-qb { background: rgb(var(--increase) / .35); color: #fff; }
.axp.qb-ultra:not(.no-qb) .axc.is-held .axc-box { box-shadow: inset 0 0 0 1px rgb(var(--increase) / .6); }

/* Display options */
.axp.no-pills .axc-r4, .axp.no-r3 .axc-r3, .axp.no-sell .axc-sellbtn { display: none; }
.axp.compact .axc { padding-top: 7px; padding-bottom: 7px; }
.axp.compact .axc-l, .axp.compact .axc-av { width: 54px; }
.axp.compact .axc-av { height: 54px; }
.axp.compact .axc-ca { display: none; }
.axp.compact.qb-mega .axc-qb { height: 30px; font-size: 14px; }

/* narrow columns (1280-wide screens, J7 open, trades panel open) */
@container axcol (max-width: 560px) {
  .axc-sell { flex: 0 0 auto; } .axc:not(.is-held) .axc-sell { display: none; }
  .axc-box { min-width: 136px; } .axp.qb-ultra:not(.no-qb) .axc-box { min-width: 146px; }
  .axc-x { right: 150px; }
}
@container axcol (max-width: 440px) {
  .axc { gap: 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 { min-width: 112px; padding: 4px 6px 4px 4px; } .axp.qb-ultra:not(.no-qb) .axc-box { min-width: 120px; }
  .axc-v { font-size: 12.5px; } .axc-mc { font-size: 14.5px; }
  .axc-b2 .lbl.tx, .axc-tx, .axc-txbar { display: none; }
  .axc-r2 { 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: 124px; }
  .axc-grad { font-size: 0; gap: 0; padding: 0 4px; } .axc-grad i { font-size: 11px; }
}
@container axcol (max-width: 330px) {
  .axc { gap: 6px; padding: 8px 6px 8px 8px; }
  .axc-ca, .axc-r3, .axc-devn { display: none; }
  .axc-box { min-width: 74px; padding: 4px 5px; } .axp.qb-ultra:not(.no-qb) .axc-box { min-width: 96px; padding: 5px 6px; } .axp.qb-ultra:not(.no-qb) .axc-qb { font-size: 13px; padding-bottom: 5px; } .axp.qb-ultra:not(.no-qb) .axc-qb i { font-size: 14px; }
  .axc-tk { font-size: 13.5px; } .axc-nm { font-size: 12.5px; }
  .axc-hide { width: 18px; height: 18px; font-size: 12px; }
  .axc-qb { padding: 0 8px 0 6px; }
}
@container axcol (max-width: 340px) {
  .axc-l, .axc-av { width: 44px; } .axc-av { height: 44px; }
  .axc-b1 .lbl:first-child, .axc-v { display: none; }
  .axc-r2 .axc-st.pro, .axc-r2 .axc-st.kol { display: none; }
  .axc:not(.is-held) .axc-sell { display: none; } .axc-pnl small { display: none; } .axc-x { right: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .axc.is-new::before, .axc.pnl-insane::after, .axc.is-grad::after, .axc.is-moon .axc-hot, .axp-empty-ic::after, .axc.pnl-insane .axc-pnl b { animation: none; }
}