/* Trade page */
.trade-page { padding-top: 40px; padding-bottom: 40px; }
.page-head { margin-bottom: 22px; }
.page-head .lead { margin-top: 12px; }
.trade-ca { max-width: 620px; margin-bottom: 28px; }

.paths { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.path-agent, .path-all { display: grid; gap: 18px; min-width: 0; }
.path-agent > *, .swap > *, #agent-body > * { min-width: 0; }
.path-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; }
.path-head h2, .path-all h2 { font-size: 30px; margin-bottom: 6px; }
.refund-stat { display: grid; gap: 4px; text-align: right; padding: 10px 14px; background: var(--st1-bg); border-radius: var(--r-sm); }
.refund-stat .v { font-size: 30px; line-height: 1; color: var(--st1-ink); }
.refund-stat .k { font-size: 13px; color: var(--st1-ink); }
.gap { margin-bottom: 12px; }
#agent-body { display: grid; gap: 16px; }

.swap { display: grid; gap: 16px; }
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--edge); border-radius: var(--r-sm); overflow: hidden; }
.tab { all: unset; text-align: center; padding: 11px 0; font-weight: 700; cursor: pointer; background: var(--surface); }
.tab + .tab { border-left: 2px solid var(--edge); }
.tab.on { background: var(--ink); color: #fff; }
.tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bal-btn { all: unset; cursor: pointer; color: var(--muted); }
.bal-btn:hover { color: var(--ink); text-decoration: underline; }
.bal-btn:focus-visible { outline: 3px solid var(--gold); }
.amt-box { display: flex; align-items: center; gap: 10px; border: 2px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 16px; background: var(--surface); }
.amt-box:focus-within { border-color: var(--edge); }
.amt { all: unset; flex: 1; min-width: 0; width: 100%; font-family: var(--pixel); font-weight: 600; font-size: 34px; line-height: 1.3; }
.amt::placeholder { color: var(--line-2); }
.amt-box .unit { font-weight: 800; color: var(--muted); }
.out { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.out > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.out > div + div { border-top: 1px solid var(--line); }
.out dt { color: var(--muted); font-size: 14px; }
.out dd { margin: 0; font-weight: 700; text-align: right; }
.out dd.good { color: var(--good); }
.slip { display: inline-flex; gap: 6px; }
.slip-btn { all: unset; cursor: pointer; padding: 4px 10px; border: 2px solid var(--line-2); border-radius: 4px; font-size: 14px; font-weight: 600; }
.slip-btn.on { border-color: var(--edge); background: var(--edge); color: #fff; }
.slip-btn:focus-visible { outline: 3px solid var(--gold); }

.tax-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tax-row > div { display: grid; gap: 2px; padding: 14px 16px; background: var(--bg-2); border-radius: var(--r-sm); }
.tax-row .num { font-size: 32px; line-height: 1; }
.tax-row .k { font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .path-head { grid-template-columns: 1fr; }
  .trade-page { padding-top: 24px; }
  .refund-stat { text-align: left; width: 100%; }
  .amt { font-size: 28px; }
}

/* ---------- pixel world ---------- */
.page-head h1 { color: var(--gold); }
.refund-stat { background: var(--st1-bg); box-shadow: var(--pxb), inset 3px 3px 0 0 #2a4e55; }
.refund-stat .v { font-family: var(--digits); }
.refund-stat .k { font-family: var(--pixel); font-size: 14px; }
.side-tabs { border: 0; gap: 3px; background: var(--edge); box-shadow: var(--pxb); }
.tab { background: var(--bg-2); font-family: var(--pixel); font-weight: 600; font-size: 18px; color: var(--muted); }
.tab + .tab { border-left: 0; }
.tab.on { background: var(--gold); color: var(--edge); box-shadow: inset 3px 3px 0 0 var(--gold-hi), inset -3px -3px 0 0 var(--gold-lo); }
.field-top { font-family: var(--pixel); }
.bal-btn:hover { color: var(--gold); }
.amt-box { border: 0; background: var(--bg-2); box-shadow: var(--pxb), inset 3px 3px 0 0 var(--edge); }
.amt-box:focus-within { box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold), -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold), inset 3px 3px 0 0 var(--edge); }
.amt { color: var(--ink); }
.amt::placeholder { color: #45557f; }
.amt-box .unit { font-family: var(--pixel); font-weight: 600; color: var(--gold); }
.out { border: 0; background: var(--bg-2); box-shadow: var(--pxb); }
.out > div + div { border-top: 2px solid var(--line); }
.out dd { font-family: var(--pixel); font-weight: 600; color: var(--ink); }
.out dd.good { color: var(--good); }
.slip-btn { border: 0; box-shadow: 0 0 0 2px var(--line-2); font-family: var(--pixel); }
.slip-btn.on { background: var(--gold); color: var(--edge); box-shadow: 0 0 0 2px var(--edge); }
.tax-row > div { background: var(--bg-2); box-shadow: var(--pxb); }
.tax-row .num { color: var(--gold); }