/* Voltex — Binance-style exchange UI
   Palette matches Binance's published brand colours: Bright Sun #FCD535,
   vivid yellow #F0B90B, Shark #1E2329, on the #181A20 app background. */

:root {
  --bg: #181a20;          /* app background */
  --bg-2: #0b0e11;        /* deepest layer / inputs */
  --card: #1e2329;        /* Shark — cards, header */
  --card-2: #2b3139;      /* raised / hover */
  --line: #2b3139;
  --line-soft: #252930;

  --text: #eaecef;        /* primary text */
  --muted: #848e9c;       /* secondary text */
  --faint: #5e6673;

  --yellow: #fcd535;      /* Bright Sun — accent, and readable AS text on dark */
  --yellow-fill: #fcd535; /* button fills — stays bright in both themes */
  --yellow-2: #f0b90b;    /* vivid yellow — hover/press */
  --yellow-dim: rgba(252, 213, 53, 0.1);
  --on-yellow: #181a20;

  --up: #0ecb81;          /* buy */
  --up-dim: rgba(14, 203, 129, 0.12);
  --down: #f6465d;        /* sell */
  --down-dim: rgba(246, 70, 93, 0.12);
  --info: #4a9eff;
  --info-dim: rgba(74, 158, 255, 0.12);

  --radius: 8px;
  --radius-sm: 6px;
  --nav-h: 60px;
  --shadow: none;

  /* Payment-provider marker colours — each bank/wallet gets its own so users
     recognise it instantly. Approximations of each brand; adjust freely. */
  --pay-telebirr:  #00a94f;  /* ethio telecom green */
  --pay-cbe:       #7b2d8e;  /* CBE purple */
  --pay-cbe-birr:  #a05ac0;
  --pay-awash:     #f26522;  /* Awash orange */
  --pay-dashen:    #0b63ce;  /* Dashen blue */
  --pay-abyssinia: #c0392b;  /* Bank of Abyssinia red */
  --pay-mpesa:     #e60000;  /* Safaricom red */
  --pay-amole:     #00b5c8;  /* Amole cyan */
  --pay-other:     #848e9c;

  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 14px;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); }
a { color: var(--yellow); text-decoration: none; }
a:hover { color: var(--yellow-2); }

#app { min-height: 100%; display: flex; flex-direction: column; }

/* ---------------- header ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; color: #fff;
}
.brand img { width: 28px; height: 28px; border-radius: 6px; }
.topbar .spacer { flex: 1; }

.top-btn {
  padding: 7px 14px; border-radius: var(--radius); font-weight: 500; font-size: 0.87rem;
  color: var(--text); white-space: nowrap; transition: color 0.15s, background 0.15s;
}
.top-btn:hover { color: var(--yellow); }
.top-btn.primary {
  background: var(--yellow-fill); color: var(--on-yellow); font-weight: 600;
}
.top-btn.primary:hover { background: var(--yellow-2); color: var(--on-yellow); }
.avatar-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card-2); color: var(--yellow);
  font-weight: 700; display: grid; place-items: center; font-size: 0.85rem;
}

/* ---------------- layout ---------------- */
main {
  flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { main { padding-bottom: 40px; } }

h1.page { font-size: 1.3rem; font-weight: 600; margin-bottom: 16px; }
.sub { color: var(--muted); font-size: 0.87rem; }

/* ---------------- bottom nav ---------------- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around;
  background: var(--bg); border-top: 1px solid var(--line-soft);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--faint); font-size: 0.64rem; font-weight: 500;
  padding: 4px 10px; min-width: 56px;
}
.bottomnav a.active { color: var(--yellow); }
.bottomnav a svg { width: 21px; height: 21px; }

/* Count of orders with a clock running, on the icon it belongs to. Red
   because it is not decoration: every one of those is somebody waiting, and
   the window they are waiting in expires. */
.nav-ico { position: relative; display: inline-flex; line-height: 0; }
.nav-badge {
  position: absolute; top: -5px; left: 11px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--down); color: #fff;
  font-style: normal; font-size: 0.6rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
  /* A ring in the bar's own colour keeps it readable where it overlaps the
     icon strokes underneath. */
  box-shadow: 0 0 0 2px var(--bg);
}
.desktopnav .nav-badge {
  position: static; display: inline-grid; margin-left: 6px; box-shadow: none;
  vertical-align: 1px;
}
@media (min-width: 900px) { .bottomnav { display: none; } }

.desktopnav { display: none; gap: 4px; }
@media (min-width: 900px) {
  .desktopnav { display: flex; }
  .desktopnav a {
    padding: 8px 12px; color: var(--muted); font-weight: 500; font-size: 0.9rem;
    transition: color 0.15s;
  }
  .desktopnav a:hover, .desktopnav a.active { color: var(--yellow); }
}

/* ---------------- hero / stats ---------------- */
.hero { margin: 4px 0 18px; }
.hero h2 { font-size: 1.6rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.hero h2 span { color: var(--yellow); }
.hero .tag { color: var(--muted); font-size: 0.89rem; margin-top: 6px; }

.trustbar { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.trust {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.79rem; font-weight: 500; color: var(--muted);
}
.trust svg { width: 15px; height: 15px; color: var(--yellow); }

.statrow { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.statrow::-webkit-scrollbar { display: none; }
.stat {
  flex: 1; min-width: 104px;
  background: var(--card); border-radius: var(--radius); padding: 11px 13px;
}
.stat .v { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.stat .k { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* ---------------- Binance-style buy/sell tabs ---------------- */
.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px;
}
.tabs button {
  padding: 11px 22px; font-weight: 600; font-size: 1rem; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 0.15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active-buy { color: var(--up); border-bottom-color: var(--up); }
.tabs button.active-sell { color: var(--down); border-bottom-color: var(--down); }

.filterrow { display: flex; gap: 8px; margin-bottom: 8px; }
.filterrow select {
  flex: 1; max-width: 240px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px; appearance: none; font-size: 0.87rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ---------------- P2P offer list (Binance layout) ---------------- */
.ad-head {
  display: none;
  padding: 10px 14px; font-size: 0.76rem; color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 820px) {
  .ad-head { display: grid; grid-template-columns: 2fr 1.2fr 1.6fr 1.6fr auto; gap: 16px; align-items: center; }
}

.offer {
  padding: 16px 14px; border-bottom: 1px solid var(--line-soft);
}
.offer:hover { background: rgba(255,255,255,0.015); }
@media (min-width: 820px) {
  .offer {
    display: grid; grid-template-columns: 2fr 1.2fr 1.6fr 1.6fr auto;
    gap: 16px; align-items: center;
  }
}

.offer .head { display: flex; align-items: center; gap: 9px; }
.offer .who { flex: 1; min-width: 0; }
.offer .who .name {
  font-weight: 500; font-size: 0.93rem; display: flex; align-items: center; gap: 5px;
}
/* advertiser name reads as a name, not a link */
.offer .who .name a { color: var(--text); }
.offer .who .name a:hover { color: #fff; text-decoration: underline; }
.offer .who .meta { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

.offer .body {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px;
}
@media (min-width: 820px) {
  .offer .body { display: contents; }
}

.price { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.price small { font-size: 0.72rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.limits { font-size: 0.79rem; color: var(--muted); margin-top: 3px; }
.limits .lbl { color: var(--faint); }
.limits div { margin-top: 2px; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (min-width: 820px) { .badges { margin-top: 0; } }
.badge {
  font-size: 0.73rem; font-weight: 400; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
/* the marker carries the brand colour; the label itself stays neutral */
.badge::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: var(--pay-other); flex-shrink: 0;
}
.badge[data-pay="telebirr"]::before          { background: var(--pay-telebirr); }
.badge[data-pay="cbe"]::before               { background: var(--pay-cbe); }
.badge[data-pay="cbe-birr"]::before          { background: var(--pay-cbe-birr); }
.badge[data-pay="awash-bank"]::before        { background: var(--pay-awash); }
.badge[data-pay="dashen-bank"]::before       { background: var(--pay-dashen); }
.badge[data-pay="bank-of-abyssinia"]::before { background: var(--pay-abyssinia); }
.badge[data-pay="m-pesa"]::before            { background: var(--pay-mpesa); }
.badge[data-pay="amole"]::before             { background: var(--pay-amole); }
.badge[data-pay="other"]::before             { background: var(--pay-other); }

.badge.green { color: var(--up); }
.badge.green::before { background: var(--up); }
.badge.red { color: var(--down); }
.badge.red::before { background: var(--down); }
.badge.plain::before { display: none; }

/* presence dot — green while active, grey once the window lapses */
.pres { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); }
.pres i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.pres.online { color: var(--up); }
.pres.online i { background: var(--up); box-shadow: 0 0 0 2px rgba(14,203,129,0.18); }

/* Merchant tier.
   Silver and Gold wear a badge beside the name; Bronze — which is every
   approved merchant — wears nothing, because a mark everyone has says nothing. */
.tier-badge {
  display: inline-flex; align-items: center; vertical-align: -2px;
  margin-left: 5px; line-height: 0;
}
.tier-badge svg { width: 15px; height: 15px; display: block; }
.tier-badge.tier-gold svg { filter: drop-shadow(0 0 4px rgba(252, 213, 53, 0.35)); }

/* The word form, still used where a tier is being explained rather than worn. */
.tier {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.tier-name-bronze { background: rgba(160,170,185,0.14); color: var(--muted); }
.tier-name-silver { background: rgba(180,190,200,0.16); color: #b9c2cc; }
.tier-name-gold   { background: var(--yellow-dim); color: var(--yellow); }

/* Progress towards the next badge, on the merchant's own dashboard. */
.tier-progress { margin-top: 12px; }
.tier-progress .bar {
  height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 8px 0 6px;
}
.tier-progress .bar i { display: block; height: 100%; border-radius: 3px; background: var(--yellow-fill); }
.tier-progress .bar i.silver { background: linear-gradient(90deg, #9aa6b8, #e7ecf3); }
.tier-progress .bar i.gold { background: linear-gradient(90deg, #e0a800, #ffe08a); }
.tier-progress .ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); }
.tier-goal { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.tier-goal .tier-badge { margin-left: 0; }
.tier-warn { font-size: 0.76rem; color: var(--down); margin-top: 8px; }

.verified { color: var(--yellow); display: inline-flex; }
.verified svg { width: 14px; height: 14px; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 600; font-size: 0.85rem;
  background: var(--card-2); color: var(--yellow);
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius); font-weight: 600; font-size: 0.88rem;
  background: var(--card-2); color: var(--text);
  transition: opacity 0.15s, background 0.15s, filter 0.15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.gold, .btn.yellow { background: var(--yellow-fill); color: var(--on-yellow); }
.btn.gold:hover, .btn.yellow:hover { background: var(--yellow-2); }
.btn.green { background: var(--up); color: #fff; }
.btn.red { background: var(--down); color: #fff; }
.btn.outline-red { color: var(--down); border: 1px solid var(--down); background: transparent; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { padding: 6px 14px; font-size: 0.8rem; }
.btn.block { width: 100%; }

/* ---------------- forms ---------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.79rem; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 12px; outline: none;
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yellow); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field textarea { min-height: 80px; resize: vertical; }
.field .hint { font-size: 0.73rem; color: var(--faint); margin-top: 5px; line-height: 1.5; }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 400;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; cursor: pointer; transition: all 0.15s;
}
.checks label:has(input:checked) { border-color: var(--yellow); color: var(--yellow); }
.checks input { accent-color: var(--yellow); }

.formcard { background: var(--card); border-radius: var(--radius); padding: 22px; }
.error-text { color: var(--down); font-size: 0.83rem; margin: 8px 0; min-height: 1em; }

/* ---------------- modal ---------------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: flex-end; justify-content: center; animation: fade 0.15s ease;
}
@keyframes fade { from { opacity: 0; } }
@media (min-width: 640px) { .modal-back { align-items: center; } }
.modal {
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  background: var(--card); border-radius: 16px 16px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  animation: rise 0.18s ease;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
@media (min-width: 640px) { .modal { border-radius: 12px; } }
.modal h3 {
  margin-bottom: 16px; font-size: 1.05rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.modal h3 .x { color: var(--muted); font-size: 1.4rem; line-height: 1; padding: 0 4px; }
.modal h3 .x:hover { color: var(--text); }

/* ---------------- order card ----------------

   The shape every P2P exchange converges on, because it answers the questions
   in the order they are asked: what am I doing and is it urgent, how much,
   which order, and who with. */

.ocard {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; cursor: pointer;
}
.ocard:active { background: var(--card-2); }
.ocard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ocard-side { font-size: 1.05rem; font-weight: 700; }
.ocard-side.buyer { color: var(--up); }
.ocard-side.seller { color: var(--down); }
.ocard-side span { color: var(--text); font-weight: 600; }
.ocard-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ocard-timer {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ocard-timer i { font-style: normal; }
/* Two minutes left is the point at which a merchant should stop scrolling. */
.ocard-timer.urgent { color: var(--down); font-weight: 600; }

.ocard-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ocard-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ocard-rows span { font-size: 0.85rem; color: var(--muted); }
.ocard-rows b { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ocard-rows b.big { font-size: 1.15rem; }
.ocard-rows b.ono {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 0.82rem; color: var(--muted); word-break: break-all;
}
.ocard-rows b.ono svg { width: 15px; height: 15px; flex: none; }

.ocard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line-soft);
}
/* The counterparty is a button, not a label: from this screen you either open
   the order or talk to them, and those are different places. */
.ocard-party {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 8px; background: var(--card-2);
  font-size: 0.84rem; font-weight: 500; color: var(--text);
}
.ocard-party:active { opacity: 0.6; }
.ocard-party svg { color: var(--muted); }
.ocard-party .unread {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--down); color: #fff;
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card);
}
.ocard-when { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------- chat page ---------------- */

.ch-head {
  display: flex; align-items: center; gap: 6px;
  margin: -14px -14px 0; padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.ch-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ch-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
  background: var(--card-2);
}
.ch-name { font-size: 0.95rem; font-weight: 600; }
.ch-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }

/* The order this conversation is about, pinned so it stays readable while you
   scroll back through the history. */
.ch-strip {
  display: flex; align-items: center; gap: 12px;
  margin: 0 -14px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ch-strip-t { font-size: 0.88rem; font-weight: 600; }
.ch-strip-s { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.ch-strip-s b { color: var(--yellow); font-variant-numeric: tabular-nums; }
.ch-view { color: var(--yellow); font-size: 0.85rem; font-weight: 600; text-decoration: none; }

.ch-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 12px 0 4px; padding: 11px 13px; border-radius: 10px;
  background: var(--card); font-size: 0.78rem; color: var(--muted); line-height: 1.5;
}
.ch-warn svg { color: var(--yellow); flex: none; margin-top: 1px; }
.ch-warn .x { color: var(--faint); font-size: 1.1rem; line-height: 1; padding: 0 2px; }

.ch-log {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 0 90px; min-height: 40vh;
}
.ch-day { align-self: center; font-size: 0.72rem; color: var(--faint); margin: 6px 0; }
/* Where one order ends and the next begins, in a thread that spans all of them. */
.ch-order {
  align-self: center; font-size: 0.68rem; color: var(--faint);
  background: var(--card); border-radius: 20px; padding: 3px 12px; margin: 4px 0;
}

/* A system line is a record of what happened, not somebody speaking. */
.ch-sys {
  background: var(--card); border-radius: 10px; padding: 12px 14px;
  font-size: 0.83rem; line-height: 1.55; color: var(--text);
}
.ch-sys.past { opacity: 0.55; }
.ch-sys .t { display: block; font-size: 0.68rem; color: var(--faint); margin-top: 6px; }

.ch-msg { display: flex; flex-direction: column; max-width: 80%; }
.ch-msg.mine { align-self: flex-end; align-items: flex-end; }
.ch-badge { font-size: 0.66rem; color: var(--yellow); margin-bottom: 3px; }
.ch-bubble {
  background: var(--card); border-radius: 12px; padding: 9px 12px;
  font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ch-msg.mine .ch-bubble { background: var(--yellow-dim); }
.ch-msg.support .ch-bubble { border: 1px solid var(--yellow-fill); }
.ch-bubble .t { display: block; font-size: 0.64rem; color: var(--faint); margin-top: 4px; text-align: right; }

.ch-input {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line-soft); z-index: 20;
}
.ch-input input {
  flex: 1; min-width: 0; background: var(--card); border: none; border-radius: 20px;
  padding: 11px 15px; color: var(--text); font-size: 0.9rem;
}
.ch-input button {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--card-2); color: var(--text);
  font-size: 1.3rem; line-height: 1;
}
.ch-input #ch-send { background: var(--yellow); color: var(--on-yellow); }
@media (min-width: 900px) { .ch-input { bottom: 0; max-width: 720px; margin: 0 auto; } }
.ch-closed {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 14px; text-align: center;
  background: var(--bg); border-top: 1px solid var(--line-soft);
  font-size: 0.78rem; color: var(--muted); z-index: 20;
}
@media (min-width: 900px) { .ch-closed { bottom: 0; } }

/* ---------------- order detail ----------------

   State first, as a headline, then the clock as a sentence. Somebody opening
   this page has one question — what am I waiting for and how long have I got —
   and it should be answered before they read anything else. */

.od-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 4px; }
.od-chatlink {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 20px; background: var(--card);
  color: var(--text); font-size: 0.82rem; font-weight: 500; text-decoration: none;
}
.od-chatlink .unread {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--down); color: #fff;
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}
.od-title { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 6px; }
.od-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.od-sub b { color: var(--yellow); font-variant-numeric: tabular-nums; font-weight: 700; }

.od-party {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 14px; margin: 18px 0 12px;
}
.od-party-name { font-size: 0.95rem; font-weight: 600; }
.od-party-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--muted); margin-top: 4px;
}
.od-party-sub b { color: var(--text); font-weight: 600; }
.secured {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 5px; background: var(--up-dim); color: var(--up);
  font-size: 0.68rem; font-weight: 600;
}
.secured.warn { background: var(--down-dim); color: var(--down); }

/* The money, with the breakdown folded away. Three numbers answer it most of
   the time; the fee split is one tap when they do not. */
.od-card { position: relative; background: var(--card); border-radius: var(--radius); padding: 16px 16px 26px; margin-bottom: 12px; }
.od-card-head { margin-bottom: 12px; }
.od-more { display: none; }
.od-card.open .od-more { display: contents; }
.od-more .sub-line span { padding-left: 14px; position: relative; }
.od-more .sub-line span::before {
  content: ''; position: absolute; left: 3px; top: -4px; bottom: 8px; width: 7px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
.od-expand {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  color: var(--faint); padding: 4px 20px; line-height: 0;
}
.od-expand svg { transition: transform 0.2s; }
.od-card.open .od-expand svg { transform: rotate(180deg); }

.od-method { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.od-method-head { font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; }
.od-method-body { display: flex; gap: 11px; }
.od-method .pay-tag { width: 3px; border-radius: 2px; flex: none; align-self: stretch; }
.od-method .pay-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }
.od-method .kv { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 0.85rem; }
.od-method .kv span { color: var(--muted); }
.od-method .kv b { font-weight: 600; text-align: right; word-break: break-all; }
.od-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 0.76rem; color: var(--muted); line-height: 1.5;
}
.od-note b { color: var(--text); }

.od-appeal { background: var(--down-dim); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.od-appeal-h { font-size: 0.9rem; font-weight: 600; color: var(--down); margin-bottom: 4px; }

/* Floats above the primary action, which is where a stuck person looks. */
.od-help {
  position: fixed; right: 14px;
  bottom: calc(var(--nav-h) + 74px + env(safe-area-inset-bottom));
  z-index: 15;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 22px;
  background: var(--card-2); color: var(--text);
  font-size: 0.8rem; font-weight: 500; box-shadow: var(--shadow, 0 4px 14px rgba(0,0,0,0.3));
}
.od-help:active { opacity: 0.7; }
.od-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.od-actions .btn { flex: 1; min-width: 140px; }

/* FAQ accordion in the help sheet. */
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 14px 0;
  font-size: 0.88rem; line-height: 1.45; color: var(--text);
}
.faq-q svg { flex: none; color: var(--faint); transition: transform 0.2s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 0 14px; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.faq-item.open .faq-a { display: block; }

.sol-card { background: var(--card); border-radius: var(--radius); padding: 15px; margin-top: 14px; }
.sol-h { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.sol-a { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* The three stages of an appeal, so filing one does not feel like shouting
   into a void. */
.ap-rail { display: flex; margin: 4px 0 16px; }
.ap-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.ap-step::before {
  content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line);
}
.ap-step:first-child::before { display: none; }
.ap-dot {
  position: relative; z-index: 1;
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card-2); color: var(--muted); font-size: 0.72rem; font-weight: 700;
}
.ap-step.now .ap-dot { background: var(--yellow-fill); color: var(--on-yellow); }
.ap-l { font-size: 0.68rem; color: var(--muted); text-align: center; }
.ap-step.now .ap-l { color: var(--text); font-weight: 600; }

/* ---------------- trade room ---------------- */
.steps { display: flex; gap: 5px; margin: 14px 0 16px; }
.steps .s { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.3s; }
.steps .s.on { background: var(--yellow-fill); }

/* Named steps, joined by the line between them. Three anonymous dashes told
   you how far along you were but never what the next thing was. */
.rail { display: flex; align-items: flex-start; margin: 16px 0 18px; }
.rail-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.rail-step::before {
  content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px;
  background: var(--line);
}
.rail-step:first-child::before { display: none; }
.rail-step.done::before, .rail-step.now::before { background: var(--yellow-fill); }
.rail-dot {
  position: relative; z-index: 1;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--line); color: var(--muted);
  font-size: 0.74rem; font-weight: 700;
}
.rail-dot svg { width: 13px; height: 13px; }
.rail-step.done .rail-dot { background: var(--yellow-fill); border-color: var(--yellow-fill); color: var(--on-yellow); }
.rail-step.now .rail-dot {
  border-color: var(--yellow-fill); color: var(--yellow);
  box-shadow: 0 0 0 4px var(--yellow-dim);
}
.rail-label { font-size: 0.7rem; color: var(--muted); text-align: center; line-height: 1.3; padding: 0 2px; }
.rail-step.now .rail-label { color: var(--text); font-weight: 600; }
.rail.dead .rail-dot { border-color: var(--line); color: var(--faint); background: var(--card); }
.rail.dead .rail-label { color: var(--faint); }

/* Order and Chat as two places, not one endless scroll. The chat used to be
   below the evidence, below the escrow, below the payment details — reached
   by scrolling past everything while a clock ran. */
.ord-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
.ord-tabs button {
  padding: 11px 0; font-size: 0.9rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ord-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--yellow-fill); }
.ord-panel.hide { display: none; }

.pill {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.pill.active { background: var(--yellow-dim); color: var(--yellow); }
.pill.paid { background: var(--info-dim); color: var(--info); }
.pill.completed { background: var(--up-dim); color: var(--up); }
.pill.cancelled { background: rgba(132,142,156,0.12); color: var(--muted); }
.pill.disputed { background: var(--down-dim); color: var(--down); }
.pill.paused { background: rgba(132,142,156,0.12); color: var(--muted); }

.tcard { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.tcard .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.87rem; gap: 14px; }
.tcard .row .l { color: var(--muted); flex-shrink: 0; }
.tcard .row .r { font-weight: 500; text-align: right; word-break: break-all; }
.tcard h4 { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.copyable { cursor: pointer; color: var(--yellow); }
.copyable:hover { color: var(--yellow-2); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.actions .btn { flex: 1; min-width: 130px; }

.timer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--yellow-dim); color: var(--yellow);
  border-radius: var(--radius); padding: 11px 14px; font-size: 0.85rem;
  margin-bottom: 13px; font-weight: 500;
}
.timer b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.timer.urgent { background: var(--down-dim); color: var(--down); }

/* ---------------- order page ---------------- */
.order-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin: 10px 0 6px;
}
.order-stage { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.order-no { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.order-no b { color: var(--text); font-weight: 500; }
.tcard .row .r.big { font-size: 1.15rem; font-weight: 600; }

.party { display: flex; align-items: center; gap: 12px; }
.party .grow { flex: 1; min-width: 0; }
.party .title { font-weight: 600; font-size: 0.98rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.party .sub2 { font-size: 0.77rem; color: var(--muted); margin-top: 3px; }
.vchip {
  font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: var(--up-dim); color: var(--up);
}
.vchip.warn { background: var(--down-dim); color: var(--down); }

/* evidence thumbnails */
.evidence { display: flex; flex-wrap: wrap; gap: 10px; }
.eth {
  width: 88px; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.68rem; color: var(--muted); text-align: center;
}
.eth img {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-2);
}
.eth:hover img { border-color: var(--yellow); }

/* notifications */
.bell { position: relative; color: var(--text); padding: 4px; display: inline-flex; }
.bell:hover { color: var(--yellow); }
/* Tinted, because this one is an offer rather than a utility — but only
   tinted. It appears beside the bell and disappears the moment the app is
   installed, so it never becomes the icon people learn to ignore. */
.install-cta { color: var(--yellow); }
.install-cta svg { width: 21px; height: 21px; }
.install-cta:active { transform: scale(0.92); }
.bell .dot {
  position: absolute; top: 0; right: 0; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--down); color: #fff;
  font-size: 0.6rem; font-weight: 700; display: grid; place-items: center;
}
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text);
}
.notif .grow { flex: 1; min-width: 0; }
.notif .title { font-weight: 500; font-size: 0.9rem; }
.notif .sub2 { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.notif.unread { position: relative; padding-left: 14px; }
.notif.unread::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--yellow-fill);
}

/* ---------------- chat ---------------- */
.chat { background: var(--card); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.chat-log { padding: 16px; display: flex; flex-direction: column; gap: 9px; max-height: 45vh; min-height: 180px; overflow-y: auto; }
.msg { max-width: 80%; padding: 9px 13px; border-radius: 10px; font-size: 0.87rem; word-wrap: break-word; }
.msg.mine { align-self: flex-end; background: var(--yellow-dim); border-bottom-right-radius: 3px; }
.msg.theirs { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 3px; }
.msg.system { align-self: center; max-width: 95%; background: transparent; color: var(--faint); font-size: 0.75rem; text-align: center; line-height: 1.5; }
.msg.support {
  align-self: flex-start; max-width: 88%;
  background: var(--info-dim); border-left: 3px solid var(--info); border-bottom-left-radius: 3px;
}
.msg.support .who { color: var(--info); }
.msg .who { font-size: 0.68rem; font-weight: 600; color: var(--yellow); margin-bottom: 3px; }
.msg .t { font-size: 0.62rem; color: var(--faint); margin-top: 4px; text-align: right; }

.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); }
.chat-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; outline: none; }
.chat-input input:focus { border-color: var(--yellow); }
.chat-input button { background: var(--yellow); color: var(--on-yellow); border-radius: var(--radius); width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; }

/* ---------------- lists ---------------- */
.item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius);
  padding: 14px 15px; margin-bottom: 8px; color: var(--text); width: 100%; text-align: left;
}
.item:hover { background: var(--card-2); }
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 500; font-size: 0.9rem; }
.item .sub2 { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

.empty { text-align: center; color: var(--muted); padding: 48px 20px; }
.empty .big { font-size: 2rem; margin-bottom: 10px; opacity: 0.6; }

/* ---------------- toast ---------------- */
#toasts {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--card-2); color: var(--text);
  padding: 11px 18px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5); animation: pop 0.18s ease;
}
.toast.err { color: var(--down); }
.toast.ok { color: var(--up); }
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } }

/* ---------------- misc ---------------- */
.rate-line {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-2); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px; font-size: 0.87rem;
}
.rate-line b { color: var(--yellow); font-size: 1rem; }

.notice {
  background: var(--yellow-dim); color: var(--yellow);
  border-radius: var(--radius); padding: 11px 14px; font-size: 0.8rem;
  margin-bottom: 14px; line-height: 1.55;
}
.notice.green { background: var(--up-dim); color: var(--up); }

.seg { display: flex; gap: 8px; margin-bottom: 14px; }
.seg button {
  flex: 1; padding: 11px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-2); font-weight: 600; color: var(--muted); transition: all 0.15s;
}
.seg button.on-green { border-color: var(--up); color: var(--up); }
.seg button.on-red { border-color: var(--down); color: var(--down); }

.admin-tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft); }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button {
  padding: 10px 16px; font-weight: 500; font-size: 0.86rem; color: var(--muted);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs button.active { color: var(--yellow); border-bottom-color: var(--yellow); }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }

.skeleton {
  height: 88px; border-radius: var(--radius); margin-bottom: 10px;
  background: linear-gradient(100deg, var(--card) 38%, var(--card-2) 50%, var(--card) 62%);
  background-size: 220% 100%; animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ================= Post Ad wizard ================= */
.wizard-back { align-items: stretch; }
@media (min-width: 640px) { .wizard-back { align-items: center; } }
.modal.wizard {
  max-width: 560px; width: 100%; padding: 0; display: flex; flex-direction: column;
  border-radius: 0; background: var(--bg);
  /* iOS measures 100vh from behind Safari's toolbar, so a full-height sheet
     runs its footer underneath the browser chrome — and the footer is where
     "Next" and "Post ad" live. dvh is the visible height, and the vh line below
     stays as the fallback for iOS before 15.4. */
  max-height: 100vh;
  max-height: 100dvh;
}
@media (min-width: 640px) { .modal.wizard { border-radius: 12px; max-height: 92vh; } }

.wz-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid var(--line-soft); flex-shrink: 0;
}
.wz-title { font-weight: 600; font-size: 1.05rem; }
.wz-back { font-size: 1.3rem; color: var(--text); width: 24px; text-align: left; }

.wz-steps { display: flex; align-items: flex-start; padding: 20px 20px 6px; flex-shrink: 0; }
.wz-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; width: 92px; }
.wz-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.76rem; font-weight: 600;
  background: transparent; color: var(--faint); border: 1.5px solid var(--faint);
}
.wz-step.now .wz-dot { background: #fff; color: var(--bg); border-color: #fff; }
.wz-step.done .wz-dot { background: #fff; color: var(--bg); border-color: #fff; }
.wz-label { font-size: 0.72rem; color: var(--faint); text-align: center; line-height: 1.3; }
.wz-step.now .wz-label { color: var(--text); font-weight: 600; }
.wz-line { flex: 1; height: 1.5px; background: var(--line); margin-top: 11px; }
.wz-line.on { background: #fff; }

.wz-body { flex: 1; overflow-y: auto; padding: 14px 20px 20px; }
.wz-foot {
  flex-shrink: 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: var(--bg);
}
.wz-btns { display: flex; gap: 12px; }
.wz-btns .btn { flex: 1; }
.wz-fee { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.wz-fee b { color: var(--text); font-weight: 600; }

.wz-sec { margin-bottom: 22px; }
.wz-sec.grow, .wz-row .grow { flex: 1; min-width: 0; }
.wz-row { display: flex; gap: 12px; align-items: flex-start; }
.wz-lab { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 9px; }
.wz-lab-row { display: flex; align-items: center; justify-content: space-between; }

.wz-toggle { display: flex; background: var(--card); border-radius: var(--radius); padding: 4px; }
.wz-toggle button {
  flex: 1; padding: 11px; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--muted); transition: all 0.15s;
}
.wz-toggle button.on.buy { background: var(--card-2); color: var(--up); }
.wz-toggle button.on.sell { background: var(--card-2); color: var(--down); }

.wz-select {
  width: 100%; background: var(--card); border: none; border-radius: var(--radius);
  padding: 13px 14px; font-size: 0.95rem; color: var(--text); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.wz-select.static { color: var(--text); }

.wz-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: var(--radius); padding: 0 14px;
}
.wz-input input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  padding: 13px 0; font-size: 0.95rem;
}
.wz-input span { color: var(--muted); font-size: 0.88rem; flex-shrink: 0; }
.wz-tilde { color: var(--muted); padding-top: 13px; }

.stepper { display: flex; align-items: center; background: var(--card); border-radius: var(--radius); }
.stepper button { width: 46px; padding: 13px 0; font-size: 1.2rem; color: var(--muted); }
.stepper button:hover { color: var(--yellow); }
.stepper input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  text-align: center; font-size: 1.05rem; font-weight: 600; padding: 13px 0;
}

.wz-summary { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.wz-summary > div { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.wz-summary span { color: var(--muted); font-size: 0.85rem; }
.wz-summary b { font-size: 1.15rem; font-weight: 600; }

.pm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.8rem; position: relative; padding-left: 14px;
}
.pm-chip::before {
  content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 2px; background: var(--pay-other);
}
.pm-chip[data-pay="telebirr"]::before          { background: var(--pay-telebirr); }
.pm-chip[data-pay="cbe"]::before               { background: var(--pay-cbe); }
.pm-chip[data-pay="cbe-birr"]::before          { background: var(--pay-cbe-birr); }
.pm-chip[data-pay="awash-bank"]::before        { background: var(--pay-awash); }
.pm-chip[data-pay="dashen-bank"]::before       { background: var(--pay-dashen); }
.pm-chip[data-pay="bank-of-abyssinia"]::before { background: var(--pay-abyssinia); }
.pm-chip[data-pay="m-pesa"]::before            { background: var(--pay-mpesa); }
.pm-chip[data-pay="amole"]::before             { background: var(--pay-amole); }
.pm-chip button { color: var(--faint); font-size: 0.9rem; }
.pm-chip button:hover { color: var(--down); }

.pmpick { display: flex; flex-direction: column; }
.pmpick-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-bottom: 1px solid var(--line-soft); text-align: left;
}
.pmpick-row:disabled { opacity: 0.45; }

.tagpick { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 0.78rem; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted); transition: all 0.15s;
}
.tag.on { background: var(--yellow-dim); color: var(--yellow); }

.wz-ta { position: relative; }
.wz-ta textarea {
  width: 100%; min-height: 96px; resize: vertical;
  background: var(--card); border: none; border-radius: var(--radius);
  padding: 13px 14px 26px; outline: none; font-size: 0.9rem; line-height: 1.5;
}
.wz-ta textarea::placeholder { color: var(--faint); }
.wz-count { position: absolute; right: 12px; bottom: 9px; font-size: 0.73rem; color: var(--faint); }

.cond {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 0; font-size: 0.88rem; cursor: pointer;
}
.cond input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--yellow); flex-shrink: 0; }
.cond-n {
  width: 74px; background: var(--card); border: none; border-radius: var(--radius-sm);
  padding: 7px 10px; outline: none; text-align: center;
}
.radio { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; cursor: pointer; }
.radio input { width: 17px; height: 17px; accent-color: var(--yellow); margin-top: 2px; flex-shrink: 0; }
.radio span { display: flex; flex-direction: column; gap: 2px; }
.radio b { font-weight: 500; font-size: 0.92rem; }
.radio i { font-style: normal; font-size: 0.76rem; color: var(--muted); }

/* ================= My Ads ================= */
.ads-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ads-filter { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ads-filter::-webkit-scrollbar { display: none; }
.ads-filter button {
  padding: 7px 14px; border-radius: var(--radius-sm); background: var(--card);
  color: var(--muted); font-size: 0.83rem; font-weight: 500; white-space: nowrap;
}
.ads-filter button.on { background: var(--card-2); color: var(--text); }

.ad-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.ad-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ad-title { font-size: 1rem; font-weight: 500; }
.ad-title b.buy { color: var(--up); font-weight: 600; }
.ad-title b.sell { color: var(--down); font-weight: 600; }
.ad-actions { display: flex; align-items: center; gap: 9px; }
.ad-state { font-size: 0.72rem; color: var(--muted); }
.ad-state.online { color: var(--up); }
.ad-state.private { color: var(--info); }
.ad-more { color: var(--muted); font-size: 1.15rem; padding: 0 3px; }
.ad-more:hover { color: var(--text); }

.switch {
  width: 42px; height: 23px; border-radius: 999px; background: var(--card-2);
  position: relative; flex-shrink: 0; transition: background 0.18s;
}
.switch i {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--muted); transition: transform 0.18s, background 0.18s;
}
.switch.on { background: var(--yellow); }
.switch.on i { transform: translateX(19px); background: #fff; }

.ad-price { font-size: 1.45rem; font-weight: 400; color: var(--muted); margin: 12px 0 14px; }
.ad-price b { color: var(--text); font-weight: 600; }
.ad-rows > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.86rem; }
.ad-rows span { color: var(--muted); }
.ad-rows b { font-weight: 500; }
.ad-pms {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--line-soft);
}

.actions-sheet { display: flex; flex-direction: column; }
.actions-sheet button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 15px 4px; border-bottom: 1px solid var(--line-soft);
  text-align: left; font-size: 0.95rem;
}
.actions-sheet button i { font-style: normal; font-size: 0.76rem; color: var(--muted); }
.actions-sheet button.danger { color: var(--down); }

/* Moving between pages.
   A short rise and fade — enough that the eye follows the content instead of
   being handed a new screen with no warning, short enough that a fast tap
   never waits on it. Only fires when the destination changed; a view redrawing
   its own contents must not blink. */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
main.page-in { animation: pageIn 0.16s ease-out; }

/* The bottom bar's own feedback: the icon lifts as its tab becomes current,
   so a tap is acknowledged before the page has finished drawing. */
.bottomnav a.active svg { animation: navPop 0.22s ease-out; }
@keyframes navPop {
  0%   { transform: scale(0.86); }
  60%  { transform: scale(1.08); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main.page-in, .bottomnav a.active svg { animation: none; }
}

/* ---------------- account header + security centre ---------------- */
.acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.acct-avatar {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 700;
  background: var(--yellow); color: var(--on-yellow);
}
.acct-head .grow { flex: 1; min-width: 0; }
.acct-name { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Sits beside a name, so it stays a mark on the name rather than competing
   with it: smaller than the body text, not larger than the word it follows. */
.acct-name .pill { font-size: 0.66rem; padding: 2px 7px; letter-spacing: 0.01em; }
.acct-uid { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.acct-uid b { color: var(--text); font-weight: 500; }

.sec-score { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 22px; }
.sec-score-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; }
.sec-bar { height: 5px; border-radius: 3px; background: var(--card-2); margin: 10px 0 12px; overflow: hidden; }
.sec-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.lvl-low { color: var(--down); } .sec-bar-fill.lvl-low { background: var(--down); }
.lvl-medium { color: var(--yellow); } .sec-bar-fill.lvl-medium { background: var(--yellow); }
.lvl-high { color: var(--up); } .sec-bar-fill.lvl-high { background: var(--up); }
.sec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-chip {
  font-size: 0.73rem; color: var(--faint);
  background: var(--bg-2); border-radius: 5px; padding: 5px 9px;
}
.sec-chip.on { color: var(--up); }
.sec-chip:active { transform: scale(0.96); }

/* Says "this is the one" after a jump, then gets out of the way. */
.srow.flash { animation: rowflash 1.5s ease; }
@keyframes rowflash {
  0%, 55% { background: var(--yellow-dim); }
  100% { background: transparent; }
}

/* ---------------- profile ----------------

   Your own account and any merchant you tap render through the same markup,
   because they are the same facts. The only thing that differs is the banner:
   gold and silver colour it, bronze deliberately does not. A badge everyone
   has is not a badge — the plain header is what gives the gold one meaning. */

.pf-top {
  /* On a coloured banner the theme's text colours stop working, so the header
     reads its ink from two variables instead of being patched per element. */
  --pf-ink: var(--text);
  --pf-dim: var(--muted);
  position: relative;
  overflow: hidden;
  margin: -14px -14px 0;
  padding: 8px 16px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.pf-top > * { position: relative; z-index: 1; }

.pf-top.gold { background: linear-gradient(160deg, #f8cf3a 0%, #e8ac07 46%, #c98f00 100%); }
.pf-top.silver { background: linear-gradient(160deg, #dfe4ea 0%, #b7bfca 46%, #929aa6 100%); }
.pf-top.gold, .pf-top.silver {
  --pf-ink: #14161a;
  --pf-dim: rgba(20, 22, 26, 0.6);
  border-bottom-color: transparent;
}

/* Abstract facets over the metal — three wide translucent wedges and one
   highlight, so the banner reads as a surface catching light rather than a
   flat block of colour. Drawn in a pseudo-element so the content above it
   never has to know it is there. */
.pf-top.gold::before, .pf-top.silver::before {
  content: '';
  position: absolute; inset: -30% -10% -30% -10%;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.26) 38%, rgba(255,255,255,0.26) 46%, transparent 46%),
    linear-gradient(115deg, transparent 58%, rgba(255,255,255,0.16) 58%, rgba(255,255,255,0.16) 72%, transparent 72%),
    linear-gradient(65deg, transparent 62%, rgba(0,0,0,0.07) 62%, rgba(0,0,0,0.07) 78%, transparent 78%);
  pointer-events: none;
}
/* A soft sheen from the top-right corner, where the light would come from. */
.pf-top.gold::after, .pf-top.silver::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 88% -15%, rgba(255,255,255,0.42), transparent 62%);
  pointer-events: none;
}

/* Avatar and name on one line. Stacked, they pushed everything else down and
   left the banner mostly empty. */
.pf-id { display: flex; align-items: center; gap: 13px; }
.pf-who { min-width: 0; }
.pf-sub {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 4px; font-size: 0.78rem; color: var(--pf-dim);
}
.pf-sub .pres { color: inherit; }
.pf-sub .pres i { background: currentColor; }
/* Bright green on gold is barely legible, so presence takes a darker green on
   metal — same signal, readable against the banner. */
.pf-top.gold .pf-sub .pres.online,
.pf-top.silver .pf-sub .pres.online { color: #0a6b47; }
.pf-dot { opacity: 0.5; }

/* Standing as chips, side by side. Three short facts on one line beat three
   sentences on three. */
.pf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.73rem; font-weight: 500; white-space: nowrap;
  background: var(--card-2); color: var(--pf-dim);
}
.pf-chip.strong { background: var(--yellow-dim); color: var(--yellow); font-weight: 600; }
.pf-chip.ok { color: var(--up); }
.pf-chip.copyable { cursor: pointer; }
.pf-chip.copyable:active { opacity: 0.6; }
/* On metal, chips are frosted glass rather than a second colour fighting the
   banner — including the tier chip, whose yellow would vanish into the gold. */
.pf-top.gold .pf-chip, .pf-top.silver .pf-chip {
  background: rgba(255, 255, 255, 0.55); color: rgba(20, 22, 26, 0.78);
}
.pf-top.gold .pf-chip.strong, .pf-top.silver .pf-chip.strong {
  background: rgba(20, 22, 26, 0.86); color: #fff;
}
.pf-top.gold .pf-chip.ok, .pf-top.silver .pf-chip.ok { color: #0a6b47; }

/* space-between with an empty first child on your own page, so the gear stays
   pinned right whether or not there is a back arrow on the left. Pulled out
   to the padding edge — an icon button indented from the corner reads as
   misaligned rather than as breathing room. */
.pf-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 -8px 4px;
}
.pf-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--pf-ink); font-size: 1.2rem; text-decoration: none;
}
.pf-icon svg { width: 19px; height: 19px; }
.pf-icon:active { background: rgba(128,128,128,0.18); }

.pf-avatar {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 700;
  background: var(--card-2); color: var(--pf-ink);
}
.pf-top.gold .pf-avatar, .pf-top.silver .pf-avatar {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pf-name {
  font-size: 1.25rem; font-weight: 700; color: var(--pf-ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  line-height: 1.2;
}

/* Tabs sit directly under the banner, as the anchor for everything below. */
.pf-tabs {
  display: flex; gap: 22px; margin: 0 -14px 4px; padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pf-tabs button {
  padding: 13px 0; font-size: 0.92rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pf-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--yellow-fill); }

.pf-stats { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.pf-stats:last-of-type { border-bottom: none; }
.pf-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 2px; font-size: 0.9rem;
}
.pf-row > span { color: var(--muted); }
.pf-row > b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pf-row small { font-weight: 400; color: var(--muted); font-size: 0.82em; }
.pf-split { font-size: 0.82rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pf-progress { margin-top: 18px; }

.pf-feed { padding-top: 6px; }
.fb { display: flex; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); }
.fb-mark { font-size: 1.1rem; flex: none; }
.fb-who { font-size: 0.88rem; font-weight: 500; }
.fb-when { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* ---------------- notification preferences ---------------- */

/* A settings row that goes somewhere, rather than doing something in place. */
.srow.linkrow { text-decoration: none; color: inherit; }
.srow.linkrow:active { opacity: 0.6; }
.srow .chev { color: var(--faint); font-size: 1.3rem; line-height: 1; }

/* Sub-page header: bare arrow, then the title. The arrow is pulled left so
   the title sits on the same left edge as the content beneath it — otherwise
   every sub-page looks indented compared to the page it came from. */
.sub-head { display: flex; align-items: center; gap: 6px; margin: 0 0 14px -8px; }
.sub-back {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--text); text-decoration: none;
}
.sub-back:active { opacity: 0.5; }
.sub-head h1 { font-size: 1.2rem; font-weight: 600; margin: 0; }

.npref-key {
  display: flex; gap: 16px; justify-content: flex-end;
  font-size: 0.72rem; color: var(--muted); margin: 12px 0 2px;
}
.npref-key span { display: flex; align-items: center; gap: 6px; }
.sw-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sw-dot.email { background: var(--yellow-fill); }
.sw-dot.sms { background: var(--info); }

.npref {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--line-soft);
}
.npref .grow { flex: 1; min-width: 0; }
.npref-label { font-size: 0.88rem; }
.npref-sub { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }
/* Fixed columns so the switches line up down the page — a ragged right edge
   makes it much harder to see at a glance what is on. */
.npref-toggles { display: flex; gap: 12px; flex: none; }
.npref-gap { width: 40px; }
.switch.sms.on { background: var(--info); }
/* Forced events still show a switch, because hiding it would read as "off". */
.switch.locked { opacity: 0.5; cursor: not-allowed; }

/* merchant requirements checklist */
.reqs { padding: 14px 16px 6px; }
.reqs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.reqs-head h4 { margin-bottom: 0; }
.reqs-count { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.reqs-count.done { color: var(--up); }

.req { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.reqs-head + .req { border-top: none; }
.req-mark {
  flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  display: grid; place-items: center; font-size: 0.62rem; color: transparent;
}
/* Met lines stay on the list, dimmed and ticked. Deleting them would hide how
   much of the task is already behind you. */
.req.met .req-mark { background: var(--up); border-color: var(--up); color: #fff; }
.req .grow { flex: 1; min-width: 0; }
.req-label { font-size: 0.85rem; line-height: 1.4; }
.req.met .req-label { color: var(--muted); }
.req-detail { font-size: 0.73rem; color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.req.met .req-detail { color: var(--up); }
.req-bar { height: 3px; border-radius: 2px; background: var(--card-2); margin-top: 7px; overflow: hidden; }
.req-bar i { display: block; height: 100%; border-radius: 2px; background: var(--yellow-fill); transition: width 0.4s ease; }
.reqs-ready {
  border-top: 1px solid var(--line-soft); margin-top: 2px; padding: 11px 0 8px;
  font-size: 0.8rem; color: var(--up); font-weight: 500;
}

/* settings rows */
.srow {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 2px; border-bottom: 1px solid var(--line-soft);
}
.srow .grow { flex: 1; min-width: 0; }
.srow .title { font-weight: 500; font-size: 0.9rem; }
.srow .sub2 { font-size: 0.77rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.srow.sub-row { padding-left: 14px; background: rgba(255,255,255,0.012); }

/* verification modal */
.code-input {
  text-align: center; font-size: 1.5rem; letter-spacing: 0.42em;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
  padding: 14px 12px !important; text-indent: 0.42em;
}
/* Six boxes, the shape every bank and exchange uses for a code. One field
   makes a mistyped digit invisible; six make it obvious which one is wrong. */
.otp-boxes { display: flex; gap: 8px; justify-content: space-between; }
.otp-boxes input {
  flex: 1; min-width: 0; max-width: 54px; aspect-ratio: 1 / 1.15;
  text-align: center; font-size: 1.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 0;
  transition: border-color 0.15s, background 0.15s;
}
.otp-boxes input:focus {
  outline: none; border-color: var(--yellow-fill); background: var(--card-2);
}

/* The clock on a one-time code. Without it people stare at a form with no way
   to know whether to keep waiting or ask for another. */
.vf-timer {
  margin-top: 12px; text-align: center; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 20px;
}
.vf-timer .dim { color: var(--muted); font-variant-numeric: tabular-nums; }
.vf-timer .expired { color: var(--down); font-weight: 500; font-variant-numeric: tabular-nums; }

.vf-switch {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 0.79rem; color: var(--muted); text-align: center; line-height: 1.9;
}
.vf-switch .linklike { background: none; font-size: 0.79rem; }

/* ================= withdraw flow ================= */

/* method chooser */
.method-list { display: flex; flex-direction: column; gap: 10px; }
.method {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card-2); border-radius: var(--radius); padding: 16px 15px;
  transition: filter 0.15s;
}
.method:hover { filter: brightness(1.15); }
.method .mi {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--yellow-dim); color: var(--yellow);
}
.method .grow { flex: 1; min-width: 0; }
.method b { display: block; font-weight: 600; font-size: 0.95rem; }
.method i { display: block; font-style: normal; font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.method .chev { color: var(--faint); font-size: 1.3rem; }

/* address entry */
.addr-input {
  width: 100%; background: transparent; border: none; outline: none; resize: none;
  font-size: 1.35rem; font-weight: 500; line-height: 1.4; color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  padding: 8px 0; word-break: break-all;
}
.addr-input::placeholder { color: var(--faint); font-size: 2rem; font-family: inherit; font-weight: 600; }
.addr-tools { display: flex; gap: 9px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border-radius: var(--radius); padding: 8px 14px;
  font-size: 0.82rem; font-weight: 500; color: var(--text);
}
.chip:hover { filter: brightness(1.2); }
.err-inline { color: var(--down); font-size: 0.8rem; margin-top: 8px; min-height: 1em; }
.err-inline.center { text-align: center; }

.recent-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 2px; border-bottom: 1px solid var(--line-soft); font-size: 0.85rem;
}
.recent-row:hover { color: var(--yellow); }
.recent-row .grow { flex: 1; min-width: 0; word-break: break-all; }
.netchip {
  font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: var(--yellow-dim); color: var(--yellow); flex-shrink: 0;
}

/* amount entry */
.amt-wrap { display: flex; align-items: baseline; gap: 10px; padding: 10px 0 4px; }
.amt-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.amt-input::placeholder { color: var(--faint); }
.amt-unit { font-size: 1.4rem; font-weight: 500; color: var(--muted); }
.chip.max { align-self: center; flex-shrink: 0; color: var(--yellow); }
.amt-avail { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.amt-avail b { color: var(--text); font-weight: 500; }

.kvline { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 0.86rem; }
.kvline span { color: var(--muted); }
.kvline b { font-weight: 500; text-align: right; word-break: break-all; }
.kvbox { background: var(--card); border-radius: var(--radius); padding: 13px 15px; }

/* confirm */
.confirm-head { text-align: center; padding: 10px 0 20px; }
.confirm-head .coin { width: 46px; height: 46px; margin: 0 auto 14px; font-size: 1.4rem; }
.confirm-amt { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.confirm-amt small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.addr-hl { font-size: 0.82rem; }
.addr-hl .hl { color: var(--yellow); }

/* recipient tabs */
.seg-tabs { display: flex; gap: 8px; }
.seg-tabs button {
  padding: 9px 16px; border-radius: var(--radius); font-size: 0.88rem; font-weight: 500;
  color: var(--muted); background: transparent;
}
.seg-tabs button.on { background: var(--card-2); color: var(--text); }

.big-input {
  width: 100%; background: var(--card); border: none; border-radius: var(--radius);
  padding: 16px 15px; font-size: 1rem; outline: none;
}
.big-input:focus { box-shadow: inset 0 0 0 1px var(--yellow); }
.big-input::placeholder { color: var(--faint); }

.note-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 12px 2px; outline: none; font-size: 0.9rem; text-align: center; color: var(--yellow);
}
.note-input::placeholder { color: var(--yellow); opacity: 0.7; }
.note-input:focus { border-color: var(--yellow); }

/* payee amount screen */
.payee-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1rem; font-weight: 500; margin-bottom: 18px;
}
.payee-head .coin { width: 26px; height: 26px; font-size: 0.85rem; }
.amt-wrap.center-amt { justify-content: center; padding: 6px 0 10px; }
.amt-input.big { text-align: center; font-size: 3.2rem; }
.payee-row { display: flex; align-items: center; gap: 12px; }
.payee-row .grow { flex: 1; min-width: 0; }
.payee-row .title { font-weight: 600; font-size: 0.98rem; }
.payee-row .sub2 { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.big-amt { font-size: 1.05rem; font-weight: 600; }
.kvbox.insufficient { border: 1px solid rgba(246,70,93,0.35); }
.kvbox.insufficient b { color: var(--down); font-size: 0.95rem; }
.kvbox.insufficient .sub2 { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }

/* QR scanner */
.scanbox {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 60vh;
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
  position: absolute; inset: 16%; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45);
  border: 2px solid var(--yellow);
}

/* slide to confirm */
.slider {
  position: relative; height: 52px; border-radius: 999px; overflow: hidden;
  background: var(--card-2); user-select: none; touch-action: none;
}
.slider-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--yellow-dim); transition: width 0.15s ease;
}
.slider.done .slider-fill, .slider.busy .slider-fill { background: var(--yellow); }
.slider-knob {
  position: absolute; left: 4px; top: 4px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--yellow); color: var(--on-yellow);
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 700;
  cursor: grab; transition: transform 0.15s ease; z-index: 2;
}
.slider-knob:active { cursor: grabbing; transition: none; }
.slider.near .slider-knob { background: var(--up); color: #fff; }
.slider-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.88rem; font-weight: 600; color: var(--muted); pointer-events: none;
}
.slider.busy .slider-label { color: var(--on-yellow); }
.slider.busy .slider-knob { opacity: 0.5; }

/* ---------------- wallet (Binance layout) ---------------- */
.bal-card {
  background: var(--card); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}
.bal-top { display: flex; align-items: center; justify-content: space-between; }
.bal-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--muted);
}
.eye { color: var(--muted); display: inline-flex; padding: 2px; transition: color 0.15s; }
.eye:hover { color: var(--text); }
.eye:active { transform: scale(0.9); }

/* Every figure that the eye button hides. It fades out, swaps, and fades back
   in — the digits and the dots are different widths, and a silent reflow of
   the largest text on the page is what read as a glitch. */
.hidable {
  display: inline-block;
  transition: opacity 0.12s ease, filter 0.12s ease;
}
.hidable.swapping { opacity: 0; filter: blur(3px); }
.bal-main {
  font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.bal-main small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.bal-split { display: flex; gap: 26px; margin-top: 14px; }
.bal-split .l { display: block; font-size: 0.75rem; color: var(--muted); }
.bal-split .v { display: block; font-size: 0.95rem; font-weight: 500; margin-top: 2px; }
.bal-actions { display: flex; gap: 10px; margin-top: 20px; }
.bal-actions .btn { flex: 1; }

.asset-head {
  font-size: 0.95rem; font-weight: 600; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.asset, .tx {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; border-bottom: 1px solid var(--line-soft);
}
.asset .grow, .tx .grow { flex: 1; min-width: 0; }
.asset .title, .tx .title { font-weight: 500; font-size: 0.92rem; }
.asset .sub2, .tx .sub2 { font-size: 0.76rem; color: var(--muted); margin-top: 3px; }
.coin {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 700;
  background: #26a17b; color: #fff;   /* Tether's own green */
}
.tx-amt { font-weight: 600; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.tx-amt.pos { color: var(--up); }
.tx-amt.neg { color: var(--down); }

.qrbox { display: flex; justify-content: center; background: #fff; border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.qrbox svg { width: 200px; height: 200px; display: block; }
.addr {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem; line-height: 1.55; word-break: break-all;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; cursor: pointer;
}
.addr:hover { border-color: var(--yellow); }

.legal { white-space: pre-wrap; font-size: 0.82rem; line-height: 1.7; color: var(--muted); }

.footer {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 0.75rem; color: var(--faint); line-height: 1.9;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--yellow); }

.center { text-align: center; }
.mt { margin-top: 14px; }
.linklike { color: var(--yellow); font-weight: 500; }

/* ---------------- identity verification ---------------- */

.kyc-steps {
  background: var(--card);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.85rem;
}
.kyc-steps .sub2 { color: var(--muted); font-size: 0.78rem; margin-top: 6px; line-height: 1.5; }

/* Document capture: a wide frame with a guide rectangle, roughly ID-card shaped. */
.doc-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.doc-wrap video, .doc-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-frame {
  position: absolute; inset: 12% 7%;
  border: 2px dashed rgba(252, 213, 53, 0.85);
  border-radius: 8px;
  pointer-events: none;
}
.doc-actions { display: flex; gap: 10px; }
.doc-actions .btn { flex: 1; }

/* Liveness: a circular window, because a face centred in a circle is the one
   framing everyone already understands from every other verification flow. */
.live-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 300px;
  margin: 0 auto 12px;
  background: #000;
  border-radius: 50%;
  overflow: hidden;
}
.live-wrap video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scaleX(-1);           /* mirrored, so turning left looks like left */
}
.live-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  pointer-events: none;
}
.live-prompt {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  min-height: 1.5em;
  margin-bottom: 10px;
}
.live-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.live-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line, #2b3139);
  transition: background 0.2s, transform 0.2s;
}
.live-dots i.now { background: var(--yellow); transform: scale(1.35); }
.live-dots i.done { background: var(--up, #0ecb81); }

/* ---------------- pull to refresh ---------------- */

.ptr {
  position: fixed; top: 0; left: 0; right: 0;
  height: 0; overflow: hidden; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 60; pointer-events: none;
  background: linear-gradient(180deg, var(--card) 0%, transparent 100%);
}
/* The Voltex mark, as a diamond that turns with the drag. */
.ptr-mark {
  width: 20px; height: 20px;
  background: var(--yellow-fill);
  border-radius: 3px;
  transform-origin: center;
}
.ptr.ready .ptr-mark { box-shadow: 0 0 12px rgba(252, 213, 53, 0.55); }
.ptr.spinning .ptr-mark { animation: ptr-spin 0.75s linear infinite; }
@keyframes ptr-spin {
  from { transform: rotate(45deg) scale(1); }
  50%  { transform: rotate(225deg) scale(0.75); }
  to   { transform: rotate(405deg) scale(1); }
}

/* ---------------- badge explainer sheet ---------------- */

.modal.sheet { max-width: 460px; }
.badge-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: 10px; background: var(--card);
  margin-bottom: 10px;
}
.badge-row.on { outline: 1px solid var(--yellow-dim); }
.badge-lg { flex: none; line-height: 0; }
.badge-lg svg { width: 34px; height: 34px; display: block; }
.badge-title { font-weight: 600; font-size: 0.98rem; margin-bottom: 4px; }
.badge-blurb { font-size: 0.84rem; color: var(--text); line-height: 1.5; }
.badge-earn { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.linkbtn {
  display: block; width: 100%; background: none; border: 0; cursor: pointer;
  color: var(--yellow); font: inherit; font-size: 0.86rem; font-weight: 500;
  padding: 12px; text-align: center;
}

/* The badge is a button now, so it must not inherit button chrome. */
button.tier-badge {
  background: none; border: 0; padding: 0; cursor: pointer;
}

/* ---------------- order history ---------------- */

.order-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.order-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.order-tabs button {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.95rem;
  color: var(--muted); padding: 10px 0; position: relative;
}
.order-tabs button.on { color: var(--text); font-weight: 600; }
.order-tabs button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--yellow); border-radius: 2px;
}
.chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.chips button {
  flex: none; background: var(--card); border: 0; cursor: pointer; font: inherit;
  color: var(--muted); font-size: 0.82rem; padding: 7px 14px; border-radius: 20px;
}
.chips button.on { background: var(--text); color: var(--bg); font-weight: 600; }

.order-row {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
}
.order-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.order-side { font-weight: 600; font-size: 0.95rem; }
.order-side.buyer { color: var(--up); }
.order-side.seller { color: var(--down); }
.order-mid { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.order-mid .lbl { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 2px; }
.order-mid b { font-size: 0.9rem; font-weight: 600; }
.order-bot {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.76rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}

/* Binance's empty state: an outlined mark, one line, nothing else. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 70px 20px; color: var(--muted); text-align: center;
}
.empty-state svg { color: var(--line); }

/* ---------------- install prompt ---------------- */

.install-hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.install-hero img {
  width: 56px; height: 56px; border-radius: 13px; flex: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Addresses and hashes are read character by character, so they get a face
   with unambiguous digits and even spacing. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em; letter-spacing: 0.01em; word-break: break-all;
}

/* ---------------- password reveal ---------------- */

.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 44px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--faint); border-radius: var(--radius-sm); cursor: pointer;
}
.pw-eye:hover { color: var(--text); }
.pw-eye.on { color: var(--yellow); }
.pw-eye:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

/* ---------------- identity verification page ---------------- */

/* One row of steps, so the flow always says where you are and how much is left.
   Horizontally scrollable rather than wrapped: five labels do not fit a phone,
   and a wrapped row makes the page jump as steps complete. */
.steps {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px;
  scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.step-dot { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; }
.step-dot i {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  font-size: 0.72rem; font-weight: 700;
  background: var(--card-2); color: var(--faint);
}
.step-dot span { font-size: 0.78rem; color: var(--faint); white-space: nowrap; }
.step-dot.now i { background: var(--yellow-fill); color: var(--on-yellow); }
.step-dot.now span { color: var(--text); font-weight: 600; }
.step-dot.done i { background: var(--up-dim); color: var(--up); }
.step-dot.done span { color: var(--muted); }

.verify-card { background: var(--card); border-radius: var(--radius); padding: 18px 16px; }
.verify-card .sub { margin-bottom: 16px; }

/* Placeholder shown before a photo exists — the shape of the thing being asked
   for, rather than an empty box. */
.doc-guide {
  position: relative; aspect-ratio: 3 / 2; background: var(--bg-2);
  border-radius: var(--radius); display: grid; place-items: center; margin-bottom: 14px;
}
.doc-guide .doc-frame {
  position: absolute; inset: 12% 8%;
  border: 2px dashed rgba(252, 213, 53, 0.55); border-radius: var(--radius-sm);
}
.doc-guide span { color: var(--faint); font-size: 0.85rem; z-index: 1; }
/* The live preview fills the guide; the dashed frame sits over it. */
.doc-guide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}
.doc-guide .doc-frame { z-index: 1; }

.shot-preview {
  border-radius: var(--radius); overflow: hidden; background: #000; margin-bottom: 14px;
}
.shot-preview img { width: 100%; display: block; }
.shot-preview.sm { margin: 0; }

.review-grid { display: grid; gap: 12px; }
.review-grid > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.review-grid .lbl { color: var(--muted); font-size: 0.85rem; }

/* Liveness frames, shown back to the user during verification. The admin
   console has its own copy of this rule — the two apps do not share a
   stylesheet. */
.kyc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }

/* ---------------- light theme ----------------

   Three states, resolved in this order:
     no data-theme      follow the device
     data-theme="light" light whatever the device says
     data-theme="dark"  dark whatever the device says

   The :not([data-theme="dark"]) is what lets an explicit dark choice survive on
   a phone set to light. Without it the media query wins and the setting appears
   to do nothing for half the people who touch it.

   Values follow Binance's own light mode: white ground, #1E2329 text, #EAECEF
   rules. Buy green and sell red darken a little, because the dark-mode versions
   vibrate against white. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --bg-2: #fafafa;
    --card: #ffffff;
    --card-2: #f5f5f5;
    --line: #eaecef;
    --line-soft: #f0f1f3;

    --text: #1e2329;
    --muted: #707a8a;
    --faint: #929aa5;

    /* Dark enough to read on white; the bright yellow lives on in --yellow-fill. */
    --yellow: #8f6400;
    --yellow-2: #6f4e00;
    --yellow-dim: rgba(252, 213, 53, 0.18);

    --up: #02a56b;
    --up-dim: rgba(2, 165, 107, 0.12);
    --down: #d9304a;
    --down-dim: rgba(217, 48, 74, 0.10);
    --info: #1f6feb;
    --info-dim: rgba(31, 111, 235, 0.10);

    --shadow: 0 1px 2px rgba(24, 26, 32, 0.06), 0 1px 3px rgba(24, 26, 32, 0.04);
  }
  :root:not([data-theme="dark"]) .offer,
  :root:not([data-theme="dark"]) .tcard,
  :root:not([data-theme="dark"]) .verify-card,
  :root:not([data-theme="dark"]) .order-row,
  :root:not([data-theme="dark"]) .stat,
  :root:not([data-theme="dark"]) .item {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  /* Settings rows are a list, not a stack of cards. Boxing each one on white
     put a border around every single line of the account page. */
  :root:not([data-theme="dark"]) .srow { border-bottom-color: var(--line); }
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #fafafa;
  --card: #ffffff;
  --card-2: #f5f5f5;
  --line: #eaecef;
  --line-soft: #f0f1f3;

  --text: #1e2329;
  --muted: #707a8a;
  --faint: #929aa5;

  /* Dark enough to read on white; the bright yellow lives on in --yellow-fill. */
  --yellow: #8f6400;
  --yellow-2: #6f4e00;
  --yellow-dim: rgba(252, 213, 53, 0.18);

  --up: #02a56b;
  --up-dim: rgba(2, 165, 107, 0.12);
  --down: #d9304a;
  --down-dim: rgba(217, 48, 74, 0.10);
  --info: #1f6feb;
  --info-dim: rgba(31, 111, 235, 0.10);

  --shadow: 0 1px 2px rgba(24, 26, 32, 0.06), 0 1px 3px rgba(24, 26, 32, 0.04);
}
:root[data-theme="light"] .offer,
:root[data-theme="light"] .tcard,
:root[data-theme="light"] .verify-card,
:root[data-theme="light"] .order-row,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .item {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .srow { border-bottom-color: var(--line); }

/* ---------------- touch feedback ----------------

   Android paints a translucent blue box over anything tappable. It is the
   default because most pages give no press feedback at all — this one does, so
   the box is just noise sitting on top of it. */
* { -webkit-tap-highlight-color: transparent; }

.bottomnav a, .btn, .top-btn, .chips button, .tabs button, .order-tabs button,
.tier-badge, .pw-eye, .seg button, .doc-actions .btn {
  transition: background-color 0.15s ease, color 0.15s ease,
              transform 0.08s ease, opacity 0.15s ease;
}
.btn:active, .top-btn:active, .chips button:active,
.tabs button:active, .order-tabs button:active { transform: scale(0.975); }
.bottomnav a:active { opacity: 0.55; }
.bottomnav a svg { transition: transform 0.12s ease; }
.bottomnav a:active svg { transform: scale(0.9); }

/* Keyboard users still need to see where they are. */
.btn:focus-visible, .top-btn:focus-visible, .bottomnav a:focus-visible,
.chips button:focus-visible, .tabs button:focus-visible, .order-tabs button:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Theme picker — three segments, so "Auto" is a visible choice rather than an
   implied default nobody can get back to. */
.theme-seg { display: flex; gap: 6px; }
.theme-seg button {
  flex: 1; padding: 9px 4px; border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--muted); font-size: 0.86rem; font-weight: 500;
}
.theme-seg button.on-green { background: var(--yellow-fill); color: var(--on-yellow); font-weight: 600; }

/* ---------------- market filter bar ---------------- */

.filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .grow { flex: 1; min-width: 0; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 18px; white-space: nowrap;
  background: var(--card); color: var(--text); font-size: 0.85rem; font-weight: 500;
  border: 1px solid transparent;
}
.fchip svg { opacity: 0.6; }
.fchip.on { border-color: var(--yellow-fill); color: var(--yellow); }
.fchip.on svg { opacity: 1; }
.fchip.icon { padding: 8px 10px; }
.active-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ---------------- chooser sheet ---------------- */

.choices { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; margin: 0 -4px; }
.choice {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 12px; border-radius: var(--radius); text-align: left;
  color: var(--text); font-size: 0.95rem;
}
.choice + .choice { border-top: 1px solid var(--line-soft); border-radius: 0; }
.choice:hover { background: var(--card-2); }
.choice.on { color: var(--yellow); font-weight: 600; }
.choice .grow { flex: 1; min-width: 0; }
.choice .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.choice .tick { display: flex; width: 16px; color: var(--yellow); }

/* A field that opens a sheet rather than the OS dropdown. */
.picker {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); font-size: 0.95rem; text-align: left;
}
.picker span { flex: 1; }
.picker span.muted { color: var(--faint); }
.picker svg { opacity: 0.6; }
.picker:hover { border-color: var(--line); background: var(--card-2); }

/* A value that is deliberately not editable — shown as a fact, not as an input
   box that silently refuses to accept typing. */
.locked-value {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--card-2); color: var(--text); font-size: 0.95rem;
}
.locked-value .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.locked-value .grow { flex: 1; }


.quick-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.quick-amts .btn { padding: 10px 4px; font-size: 0.85rem; }

/* Filter amount entry. Named apart from .amt-input, which the withdraw screen
   owns as a 2.6rem display field - sharing the name rendered this placeholder
   at display size. */
.filter-amt { display: flex; align-items: center; gap: 10px; }
.filter-amt input {
  flex: 1; min-width: 0; font-size: 1rem;
  /* Not inside .field, so it has to carry the input styling itself - without
     this it renders as the browser default, which on a dark page is a white box. */
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px; outline: none; transition: border-color 0.15s;
}
.filter-amt input:focus { border-color: var(--yellow-fill); }
.filter-amt input::placeholder { color: var(--faint); }
.filter-amt span { color: var(--muted); font-weight: 600; font-size: 0.92rem; flex: none; }

/* Deposit: when it arrives, not how it works. */
.arrival { background: var(--card); border-radius: var(--radius); padding: 4px 14px; margin-top: 14px; }
.arrival-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font-size: 0.9rem; }
.arrival-row + .arrival-row { border-top: 1px solid var(--line-soft); }
.arrival-row span { color: var(--muted); }
.arrival-row b { font-weight: 600; }

.wallet-foot { margin-top: 18px; text-align: center; font-size: 0.8rem; color: var(--faint); }

/* ---------------- deposit, Binance layout ----------------

   Order matters here and it is the order the task happens in: scan the code,
   confirm the network, copy the address. The network sits between them because
   choosing the wrong one is the only mistake on this screen that cannot be
   undone. */

.qrcard {
  background: #fff; border-radius: 14px; padding: 16px;
  width: min(260px, 72vw); margin: 4px auto 20px;
  display: grid; place-items: center;
}
.qrcard svg { width: 100%; height: auto; display: block; }

.dep-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.dep-row.block { display: block; }
.dep-row .grow { flex: 1; min-width: 0; }
.dep-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.dep-net { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.dep-addr-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.dep-addr {
  flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.55;
  word-break: break-all; color: var(--text);
}
/* First and last six characters stand out, because those are the ones people
   actually check against the wallet they are sending from. */
.dep-addr .hl { color: var(--yellow); font-weight: 700; }

.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--card-2); color: var(--text);
}
.icon-btn:hover { background: var(--line); }

.dep-warn {
  margin: 16px 0 14px; font-size: 0.82rem; line-height: 1.55; color: var(--muted);
}
.dep-warn b { color: var(--text); }

/* ---------------- pill grids ----------------

   Two columns of pills, the shape every exchange uses for a set of choices.
   A vertical list of radio rows wastes a phone's width and makes eight options
   feel like forty. */

/* Scoped to the grid. `.pill` is also the small status badge next to a name or
   an order, and an unscoped rule here silently turned every one of those into
   a 42px-tall button. */
.pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pill-grid.four { grid-template-columns: repeat(4, 1fr); }
.pill-grid .pill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--card); border: 1px solid transparent;
  color: var(--text); font-size: 0.86rem; font-weight: 400; line-height: 1.25; text-align: center;
}
.pill-grid .pill .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.pill-grid .pill:hover { background: var(--card-2); }
.pill-grid .pill.on { border-color: var(--yellow-fill); color: var(--yellow); font-weight: 600; }
.grid-scroll { max-height: 46vh; overflow-y: auto; padding-right: 2px; }

/* Reset / Confirm, always in the same place. */
.sheet-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 18px; }
.sheet-foot .btn { padding: 13px; }

/* ---------------- filter page ---------------- */

.fsection { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.fsection:first-of-type { padding-top: 6px; }
.fsection-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 0.95rem; font-weight: 600; margin-bottom: 12px;
}

/* Stays put while the sections scroll — the two buttons that end the task
   should never be something you have to go looking for. */
.filter-foot {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
  padding: 14px 0; margin-top: 8px; background: var(--bg);
}
.filter-foot .btn { padding: 14px; }
@media (min-width: 900px) { .filter-foot { bottom: 0; } }

/* Count badge on the filter icon, so an active filter is visible from the bar. */
.fchip.icon { position: relative; }
.fcount {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  border-radius: 8px; padding: 0 4px;
  background: var(--yellow-fill); color: var(--on-yellow);
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  display: grid; place-items: center;
}

/* Recent activity: three rows by default. Twenty rows of log is a wall
   nobody reads, and the question people actually bring here — "was that last
   sign-in me?" — is answered by the top of the list. */
.log-extra { display: none; }
#log-list.log-open .log-extra { display: flex; }
#log-more { display: flex; align-items: center; justify-content: center; gap: 6px; }
#log-more .chev-i { display: inline-flex; transition: transform 0.18s ease; }
#log-more.up .chev-i { transform: rotate(180deg); }