/*
 * Token page appearance only.
 * Layout, sizing, visibility, interaction, PnL/multiplier boxes and animations
 * remain defined by the original axiom-token.css and simulator JavaScript.
 */
.axt,
.it {
  --ax-bg: #121212;
  --background-secondary: 23 23 23;
  --background-tertiary: 31 31 31;
  --primary-stroke: 36 36 36;
  --secondary-stroke: 48 48 48;
  --border-subtle: 36 36 36;
  --text-primary: 245 245 245;
  --text-secondary: 160 160 160;
  --text-tertiary: 128 128 128;
  --primary-color: 105 207 141;
  --primary-color-hover: 126 218 157;
  --increase: 70 184 125;
  --increase-hover: 105 207 141;
  --decrease: 222 87 89;
  --decrease-hover: 236 108 110;
  --on-primary: 10 10 10;
  font-family: Geist, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #f5f5f5;
  background-color: #121212;
}

.axt :is(button, input),
.it :is(button, input) {
  font-family: inherit;
}

.axt-main,
.axt-head,
.axt-tbar,
.axt-tabs,
.axt-trade,
.axt-info,
.axt-sbox {
  border-color: #242424;
}

.axt-side,
.it {
  background-color: #171717;
}

.axt :is(.axt-back, .axt-itbtn, .axt-wchip, .axt-chip, .axt-mini,
  .axt-bsrow, .axt-bs, .axt-amt, .axt-pill, .axt-go, .axt-carow),
.it :is(.it-pill, .it-gear, .it-gv, .it-gnote button, .it-clip, .it-wal) {
  border-radius: 4px;
}

.axt .axt-amt,
.axt .axt-pill,
.it .it-gv,
.it .it-pill {
  background-color: #1f1f1f;
}

.axt .axt-amt,
.axt .axt-pill,
.axt .axt-carow,
.it,
.it .it-gv {
  border-color: #303030;
}

.axt .axt-amt:focus-within {
  border-color: #69cf8d;
}

.axt .axt-amt-in::placeholder {
  color: #808080;
}

.axt .axt-tf.on,
.axt .axt-chip.on,
.axt .axt-p123 button.on,
.it .it-ptab.on,
.it .it-ib.on,
.it .it-mev button.on {
  color: #69cf8d;
  background-color: rgb(105 207 141 / .1);
}

.axt .axt-tab.on {
  background-color: #1f1f1f;
  color: #f5f5f5;
}

.axt .axt-th {
  color: #808080;
  background-color: #171717;
}

.axt .axt-tip,
.it .it-tip {
  border-color: #303030;
  background-color: rgb(31 31 31 / .96);
}