/* Trade page (wallet, price board, dialog) and the order history. */
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wallet-tile { color: var(--paper); display: grid; gap: .15rem; justify-items: start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 55%, transparent); }
.balance-strip.is-loading .balance-line { opacity: .55; }
.balance-line { margin: 0; font-size: 1.12rem; font-weight: 800; }
.wallet-tile.side-creditor .num { color: var(--good); }
.wallet-tile.side-debtor .num { color: var(--bad); }
.wallet-tile .chip { font-size: .72rem; padding: 0 9px; }

.market-board { gap: .5rem; }
.board-status { font-size: .85rem; }
.market-head, .market-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.market-head { text-align: center; font-weight: 800; padding-top: .3rem; }
.market-head .is-buy { color: var(--good); }
.market-head .is-sell { color: var(--bad); }
.market-row { padding: .55rem 0; border-top: 1px dashed var(--line); }
.market-name { display: grid; text-align: center; font-size: .92rem; line-height: 1.5; }
.market-name small { font-weight: 400; }

.price-btn {
  display: grid; gap: .1rem; justify-items: center; min-height: 3.8rem; padding: .6rem .4rem;
  border: 1.5px solid; border-radius: var(--radius-sm); font: inherit; cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.price-btn { min-width: 0; }
.price-btn .price { font-size: clamp(.92rem, 4.2vw, 1.12rem); font-weight: 800; white-space: nowrap; }
.price-btn small { color: var(--muted); font-size: .72rem; }
.price-buy { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--ink-2)); }
.price-sell { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, var(--ink-2)); }
.price-buy:hover:not(:disabled) { background: color-mix(in srgb, var(--good) 17%, var(--ink-2)); }
.price-sell:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 17%, var(--ink-2)); }
.price-btn:hover:not(:disabled) { transform: translateY(-1px); }
.price-btn:active:not(:disabled) { transform: translateY(0); }
.price-btn:disabled { opacity: .4; cursor: not-allowed; }
.price-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.price-btn.tick-up { animation: flash-good .9s ease-out; }
.price-btn.tick-down { animation: flash-bad .9s ease-out; }
@keyframes flash-good { from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--good) 45%, transparent); } }
@keyframes flash-bad { from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 45%, transparent); } }

body.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgb(8 6 3 / 62%); backdrop-filter: blur(5px); overflow-y: auto; }
.modal-panel {
  width: min(26rem, 100%); display: grid; gap: .9rem; padding: 1.2rem; border: 1px solid var(--line);
  border-radius: 22px; background: var(--ink-2); box-shadow: var(--shadow); color: var(--paper);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.form-error { min-height: 1.2em; margin: 0; color: var(--bad); font-size: .9rem; }
.words { margin: 0; color: var(--gold-hi); font-size: .9rem; line-height: 1.9; }
.center { text-align: center; }

.countdown {
  --p: 1; position: relative; width: 7.5rem; height: 7.5rem; margin-inline: auto; display: grid; place-items: center;
  border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p) * 360deg), var(--line) 0);
  color: var(--gold-hi); font-size: 2.1rem; font-weight: 800;
}
.countdown::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--ink-2); }
.countdown > span { position: relative; }
.result-icon { width: 5rem; height: 5rem; margin-inline: auto; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 2.6rem; line-height: 1; }
.result-icon.is-good { background: var(--good); box-shadow: 0 0 0 10px color-mix(in srgb, var(--good) 18%, transparent); }
.result-icon.is-bad { background: var(--bad); box-shadow: 0 0 0 10px color-mix(in srgb, var(--bad) 18%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .modal-panel { animation: modal-in .2s ease-out; }
  .result-icon { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
}
@media (max-width: 560px) {
  .modal-overlay { padding: 0; align-items: end; }
  .modal-panel { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
  .modal-panel::before { content: ""; width: 44px; height: 4px; border-radius: 4px; background: var(--line); margin: -.4rem auto .1rem; }
}

/* order history */
.order-card { position: relative; display: grid; gap: .7rem; padding-inline-start: 1.3rem; overflow: hidden; }
.order-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--muted); }
.order-card.ord-buy::before { background: var(--good); }
.order-card.ord-sell::before { background: var(--bad); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr 1fr; } .fact:last-child { grid-column: 1 / -1; } .market-board { padding: 14px 12px; } }
.fact { display: grid; justify-items: start; line-height: 1.5; }
.fact strong { font-size: .98rem; }
.order-reason { margin: 0; padding: .4rem .7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); font-size: .88rem; }
.order-foot { font-size: .8rem; align-items: flex-end; }
.order-tags { display: inline-flex; gap: .4rem; }
.empty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--muted); }
.empty .icon { width: 2.6rem; height: 2.6rem; }

/* compact balance and price fit */
.card.balance-strip { padding: 12px 14px; gap: 8px; }
.balance-strip .wallet-grid { gap: .5rem; }
.balance-strip .wallet-tile { padding: .45rem .6rem; gap: .05rem; }
.balance-strip .balance-line { font-size: 1.02rem; font-weight: 800; }
.balance-strip .wallet-tile .num { font-weight: 800; }
.balance-strip .wallet-tile .chip { font-size: .68rem; padding: 0 8px; line-height: 1.5; }
.price-btn { padding: .5rem .2rem; min-height: 3.4rem; }
.price-btn .price.num { font-size: clamp(.8rem, 3.8vw, 1.08rem); font-weight: 800; letter-spacing: -.02em; }
.price-btn small.num { font-size: .68rem; font-weight: 700; }
@media (max-width: 480px) {
  .market-head, .market-row { grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr); gap: .4rem; }
  .market-name { font-size: .85rem; }
  .market-board.card { padding: 14px 10px; }
}

/* compact balance v2: one slim row per wallet */
.card.balance-strip { padding: 10px 12px; gap: 6px; }
.balance-strip .wallet-grid { grid-template-columns: 1fr; gap: .35rem; }
.balance-strip .wallet-tile { grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .5rem; padding: .3rem .6rem; justify-items: stretch; }
.balance-strip .wallet-tile small { font-size: .8rem; }
.balance-strip .balance-line { font-size: 1rem; text-align: center; }
.balance-strip .wallet-tile .chip { font-size: .66rem; padding: 0 8px; white-space: nowrap; }
.balance-strip > .row { min-height: 0; }
.balance-strip .icon-btn { width: 34px; height: 34px; }

/* compact balance v3: wide bar like the accounting app */
.card.balance-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; row-gap: 4px; padding: 10px 14px; }
.card.balance-strip > .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 8px; }
.card.balance-strip > .row strong { order: 1; font-size: 1.05rem; }
.card.balance-strip > .row .icon-btn { order: 2; width: 34px; height: 34px; }
.card.balance-strip > .row .muted { order: 3; flex-basis: 100%; font-size: .82rem; font-weight: 700; }
.card.balance-strip .wallet-grid { display: grid; grid-template-columns: 1fr; gap: 2px; justify-self: end; }
.card.balance-strip .wallet-tile { display: flex; align-items: baseline; gap: .4rem; padding: 0; border: 0; background: none; }
.card.balance-strip .wallet-tile small { display: none; }
.card.balance-strip .balance-line { font-size: 1.2rem; font-weight: 800; text-align: start; }
.card.balance-strip .wallet-tile .chip { padding: 0; background: none; color: var(--paper); font-size: .8rem; font-weight: 800; }
@media (max-width: 520px) {
  .card.balance-strip { grid-template-columns: 1fr; }
  .card.balance-strip > .row { flex-wrap: nowrap; }
  .card.balance-strip > .row .muted { order: 2; flex: 1 1 auto; flex-basis: auto; text-align: center; font-size: .78rem; }
  .card.balance-strip > .row .icon-btn { order: 3; }
  .card.balance-strip .wallet-grid { justify-self: stretch; }
  .card.balance-strip .balance-line { font-size: 1.1rem; }
}

/* compact balance v4: aligned columns */
.card.balance-strip > .row .muted { text-align: right; }
.card.balance-strip .wallet-grid { grid-template-columns: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; }
.card.balance-strip .wallet-tile { display: contents; }
.card.balance-strip .wallet-tile .chip { justify-self: start; white-space: nowrap; }
@media (max-width: 520px) {
  .card.balance-strip .wallet-grid { grid-template-columns: 1fr auto; }
  .card.balance-strip > .row .muted { text-align: center; }
}

/* compact balance v5: two columns on phones like the reference app */
@media (max-width: 520px) {
  .card.balance-strip { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 0; padding: 8px 10px; }
  .card.balance-strip > .row { flex-wrap: wrap; justify-content: flex-start; gap: 0 4px; }
  .card.balance-strip > .row strong { order: 1; font-size: .95rem; }
  .card.balance-strip > .row .icon-btn { order: 2; width: 30px; height: 30px; }
  .card.balance-strip > .row .muted { order: 3; flex: 0 0 100%; flex-basis: 100%; text-align: right; font-size: .7rem; }
  .card.balance-strip .wallet-grid { grid-template-columns: auto auto; justify-self: end; column-gap: 8px; row-gap: 1px; }
  .card.balance-strip .balance-line { font-size: 1rem; }
  .card.balance-strip .wallet-tile .chip { font-size: .72rem; }
}

/* compact balance v6: narrow title column, numbers never wrap */
.card.balance-strip .balance-line { white-space: nowrap; }
@media (max-width: 520px) {
  .card.balance-strip { grid-template-columns: fit-content(112px) 1fr; }
  .card.balance-strip .balance-line { font-size: .95rem; }
  .card.balance-strip .wallet-tile .chip { font-size: .7rem; }
}

/* compact balance v7: rows start from the left, small unit, refresh icon first */
.card.balance-strip .wallet-grid { grid-template-columns: 1fr; justify-items: end; row-gap: 1px; }
.card.balance-strip .wallet-tile { display: flex; align-items: baseline; gap: .35rem; }
.card.balance-strip .wallet-tile .chip { justify-self: auto; font-size: .7rem; }
.card.balance-strip .balance-line { font-size: .7rem; font-weight: 800; }
.card.balance-strip .balance-line .num { font-size: .98rem; }
.card.balance-strip > .row .icon-btn { order: 1; width: 26px; height: 26px; }
.card.balance-strip > .row .icon-btn .icon { width: 14px; height: 14px; }
.card.balance-strip > .row strong { order: 2; }
.card.balance-strip > .row .muted { order: 3; }
@media (max-width: 520px) {
  .card.balance-strip .balance-line { font-size: .7rem; }
  .card.balance-strip .balance-line .num { font-size: .95rem; }
  .card.balance-strip > .row .icon-btn { order: 1; width: 26px; height: 26px; }
  .card.balance-strip > .row strong { order: 2; }
  .card.balance-strip > .row .muted { order: 3; }
}

/* compact balance v8: price figures scale with their own box, bolder */
.price-btn { container-type: inline-size; }
.price-btn .price.num { font-size: clamp(.8rem, 3.8vw, 1.08rem); font-size: clamp(.85rem, 14.5cqw, 1.6rem); font-weight: 900; letter-spacing: -.02em; }

/* credit limit line */
.limit-line { margin: 0; font-weight: 700; padding-inline-start: .6rem; border-inline-start: 3px solid #b8860b; }
.limit-line:empty { display: none; }