/* 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; }
.ax-watch { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; margin-left: 4px; }
.ax-watch-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 4px; border-radius: 4px; flex: 0 0 auto;
  font-size: 12px; color: rgb(var(--text-secondary));
}
.ax-watch-chip:hover { background: rgb(var(--background-secondary)); }
.ax-watch-chip img { width: 16px; height: 16px; border-radius: 3px; }
.ax-watch-tk { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.ax-watch-mc { color: rgb(var(--text-primary)); font-weight: 500; }
.ax-watch-pct { color: rgb(var(--increase)); font-weight: 500; }
.ax-watch-pct.dn { color: rgb(var(--decrease)); }

@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; }

/* --------------------------------------------- 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: 18px; height: 18px; border-radius: 3px; flex: 0 0 auto; }
.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; }
.axb-l { flex: 0 1 auto; overflow: hidden; }
.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; }
.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); }
.axp-hqb {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 10px; flex: 0 0 auto; cursor: text;
  border: 1px solid rgb(var(--primary-color) / .55); border-radius: 999px; font-size: 12px; color: rgb(var(--text-primary));
}
.axp-hqb > i { color: rgb(var(--primary-color)); font-size: 13px; }
.axp-hqb-l { color: rgb(var(--text-secondary)); }
.axp-hqb input { width: 36px; 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-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; } }

.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)); }
.axp-ctitle { font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.axp-paused {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; flex: 0 0 auto;
  background: rgb(var(--primary-yellow) / .12); color: rgb(var(--primary-yellow)); font-size: 11px; font-weight: 600;
}
.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 { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; }
.axp-empty { padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(var(--text-tertiary)); font-size: 12px; text-align: center; }
.axp-empty i { font-size: 22px; }
@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; } }
@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 */
.axc {
  position: relative; 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;
  transition: background-color .1s;
}
.axc:hover { background: rgb(var(--background-secondary)); }
.axc.is-off { display: none; }
.axc.is-hid { opacity: .4; }
.axc.is-gone { opacity: .35; pointer-events: none; }
.axc.is-you { box-shadow: inset 2px 0 0 rgb(var(--primary-color)); background: rgb(var(--primary-color) / .05); }
.axc.is-you:hover { background: rgb(var(--primary-color) / .1); }
.axc.is-new { animation: axc-in .24s cubic-bezier(.2, .8, .3, 1), axc-flash 1.3s ease-out; }
@keyframes axc-in { from { transform: translateY(-10px); } to { transform: none; } }
@keyframes axc-flash { from { background-color: rgb(var(--primary-color) / .2); } to { background-color: transparent; } }

.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; }
.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; }
.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-you { flex: 0 0 auto; height: 16px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: .04em; background: rgb(var(--primary-color)); color: #0b0b0f; }
.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; align-items: flex-end; justify-content: flex-end; 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 {
  flex: 0 0 auto; 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%; }
.axc-qb {
  height: 24px; padding: 0 11px 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 2px;
  background: rgb(var(--primary-color)); color: #0b0b0f; font-size: 12px; font-weight: 600;
  transition: background-color .1s, 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)); }

/* Display options */
.axp.no-pills .axc-r4, .axp.no-r3 .axc-r3, .axp.no-sell .axc-sell { 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; }

/* 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 { width: 136px; } }
@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-sell { display: none; }
  .axc-box { width: 112px; padding: 4px 6px 4px 4px; }
  .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; }
}
@container axcol (max-width: 330px) {
  .axc { gap: 6px; padding: 8px 6px 8px 8px; }
  .axc-ca, .axc-r3, .axc-devn { display: none; }
  .axc-box { width: auto; min-width: 74px; padding: 4px 5px; }
  .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; }
}