/*
  Temuliquid trade terminal, the core styles.
  A light shopping-app terminal. The chaos layer (temu.css) loads after this file.
*/

:root {
  --lab: #F3F5F6;
  --panel: #FFFFFF;
  --hairline: #DDE1E5;
  --ink: #000000;
  --graphite: #3B4148;
  --muted: #6B7280;
  --tape: #F7C600;
  --buy: #0B9F5B;
  --sell: #E5372B;
  /* Chaos layer only. */
  --coupon: #FF5A00;
  --hot: #FF1F3D;

  --tape-deep: #E3B500;
  --tape-soft: #FFF6CC;
  --buy-tint: rgba(11, 159, 91, 0.1);
  --sell-tint: rgba(229, 55, 43, 0.1);
  --soft: #F7F8F9;
  --radius: 12px;
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-big: 'Big Shoulders Display', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --sb-h: 36px;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: var(--sb-h);
  background: var(--lab);
  color: var(--ink);
  font: 400 14px/1.4 var(--font-ui);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.num {
  text-align: right;
}

.up {
  color: var(--buy);
}

.down {
  color: var(--sell);
}

.muted {
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tape);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* ------------------------------------------------------------------ */
/* Buttons and chips                                                   */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-primary {
  background: var(--tape);
  border-color: var(--tape);
  color: var(--ink);
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--tape-deep);
  border-color: var(--tape-deep);
}

.btn-quiet {
  background: var(--panel);
  border-color: var(--hairline);
}

.btn-quiet:hover {
  border-color: var(--graphite);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-xs {
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.icon-btn:hover {
  background: var(--soft);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--graphite);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.chip-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

.chip-btn {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
}

.chip-btn:hover {
  border-color: var(--graphite);
}

/* ------------------------------------------------------------------ */
/* Top bar                                                             */
/* ------------------------------------------------------------------ */

/* The "We just shipped" strip at the very top. gags.js fills it; empty, it
   takes no room. */
#tl-ticker {
  position: relative;
  z-index: 31;
  display: flex;
  flex: none;
  align-items: center;
  height: 24px;
  padding: 0 16px;
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

#tl-ticker:empty {
  display: none;
}

/* The header has two rows, like the real exchange's trade screen:
   row 1 (.appbar) is the app nav: brand, nav links, then the account, the
   icon buttons, the tasks slot and Press;
   row 2 (.marketbar) is the market bar: the pair, every stat on one line and,
   on wide screens, the coupon strip at its right end.
   Phones flatten both rows into one grid (see the max-width: 699px block). */
.topbar {
  position: relative;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}

.appbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
}

/* The nav takes what the right side leaves. trade.js hides the links that
   don't fit (last ones first) and shows them in the More menu instead. */
.appnav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.nav-link {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  background: var(--soft);
  color: var(--ink);
}

/* The current page: ink with a strip of tape under it. More looks the same
   while the view on screen is one of its items (aria-current="true", set by
   trade.js; the item itself carries aria-current="page"). */
.nav-link[aria-current="page"],
.nav-link[aria-current="true"] {
  color: var(--ink);
  font-weight: 700;
}

.nav-link[aria-current="page"]::after,
.nav-link[aria-current="true"]::after {
  position: absolute;
  right: 9px;
  bottom: -8px;
  left: 9px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--tape);
  content: "";
}

.nav-link[aria-expanded="true"] {
  background: var(--soft);
  color: var(--ink);
}

.nav-link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.appbar-right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.hd-icons,
.hd-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

/* Quiet round icon buttons, the same ring as the quiet buttons next to them.
   Positioned, so a dot drawn on a corner never moves anything. */
.hd-icon {
  position: relative;
  width: 32px;
  height: 32px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
}

.hd-icon:hover {
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--graphite);
}

.hd-icon svg {
  width: 16px;
  height: 16px;
}

/* Pay to mute. sound.js sets the label and data-state. */
.mute-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px 0 9px;
  background: var(--tape-soft);
  border: 1px solid #F0D96A;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mute-btn:hover {
  border-color: var(--ink);
}

.mute-ic {
  flex: none;
  width: 16px;
  height: 16px;
}

.mute-ic .mute-x {
  display: none;
}

.mute-btn[data-state="silence"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--tape);
}

.mute-btn[data-state="silence"] .mute-waves {
  display: none;
}

.mute-btn[data-state="silence"] .mute-x {
  display: inline;
}

#tl-tasks-slot {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  min-width: 0;
}

/* Hooked controls the deals layer may mark with a dot or a count. */
[data-temu="press"],
[data-temu="more"],
[data-temu="markets"],
[data-temu="indicators"],
[data-temu="dark-mode"] {
  position: relative;
}

.marketbar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 54px;
  padding: 3px 12px;
}

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}

.btn-sm .caret {
  margin-right: -2px;
}

.btn[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.menu-wrap {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--soft);
}

.menu-item:focus-visible {
  outline-offset: -2px;
}

.menu-item[aria-disabled="true"] {
  color: var(--graphite);
  cursor: default;
}

.menu-sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--hairline);
}

.menu-code {
  flex: none;
  padding: 1px 6px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

/* The More menu opens under its nav link, toward the page. It is long, so
   it scrolls inside itself on short screens. */
.appnav .menu {
  right: auto;
  left: 0;
}

.menu-more {
  min-width: 264px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-more .menu-item {
  min-height: 32px;
  padding: 5px 10px;
}

a.menu-item {
  color: inherit;
  text-decoration: none;
}

/* The products, two to a row, then "All products" across both. */
.menu-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* The view on screen, inside the open menu (products.js marks it). */
.menu-more .menu-item[aria-current="page"] {
  background: var(--tape-soft);
  font-weight: 700;
}

.menu-products .menu-all {
  grid-column: 1 / -1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.menu-navalt {
  display: flex;
  flex-direction: column;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
}

.pair-picker {
  grid-area: pair;
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
}

.pair-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--soft);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.pair-btn:hover {
  border-color: var(--graphite);
}

/* The max leverage, as a badge on the pair. */
.pair-lev {
  padding: 1px 6px;
  background: var(--tape);
  border-radius: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.caret {
  width: 12px;
  height: 12px;
}

.pair-btn[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* The market picker: search, category tabs, then the list. */
.pair-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(72vh, 600px);
  padding: 8px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

.pair-search-wrap {
  position: relative;
  flex: none;
}

.pair-search-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.pair-search {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px 0 33px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.pair-search::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.pair-search:focus-visible {
  background: var(--panel);
  border-color: var(--ink);
  outline-offset: 1px;
}

.pair-cats {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 4px;
}

.pair-cat {
  height: 28px;
  padding: 0 11px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pair-cat:hover {
  border-color: var(--graphite);
}

.pair-cat[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

.pair-cat-hot {
  color: var(--hot);
}

.pair-cat-hot[aria-selected="true"] {
  background: var(--hot);
  border-color: var(--hot);
}

/* While searching, every tab is searched, so none of them is the one. */
.pair-pop.is-searching .pair-cat[aria-selected="true"] {
  background: var(--soft);
  border-color: var(--hairline);
  color: var(--graphite);
}

.pair-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.pair-list:focus-visible {
  outline-offset: -2px;
}

.pair-opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 66px;
  align-items: baseline;
  gap: 1px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.pair-opt-desc {
  grid-column: 1 / -1;
}

.pair-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: #FFF4EC;
  border: 1.5px dashed var(--coupon);
  border-radius: 10px;
}

.pair-empty-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pair-opt:hover,
.pair-opt.is-active {
  background: var(--soft);
}

.pair-opt[aria-selected="true"] {
  background: var(--tape-soft);
}

.pair-pop:focus-within .pair-opt.is-active {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.pair-opt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.pair-opt-tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.pair-opt-price {
  font-weight: 600;
  text-align: right;
}

.pair-opt-desc {
  color: var(--muted);
  font-size: 12px;
}

.pair-opt-chg {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.stats {
  grid-area: stats;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stats::-webkit-scrollbar {
  display: none;
}

.stat {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1px;
  border-radius: 6px;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.stat-value {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.stat-clock {
  margin-left: 4px;
  color: var(--graphite);
  font-weight: 600;
}

.mark {
  font-family: var(--font-big);
  font-size: 26px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

#tl-gift-slot {
  grid-area: gift;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.account {
  grid-area: account;
  display: flex;
  align-items: center;
  gap: 6px;
}

.balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 4px;
  border-radius: 6px;
}

.balance-value {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* The chaos layer's coupon strip lives in the market bar: at its right end
   on wide screens, on a line of its own below the stats elsewhere. */
#tl-coupons {
  grid-area: coupons;
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
}

#tl-coupons:empty {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Mobile section switch                                               */
/* ------------------------------------------------------------------ */

.seg {
  display: none;
}

.seg-btn {
  position: relative;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.seg-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #FFFFFF;
}

.seg-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sell);
}

/* ------------------------------------------------------------------ */
/* Grid and panels                                                     */
/* ------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.panel:focus {
  outline: none;
}

.panel-chart {
  grid-area: chart;
}

.panel-book {
  grid-area: book;
}

.panel-entry {
  grid-area: entry;
}

.panel-bottom {
  grid-area: bottom;
}

/* Product views. products.js fills #tl-product-view and sets
   body[data-product]. While that is anything but "trade", the view takes the
   place of the grid (main row and account panel), the market bar and, on
   phones, the section switch. */
.product-view {
  display: none;
}

body[data-product]:not([data-product="trade"]) .product-view,
body[data-product]:not([data-product="trade"]) .product-view[hidden] {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

body[data-product]:not([data-product="trade"]) .grid,
body[data-product]:not([data-product="trade"]) .seg,
body[data-product]:not([data-product="trade"]) .marketbar {
  display: none;
}

body[data-product]:not([data-product="trade"]) .appbar {
  border-bottom: 0;
}

.panel-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}

.panel-title {
  font-size: 13px;
  font-weight: 700;
}

.panel-note {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.panel-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.cols {
  display: grid;
  flex: none;
  padding: 6px 12px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.cols > span {
  white-space: nowrap;
}

/* Chart. The surface is crooked on purpose. */
.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
}

.chart-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 10px 18px -14px rgba(0, 0, 0, 0.35);
  transform: rotate(-0.7deg);
}

.chart-surface canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: pan-y;
}

/* Chart toolbar: timeframes on the left, chart type, indicators and the
   rollback replay on the right. Wraps on narrow panels. */
.chart-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

.tf {
  display: flex;
  flex: none;
  gap: 2px;
  margin-right: auto;
  padding: 2px;
  background: var(--soft);
  border-radius: 999px;
}

.tf-btn,
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--graphite);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tf-btn:hover {
  color: var(--ink);
}

.tf-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #FFFFFF;
}

.chart-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.tool-btn {
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.tool-btn:hover {
  border-color: var(--graphite);
}

.tool-btn[aria-pressed="true"] {
  background: var(--tape);
  border-color: var(--tape-deep);
  color: var(--ink);
}

.tool-btn[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.tool-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
}

.tool-btn svg {
  flex: none;
  width: 13px;
  height: 13px;
}

/* The replay label shows where the chart is wide enough; elsewhere the
   button keeps its icon, its accessible name and its tooltip. */
.tool-replay .tool-label {
  display: none;
}

@media (min-width: 1400px) {
  .tool-replay .tool-label {
    display: inline;
  }
}

.pos-share {
  margin-left: 6px;
}

.pnl-big.down {
  color: var(--sell);
}

/* Menus inside a clipped panel are placed by script, fixed to the viewport. */
.menu.menu-fixed {
  position: fixed;
  top: 0;
  right: auto;
  left: 0;
  z-index: 65;
  min-width: 260px;
}

.menu-item[role="menuitemcheckbox"]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #C3C9CF;
  border-radius: 5px;
}

.menu-item[role="menuitemcheckbox"][aria-checked="true"]::after {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.2l3.9-4.4' fill='none' stroke='%23F7C600' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--ink);
}

.menu-item b {
  font-weight: 800;
}

/* Console tab */
.console {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 12px 10px;
  overflow: auto;
  background: #0E1013;
  color: #C9CED4;
  font: 500 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overscroll-behavior: contain;
}

.console:focus-visible {
  outline-offset: -3px;
  outline-color: var(--tape);
}

.con-line {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.con-time {
  flex: none;
  color: #6B7280;
}

.con-tag {
  flex: none;
  color: var(--tape);
  font-weight: 700;
}

.con-tag.is-bad {
  color: #FF6B5E;
}

.con-tag.is-ok {
  color: #3DDC97;
}

.con-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Order book and trades: two tabs of one panel on wide screens, like the
   real exchange. Phones show both, one under the other, without the tabs;
   between 700 and 1099 px both move into the bottom panel. */
.book-tabs {
  display: none;
}

.book-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-bottom: -1px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.book-tabs [role="tab"]:hover {
  color: var(--ink);
}

.book-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}

.book-tabs-note {
  margin-left: auto;
  padding-right: 4px;
}

@media (min-width: 1100px) {
  .book-tabs {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 0 6px;
    border-bottom: 1px solid var(--hairline);
  }

  .panel-book > .book > .panel-head,
  .panel-book > .trades > .panel-head {
    display: none;
  }

  .panel-book[data-pane="book"] > .trades,
  .panel-book[data-pane="trades"] > .book {
    display: none;
  }

  .panel-book > .trades {
    border-top: 0;
  }
}

/* Order book */
.book {
  display: flex;
  flex: 3 1 0;
  flex-direction: column;
  min-height: 0;
}

/* Price gets the room; the Owner column only ever says "us". */
.book-cols,
.lvl {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(36px, 0.5fr);
  column-gap: 8px;
}

/* A second header for the asks column, used only when the book sits in the
   bottom tab with bids and asks side by side. */
.book-cols-asks {
  display: none;
}

.book-side {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.book-asks {
  justify-content: flex-end;
}

.lvl {
  position: relative;
  display: grid;
  flex: none;
  align-items: center;
  height: 20px;
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
}

.lvl:hover {
  background: var(--soft);
}

.lvl > span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvl .p {
  font-weight: 600;
}

.book-asks .p {
  color: var(--sell);
}

.book-bids .p {
  color: var(--buy);
}

.lvl .o {
  color: var(--muted);
}

.lvl .bar {
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  z-index: 0;
  border-radius: 3px 0 0 3px;
}

.book-asks .bar {
  background: var(--sell-tint);
}

.book-bids .bar {
  background: var(--buy-tint);
}

.book-spread {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 12px;
  background: var(--soft);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
}

.spread-mid {
  font-size: 15px;
  font-weight: 700;
}

/* The rug under the order book: cheap stripes, a fringe at both ends and a
   price-tag label. When it is pulled the levels leave with it for 2 s. */
.book {
  position: relative;
}

.rug {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 5px 20px 6px;
  padding: 0;
  background: repeating-linear-gradient(90deg, #E5372B 0 9px, #FF5A00 9px 18px, #F7C600 18px 27px);
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.rug::before,
.rug::after {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 9px;
  background: repeating-linear-gradient(180deg, #B07A1E 0 2px, transparent 2px 4px);
  content: "";
}

.rug::before {
  left: -9px;
}

.rug::after {
  right: -9px;
}

.rug:hover {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rug[aria-disabled="true"] {
  cursor: default;
}

.rug-label {
  padding: 0 8px;
  background: #FFFFFF;
  border: 1.5px dashed var(--ink);
  border-radius: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 13px;
}

.book.is-pulled > .book-cols,
.book.is-pulled > .book-side,
.book.is-pulled > .book-spread,
.book.is-pulled > .rug {
  transform: translateX(120%);
}

.rug-note {
  position: absolute;
  top: 54%;
  right: 12px;
  left: 12px;
  z-index: 3;
  margin: 0;
  padding: 10px 12px 11px;
  background: var(--tape);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transform: translateY(-50%) rotate(-2deg);
}

.rug-note b {
  display: block;
  margin-bottom: 3px;
  color: var(--sell);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* In the bottom tab the book has no room for a rug. */
.tabpanel-book .rug,
.tabpanel-book .rug-note {
  display: none;
}

/* Recent trades */
.trades {
  display: flex;
  flex: 2 1 0;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--hairline);
}

.trade-cols,
.tr {
  grid-template-columns: 62px 30px minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6px;
}

.trade-list {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.trade-empty {
  flex: none;
  margin: 0;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.tr {
  display: grid;
  align-items: center;
  height: 20px;
  padding: 0 12px;
  font-size: 11px;
}

.tr > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr .p {
  font-weight: 600;
}

.tr .buy {
  color: var(--buy);
}

.tr .sell {
  color: var(--sell);
}

.tr .who {
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* Order entry. The form scrolls inside the panel; the footer with Place order
   never scrolls, so the button stays on screen at any laptop height. */
.entry {
  /* Positioned, so the screen-reader-only text in the deals list scrolls and
     clips with the form instead of stretching the page below the fold. */
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 10px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.entry-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 10px;
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -12px 16px -14px rgba(0, 0, 0, 0.3);
}

.side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: var(--soft);
  border-radius: 12px;
}

.side {
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--graphite);
  font-weight: 700;
}

.side-long[aria-checked="true"] {
  background: var(--buy);
  color: #FFFFFF;
}

.side-short[aria-checked="true"] {
  background: var(--sell);
  color: #FFFFFF;
}

/* A pair that refuses longs (MOM, EX): the Long buttons say so. */
.side.is-unavailable,
.qt-btn.is-unavailable {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  cursor: not-allowed;
}

.side.is-unavailable {
  color: var(--muted);
}

.qt-long.is-unavailable,
.qt-long.is-unavailable:hover {
  background: #A3AAB1;
  box-shadow: none;
}

.type-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
}

.type-toggle {
  display: flex;
  gap: 18px;
}

.type-toggle button {
  margin-bottom: -1px;
  padding: 4px 0 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 600;
}

.type-toggle button[aria-checked="true"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* A tab you can see and cannot have. */
.type-pro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 2px 4px 2px 8px;
  border: 1px dashed #C3C9CF;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.type-pro:hover {
  border-color: var(--graphite);
  color: var(--graphite);
}

.pro-tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--tape);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.upsell-note {
  padding: 6px 9px;
  background: var(--tape-soft);
  border: 1px solid #F0D96A;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 600;
}

.field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

.field input:hover {
  border-color: #C3C9CF;
}

.field input:focus-visible {
  border-color: var(--ink);
  outline-offset: 1px;
}

.field input[aria-invalid="true"] {
  border-color: var(--sell);
}

.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lev {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.lev-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.lev-head label {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 600;
}

.lev-value {
  font-family: var(--font-big);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.lev input[type="range"],
input.range {
  --fill: 100%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

input.range {
  --fill: 50%;
}

.lev input[type="range"]::-webkit-slider-runnable-track,
input.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) 0 var(--fill), var(--hairline) var(--fill) 100%);
}

.lev input[type="range"]::-webkit-slider-thumb,
input.range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tape);
  -webkit-appearance: none;
  appearance: none;
}

.lev input[type="range"]::-moz-range-track,
input.range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--hairline);
}

.lev input[type="range"]::-moz-range-progress,
input.range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
}

.lev input[type="range"]::-moz-range-thumb,
input.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tape);
}

.lev-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.lev-note {
  color: var(--sell);
  font-size: 12px;
  font-weight: 700;
}

/* Pro upsell under the slider. The slider stops at 1001x either way. */
.lev-pro {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 32px;
  margin-top: 2px;
  padding: 4px 5px 4px 9px;
  background: var(--soft);
  border: 1px dashed #C3C9CF;
  border-radius: 10px;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.lev-pro:hover {
  border-color: var(--graphite);
}

.lev-pro .lock {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--graphite);
}

.lev-pro-text {
  flex: 1 1 auto;
  min-width: 0;
}

.lev-pro-text b {
  color: var(--ink);
  font-weight: 800;
}

.lev-pro-price {
  flex: none;
  padding: 3px 8px;
  background: var(--tape);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.lev-pro.is-pro .lev-pro-price {
  background: var(--ink);
  color: var(--tape);
}

.summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.summary > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-radius: 4px;
}

.summary dt {
  color: var(--muted);
}

.summary dd {
  font-weight: 600;
  text-align: right;
}

/* Perks: one row of green chips instead of a stacked list. */
.perks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #08663B;
  font-size: 11.5px;
  font-weight: 600;
}

.perks li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  background: #EFFAF4;
  border-radius: 999px;
  white-space: nowrap;
}

.perks li::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--buy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.1 7l3.7-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* Discount-app price tags: the old price struck through, the new one loud. */
.deals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  background: #FFF4EC;
  border: 1.5px dashed var(--coupon);
  border-radius: 10px;
  font-size: 12px;
}

.deals li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-radius: 4px;
}

.deal-k {
  color: var(--graphite);
  white-space: nowrap;
}

.deal-v {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px 6px;
  text-align: right;
}

.deal-v s {
  color: var(--muted);
  font-size: 11px;
}

.deal-v b {
  color: #D44A00;
  font-weight: 800;
}

/* Fees: 0% or 0%. */
.deals .deal-fees {
  align-items: center;
}

.deal-fees .deal-v {
  align-items: center;
}

.fee-switch {
  display: inline-flex;
  flex: none;
  padding: 2px;
  background: #FFFFFF;
  border: 1.5px solid var(--coupon);
  border-radius: 999px;
}

.fee-opt {
  min-width: 32px;
  height: 20px;
  padding: 0 7px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #B83F00;
  font-size: 11.5px;
  font-weight: 800;
}

.fee-opt[aria-checked="true"] {
  background: var(--coupon);
  color: #FFFFFF;
}

.deal-save {
  padding: 0 6px;
  background: var(--coupon);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

/* Community Vault card, last thing in the order form. */
.vault {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px 11px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.vault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vault-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.badge-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--buy);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-ok::before {
  content: "";
  width: 9px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2 4 7.2l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vault-yield {
  font-size: 13px;
  font-weight: 600;
}

.vault-yield b {
  color: var(--buy);
  font-weight: 800;
}

.vault-note {
  color: var(--graphite);
  font-size: 11.5px;
  line-height: 1.4;
}

.link-btn {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-btn:hover {
  color: var(--graphite);
}

.vote-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--graphite);
  font-size: 11.5px;
  line-height: 1.35;
}

.vote-list b {
  color: var(--ink);
}

.entry-error {
  color: var(--sell);
  font-size: 12px;
  font-weight: 600;
}

.btn-place {
  flex: none;
  width: 100%;
  height: 50px;
  border-radius: 14px;
  font-size: 16px;
}

.fineprint {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

/* Positions and liquidations */
.tabs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: none;
}

.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin-bottom: -1px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* temu.js pins its 99+ badge on this tab's top-right corner: room for it
   after the label, so it no longer sits on the "s". */
.tabs #tab-points {
  padding-right: 26px;
}

/* The Order book tab exists only between 700 and 1099 px. */
.tabs .tab-book {
  display: none;
}

.count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11px;
}

.tabpanel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sys-msg {
  flex: none;
  margin: 8px 12px 0;
  padding: 8px 10px;
  background: var(--tape-soft);
  border: 1px solid #F0D96A;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.pos-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.pos-table th.num {
  text-align: right;
}

.pos-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 500;
  vertical-align: top;
  white-space: nowrap;
}

.pos-table th:first-child,
.pos-table td:first-child {
  padding-left: 12px;
}

.pos-table th:last-child,
.pos-table td:last-child {
  padding-right: 12px;
  text-align: right;
}

.pos-table td.c-act {
  vertical-align: middle;
}

/* Narrow panels (1100-1439 px, tablets, phones) scroll the table sideways.
   The Close column stays pinned so closing never needs a horizontal scroll. */
.pos-table th.c-act,
.pos-table td.c-act {
  position: sticky;
  right: 0;
  background: var(--panel);
}

.pos-table th.c-act {
  z-index: 2;
}

@media (max-width: 1439px) {
  .pos-table th.c-act,
  .pos-table td.c-act {
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.22);
  }
}

.pnl-main {
  display: block;
}

.pnl-sub {
  display: block;
  margin-top: 1px;
  color: var(--graphite);
  font-size: 10.5px;
  font-weight: 600;
  white-space: normal;
}

.pnl-sub.is-hot {
  display: inline-block;
  white-space: nowrap;
  padding: 0 6px;
  background: var(--tape-soft);
  border-radius: 999px;
  color: var(--ink);
}

.pnl-sub.is-liq {
  color: var(--sell);
}

.pos-row.is-done td {
  color: var(--muted);
}

.pos-row.is-done td.up,
.pos-row.is-done td.down {
  opacity: 0.75;
}

.pos-row.is-maint td:not(.c-pnl):not(.c-act) {
  text-decoration: line-through;
  color: var(--muted);
}

.pos-status {
  font-size: 11px;
  font-weight: 600;
}

.pos-status.is-adl {
  color: var(--graphite);
}

.pos-status.is-liq {
  color: var(--sell);
}

.empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
}

/* Points: the rewards tally, in the account tabs rather than the header. */
.pts-home {
  padding: 14px 12px;
}

.pts-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.pts-k {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pts-v {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.pts-note {
  margin: 6px 0 0;
  color: var(--graphite);
  font-size: 12.5px;
}

.liq-head {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 8px 12px;
}

.liq-today {
  border-radius: 4px;
  color: var(--graphite);
  font-size: 12px;
}

.liq-today b {
  margin-left: 6px;
  color: var(--sell);
  font-family: var(--font-big);
  font-size: 24px;
  font-weight: 800;
  vertical-align: -3px;
}

.liq-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.liq-cols,
.liq-row {
  grid-template-columns: minmax(104px, 1.2fr) minmax(48px, 0.6fr) minmax(104px, 1.3fr) minmax(54px, 0.6fr) minmax(76px, 0.8fr);
  column-gap: 10px;
  min-width: 440px;
}

.liq-cols {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}

.liq-row {
  display: grid;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-bottom: 1px solid #F0F2F4;
  font-size: 12px;
}

.liq-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liq-row .side-long {
  color: var(--buy);
  font-weight: 600;
}

.liq-row .side-short {
  color: var(--sell);
  font-weight: 600;
}

.liq-row.is-mine {
  background: var(--tape-soft);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Maintenance notice                                                  */
/* ------------------------------------------------------------------ */

.maint {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: stretch;
  width: min(700px, calc(100vw - 24px));
  overflow: hidden;
  background: var(--ink);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  transform: translateX(-50%);
}

.maint-tape {
  flex: none;
  width: 18px;
  background: repeating-linear-gradient(-45deg, var(--tape) 0 7px, var(--ink) 7px 14px);
}

.maint-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
}

.maint-title {
  font-family: var(--font-big);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.maint-sub {
  margin-top: 3px;
  color: #D5D9DE;
  font-size: 13px;
}

.maint-x {
  align-self: center;
  margin-right: 8px;
  color: #FFFFFF;
}

.maint-x:hover {
  background: rgba(255, 255, 255, 0.14);
}

.maint :focus-visible {
  outline-color: var(--tape);
}

.maint.is-rollback {
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.maint.is-rollback .maint-tape {
  background: var(--buy);
}

.maint.is-rollback .maint-sub {
  color: var(--graphite);
}

.maint.is-rollback .maint-x {
  color: var(--ink);
}

.maint.is-rollback .maint-x:hover {
  background: var(--soft);
}

.maint.is-rollback :focus-visible {
  outline-color: var(--ink);
}

.maint.is-oracle .maint-tape {
  background: repeating-linear-gradient(-45deg, var(--sell) 0 7px, var(--ink) 7px 14px);
}

.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Toast container (filled by the chaos layer)                         */
/* ------------------------------------------------------------------ */

/* Above temu.js's sticker layer (8500), so the Points tab's 99+ badge goes
   under a toast instead of on top of it; below its own pop-ups (9000 up). */
#tl-toasts {
  position: fixed;
  left: 16px;
  bottom: calc(var(--sb-h) + 12px);
  z-index: 8600;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

/* ------------------------------------------------------------------ */
/* Status bar                                                          */
/* ------------------------------------------------------------------ */

.statusbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 36px;
  padding: 0 16px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  color: var(--graphite);
  font-size: 12px;
}

/* Quick trade: always on screen, above the status line. The buttons pick a
   side and bring Place order into view; they never place anything. */
.qt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px 4px;
  padding: 6px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}

.qt-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--graphite);
  font-size: 12.5px;
  white-space: nowrap;
}

.qt-info b {
  color: var(--ink);
  font-size: 13px;
}

.qt-tag {
  padding: 2px 8px;
  background: #FFE6E3;
  border-radius: 999px;
  color: var(--sell);
  font-size: 11px;
  font-weight: 700;
}

.qt-btns {
  display: grid;
  flex: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(440px, 100%);
}

.qt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.qt-long {
  background: var(--buy);
}

.qt-short {
  background: var(--sell);
}

.qt-long:hover {
  background: #08854C;
}

.qt-short:hover {
  background: #C92C21;
}

.qt-btn[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 0 2px var(--panel), 0 0 0 4px var(--ink);
}

.qt-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.qt-price {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
  text-overflow: ellipsis;
}

/* Place order flashes once when the quick bar sends you to it. */
.btn-place.is-ready {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--ink);
}

.sb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 24px;
}

/* Wider screens wrap status items onto a second line instead of clipping
   them; phones swipe through them on one line. */
.sb-items {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  min-width: 0;
  white-space: nowrap;
  scrollbar-width: none;
}

.sb-items::-webkit-scrollbar {
  display: none;
}

.sb-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.sb-ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--buy);
}

.sb-tps {
  color: var(--ink);
  font-weight: 700;
}

#tl-calm-slot {
  display: flex;
  flex: none;
  align-items: center;
}

#tl-calm-slot:empty {
  display: none;
}

.sb-link {
  flex: none;
  font-weight: 600;
  text-underline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Dialogs                                                             */
/* ------------------------------------------------------------------ */

.dlg {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  background: var(--panel);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}

.dlg::backdrop {
  background: rgba(16, 19, 23, 0.5);
}

.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0 20px;
}

.dlg-title {
  font-size: 16px;
  font-weight: 700;
}

.dlg-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 20px 20px;
}

.dlg-lead {
  font-size: 15px;
  font-weight: 600;
}

.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.wd-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--soft);
  border-radius: 12px;
  font-size: 13px;
}

.wd-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.wd-rows dt {
  color: var(--muted);
}

.wd-rows dd {
  font-weight: 600;
  text-align: right;
}

.status-code {
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* Deposit: the address is always almost ready. */
.dep-gen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--soft);
  border-radius: 12px;
}

.dep-gen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dep-label {
  font-size: 13px;
  font-weight: 700;
}

.dep-pct {
  flex: none;
  font-family: var(--font-big);
  font-size: 34px;
  font-weight: 900;
  line-height: 0.9;
}

.dep-bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.dep-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: repeating-linear-gradient(-45deg, var(--tape) 0 8px, var(--tape-deep) 8px 16px);
  border-radius: 999px;
}

.dep-status {
  min-height: 2.7em;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* Live queue */
.q-order {
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--soft);
  border-radius: 999px;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 600;
}

.q-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2px;
}

.q-pre,
.q-post {
  font-size: 18px;
  font-weight: 600;
}

.q-num {
  display: inline-block;
  font-family: var(--font-big);
  font-size: clamp(64px, 19vw, 104px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  transform-origin: left center;
}

.q-line.is-filled .q-num {
  color: var(--buy);
}

.q-reason {
  min-height: 20px;
  color: var(--sell);
  font-size: 13px;
  font-weight: 600;
}

.q-delta {
  white-space: nowrap;
}

.q-delta.is-forward {
  color: var(--buy);
}

.q-wait {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.q-latency {
  align-self: flex-start;
  border-radius: 4px;
  color: var(--graphite);
  font-size: 13px;
}

.q-latency b {
  color: var(--ink);
}

.q-skips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 7px 8px 7px 14px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.skip:hover {
  border-color: var(--ink);
}

.skip .price {
  flex: none;
  padding: 4px 10px;
  background: var(--tape);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skip[aria-disabled="true"] {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
}

.skip[aria-disabled="true"]:hover {
  border-color: var(--hairline);
}

.skip[aria-disabled="true"] .price {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.q-feedback {
  min-height: 18px;
  color: var(--graphite);
  font-size: 12px;
}

.q-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.q-balance {
  color: var(--muted);
  font-size: 12px;
}

.q-balance b {
  color: var(--ink);
}

.q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-done-msg {
  font-size: 16px;
  font-weight: 600;
}

.q-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.q-prices > div {
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 12px;
}

.q-prices dt {
  color: var(--muted);
  font-size: 12px;
}

.q-prices dd {
  font-size: 16px;
  font-weight: 700;
}

.q-final {
  color: var(--muted);
  font-size: 12px;
}

/* Risk disclosure: the list scrolls, the two answers stay put. */
.dlg-risk {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.dlg-risk[open] {
  display: flex;
  flex-direction: column;
}

.dlg-risk .dlg-head {
  flex: none;
}

.risk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.risk-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.4;
}

.risk-list li::marker {
  color: var(--sell);
}

.risk-list code,
.config {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.risk-list code {
  padding: 1px 5px;
  background: var(--soft);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  color: var(--ink);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* The terminal's one plain sentence about what it is: fine print under the
   list, one click deep (the dialog opens before the first order). */
.risk-fine {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.risk-foot {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -12px 16px -14px rgba(0, 0, 0, 0.3);
}

.risk-small {
  order: 2;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.risk-big {
  order: 1;
  width: 100%;
  min-height: 84px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--tape);
  color: var(--ink);
  font-family: var(--font-big);
  font-size: clamp(34px, 8vw, 52px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 0 var(--ink);
}

.risk-big:hover {
  background: var(--tape-deep);
}

.risk-big:active {
  box-shadow: 0 2px 0 var(--ink);
  transform: translateY(4px);
}

/* Settings */
.dlg-settings {
  width: min(560px, calc(100vw - 24px));
}

.set-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--hairline);
}

.set-tabs [role="tab"] {
  margin-bottom: -1px;
  padding: 4px 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 700;
}

.set-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.set-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dark mode: Pro, with a small Turn on button. */
.set-row-pro {
  align-items: center;
}

.set-row-pro dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.set-row-pro .btn-xs {
  position: relative;
}

/* Run your own node: the order queue's look, a smaller number. */
.dlg-node .q-num {
  font-size: clamp(56px, 16vw, 88px);
}

.dlg-node .q-reason {
  min-height: 2.6em;
}

.config {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #0E1013;
  border-radius: 12px;
  color: #E7EAEE;
  font-size: 12.5px;
  line-height: 1.7;
}

.config:focus-visible {
  outline-color: var(--tape);
}

.cfg-k {
  color: #FFFFFF;
  font-weight: 700;
}

.cfg-v {
  color: var(--tape);
}

.cfg-c {
  color: #7D8692;
}

/* Leaderboard */
.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.board th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  text-align: left;
}

.board th.num {
  text-align: right;
}

.board td {
  padding: 8px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 600;
}

.board td:first-child {
  width: 64px;
  color: var(--graphite);
}

.board-gap td {
  padding: 2px 8px;
  color: var(--muted);
  text-align: center;
}

.board-you td {
  background: var(--tape-soft);
  font-weight: 800;
}

/* List your own perp */
.lp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-label {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 600;
}

.lp-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-names [aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

.lp-price {
  font-family: var(--font-big);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.lp-status,
.pnl-status {
  min-height: 1.4em;
  font-size: 13px;
  font-weight: 700;
}

.lp-status:empty,
.pnl-status:empty {
  min-height: 0;
}

/* PnL share card */
.pnl-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 18px 20px;
  background: var(--tape) repeating-linear-gradient(-45deg, transparent 0 18px, rgba(0, 0, 0, 0.035) 18px 36px);
  border: 2px solid var(--ink);
  border-radius: 16px;
}

.pnl-brand {
  font-weight: 800;
}

.pnl-pos {
  color: var(--graphite);
  font-size: 13px;
  font-weight: 600;
}

.pnl-big {
  margin-top: 8px;
  color: var(--buy);
  font-family: var(--font-big);
  font-size: clamp(44px, 12vw, 64px);
  font-weight: 900;
  line-height: 0.95;
}

.pnl-note {
  font-size: 12px;
  font-weight: 700;
}

.pnl-flow {
  margin-top: 10px;
  font-family: var(--font-big);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Layouts                                                             */
/* ------------------------------------------------------------------ */

/* Every screen wider than a phone is exactly one screen tall. The grid takes
   what the ticker, top bar, coupons and the fixed status bar leave, and each
   panel scrolls inside itself, so Place order never needs a page scroll.
   On a laptop the chart is the hero: one header row, a slim coupon strip,
   one toolbar row, a short bottom panel and one status bar, so the chart
   gets everything else. */
@media (min-width: 700px) {
  html,
  body {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  #tl-ticker,
  .topbar {
    flex: none;
  }

  .mark {
    font-size: 24px;
  }

  .pair-btn {
    height: 36px;
  }

  .grid {
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    padding: 6px;
  }

  /* The chaos layer's coupon strip, flattened to one 28 px row. temu.css
     loads after this file, so these rules lean on the #tl-coupons id. */
  #tl-coupons .tm-coupons {
    gap: 6px;
    padding: 1px 0;
  }

  #tl-coupons .tm-coupon,
  #tl-coupons .tm-flash-item {
    min-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 11.5px;
    line-height: 1.15;
  }

  #tl-coupons .tm-coupon-val {
    font-size: 14px;
  }

  #tl-coupons .tm-coupon-cut {
    margin-top: -1px;
    margin-bottom: -1px;
  }

  #tl-coupons .tm-coupon-claim {
    height: 20px;
    line-height: 20px;
  }

  #tl-coupons .tm-flash-item .tm-flash-clock {
    padding: 1px 5px 0;
    font-size: 13px;
  }

  #tl-coupons .tm-flash-item .tm-flash-x {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    line-height: 22px;
  }

  .panel-head {
    min-height: 34px;
    padding: 5px 12px;
  }

  /* One toolbar row above the chart, 34 px with its border. */
  .panel-head.chart-head {
    flex-wrap: nowrap;
    min-height: 33px;
    padding: 2px 8px;
  }

  .tf-btn,
  .tool-btn {
    height: 24px;
  }

  .chart-wrap {
    padding: 6px 8px 7px;
  }

  /* The bottom panel is short and scrolls inside itself. */
  .tabs {
    min-height: 32px;
  }

  .tabs [role="tab"] {
    height: 32px;
  }

  .sys-msg {
    margin: 6px 10px 0;
    padding: 5px 9px;
  }

  .pos-table th {
    padding: 6px 8px;
  }

  .pos-table td {
    padding: 5px 8px;
  }

  .liq-head {
    padding: 4px 12px;
  }

  /* One status bar: the line of status items on the left, the quick-trade
     buttons on the right. */
  .statusbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "row qt";
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
    padding: 4px 16px calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .qt {
    grid-area: qt;
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: 0;
  }

  .qt-info {
    display: none;
  }

  .qt-btns {
    width: auto;
    grid-template-columns: repeat(2, minmax(150px, auto));
  }

  .qt-btn {
    height: 38px;
  }

  .sb-row {
    grid-area: row;
    min-height: 22px;
  }

  /* One status line, never two: extra items scroll sideways. */
  .sb-items {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* The pair name is in the top bar already; the chart toolbar shows it only
   where there is room to spare. */
@media (min-width: 700px) and (max-width: 1299px) {
  .chart-head .panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Wide screens: the two header rows as the real exchange has them, the
   coupon strip folded into the right end of the market bar. */
@media (min-width: 1100px) {
  .stats {
    gap: 14px;
  }

  #tl-coupons {
    flex-wrap: nowrap;
  }

  .chart-wrap {
    padding: 5px 7px 6px;
  }
}

/* The logo is enough until the row has room for the name. */
@media (min-width: 700px) and (max-width: 1599px) {
  .brand-name {
    display: none;
  }
}

/* The chaos layer's urgency label next to the pair: two short lines in the
   market bar, a little wider where the row has room for it. */
@media (min-width: 700px) {
  #pair-picker .tm-urgency {
    max-width: 168px;
    margin-inline-start: 10px;
  }
}

@media (min-width: 1600px) {
  #pair-picker .tm-urgency {
    max-width: 236px;
  }
}

/* 700-1099 px: the right half of row 1 moves to a line of its own under the
   nav only when it can't sit next to More (the nav keeps at least that much;
   trade.js then fits Trade and whatever else there is room for), and wraps
   inside itself on the narrowest tablets. The coupons take a line of their
   own under the stats. */
@media (min-width: 700px) and (max-width: 1099px) {
  .appbar {
    flex-wrap: wrap;
    gap: 0 10px;
  }

  .appnav {
    flex: 1 1 76px;
    min-width: 76px;
    min-height: 48px;
  }

  .appbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 8px;
    max-width: 100%;
    padding: 4px 0 8px;
  }

  .marketbar {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #tl-coupons {
    flex: 1 1 100%;
  }
}

/* The real exchange's trade screen: the chart, then the order book column
   (book and trades as tabs), then the order form from the top of the main
   row to the status bar. The account panel runs under the chart and the
   book only. Side columns stay narrow so the chart keeps the width. */
@media (min-width: 1100px) {
  .grid {
    gap: 4px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 240px 288px;
    grid-template-rows: minmax(0, 1fr) clamp(120px, 17vh, 150px);
    grid-template-areas:
      "chart book entry"
      "bottom bottom entry";
  }
}

@media (min-width: 1400px) {
  .grid {
    grid-template-columns: minmax(0, 1fr) 276px 300px;
  }

  .stats {
    gap: 20px;
  }
}

@media (min-width: 1680px) {
  .grid {
    grid-template-columns: minmax(0, 1fr) 300px 320px;
  }
}

/* 700-1099 px: chart and order form side by side. The order book moves into
   the bottom tabs, bids and asks next to each other so a short panel still
   shows the levels that matter. */
@media (min-width: 700px) and (max-width: 1099px) {
  .grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: minmax(0, 1fr) clamp(120px, 17vh, 150px);
    grid-template-areas:
      "chart entry"
      "bottom entry";
  }

  .panel-book {
    display: none;
  }

  .brand-name {
    display: none;
  }

  .tabs .tab-book {
    display: inline-flex;
  }

  .tabpanel-book {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .tabpanel-book > .book {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "spread spread"
      "cbid cask"
      "bids asks";
    border-right: 1px solid var(--hairline);
  }

  .tabpanel-book > .book > .panel-head,
  .tabpanel-book > .trades > .panel-head {
    display: none;
  }

  .tabpanel-book .book-cols {
    grid-area: cbid;
  }

  .tabpanel-book .book-cols-asks {
    display: grid;
    grid-area: cask;
    border-left: 1px solid var(--hairline);
  }

  .tabpanel-book .book-spread {
    grid-area: spread;
    height: 28px;
    border-top: 0;
  }

  .tabpanel-book .book-bids {
    grid-area: bids;
  }

  /* Nearest ask on top, like the bids next to it. */
  .tabpanel-book .book-asks {
    grid-area: asks;
    flex-direction: column-reverse;
    justify-content: flex-end;
    border-left: 1px solid var(--hairline);
  }

  .tabpanel-book .lvl {
    height: 19px;
  }

  .tabpanel-book > .trades {
    border-top: 0;
  }
}

@media (max-width: 699px) {
  /* Both header rows flatten into one grid: the brand, the icon buttons, the
     tasks slot and More; the pair with its urgency label; the stats with
     Press under More; the account; the coupons. The nav links live in the
     More menu. The tasks pill rides in the first row, so the stats keep
     room for Mark, Oracle and 24h change at 375 px. */
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand icons tasks nav"
      "pair pair pair pair"
      "stats stats stats tools"
      "account account account account"
      "coupons coupons coupons coupons";
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  /* The chaos layer's label sits next to the pair, not under it. */
  #pair-picker .tm-urgency {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 172px;
    margin: 0 0 0 8px;
  }

  .appbar,
  .appbar-right,
  .marketbar {
    display: contents;
  }

  /* The logo is enough: the first row also holds the icons, the tasks pill
     and More (the name shows again from 1600 px). */
  .brand-name {
    display: none;
  }

  .appnav {
    grid-area: nav;
    flex: none;
    justify-content: flex-end;
  }

  .appnav > .nav-link {
    display: none;
  }

  .appnav .nav-more {
    height: 32px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
  }

  /* Every view but Trade opens from More here, so More shows it. */
  .appnav .nav-more[aria-current="true"] {
    border-color: var(--ink);
    background: var(--tape-soft);
  }

  .appnav .nav-more[aria-current="true"]::after {
    display: none;
  }

  .appnav .menu {
    right: 0;
    left: auto;
  }

  .hd-icons {
    grid-area: icons;
    justify-content: flex-end;
  }

  /* Its two children take their own cells: the tasks slot in the first row,
     Press under More. */
  .hd-tools {
    display: contents;
  }

  #tl-tasks-slot {
    grid-area: tasks;
  }

  #press-btn {
    grid-area: tools;
    justify-self: end;
  }

  /* The label hides; the speaker and the button's name stay. */
  .mute-btn {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .mute-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pair-picker {
    min-width: 0;
  }

  /* A long demo balance plus the chaos layer's tag can outgrow a phone row.
     Wrap instead of spilling past the left edge. */
  .account {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  .balance {
    align-items: flex-start;
    margin-right: auto;
  }

  .sb-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Under the pair button, even when the urgency label wraps below it. */
  .pair-pop {
    top: 46px;
    left: 0;
    width: calc(100vw - 24px);
    max-height: min(66vh, 560px);
  }

  /* The stats scroll sideways. Their last pixels fade, so a stat the edge
     cuts reads as more to scroll; the end padding lets the last one scroll
     clear of the fade. */
  .stats {
    gap: 18px;
    padding-right: 22px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  .seg {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    padding: 8px 8px 0;
    background: var(--lab);
  }

  .seg-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 999px;
  }

  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chart" "book" "entry" "bottom";
  }

  .grid > [data-view] {
    display: none;
  }

  .grid[data-active="chart"] > .panel-chart,
  .grid[data-active="book"] > .panel-book,
  .grid[data-active="trade"] > .panel-entry,
  .grid[data-active="positions"] > .panel-bottom {
    display: flex;
  }

  .panel-chart {
    height: min(64vh, 520px);
    min-height: 320px;
  }

  .book,
  .trades,
  .book-side,
  .trade-list {
    flex: none;
  }

  .trade-list {
    max-height: 420px;
  }

  .entry {
    overflow: visible;
  }

  /* Phones: Place order floats above the status bar while the form scrolls,
     then settles at the end of the form. */
  .panel-entry {
    overflow: visible;
  }

  .entry-foot {
    display: contents;
  }

  .entry-foot > .entry-error {
    margin: 0 12px 8px;
  }

  .btn-place {
    position: sticky;
    bottom: calc(var(--sb-h) + 8px);
    z-index: 5;
    width: calc(100% - 24px);
    margin: 0 12px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  }

  .entry-foot > .fineprint {
    margin: 8px 12px 12px;
  }

  .panel-bottom {
    min-height: 62vh;
  }

  /* The quick bar's buttons scroll the form to just under the sticky
     section switch. */
  .panel-entry {
    scroll-margin-top: 58px;
  }

  .statusbar {
    gap: 2px 12px;
    padding: 0 12px calc(5px + env(safe-area-inset-bottom, 0px));
    font-size: 11px;
  }

  .qt {
    margin: 0 -12px 2px;
    padding: 6px 12px;
  }

  .qt-info {
    display: none;
  }

  .qt-btns {
    width: 100%;
  }

  .qt-btn {
    flex-direction: column;
    gap: 0;
    height: 44px;
    font-size: 14px;
    line-height: 1.1;
  }

  .qt-price {
    font-size: 11px;
  }

  .sb-items {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  #tl-toasts {
    left: 12px;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 399px) {
  .account {
    gap: 6px;
  }

  .account .btn {
    padding: 0 12px;
  }

  /* Mark, Oracle and 24h change fit whole next to Press down to 375 px. */
  .topbar {
    column-gap: 8px;
  }

  .stats {
    gap: 14px;
  }

  .mark {
    font-size: 22px;
  }
}

/* The narrowest phones: a little less air so the first row still fits. */
@media (max-width: 374px) {
  .topbar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hd-icons {
    gap: 4px;
  }
}

/* Motion only when the viewer has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .chip-btn,
  .skip,
  .pair-btn,
  .side,
  .seg-btn,
  .lev-pro,
  .type-pro,
  .qt-btn,
  .menu-item {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .btn-place.is-ready {
    animation: tl-ready 0.7s ease-out;
  }

  @keyframes tl-ready {
    0% {
      transform: scale(0.97);
    }

    40% {
      transform: scale(1.03);
    }

    100% {
      transform: none;
    }
  }

  .caret {
    transition: transform 0.15s ease;
  }

  .dep-fill {
    transition: width 0.35s linear;
    animation: tl-stripes 0.9s linear infinite;
  }

  .upsell-note:not([hidden]) {
    animation: tl-nudge 0.3s ease-out;
  }

  @keyframes tl-stripes {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 22.6px 0;
    }
  }

  .maint:not([hidden]) {
    animation: tl-drop 0.3s ease-out;
  }

  .q-num.is-bump {
    animation: tl-bump 0.45s ease-out;
  }

  .q-reason.is-new {
    animation: tl-nudge 0.35s ease-out;
  }

  .liq-row.is-new {
    animation: tl-flash 1.1s ease-out;
  }

  .q-line.is-filled .q-num {
    animation: tl-pop 0.4s ease-out;
  }

  @keyframes tl-drop {
    from {
      opacity: 0;
      transform: translate(-50%, -14px);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  @keyframes tl-bump {
    0% {
      color: var(--sell);
      transform: scale(1.07);
    }

    100% {
      transform: none;
    }
  }

  @keyframes tl-nudge {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes tl-flash {
    from {
      background-color: #FFE6E3;
    }
  }

  @keyframes tl-pop {
    from {
      transform: scale(0.92);
    }

    to {
      transform: none;
    }
  }
}

/* The rug, the picker tabs and the fee switch. Motion only when the viewer
   has not asked for less; otherwise the pulled book just disappears. */
@media (prefers-reduced-motion: no-preference) {
  .book > .book-cols,
  .book > .book-side,
  .book > .book-spread,
  .book > .rug {
    transition: transform 0.45s ease-in-out;
  }

  .rug-note:not([hidden]) {
    animation: tl-sticker 0.3s ease-out;
  }

  .pair-cat,
  .fee-opt {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  @keyframes tl-sticker {
    from {
      opacity: 0;
      transform: translateY(-50%) rotate(-2deg) scale(0.86);
    }

    to {
      opacity: 1;
      transform: translateY(-50%) rotate(-2deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .book.is-pulled > .book-cols,
  .book.is-pulled > .book-side,
  .book.is-pulled > .book-spread,
  .book.is-pulled > .rug {
    visibility: hidden;
    transform: none;
  }
}