/* Limit order desk. Leans on the existing tokens (--accent amber, --peri Base blue,
   --up green, --down red) so it inherits the palette rather than inventing one. */

.lo-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 90px; }
.lo-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lo-head h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; }
.lo-head p { margin: 0; color: var(--dim, #8b93a7); font-size: 13.5px; max-width: 58ch; }
.lo-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent, #f5a623) 16%, transparent);
  color: var(--accent, #f5a623); border: 1px solid color-mix(in srgb, var(--accent, #f5a623) 38%, transparent);
}
.lo-badge svg { width: 13px; height: 13px; }

.lo-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .lo-grid { grid-template-columns: 1fr; } }

.lo-card {
  background: var(--card, #0d111b); border: 1px solid var(--line, #1e2637);
  border-radius: 14px; padding: 16px;
}
.lo-card + .lo-card { margin-top: 14px; }
.lo-card h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim, #8b93a7); }

/* Inline inside the swap card. The desk is a mode of the one app, not a second app,
   so it borrows the card it sits in rather than drawing another one. */
.lo-switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 999px; background: rgba(127,127,127,.12); }
.lo-switch button {
  padding: 8px 18px; min-height: 34px; border: 0; border-radius: 999px; background: transparent;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--dim, #8b93a7); transition: background .18s, color .18s, transform .18s;
}
.lo-switch button:hover:not(.on) { color: var(--fg, #e8ecf5); }
.lo-switch button.on { box-shadow: 0 2px 10px -4px rgba(245,166,35,.7); }
.lo-switch button.on { background: var(--accent, #f5a623); color: #1a1205; }
/* The app styles bare <section> elements with 64px of vertical padding, which this panel
   inherited and wore as a dead band above the pair row. Zeroed by id so the app rule cannot
   win on specificity. */
#loPanel.lo-inline { padding: 0; margin-top: 2px; animation: lo-fade .24s cubic-bezier(.22,1,.36,1); }
/* The market controls are gone in limit mode, so the space the form body reserved for them
   goes too. Without this the ticket floats under a band of nothing. */
body.lo-limit .cx-form-body { padding-top: 6px; gap: 0; row-gap: 0; }
body.lo-limit .cx-card, body.lo-limit .cx-form { min-height: 0; }
.lo-inline[hidden] { display: none; }
/* In Limit mode the market controls step aside. The panel is a SIBLING inside the same
   form body, so the rule hides its siblings rather than the container, which would take
   the panel with it. */
body.lo-limit .cx-form-body > *:not(#loPanel) { display: none !important; }
body.lo-limit .cx-route, body.lo-limit .cx-mode { display: none !important; }

/* 🚨 The phone has a FIXED action bar at the bottom. Without room to scroll past it the
   place button sits UNDER that bar and cannot be tapped, which is a button that looks
   present and is not. The panel reserves that height plus the safe area. */
@media (max-width: 860px) {
  /* 🚨 Under 860px the app RELOCATES the market trade button into a fixed docked bar, which
     lives OUTSIDE the form body. The rule that hides the market controls therefore misses it,
     and a "Get quote" button floats over the limit ticket offering the wrong action. The limit
     CTA is inside the panel, so the docked market bar is hidden with the rest of market mode. */
  body.lo-limit .mact, body.lo-limit #mAct { display: none !important; }
  #loPanel.lo-inline { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .lo-cta { min-height: 52px; font-size: 16px; }
  .lo-row { min-height: 56px; }
  .lo-tok { min-height: 46px; }
  .lo-bookhead { gap: 6px; }
  .lo-sel, .lo-tok { max-width: 42vw; }
}
/* A scrolling row of chips hides its own end. The fade says there is more to the right
   rather than leaving the last chip looking clipped by accident. */
.lo-mkt-scroll { position: relative; scroll-snap-type: x proximity; }
.lo-mkt-scroll > * { scroll-snap-align: start; }

/* ---- exchange desk ---- */
.lo-bookhead { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.lo-sel { background: transparent; border: 0; color: var(--fg, #e8ecf5); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; max-width: 46%; }
.lo-sel:focus { outline: none; }
.lo-slash { color: var(--dim, #8b93a7); font-weight: 700; }
.lo-mid { margin-left: auto; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--dim, #8b93a7); font-variant-numeric: tabular-nums; }
.lo-mid b { color: var(--fg, #e8ecf5); }

.lo-rows { display: grid; gap: 7px; margin-bottom: 12px; }
.lo-row {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; min-height: 52px;
  background: var(--bg2, #070a12); border: 1.5px solid var(--line, #1e2637); border-radius: 9px; padding: 11px;
  transition: border-color .16s;
}
.lo-row:focus-within { border-color: var(--accent, #f5a623); }
.lo-row label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #8b93a7); margin: 0; }
.lo-row input { background: transparent; border: 0; color: var(--fg, #e8ecf5); font: inherit; font-size: 16px; font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; text-align: right; width: 100%; padding: 0; min-height: 26px; }
.lo-row input:focus { outline: none; }
.lo-row b { font-size: 12px; color: var(--dim, #8b93a7); font-weight: 700; min-width: 42px; text-align: right; }

.lo-mkt { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.lo-chip {
  min-height: 40px; padding: 10px 13px; border-radius: 8px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, transform .15s;
}
.lo-chip:hover { color: var(--fg, #e8ecf5); border-color: var(--accent, #f5a623); transform: translateY(-1px); }
.lo-dist { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim, #8b93a7); }
.lo-dist.up { color: var(--up, #23b26d); }
.lo-dist.down { color: var(--down, #ef5b67); }
.lo-dist.warn { color: var(--accent, #f5a623); font-weight: 700; }

/* dense order table, the way a desk lists working orders */
.lo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lo-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim, #8b93a7); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line, #1e2637); white-space: nowrap;
}
.lo-table td { padding: 9px 8px; border-bottom: 1px solid var(--line, #1e2637); white-space: nowrap; }
.lo-table tbody tr { animation: lo-in .26s cubic-bezier(.22,1,.36,1) both; transition: background .15s; }
.lo-table tbody tr:hover { background: rgba(127,127,127,.06); }
.lo-table .num { text-align: right; font-family: var(--mono, ui-monospace, monospace); }
.lo-table .s-buy { color: var(--up, #23b26d); font-weight: 700; }
.lo-table .s-sell { color: var(--down, #ef5b67); font-weight: 700; }
.lo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lo-fillbar { display: block; height: 4px; border-radius: 2px; background: var(--line, #1e2637); overflow: hidden; min-width: 54px; }
.lo-fillbar i { display: block; height: 100%; background: var(--accent, #f5a623); transition: width .5s cubic-bezier(.22,1,.36,1); }

/* token legs, shaped like the market swap's own token buttons */
.lo-tok {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  border: 1.5px solid var(--line, #1e2637); background: var(--bg2, #070a12); color: var(--fg, #e8ecf5);
  font: inherit; cursor: pointer; min-height: 42px; transition: border-color .16s, transform .16s;
}
.lo-tok:hover { border-color: var(--accent, #f5a623); transform: translateY(-1px); }
.lo-tok b { font-size: 14.5px; font-weight: 800; }
.lo-tok span { font-size: 11px; color: var(--dim, #8b93a7); text-transform: capitalize; }
.lo-tok::after { content: '\25be'; color: var(--dim, #8b93a7); font-size: 11px; }

/* holdings first: what the signed-in trader already has, one tap to trade it */
.lo-holds { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; }
.lo-holds[hidden] { display: none; }
.lo-holds-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #8b93a7); white-space: nowrap; margin-right: 2px; }
.lo-hold {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none;
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--fg, #e8ecf5); font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.lo-hold:hover { border-color: var(--accent, #f5a623); transform: translateY(-1px); }
.lo-hold b { font-size: 12px; font-weight: 800; }
.lo-hold span { font-size: 10.5px; color: var(--dim, #8b93a7); font-variant-numeric: tabular-nums; }

/* a locked field is stating a fact, not asking a question */
.lo-locked { color: var(--dim, #8b93a7) !important; cursor: default; }
.lo-mkt-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
.lo-mkt-scroll::-webkit-scrollbar { height: 0; }
.lo-chip.is-mid { border-color: var(--accent, #f5a623); color: var(--accent, #f5a623); }

/* ---- ticket ---- */
.lo-side { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: rgba(127,127,127,.1); }
.lo-side button {
  padding: 9px; min-height: 38px; border-radius: 8px; border: 0;
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background .18s, color .18s;
}
.lo-side button:hover:not(.on) { color: var(--fg, #e8ecf5); }
.lo-side button.on[data-side="BUY"] { color: #062b18; background: var(--up, #23b26d); }
.lo-side button.on[data-side="SELL"] { color: #2b0709; background: var(--down, #ef5b67); }

.lo-field { margin-bottom: 12px; }
.lo-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim, #8b93a7); margin-bottom: 5px; }
.lo-field input, .lo-field select {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: inherit; font-size: 16px;
  background: var(--bg2, #070a12); color: var(--fg, #e8ecf5); border: 1.5px solid var(--line, #1e2637);
  transition: border-color .16s;
}
.lo-field input:focus, .lo-field select:focus { outline: none; border-color: var(--accent, #f5a623); }
.lo-hint { font-size: 11.5px; color: var(--dim, #8b93a7); margin-top: 5px; min-height: 15px; }
.lo-hint.bad { color: var(--down, #ef5b67); }
.lo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lo-preview {
  border-radius: 10px; padding: 11px 12px; margin: 4px 0 12px;
  background: var(--bg2, #070a12); border: 1px dashed var(--line, #1e2637);
  font-size: 13px; display: grid; gap: 6px;
}
.lo-preview div { display: flex; justify-content: space-between; gap: 10px; }
.lo-preview span:last-child { font-weight: 700; }

.lo-cta {
  width: 100%; padding: 13px; border-radius: 11px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 15px;
  background: var(--accent, #f5a623); color: #1a1205;
  transition: transform .18s cubic-bezier(.22,1,.36,1), filter .18s, opacity .18s;
}
.lo-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.lo-cta:disabled { opacity: .5; cursor: not-allowed; }
.lo-cta.busy { position: relative; color: transparent; }
.lo-cta.busy::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  border: 2px solid rgba(26,18,5,.35); border-top-color: #1a1205; border-radius: 50%;
  animation: lo-spin .7s linear infinite;
}
@keyframes lo-spin { to { transform: rotate(360deg); } }

/* ---- tabs ---- */
.lo-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.lo-tabs button {
  min-height: 44px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .16s, border-color .16s, background .16s;
}
.lo-tabs button.on { color: var(--fg, #e8ecf5); border-color: var(--accent, #f5a623); background: color-mix(in srgb, var(--accent, #f5a623) 12%, transparent); }
.lo-tabs .lo-count { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }

.lo-panel { display: none; }
.lo-panel.on { display: block; animation: lo-fade .22s cubic-bezier(.22,1,.36,1); }
@keyframes lo-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- order cards, the phone shape ---- */
.lo-card { border: 1px solid var(--line, #1e2637); border-radius: 14px; padding: 14px; margin-bottom: 10px;
  background: var(--bg2, #070a12); animation: lo-in .28s cubic-bezier(.22,1,.36,1) both; }
.lo-card.is-live { border-color: color-mix(in srgb, var(--accent, #f5a623) 38%, var(--line, #1e2637)); }
.lo-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.lo-card-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lo-card-pair b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.lo-card-age { margin-left: auto; color: var(--dim, #8b93a7); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lo-card-sub { color: var(--dim, #8b93a7); font-size: 12.5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.lo-card-kv { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line, #1e2637); display: grid; gap: 9px; }
.lo-card-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lo-card-kv dt { color: var(--dim, #8b93a7); font-size: 13px; margin: 0; }
.lo-card-kv dd { margin: 0; font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lo-card-acts { display: flex; gap: 9px; margin-top: 13px; }
.lo-btn.wide { flex: 1; justify-content: center; text-align: center; min-height: 46px; }
.lo-btn.danger { color: var(--down, #ef5b67); border-color: color-mix(in srgb, var(--down, #ef5b67) 45%, transparent); }
.lo-btn.danger:hover { border-color: var(--down, #ef5b67); background: color-mix(in srgb, var(--down, #ef5b67) 10%, transparent); }

.lo-acct-note { font-size: 12.5px; color: var(--dim, #8b93a7); padding: 2px 2px 10px; line-height: 1.5; }
.lo-acct-note[hidden] { display: none; }
.lo-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--accent, #f5a623); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lo-link:hover { filter: brightness(1.15); }

/* ---- order cards ---- */
.lo-order {
  border: 1px solid var(--line, #1e2637); border-radius: 12px; padding: 13px;
  margin-bottom: 10px; background: var(--bg2, #070a12);
  animation: lo-in .3s cubic-bezier(.22,1,.36,1) both;
  transition: border-color .2s, transform .2s;
}
.lo-order:hover { transform: translateY(-1px); }
.lo-order.is-open { border-color: color-mix(in srgb, var(--accent, #f5a623) 42%, var(--line, #1e2637)); }
@keyframes lo-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.lo-order-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.lo-pair { font-weight: 800; font-size: 14.5px; }
.lo-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.lo-tag.buy { background: color-mix(in srgb, var(--up, #23b26d) 16%, transparent); color: var(--up, #23b26d); }
.lo-tag.sell { background: color-mix(in srgb, var(--down, #ef5b67) 16%, transparent); color: var(--down, #ef5b67); }
.lo-status { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line, #1e2637); color: var(--dim, #8b93a7); }
.lo-status.live { color: var(--accent, #f5a623); border-color: color-mix(in srgb, var(--accent, #f5a623) 40%, transparent); }
.lo-status.live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px; animation: lo-pulse 1.8s ease-in-out infinite;
}
@keyframes lo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.lo-status.done { color: var(--up, #23b26d); border-color: color-mix(in srgb, var(--up, #23b26d) 40%, transparent); }
.lo-status.dead { color: var(--down, #ef5b67); border-color: color-mix(in srgb, var(--down, #ef5b67) 34%, transparent); }

.lo-order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; font-size: 12.5px; }
.lo-order-grid b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #8b93a7); font-weight: 600; margin-bottom: 2px; }

.lo-bar { height: 5px; border-radius: 3px; background: var(--line, #1e2637); overflow: hidden; margin-top: 11px; }
.lo-bar i { display: block; height: 100%; background: var(--accent, #f5a623); border-radius: 3px; width: 0; transition: width .5s cubic-bezier(.22,1,.36,1); }

.lo-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.lo-btn {
  min-height: 40px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .16s, border-color .16s, transform .16s;
}
.lo-btn:hover { color: var(--fg, #e8ecf5); transform: translateY(-1px); }
.lo-btn.danger:hover { color: var(--down, #ef5b67); border-color: var(--down, #ef5b67); }

/* ---- deposit panel ---- */
.lo-deposit {
  margin-top: 11px; padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #f5a623) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f5a623) 32%, transparent);
  animation: lo-in .3s cubic-bezier(.22,1,.36,1) both;
}
.lo-deposit b { display: block; font-size: 12px; margin-bottom: 7px; }
.lo-addr {
  display: flex; align-items: center; gap: 8px; background: var(--bg2, #070a12);
  border-radius: 8px; padding: 9px 10px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; word-break: break-all;
}
.lo-addr span { flex: 1; min-width: 0; }

/* ---- activity ---- */
.lo-feed { list-style: none; margin: 0; padding: 0; }
.lo-feed li {
  display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line, #1e2637);
  font-size: 13px; animation: lo-in .28s cubic-bezier(.22,1,.36,1) both;
}
.lo-feed li:last-child { border-bottom: 0; }
.lo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim, #8b93a7); margin-top: 6px; flex: none; }
.lo-dot.created { background: var(--accent, #f5a623); }
.lo-dot.fill, .lo-dot.final { background: var(--up, #23b26d); }
.lo-dot.status { background: var(--peri, #4a72ff); }
.lo-dot.cancel-requested { background: var(--down, #ef5b67); }
.lo-feed time { margin-left: auto; color: var(--dim, #8b93a7); font-size: 11.5px; white-space: nowrap; }

.lo-empty { text-align: center; padding: 34px 16px; color: var(--dim, #8b93a7); font-size: 13.5px; }
.lo-skel { height: 74px; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(90deg, var(--line,#1e2637) 25%, var(--bg2,#070a12) 50%, var(--line,#1e2637) 75%); background-size: 200% 100%; animation: lo-shim 1.3s linear infinite; }
@keyframes lo-shim { to { background-position: -200% 0; } }

.lo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: var(--card, #0d111b); border: 1px solid var(--line, #1e2637); color: var(--fg, #e8ecf5);
  padding: 11px 16px; border-radius: 11px; font-size: 13.5px; z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s cubic-bezier(.22,1,.36,1);
}
.lo-toast.on { opacity: 1; transform: translateX(-50%); }
.lo-toast.bad { border-color: var(--down, #ef5b67); }

/* Phones. The tab pills and small buttons were under the 36px the rest of the app was
   already corrected to, so they get a floor here rather than being the one place that
   is fiddly to hit. */
@media (max-width: 860px) {
  .lo-tabs button { min-height: 38px; padding: 9px 15px; }
  .lo-switch button { min-height: 40px; padding: 10px 20px; }
  .lo-btn { min-height: 38px; padding: 9px 14px; }
  .lo-side button { min-height: 44px; }
  .lo-wrap { padding: 14px 14px 90px; }
  .lo-head h1 { font-size: 22px; }
}

/* Motion is decoration here. Anyone who has asked the OS to stop moving things gets a
   still page, not a slower one. */
@media (prefers-reduced-motion: reduce) {
  .lo-order, .lo-panel.on, .lo-feed li, .lo-deposit { animation: none; }
  .lo-cta, .lo-side button, .lo-btn, .lo-order, .lo-bar i, .lo-toast { transition: none; }
  .lo-status.live::before, .lo-skel, .lo-cta.busy::after { animation: none; }
}

.lo-note { font-size: 11.5px; color: var(--dim, #8b93a7); padding: 4px 2px 10px; }

/* A percentage chip waiting on the balance scan. Dimmed and inert, so the pause reads as
   the app working rather than the button ignoring the tap. */
[data-pct].is-wait { opacity: .55; pointer-events: none; position: relative; }
[data-pct].is-wait::after {
  content: ""; position: absolute; inset: auto 6px 4px auto;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: lo-chip-spin .6s linear infinite;
}
@keyframes lo-chip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-pct].is-wait::after { animation: none; }
}