/* ==========================================================================
   ZELENCIO — BUY, SELL, BANK, CARD
   --------------------------------------------------------------------------
   Three layouts, not one stretched three ways.

   PHONE     a single column. The trade panel fills the screen, the amount
             boxes are the biggest thing on it, and the action button sits
             where the thumb already is. The market list moves below.

   TABLET    the panel centres and stops growing. Numbers stay large; the
             page does not turn into a wide thin strip.

   DESKTOP   two columns. The trade panel on the left, a live market rail on
             the right showing every tradable coin with its price and change.
             Click a row, the panel switches to that coin. This is the part
             that makes it feel like an exchange rather than a form.

   On speed: no blur in any scrolling list, no shadow on a repeated row, and
   the price flash animates opacity only so a refresh every few seconds never
   forces the page to lay out again.
   ========================================================================== */

.ex {
  --ex-radius: 16px;
  --ex-cut:    10px;
  --ex-rail:   340px;
  --ex-gap:    16px;
}

.ex-page { max-width: 1280px; margin: 0 auto; padding: 0 0 96px; }

/* ── Shell ────────────────────────────────────────────────────────────── */

.ex-shell { display: block; padding: 0 16px; }

@media (min-width: 1040px) {
  .ex-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ex-rail);
    gap: 24px;
    align-items: start;
    padding: 0 28px;
  }
  .ex-rail { position: sticky; top: 88px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE SWITCH
   ══════════════════════════════════════════════════════════════════════════ */

.ex-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 18px 0;
  background: var(--bg-inset);
  border-radius: 12px;
}
.ex-mode {
  padding: 12px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-3);
  font: 600 15px 'Inter', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ex-mode:hover { color: var(--ink-2); }
.ex-mode.is-on { background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.ex-mode.is-on[data-mode="buy"]  { color: var(--up); }
.ex-mode.is-on[data-mode="sell"] { color: var(--down); }

/* ══════════════════════════════════════════════════════════════════════════
   TRADE PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.ex-panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--ex-radius);
  overflow: hidden;
}

.ex-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.ex-head__t {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}

/* The live rate, with the countdown to the next refresh. */
.ex-rate {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--ink-2);
}
.ex-rate.flash { animation: ex-flash .5s ease; }
@keyframes ex-flash { 0% { opacity: .35; } 100% { opacity: 1; } }

.ex-tick {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-3);
}

/* ── The two amount boxes ─────────────────────────────────────────────── */

.ex-boxes { position: relative; padding: 8px 18px 18px; }

.ex-box {
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color .15s ease;
}
.ex-box + .ex-box { margin-top: 10px; }
.ex-box.is-active { border-color: var(--brand); }

.ex-box__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px; color: var(--ink-3);
}
.ex-box__role { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

.ex-box__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

/* The number is the loudest thing on the page, and shrinks itself rather
   than overflowing when somebody types a very large amount. */
.ex-amount {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  padding: 0;
  min-width: 0;
}
.ex-amount:focus { outline: none; }
.ex-amount::placeholder { color: var(--ink-faint); }
.ex-amount::-webkit-outer-spin-button,
.ex-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ex-amount[data-len="lg"] { font-size: 27px; }
.ex-amount[data-len="xl"] { font-size: 22px; }

/* The asset badge: logo, ticker, and a hint that it opens a picker. */
.ex-asset {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink);
  font: 600 15px 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease;
}
.ex-asset:hover { border-color: var(--ink-faint); }
.ex-asset img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: var(--bg-inset);
}
.ex-asset__c { font-size: 10px; color: var(--ink-3); }

.ex-box__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
  font-size: 12.5px; color: var(--ink-3);
}
.ex-box__equiv { font-family: 'JetBrains Mono', monospace; }

/* The swap control, sitting between the boxes. */
.ex-swap {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: 4px solid var(--bg-raised);
  border-radius: 50%;
  background: var(--bg-inset);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s ease, color .15s ease;
}
.ex-swap:hover  { color: var(--brand); }
.ex-swap.spin   { transform: translate(-50%, -50%) rotate(180deg); }

/* ── Quick amounts ────────────────────────────────────────────────────── */

.ex-quick { display: flex; gap: 8px; padding: 0 18px 16px; flex-wrap: wrap; }
.ex-chip {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-2);
  font: 600 13px 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ex-chip:hover  { border-color: var(--brand); color: var(--brand-deep); }
.ex-chip--max   { color: var(--brand-deep); border-color: var(--brand-wash); }

/* ── Summary lines ────────────────────────────────────────────────────── */

.ex-lines { padding: 0 18px 4px; }
.ex-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  font-size: 13.5px; color: var(--ink-3);
}
.ex-line b { color: var(--ink); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.ex-line--total {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px; color: var(--ink);
}
.ex-line--total b { font-size: 16px; font-weight: 700; }

/* ── Payment method ───────────────────────────────────────────────────── */

.ex-method {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 4px 18px 0;
  width: calc(100% - 36px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--ex-cut);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease;
}
.ex-method:hover { border-color: var(--ink-faint); }
.ex-method__ic {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--bg-inset);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.ex-method__n { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ex-method__d { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.ex-method__c { color: var(--ink-faint); font-size: 12px; }

/* ── Action ───────────────────────────────────────────────────────────── */

.ex-act { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.ex-go {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--ex-cut);
  background: var(--brand);
  color: #fff;
  font: 700 16px 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.ex-go:hover  { filter: brightness(1.06); }
.ex-go:active { transform: translateY(1px); }
.ex-go[disabled] { opacity: .45; pointer-events: none; }
.ex-go--sell { background: var(--down); }

.ex-note {
  display: flex; gap: 10px;
  margin: 0 18px 16px;
  padding: 12px 14px;
  border-radius: var(--ex-cut);
  background: var(--bg-inset);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.ex-note--warn { background: rgba(217,119,6,.10); color: var(--warn); }
.ex-note--bad  { background: rgba(229,56,79,.10); color: var(--down); }

/* ══════════════════════════════════════════════════════════════════════════
   MARKET RAIL
   ══════════════════════════════════════════════════════════════════════════ */

.ex-market {
  margin-top: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--ex-radius);
  overflow: hidden;
}
@media (min-width: 1040px) { .ex-market { margin-top: 0; } }

.ex-market__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ex-market__t {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

.ex-search { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.ex-search input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .ex-search input { font-size: 16px; } }
.ex-search input:focus { outline: none; border-color: var(--brand); }

.ex-list { max-height: 520px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1039px) { .ex-list { max-height: 380px; } }

.ex-coin {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
  /* Off-screen rows cost nothing to keep in the list. */
  content-visibility: auto;
  contain-intrinsic-size: auto 58px;
}
.ex-coin:hover { background: var(--bg-sunk); }
.ex-coin.is-on { background: var(--brand-wash); }
.ex-coin img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-inset); }
.ex-coin__s { font-weight: 600; font-size: 14px; color: var(--ink); }
.ex-coin__n {
  font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-coin__r { text-align: right; }
.ex-coin__p { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ex-coin__c { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.ex-coin__c.up   { color: var(--up); }
.ex-coin__c.down { color: var(--down); }
.ex-coin__c.flat { color: var(--ink-faint); }

.ex-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   PAYMENT RAILS — bank and card
   ══════════════════════════════════════════════════════════════════════════ */

.ex-steps {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 18px 0;
  font-size: 12px; color: var(--ink-3);
}
.ex-step { display: flex; align-items: center; gap: 7px; }
.ex-step__n {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-inset);
  font: 600 11px 'JetBrains Mono', monospace;
}
.ex-step.is-on   .ex-step__n { background: var(--brand); color: #fff; }
.ex-step.is-done .ex-step__n { background: var(--up); color: #fff; }
.ex-step__line { flex: 1; height: 1px; background: var(--line); }

.ex-rails { display: grid; gap: 10px; padding: 16px 18px; }

.ex-rail-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--ex-cut);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.ex-rail-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.ex-rail-card img,
.ex-rail-card .ex-rail-card__ic {
  width: 46px; height: 46px; border-radius: 11px;
  object-fit: contain; background: var(--bg-inset);
  display: grid; place-items: center;
}
.ex-rail-card__n { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ex-rail-card__d { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ex-rail-card__lim { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-faint); }

/* Bank account details, built to be copied. */
.ex-detail {
  display: grid; gap: 2px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ex-detail:last-child { border-bottom: 0; }
.ex-detail__k { font-size: 12px; color: var(--ink-3); }
.ex-detail__v {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; color: var(--ink);
  overflow-wrap: anywhere;
}
.ex-copy {
  flex: none;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-raised);
  color: var(--ink-3);
  font: 600 11.5px 'Inter', sans-serif;
  cursor: pointer;
}
.ex-copy:hover  { color: var(--brand-deep); border-color: var(--brand); }
.ex-copy.is-ok  { color: var(--up); border-color: var(--up); }

/* Proof of payment. */
.ex-drop {
  display: grid; place-items: center; gap: 8px;
  padding: 28px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--ex-cut);
  background: var(--bg);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease;
}
.ex-drop:hover    { border-color: var(--brand); }
.ex-drop.is-set   { border-style: solid; border-color: var(--up); }
.ex-drop__t       { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ex-drop__d       { font-size: 12.5px; color: var(--ink-3); }
.ex-drop img      { max-width: 100%; max-height: 220px; border-radius: 9px; }

/* ── Receipt ──────────────────────────────────────────────────────────── */

.ex-done { padding: 44px 22px; text-align: center; }
.ex-done__mark {
  width: 68px; height: 68px; margin: 0 auto 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 30px; color: #fff;
  background: var(--up);
}
.ex-done__mark--wait { background: var(--warn); }
.ex-done__h { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--ink); }
.ex-done__p { max-width: 42ch; margin: 10px auto 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }
.ex-done__ref {
  display: inline-block; margin-top: 18px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--bg-inset);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink-2);
}

/* ── Field ────────────────────────────────────────────────────────────── */

.ex-field { margin-bottom: 16px; padding: 0 18px; }
.ex-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ex-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--ex-cut);
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .ex-input { font-size: 16px; } }
.ex-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

.ex-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ex-swap, .ex-rail-card, .ex-go { transition: none; }
  .ex-rate.flash { animation: none; }
}

/* ==========================================================================
   ASSET PICKER
   --------------------------------------------------------------------------
   A proper asset sheet, matching what the app shows: logo, symbol, name, live
   price, change — and for coins, the balance this account actually holds,
   which is the number somebody is looking for the moment they open it on the
   Sell tab.

   Bottom sheet on a phone, because the thumb is at the bottom of the screen.
   Centred panel on a desktop, because the pointer is not.
   ========================================================================== */

.exp { position: fixed; inset: 0; z-index: 9998; }
.exp__back { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: exp-fade .16s ease; }

.exp__sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  animation: exp-up .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 820px) {
  .exp__sheet {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(520px, 92vw);
    max-height: 78vh;
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: 16px;
    animation: exp-pop .16s ease;
  }
  .exp__grab { display: none; }
}

@keyframes exp-fade { from { opacity: 0; } }
@keyframes exp-up   { from { transform: translateY(100%); } }
@keyframes exp-pop  { from { transform: translate(-50%, -47%); opacity: 0; } }

.exp__grab {
  width: 42px; height: 4px;
  margin: 10px auto 2px;
  border-radius: 2px;
  background: var(--line);
}

.exp__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px 12px;
}
.exp__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.exp__x {
  width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 21px; line-height: 1; cursor: pointer;
}
.exp__x:hover { color: var(--ink); }

.exp__search { padding: 4px 20px 14px; }
.exp__search input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px 'Inter', system-ui, sans-serif;
}
.exp__search input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}

.exp__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px calc(18px + env(safe-area-inset-bottom));
}

.exp__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  border: 0; border-radius: 12px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 66px;
}
.exp__row:hover  { background: var(--bg-sunk); }
.exp__row.is-on  { background: var(--brand-wash); }
.exp__row img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; background: var(--bg-inset);
}

.exp__meta { min-width: 0; }
.exp__sym  { display: block; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.exp__name {
  display: block; margin-top: 2px;
  font-size: 13px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.exp__right { text-align: right; display: grid; gap: 2px; justify-items: end; }
.exp__px {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.exp__ch { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.exp__ch.up   { color: var(--up); }
.exp__ch.down { color: var(--down); }
.exp__ch.flat { color: var(--ink-faint); }

/* What this account holds, under the change. */
.exp__bal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--ink-2);
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-inset);
}
.exp__bal--none { color: var(--ink-faint); background: none; padding: 2px 0; }

.exp__none { padding: 46px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ── Method rows, now stated rather than chosen ───────────────────────── */

.ex-rail-card.is-on  { border-color: var(--brand); background: var(--brand-wash); }
.ex-rail-card.is-off { opacity: .55; }

.ex-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--ink-3);
  font: 600 10.5px 'Inter', sans-serif;
  letter-spacing: .02em;
  vertical-align: middle;
}
.ex-tag--on { background: var(--brand); color: #fff; }

.ex-note a { color: var(--brand-deep); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .exp__sheet, .exp__back { animation: none; }
}

/* ==========================================================================
   UPLOAD PROGRESS
   --------------------------------------------------------------------------
   A photo on mobile data takes long enough that a frozen button reads as a
   broken page. The ring fills to a real percentage taken from the upload
   itself, with a bar underneath for the same figure — a thin line is easier
   to read at a glance than a number.
   ========================================================================== */

.exu { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.exu__back { position: absolute; inset: 0; background: rgba(0,0,0,.66); }

.exu__box {
  position: relative;
  width: min(340px, 100%);
  padding: 30px 26px 26px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
  animation: exu-in .18s ease;
}
@keyframes exu-in { from { opacity: 0; transform: translateY(10px); } }

.exu__ring { position: relative; width: 116px; height: 116px; margin: 0 auto 18px; }
.exu__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.exu__track {
  fill: none; stroke: var(--bg-inset); stroke-width: 9;
}
.exu__fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .25s ease;
}
.exu__box.is-done .exu__fill { stroke: var(--up); }

.exu__pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--ink);
}
.exu__box.is-done .exu__pct { color: var(--up); font-size: 30px; }

.exu__t {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.exu__d { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

.exu__bar {
  height: 4px; margin-top: 18px;
  border-radius: 2px;
  background: var(--bg-inset);
  overflow: hidden;
}
.exu__bar span {
  display: block; height: 100%; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transition: width .25s ease;
}
.exu__box.is-done .exu__bar span { background: var(--up); }

@media (prefers-reduced-motion: reduce) {
  .exu__box { animation: none; }
  .exu__fill, .exu__bar span { transition: none; }
}

/* ==========================================================================
   U2U PAYMENT METHODS
   --------------------------------------------------------------------------
   Phone    one column of cards, add button pinned low where the thumb is,
            the form arriving as a sheet over the list.
   Desktop  accounts on the left, the add form open beside them on the right.
            There is room not to cover what you are working on, so it does not.
   ========================================================================== */

.ex-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 120px; }
@media (min-width: 1040px) { .ex-wrap { padding: 34px 28px 60px; } }

.u2u-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.u2u-head__h {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px; font-weight: 700; color: var(--ink);
}
@media (min-width: 1040px) { .u2u-head__h { font-size: 30px; } }
.u2u-head__p {
  margin: 8px 0 0; max-width: 54ch;
  font-size: 14px; line-height: 1.6; color: var(--ink-3);
}
.u2u-count {
  flex: none;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-inset);
  font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-3);
}

.u2u-grid { display: block; }
@media (min-width: 1040px) {
  .u2u-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 26px;
    align-items: start;
  }
}

/* ── Account cards ────────────────────────────────────────────────────── */

.u2u-list { display: grid; gap: 12px; }
@media (min-width: 700px) and (max-width: 1039px) {
  .u2u-list { grid-template-columns: 1fr 1fr; }
}

.u2u-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  transition: border-color .15s ease, transform .18s ease, opacity .18s ease;
  animation: u2u-in .32s ease backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.u2u-card:hover { border-color: var(--ink-faint); }
.u2u-card.is-going { opacity: 0; transform: translateX(-14px); }

@keyframes u2u-in { from { opacity: 0; transform: translateY(10px); } }

.u2u-card__logo {
  width: 50px; height: 50px;
  border-radius: 13px;
  object-fit: contain;
  background: var(--bg-inset);
  padding: 5px;
}
.u2u-card__logo--none {
  display: grid; place-items: center;
  color: var(--ink-3); padding: 0;
}
.u2u-card__name {
  font-weight: 600; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.u2u-card__num {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: .08em; color: var(--ink-2);
}
.u2u-card__side { display: flex; align-items: center; gap: 8px; }

.u2u-tag {
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-inset);
  font: 600 11px 'JetBrains Mono', monospace; color: var(--ink-3);
}
.u2u-x {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.u2u-x:hover { color: var(--down); border-color: var(--down); }

/* ── Empty ───────────────────────────────────────────────────────────── */

.u2u-empty {
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.u2u-empty__i {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 15px;
  background: var(--bg-inset);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.u2u-empty__t { font-weight: 600; font-size: 16px; color: var(--ink-2); }
.u2u-empty__d {
  margin: 8px auto 0; max-width: 36ch;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}

/* ── Add form ─────────────────────────────────────────────────────────── */

/* Phone: a sheet over the list. Desktop: a panel that is simply always there. */
.u2u-add {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  transform: translateY(102%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.ex-page.is-adding .u2u-add { transform: none; }
body.u2u-open { overflow: hidden; }

@media (min-width: 1040px) {
  .u2u-add {
    position: sticky; top: 88px;
    transform: none;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
  }
  .u2u-add__x { display: none; }
  .u2u-fab   { display: none; }
  body.u2u-open { overflow: auto; }
}

.u2u-add__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.u2u-add__t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.u2u-add__x {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 20px; line-height: 1; cursor: pointer;
}

.u2u-field { margin-bottom: 16px; }

.u2u-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 700px) { .u2u-pick { font-size: 16px; } }
.u2u-pick:hover { border-color: var(--ink-faint); }
.u2u-pick__l { color: var(--ink-faint); }
.u2u-pick__l.is-set { color: var(--ink); font-weight: 600; }
.u2u-pick__c { color: var(--ink-3); font-size: 11px; }

/* An account number is read back digit by digit, so it is spaced for that. */
.u2u-num {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  font-size: 17px;
}

.u2u-fab {
  position: fixed;
  left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 50;
  width: auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.ex-page.is-adding .u2u-fab { display: none; }

/* A bank with no logo still needs something in the row. */
.exp__ph {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-inset);
  display: grid; place-items: center;
  font-weight: 700; color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .u2u-card, .u2u-add { animation: none; transition: none; }
}

/* ==========================================================================
   DESKTOP — A DIFFERENT PAGE, NOT A WIDER ONE
   --------------------------------------------------------------------------
   On a phone the panel is the whole screen and the market list follows it.
   Widening that gives a tall thin column with dead space either side, which
   is what a stretched mobile layout always looks like.

   From 1040px the page becomes a workspace instead:

     · the mode switch leaves the panel and becomes a header row with the
       live rate beside it, the way a desk tool reads
     · the amount boxes sit side by side with the swap between them, because
       a trade is one action and reads better across than down
     · the market rail is full height and always visible, so the price you
       are trading at and the prices you could switch to share one view
     · rows animate in on load, and the panel lifts slightly, so arriving on
       a large screen feels like something opened rather than reflowed
   ========================================================================== */

@media (min-width: 1040px) {

  .ex-shell { align-items: start; gap: 28px; }

  /* The switch becomes a header, with the rate promoted next to it. */
  .ex-main .ex-modes {
    display: inline-grid;
    grid-template-columns: auto auto;
    width: auto;
    margin: 0 0 18px;
  }
  .ex-mode { padding: 11px 34px; font-size: 15.5px; }

  .ex-panel {
    animation: ex-rise .34s cubic-bezier(.2, .8, .3, 1) both;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  }
  @keyframes ex-rise { from { opacity: 0; transform: translateY(14px); } }

  .ex-head { padding: 20px 24px; }
  .ex-head__t { font-size: 18px; }
  .ex-rate { font-size: 14.5px; }

  /* Side by side, with the swap sitting between rather than on top. */
  .ex-boxes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding: 18px 24px 22px;
  }
  .ex-box + .ex-box { margin-top: 0; }
  .ex-box { padding: 22px 20px; }

  .ex-swap {
    position: static;
    transform: none;
    justify-self: center;
    width: 44px; height: 44px;
    border-width: 0;
    background: var(--bg-inset);
  }
  .ex-swap:hover  { background: var(--brand-wash); }
  .ex-swap.spin   { transform: rotate(180deg); }

  /* Rotated a quarter turn: the boxes are beside each other now, so the
     arrows should point across, not up and down. */
  .ex-swap::before { content: ''; }

  .ex-amount { font-size: 30px; }
  .ex-amount[data-len="lg"] { font-size: 25px; }
  .ex-amount[data-len="xl"] { font-size: 20px; }

  .ex-quick { padding: 0 24px 18px; }
  .ex-chip  { flex: 0 0 auto; min-width: 78px; }

  .ex-lines { padding: 0 24px 6px; }
  .ex-line  { padding: 10px 0; font-size: 14px; }

  .ex-rails  { padding: 16px 24px; grid-template-columns: 1fr 1fr; }
  .ex-note   { margin: 0 24px 18px; }
  .ex-act    { padding: 18px 24px 24px; }
  .ex-go     { padding: 17px; font-size: 16.5px; }

  /* The rail runs the height of the panel and stays put. */
  .ex-market {
    animation: ex-rise .34s cubic-bezier(.2, .8, .3, 1) .06s both;
  }
  .ex-list { max-height: calc(100vh - 300px); }

  .ex-coin { padding: 12px 16px; }
  .ex-coin:hover { transform: translateX(2px); }
  .ex-coin { transition: background-color .12s ease, transform .12s ease; }
}

/* Between phone and desktop the panel centres instead of stretching. */
@media (min-width: 700px) and (max-width: 1039px) {
  .ex-main   { max-width: 620px; margin: 0 auto; }
  .ex-rail   { max-width: 620px; margin: 20px auto 0; }
  .ex-boxes  { padding: 8px 22px 20px; }
  .ex-amount { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-panel, .ex-market { animation: none; }
  .ex-coin:hover { transform: none; }
}

/* ==========================================================================
   ASSETS
   --------------------------------------------------------------------------
   Phone    the balance card fills the screen, actions as round buttons, one
            list of holdings, account tabs scrolling sideways.
   Desktop  balance and breakdown side by side, actions become labelled
            buttons, and holdings become a real table with price, change and
            value — columns a phone has no room for and should not pretend to.
   ========================================================================== */

/*
 * No extra bottom padding here.
 *
 * .ex-wrap inside this page already carries 120px, and stacking another 80
 * left the two hundred pixels of dead space under the coin list. One source
 * of bottom spacing, not two.
 */
.as-page { padding-bottom: 0; }

/* ── Account tabs ─────────────────────────────────────────────────────── */

.as-tabs {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.as-tabs__in {
  display: flex;
  gap: 2px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.as-tabs__in::-webkit-scrollbar { display: none; }
@media (min-width: 1040px) { .as-tabs__in { padding: 0 28px; } }

.as-tab {
  position: relative;
  flex: none;
  padding: 16px 14px;
  font-size: 15px; font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.as-tab:hover  { color: var(--ink-2); }
.as-tab.is-on  { color: var(--brand-deep); }
.as-tab.is-on::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* ── Top block ────────────────────────────────────────────────────────── */

.as-top { display: grid; gap: 18px; }
@media (min-width: 1040px) {
  .as-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; }
}

.as-bal {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-raised);
}
@media (min-width: 1040px) { .as-bal { padding: 30px 28px 26px; } }

/* One soft light behind the number. Sits under the content and never
   animates, so it costs nothing while scrolling. */
.as-bal__glow {
  position: absolute;
  top: -70px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-wash), transparent 68%);
  pointer-events: none;
}

.as-bal__head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.as-bal__label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-3);
}
.as-eye {
  border: 0; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 14px; padding: 0;
}
.as-eye:hover { color: var(--ink-2); }
.as-bal__cur {
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-inset);
  font: 600 11.5px 'JetBrains Mono', monospace; color: var(--ink-3);
}

.as-bal__big {
  position: relative;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; color: var(--ink);
  line-height: 1;
}
.as-bal__int { font-size: 42px; }
.as-bal__dec { font-size: 27px; color: var(--ink-3); }
@media (min-width: 1040px) {
  .as-bal__int { font-size: 54px; }
  .as-bal__dec { font-size: 32px; }
}

.as-bal__sub {
  position: relative;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: var(--ink-3);
}
.as-bal__pnl { position: relative; margin-top: 12px; }
.as-pnl {
  display: inline-block;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bg-inset);
  font: 600 12.5px 'JetBrains Mono', monospace; color: var(--ink-2);
}

/* Balances hide together, so nothing is left readable over a shoulder. */
.as-page.is-hidden [data-as-hide] {
  filter: blur(9px);
  user-select: none;
}

.as-split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.as-split__k { display: block; font-size: 12.5px; color: var(--ink-3); }
.as-split__v {
  display: block; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 600; color: var(--ink);
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.as-acts {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  margin-top: 22px;
}
.as-act {
  display: grid; justify-items: center; gap: 8px;
  padding: 0; border: 0;
  background: none; cursor: pointer;
  color: var(--ink-2);
  font: 600 12px 'Inter', system-ui, sans-serif;
  transition: color .15s ease;
}
.as-act:hover { color: var(--brand-deep); }
.as-act__i {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-inset);
  color: var(--ink);
  transition: background-color .15s ease, transform .12s ease;
}
.as-act:hover .as-act__i { background: var(--brand-wash); transform: translateY(-2px); }
.as-act:first-child .as-act__i { background: var(--brand); color: #fff; }

@media (min-width: 1040px) {
  /* Labelled buttons in a row: there is room for words, so use them. */
  .as-acts { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .as-act {
    grid-auto-flow: column;
    justify-items: start;
    justify-content: start;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    font-size: 14px;
  }
  .as-act:hover { border-color: var(--brand); }
  .as-act__i { width: 38px; height: 38px; }
}

/* ── Breakdown ────────────────────────────────────────────────────────── */

.as-break {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-raised);
}
.as-break__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.as-break__t {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.as-break__n { font-size: 12.5px; color: var(--ink-faint); }

.as-break__body {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.as-donut { position: relative; width: 110px; height: 110px; }
.as-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.as-donut__t { fill: none; stroke: var(--bg-inset); stroke-width: 13; }
.as-donut__c {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 700; color: var(--ink-3);
}

.as-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.as-legend__i { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.as-legend__l { flex: 1; min-width: 0; color: var(--ink-2);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-legend__v { font-family: 'JetBrains Mono', monospace; color: var(--ink-3); }

.as-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.as-dot--0 { background: var(--brand); }
.as-dot--1 { background: var(--accent, #7c5cff); }
.as-dot--2 { background: var(--up); }
.as-dot--3 { background: var(--warn); }

/* ── Holdings ─────────────────────────────────────────────────────────── */

/*
 * The older .as-hold pair that used to sit here is gone.
 *
 * Two rule sets for the same block were fighting: the first added a 22px top
 * margin and 16px of bar padding, the second added 18px of card padding on
 * top of that. Together they left the wide gap between the filter row and the
 * first coin. One definition now, further down this file.
 */

.as-seg {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--bg-inset);
}
.as-seg__b {
  padding: 8px 16px; border: 0; border-radius: 8px;
  background: none; color: var(--ink-3);
  font: 600 13px 'Inter', sans-serif; cursor: pointer;
}
.as-seg__b.is-on { background: var(--bg-raised); color: var(--ink); }

.as-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3); cursor: pointer;
}
.as-check input { width: 16px; height: 16px; accent-color: var(--brand); }

.as-search { flex: 1 1 160px; min-width: 0; }
.as-search input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .as-search input { font-size: 16px; } }
.as-search input:focus { outline: none; border-color: var(--brand); }

.as-list { max-height: 620px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.as-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
.as-row--head { display: none; }
.as-col { display: none; }

.as-asset { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-asset img {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; background: var(--bg-inset);
}
.as-asset__s { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.as-asset__n {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.as-num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.as-amt { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.as-val { font-size: 12.5px; color: var(--ink-3); }
.as-price  { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--ink-2); }
.as-change { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.as-change.up   { color: var(--up); }
.as-change.down { color: var(--down); }
.as-change.flat { color: var(--ink-faint); }

/* On a phone the amount and its value stack in one right-hand column. */
@media (max-width: 767px) {
  .as-row { grid-template-columns: minmax(0, 1fr) auto; }
  .as-amt, .as-val { display: block; }
  .as-val { margin-top: 2px; }
}

/* From tablet up it becomes a table, with the columns a phone cannot hold. */
@media (min-width: 768px) {
  .as-row {
    grid-template-columns: minmax(0, 2fr) 120px 90px 130px 130px;
  }
  .as-col { display: block; }
  .as-row--head {
    display: grid;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .as-row:hover { background: var(--bg-sunk); }
}

@media (prefers-reduced-motion: reduce) {
  .as-act, .as-act__i { transition: none; }
}

/* ==========================================================================
   TRANSACTIONS
   --------------------------------------------------------------------------
   One page, three tabs, replacing the separate history and devices screens.

   Phone    rows: what it was, how much, and a status pill. Date and status
            columns fold away, because four columns on a 360px screen means
            four unreadable ones.
   Desktop  a real table with date and status of their own, and the receipt
            opens as a centred panel rather than a full-height sheet.
   ========================================================================== */

.tx-page { padding-bottom: 80px; }

.tx-tabs {
  display: flex; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tx-tabs::-webkit-scrollbar { display: none; }

.tx-tab {
  position: relative;
  flex: none;
  padding: 13px 16px;
  font-size: 15px; font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.tx-tab:hover { color: var(--ink-2); }
.tx-tab.is-on { color: var(--ink); }
.tx-tab.is-on::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* ── Filters ──────────────────────────────────────────────────────────── */

.tx-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.tx-search { flex: 1 1 220px; min-width: 0; }
.tx-search input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .tx-search input { font-size: 16px; } }
.tx-search input:focus { outline: none; border-color: var(--brand); }

.tx-filters select { min-width: 130px; }

.tx-apply, .tx-clear {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--ink-2);
  font: 600 14px 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.tx-apply { background: var(--brand); border-color: var(--brand); color: #fff; }
.tx-clear:hover { border-color: var(--down); color: var(--down); }

/* ── Rows ─────────────────────────────────────────────────────────────── */

.tx-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  overflow: hidden;
}

.tx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}
.tx-row:hover { background: var(--bg-sunk); }
.tx-row:last-child { border-bottom: 0; }
.tx-row--head { display: none; cursor: default; }
.tx-col { display: none; }

.tx-what { display: flex; align-items: center; gap: 12px; min-width: 0; }

.tx-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--bg-inset);
  color: var(--ink-2);
}
.tx-ico--in  { background: rgba(0,168,107,.12); color: var(--up); }
.tx-ico--out { background: rgba(229,56,79,.12); color: var(--down); }

.tx-type {
  display: block;
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  text-transform: capitalize;
}
.tx-coin {
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: none;
}
.tx-sub {
  display: block; margin-top: 3px;
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-date { font-size: 13px; color: var(--ink-3); }

.tx-num { text-align: right; }
.tx-amt {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.tx-amt--in  { color: var(--up); }
.tx-amt--out { color: var(--down); }
.tx-amt2 {
  display: block; margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-3);
}

.tx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.tx-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tx-pill--ok   { background: rgba(0,168,107,.12); color: var(--up); }
.tx-pill--bad  { background: rgba(229,56,79,.12); color: var(--down); }
.tx-pill--wait { background: rgba(217,119,6,.12); color: var(--warn); }
.tx-pill--flat { background: var(--bg-inset);     color: var(--ink-3); }

@media (min-width: 820px) {
  .tx-row { grid-template-columns: minmax(0, 2fr) 190px 150px 170px; padding: 15px 18px; }
  .tx-col { display: block; }
  .tx-row--head {
    display: grid;
    padding: 12px 18px;
    background: var(--bg-sunk);
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .tx-row--head .tx-num { text-align: right; }
}

/* ── Devices ──────────────────────────────────────────────────────────── */

.tx-devs { display: grid; gap: 12px; }
@media (min-width: 820px) { .tx-devs { grid-template-columns: 1fr 1fr; } }

.tx-dev {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  animation: u2u-in .3s ease backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tx-dev__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.tx-dev__name { font-weight: 600; font-size: 15px; color: var(--ink); }

.tx-dev__grid { display: grid; gap: 10px; margin: 0; }
.tx-dev__grid > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.tx-dev__grid dt { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.tx-dev__grid dd {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── Receipt ──────────────────────────────────────────────────────────── */

.txr { position: fixed; inset: 0; z-index: 9998; }
.txr__back { position: absolute; inset: 0; background: rgba(0,0,0,.62); animation: exp-fade .16s ease; }

.txr__box {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: exp-up .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 820px) {
  .txr__box {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(520px, 92vw);
    max-height: 84vh;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    animation: exp-pop .16s ease;
  }
}

.txr__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.txr__t {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.txr__x {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 20px; line-height: 1; cursor: pointer;
}

.txr__body { overflow-y: auto; padding: 22px 20px; -webkit-overflow-scrolling: touch; }

.txr__hero { text-align: center; margin-bottom: 22px; }
.txr__amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
}
.txr__amt2 { margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ink-3); }
.txr__status {
  display: inline-block; margin-top: 12px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--bg-inset);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}

.txr__rows { margin: 0; display: grid; }
.txr__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.txr__row:last-child { border-bottom: 0; }
.txr__row dt { margin: 0; font-size: 13px; color: var(--ink-3); flex: none; }
.txr__row dd {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.txr__proof {
  display: block; margin-top: 18px;
  padding: 13px; border-radius: 10px;
  background: var(--bg-inset);
  color: var(--brand-deep);
  font-size: 14px; font-weight: 600;
  text-align: center; text-decoration: none;
}

.txr__foot {
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .txr__box, .txr__back, .tx-dev { animation: none; }
}

/* ==========================================================================
   DEPOSIT
   ========================================================================== */

.dp-page { padding-bottom: 90px; }

.dp-routes { display: grid; gap: 12px; }
@media (min-width: 820px) { .dp-routes { grid-template-columns: 1fr 1fr; } }

.dp-route {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg-raised);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .13s ease;
}
.dp-route:hover  { border-color: var(--brand); transform: translateY(-1px); }
.dp-route.is-soft { opacity: .62; }
.dp-route__i {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--bg-inset); color: var(--ink);
}
.dp-route__t { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.dp-route__d { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.dp-route__c { color: var(--ink-faint); font-size: 19px; }

.dp-pickrow { display: grid; gap: 14px; padding: 18px; }
@media (min-width: 620px) { .dp-pickrow { grid-template-columns: 1fr 1fr; } }
.dp-pick .ex-label { display: block; margin-bottom: 7px; }

.dp-addr { padding-bottom: 6px; }
.dp-qr { display: grid; place-items: center; padding: 4px 18px 18px; }
.dp-qr__img {
  width: 100%; max-width: 220px; height: auto;
  border-radius: 12px; background: #fff; padding: 10px;
}

.dp-loading {
  display: flex; align-items: center; gap: 11px; justify-content: center;
  padding: 34px 18px; color: var(--ink-3); font-size: 14px;
}
.dp-spin {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dp-spin .7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }

/* ── Identity card ────────────────────────────────────────────────────── */

.dpc {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-sunk));
  overflow: hidden;
}
.dpc__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.dpc__brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.dpc__kind {
  padding: 4px 11px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand-deep);
  font: 700 11px 'Inter', sans-serif; letter-spacing: .05em; text-transform: uppercase;
}

.dpc__who { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.dpc__av {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; background: var(--bg-inset);
  display: grid; place-items: center;
  font: 700 18px 'Inter', sans-serif; color: var(--ink-3);
}
.dpc__name { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.dpc__verified { display: block; margin-top: 2px; font-size: 12.5px; color: var(--up); }

.dpc__qr { display: grid; place-items: center; margin-bottom: 20px; }
.dpc__qrimg {
  width: 100%; max-width: 200px; height: auto;
  border-radius: 12px; background: #fff; padding: 10px;
}

.dpc__tin { text-align: center; margin-bottom: 22px; }
.dpc__tinlabel { display: block; font-size: 12px; color: var(--ink-3); }
.dpc__tinvalue {
  display: block; margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 21px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
  overflow-wrap: anywhere;
}

.dpc__rows { margin: 0; display: grid; }
.dpc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.dpc__row dt { margin: 0; font-size: 13px; color: var(--ink-3); }
.dpc__row dd {
  margin: 0; font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; color: var(--ink); text-align: right; overflow-wrap: anywhere;
}
.dpc__foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-faint); }

.dp-copies { display: grid; gap: 8px; margin-top: 18px; }
.dp-copy {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
  cursor: pointer; text-align: left;
}
.dp-copy:hover { border-color: var(--brand); }
.dp-copy__k { font-size: 12.5px; color: var(--ink-3); }
.dp-copy__v {
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-copy__a { font: 600 12px 'Inter', sans-serif; color: var(--brand-deep); }

.dp-cardacts { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 560px) { .dp-cardacts { grid-template-columns: 1fr 1fr; } }
.ex-go--ghost {
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line);
}

/* ── Code ─────────────────────────────────────────────────────────────── */

.dp-codein { display: flex; gap: 8px; }
.dp-codebox {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px; letter-spacing: .16em; text-align: center; text-transform: uppercase;
}
.dp-scan {
  width: 52px; flex: none;
  border: 1px solid var(--line); border-radius: var(--ex-cut);
  background: var(--bg-raised); color: var(--ink-2);
  cursor: pointer; display: grid; place-items: center;
}
.dp-scan:hover { border-color: var(--brand); color: var(--brand-deep); }

.dp-found { padding: 0 18px 6px; }
.dp-found__coin {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; margin-bottom: 14px;
  border-radius: var(--ex-cut);
  background: var(--bg-inset);
}
.dp-found__coin img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.dp-found__amt {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.dp-found__name { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }

.dp-agree {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 18px 4px; padding: 14px;
  border-radius: var(--ex-cut); background: var(--bg-inset);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  cursor: pointer;
}
.dp-agree input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.dp-agree a { color: var(--brand-deep); font-weight: 600; }

.dp-codebig {
  font-family: 'JetBrains Mono', monospace;
  font-size: 27px; font-weight: 700; letter-spacing: .2em;
  color: var(--ink); overflow-wrap: anywhere;
}
.dp-codeqr { display: grid; place-items: center; padding: 16px 0 0; }

.dp-codes { display: grid; gap: 12px; }
@media (min-width: 820px) { .dp-codes { grid-template-columns: 1fr 1fr; } }

.dp-codecard {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg-raised);
}
.dp-codecard__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.dp-codecard__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ink);
}
.dp-codecard__amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.dp-codecard__amt span { font: 400 12.5px 'Inter', sans-serif; color: var(--ink-3); margin-left: 6px; }
.dp-codecard__acts { display: flex; gap: 8px; margin-top: 14px; }
.dp-cancel:hover { color: var(--down); border-color: var(--down); }

/* ── Scanner ──────────────────────────────────────────────────────────── */

.dp-scanner { position: fixed; inset: 0; z-index: 9999; background: #000; }
.dp-scanner video { width: 100%; height: 100%; object-fit: cover; }
.dp-scanner__frame {
  position: absolute; left: 50%; top: 50%;
  width: min(260px, 72vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid var(--brand);
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}
.dp-scanner__x {
  position: absolute; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 13px 30px;
  border: 0; border-radius: 999px;
  background: #fff; color: #111;
  font: 600 15px 'Inter', sans-serif; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) { .dp-spin { animation-duration: 2s; } }

/* ==========================================================================
   CODE CARD
   --------------------------------------------------------------------------
   Laid out like the app's dialog: coin badge, heading, the QR on a white
   tile, the code, then the date and the Zelencio mark along the foot.

   The white tile behind the QR is not decoration. A dark QR on a dark card
   is unreadable to half the scanners out there, so the tile stays white in
   every theme.
   ========================================================================== */

.zcard {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, var(--bg-raised), var(--bg-sunk));
  text-align: center;
}

.zcard__head {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: var(--bg-inset);
}
.zcard__coin { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.zcard__sym  { font-weight: 700; font-size: 15px; color: var(--ink); }

.zcard__title {
  margin: 18px 0 20px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink);
}

.zcard__qr { display: grid; place-items: center; }
.zcard__qrimg {
  width: 100%; max-width: 230px; height: auto;
  padding: 14px;
  border-radius: 16px;
  background: #fff;           /* stays white in every theme, deliberately */
}
.zcard__cap {
  margin-top: 12px;
  font-size: 13px; font-style: italic; color: var(--ink-3);
}

.zcard__label {
  margin-top: 22px;
  text-align: left;
  font-weight: 700; font-size: 15px; color: var(--ink);
}
.zcard__code {
  margin-top: 8px;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zcard__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}
.zcard__date  { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.zcard__brand {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
  white-space: nowrap;
}

/* ── Amount with MAX, and the USD readout ─────────────────────────────── */

.dp-amtwrap { position: relative; }
.dp-max {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--brand-deep);
  font: 700 11.5px 'Inter', sans-serif; cursor: pointer;
}
.dp-max:hover { border-color: var(--brand); }

.dp-usd {
  margin-top: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; color: var(--ink-2);
}

/* ==========================================================================
   TRANSFER
   ========================================================================== */

.tf-page { padding-bottom: 90px; }

.tf-pair { position: relative; padding: 18px 18px 8px; }

.tf-wallet {
  display: block; width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.tf-wallet:hover { border-color: var(--ink-faint); }
.tf-wallet + .tf-wallet { margin-top: 10px; }
.tf-wallet__k { display: block; font-size: 12px; color: var(--ink-3); }
.tf-wallet__n { display: block; margin-top: 5px; font-weight: 600; font-size: 16px; color: var(--ink); }
.tf-wallet__d {
  display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--ink-3);
}

/* Sits between the two, because reversing a pair is the common action. */
.tf-swap {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 42px; height: 42px;
  border: 4px solid var(--bg-raised);
  border-radius: 50%;
  background: var(--bg-inset);
  color: var(--ink-2);
  font-size: 15px; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s ease, color .15s ease;
}
.tf-swap:hover { color: var(--brand); }
.tf-swap.spin  { transform: translate(-50%, -50%) rotate(180deg); }

/* ==========================================================================
   SETTINGS
   ========================================================================== */

.st-page { padding-bottom: 90px; }

.st-card {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
}
.st-card__head {
  margin-bottom: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── Identity ─────────────────────────────────────────────────────────── */

.st-id { display: flex; align-items: center; gap: 16px; }

.st-avatar {
  position: relative;
  width: 72px; height: 72px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-inset);
  cursor: pointer;
  display: grid; place-items: center;
}
.st-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-avatar__none { font: 700 26px 'Inter', sans-serif; color: var(--ink-3); }
.st-avatar__edit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 0;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font: 600 10px 'Inter', sans-serif;
  text-align: center;
  text-transform: uppercase; letter-spacing: .05em;
}
.st-avatar.is-busy { opacity: .55; }

.st-id__name { font-weight: 700; font-size: 17px; color: var(--ink); }
.st-id__mail {
  margin-top: 3px; font-size: 13.5px; color: var(--ink-3);
  overflow-wrap: anywhere;
}
.st-id__tags { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }

/* ── Security level ───────────────────────────────────────────────────── */

.st-level__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.st-level__k { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

.st-level__bar {
  height: 7px; border-radius: 4px;
  background: var(--bg-inset);
  overflow: hidden;
}
.st-level__fill {
  display: block; height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.st-level__fill--ok   { background: var(--up); }
.st-level__fill--wait { background: var(--warn); }
.st-level__fill--bad  { background: var(--down); }

.st-level__d { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* ── Rows ─────────────────────────────────────────────────────────────── */

.st-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.st-row:last-of-type { border-bottom: 0; }
.st-row__b { min-width: 0; }
.st-row__t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.st-row__d { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.st-btn {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink-2);
  font: 600 13px 'Inter', sans-serif;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.st-btn:hover      { border-color: var(--brand); color: var(--brand-deep); }
.st-btn--off:hover { border-color: var(--down);  color: var(--down); }

/* ── Switch ───────────────────────────────────────────────────────────── */

.st-switch { position: relative; flex: none; width: 48px; height: 28px; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.st-switch span {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--bg-inset);
  transition: background-color .18s ease;
}
.st-switch span::before {
  content: '';
  position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform .18s ease, background-color .18s ease;
}
.st-switch input:checked + span { background: var(--brand); }
.st-switch input:checked + span::before { transform: translateX(20px); background: #fff; }
.st-switch input:disabled + span { opacity: .5; }

/* ── Key/value and links ──────────────────────────────────────────────── */

.st-kv { display: grid; margin-top: 6px; }
.st-kv__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.st-kv__row:last-child { border-bottom: 0; }
.st-kv__k { font-size: 13px; color: var(--ink-3); }
.st-kv__v {
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--ink);
  text-align: right; overflow-wrap: anywhere;
}

.st-links { display: grid; margin-top: 12px; }
.st-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: 14.5px; text-decoration: none;
}
.st-link:hover { color: var(--ink); }
.st-link__c { color: var(--ink-faint); font-size: 17px; }

.st-out, .st-danger {
  display: block;
  padding: 14px;
  border-radius: 11px;
  font: 600 15px 'Inter', sans-serif;
  text-align: center; text-decoration: none;
}
.st-out    { background: var(--bg-inset); color: var(--ink); }
.st-out:hover { background: var(--bg-sunk); }
.st-danger { margin-top: 9px; color: var(--down); }
.st-danger:hover { background: rgba(229, 56, 79, .08); }

@media (prefers-reduced-motion: reduce) {
  .tf-swap, .st-switch span, .st-switch span::before, .st-level__fill { transition: none; }
}

/* ==========================================================================
   CONFIRM TRANSACTION
   --------------------------------------------------------------------------
   The sheet shown before a code is created: the figures, the terms, and a
   checkbox that has to be ticked before the button works.

   The fee is red and the receive amount green on purpose. They are the two
   numbers somebody actually checks, and reading them at a glance matters more
   here than a tidy single colour.
   ========================================================================== */

.zcf { position: fixed; inset: 0; z-index: 9999; }
.zcf__back { position: absolute; inset: 0; background: rgba(0,0,0,.66); animation: exp-fade .16s ease; }

.zcf__box {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  animation: exp-up .24s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 720px) {
  .zcf__box {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(480px, 92vw);
    transform: translate(-50%, -50%);
    border-radius: 20px;
    animation: exp-pop .16s ease;
  }
}

.zcf__t {
  margin-bottom: 20px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 21px; font-weight: 700; color: var(--ink);
  text-align: center;
}

.zcf__rows {
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-inset);
}
.zcf__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0;
}
.zcf__row span { font-size: 13.5px; color: var(--ink-3); }
.zcf__row b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  text-align: right; overflow-wrap: anywhere;
}
.zcf__fee { color: var(--down) !important; }
.zcf__get { color: var(--up)   !important; }

.zcf__agree {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  cursor: pointer;
}
.zcf__agree input {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: var(--brand);
}

.zcf__go { width: 100%; }
.zcf__x {
  display: block; width: 100%;
  margin-top: 10px; padding: 13px;
  border: 0; border-radius: var(--ex-cut);
  background: none; color: var(--ink-3);
  font: 600 14.5px 'Inter', sans-serif; cursor: pointer;
}
.zcf__x:hover { color: var(--ink); }

.zcf__note {
  margin-top: 14px;
  font-size: 12px; color: var(--ink-faint); text-align: center;
}

@media (prefers-reduced-motion: reduce) { .zcf__box, .zcf__back { animation: none; } }

/* Fields inside a confirm sheet — used by the password and email forms. */
.stf { display: grid; gap: 14px; margin-bottom: 16px; }
.stf__f { display: block; }
.stf__f span {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.stf__f input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--ex-cut);
  background: var(--bg);
  color: var(--ink);
  font: 400 16px 'Inter', system-ui, sans-serif;
}
.stf__f input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.stf__err { margin-bottom: 14px; }

/* ==========================================================================
   U2U ADS
   --------------------------------------------------------------------------
   Phone: each advert is a card — trader, price, then the action.
   Desktop: a table, because comparing prices across traders is the entire
   reason somebody is on this page and rows compare far better than cards.
   ========================================================================== */

.ua-page { padding-bottom: 90px; }

.ua-list {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  overflow: hidden;
}

.ua-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ua-row:last-child { border-bottom: 0; }
.ua-row--head { display: none; }
.ua-col { display: none; }

.ua-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ua-av {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-inset);
  font: 700 15px 'Inter', sans-serif; color: var(--ink-2);
}
.ua-who__n { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ua-who__d { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }

.ua-price__v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.ua-price__c { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }

.ua-lim__a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; color: var(--ink);
}
.ua-lim__l { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }

.ua-tag {
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-inset);
  font-size: 11.5px; color: var(--ink-2);
}

.ua-btn {
  padding: 10px 20px;
  border: 0; border-radius: 9px;
  background: var(--up); color: #fff;
  font: 700 13.5px 'Inter', sans-serif;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
.ua-btn--sell { background: var(--down); }
.ua-btn:hover { filter: brightness(1.07); }

/* On a phone the price and limits sit under the trader rather than beside. */
@media (max-width: 819px) {
  .ua-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .ua-price, .ua-lim { display: block; }
  .ua-price { grid-column: 1; }
  .ua-go    { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (min-width: 820px) {
  .ua-row {
    grid-template-columns: minmax(0, 1.6fr) 150px 190px 170px 130px;
    padding: 16px 18px;
  }
  .ua-col { display: block; }
  .ua-row--head {
    display: grid;
    padding: 12px 18px;
    background: var(--bg-sunk);
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .ua-go { text-align: right; }
}

/* ── Posting ──────────────────────────────────────────────────────────── */

.ua-ptypes { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-ptype {
  flex: 1 1 auto; min-width: 92px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-2);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ua-ptype:hover { border-color: var(--ink-faint); }
.ua-ptype.is-on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); }

/* ── My adverts ───────────────────────────────────────────────────────── */

.ua-mine { display: grid; gap: 12px; }
@media (min-width: 820px) { .ua-mine { grid-template-columns: 1fr 1fr; } }

.ua-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg-raised);
}
.ua-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.ua-side {
  padding: 4px 11px; border-radius: 999px;
  font: 700 11.5px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
}
.ua-side--sell { background: rgba(229,56,79,.12); color: var(--down); }
.ua-side--buy  { background: rgba(0,168,107,.12); color: var(--up); }

.ua-card__amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.ua-card__amt span { font: 400 12.5px 'Inter', sans-serif; color: var(--ink-3); margin-left: 6px; }

/* The filled arc on the donut — how much of the total is actually spendable,
   which is the question somebody looking at a locked balance is asking. */
.as-donut__f {
  fill: none;
  stroke: var(--brand);
  stroke-width: 13;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset .5s ease;
}
@media (prefers-reduced-motion: reduce) { .as-donut__f { transition: none; } }

/* On a phone the value sits under the amount rather than in its own column. */
@media (max-width: 767px) {
  .as-val { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
}

/* The USD value under a coin balance in a picker. */
.exp__usd {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 10.5px;
  color: var(--ink-3);
}

/* ── Assets: currency switcher, in-use line, account cards ─────────────── */

.as-cx {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink-2);
  font: 600 12.5px 'Inter', sans-serif; cursor: pointer;
}
.as-cx:hover { border-color: var(--brand); color: var(--brand-deep); }
.as-cx__c { font-size: 10px; color: var(--ink-faint); }

.as-inuse {
  margin-top: 10px;
  font-size: 13px; color: var(--ink-3);
}
.as-inuse b {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; color: var(--ink);
}
.as-inuse small { font-size: 11px; color: var(--ink-3); }

.as-refresh {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.as-refreshb {
  padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink);
  font: 600 13.5px 'Inter', sans-serif; cursor: pointer;
}
.as-refreshb:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }
.as-refreshb:disabled { opacity: .6; cursor: default; }

/* One card per account on the overview — the only list that belongs there. */
.as-accts { display: grid; gap: 10px; margin-top: 16px; }

.as-acct {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 14px;
  gap: 13px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .13s ease;
}
.as-acct:hover { border-color: var(--brand); transform: translateY(-1px); }

.as-acct__i { width: 12px; height: 12px; border-radius: 3px; }
.as-acct__n { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.as-acct__e { display: block; margin-top: 2px; font-size: 12px; color: var(--brand-deep); }
.as-acct__v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.as-acct__c { color: var(--ink-faint); font-size: 17px; }

.as-pnl.up   { color: var(--up); }
.as-pnl.down { color: var(--down); }

/* ==========================================================================
   ASSETS — CORRECTED
   --------------------------------------------------------------------------
   The account colours are fixed, and the same three places use each one: the
   donut arc, the legend dot, and the account card's marker. A chart whose
   colours do not match its legend is worse than no chart.
   ========================================================================== */

.as-page {
  --acct-0: #00c2ff;   /* Crypto   — the brand cyan */
  --acct-1: #2f5cff;   /* Zelencio — indigo */
  --acct-2: #00c176;   /* Earn     — green */
  --acct-3: #f5a524;   /* Security — amber */
}

.as-dot--0, .as-acct__i.as-dot--0 { background: var(--acct-0); }
.as-dot--1, .as-acct__i.as-dot--1 { background: var(--acct-1); }
.as-dot--2, .as-acct__i.as-dot--2 { background: var(--acct-2); }
.as-dot--3, .as-acct__i.as-dot--3 { background: var(--acct-3); }

/* ── The donut ────────────────────────────────────────────────────────── */

.as-donut { position: relative; width: 132px; height: 132px; flex: none; }
.as-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.as-donut__t {
  fill: none;
  stroke: var(--bg-inset);
  stroke-width: 14;
}

.as-donut__seg {
  fill: none;
  stroke-width: 14;
  transition: stroke-dasharray .45s ease, stroke-dashoffset .45s ease, opacity .3s ease;
}
.as-seg--0 { stroke: var(--acct-0); }
.as-seg--1 { stroke: var(--acct-1); }
.as-seg--2 { stroke: var(--acct-2); }
.as-seg--3 { stroke: var(--acct-3); }

.as-donut__c {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 2px;
  text-align: center;
}
.as-donut__cv {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 19px; font-weight: 700; color: var(--ink);
}
.as-donut__ck { font-size: 10.5px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { .as-donut__seg { transition: none; } }

/* ── Headline ─────────────────────────────────────────────────────────── */

.as-bal { padding: 22px 20px 20px; margin-bottom: 16px; }

.as-bal__approx { color: var(--ink-3); margin-right: 2px; }

.as-bal__btc {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; color: var(--ink-3);
}
.as-bal__pnl { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

.as-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.as-split__k { display: block; font-size: 12.5px; color: var(--ink-3); }
.as-split__v {
  display: block; margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px; font-weight: 700; color: var(--ink);
}
.as-split__v small { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }

/* ── Breathing room ───────────────────────────────────────────────────────
   The balance card and the activity card were touching, which is what made
   this look unfinished. Each block is its own card with real space between. */

.as-break {
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-raised);
}
.as-break__head { margin-bottom: 18px; }
.as-break__t {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.as-break__body {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.as-legend { flex: 1 1 210px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.as-legend__i { display: flex; align-items: center; gap: 10px; }
.as-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.as-legend__l { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.as-legend__v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}

.as-hold {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-raised);
}
.as-hold__bar {
  display: grid; gap: 12px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) {
  .as-hold__bar { grid-template-columns: 1fr auto; align-items: center; }
}

/* The fiat price under the USDT price. */
.as-price { display: block; }
.as-price__f {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 400; color: var(--ink-3);
}

/* A nudge as the page hands over, so a swipe feels answered. */
.as-page.is-swipe-left  { transform: translateX(-14px); opacity: .82; }
.as-page.is-swipe-right { transform: translateX(14px);  opacity: .82; }
.as-page { transition: transform .09s ease, opacity .09s ease; }

@media (prefers-reduced-motion: reduce) {
  .as-page, .as-page.is-swipe-left, .as-page.is-swipe-right {
    transition: none; transform: none; opacity: 1;
  }
}


/* ── Coin rows: balance over value ─────────────────────────────────────────
   Two columns, not five. The market price and 24h change are gone from here
   on purpose — this screen answers "how much do I have", and a market price
   beside a holding answers a question nobody asked on this page. */

.as-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.as-row:last-child { border-bottom: 0; }
.as-row--head {
  padding: 10px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}

.as-amt {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.as-val {
  display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-3);
}

/* Positive is CYAN, matching the app — #00d4ff, not green. */
.as-pnl {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--bg-inset);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
}
.as-pnl.up   { color: #00d4ff; }
.as-pnl.down { color: #ff4444; }
.as-pnl.flat { color: var(--ink-3); }

/* ── Tabs are buttons now, not links ───────────────────────────────────── */
.as-tab {
  border: 0; background: none; cursor: pointer;
  font-family: inherit;
}

/* The overview block is shown and hidden as the tab changes, so it needs to
   respect [hidden] against the display rule that would otherwise win. */
.as-break[hidden] { display: none; }

/* The account cards are buttons too, since they switch tab in place. */
.as-acct {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}