.trade .intro{margin-bottom:16px;color:#586960}
.trade .small-note{color:#586960}
.trade-toolbar{display:flex;align-items:center;gap:16px}
.trade-toolbar .primary{flex:1}
.trade-toolbar .text-button{flex-shrink:0;min-height:44px}
.trade-composer{padding:8px 0 22px;border-bottom:1px solid var(--line)}
.trade-composer h3{font-size:18px;margin:20px 0 4px}
.trade-recipient{display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere;padding:12px 0}
.trade-recipient span,.trade-label{font-size:12px;line-height:1.5;color:#586960}
.trade-card{padding:18px 0;border-top:1px solid var(--line)}
.trade-card-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trade-card h4{margin:0;font-size:16px;overflow-wrap:anywhere;min-width:0}
.trade-card p.trade-label{margin:4px 0 12px}
.trade-status{color:#586960;font-size:12px;line-height:1.4;text-align:right;max-width:48%;flex-shrink:0}
.trade-status.is-complete{color:#087657}
.trade-pair{display:grid;gap:12px;margin:14px 0}
.trade-piece{display:flex;align-items:center;gap:12px;min-width:0}
.trade-piece>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.trade-piece strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.trade-piece .hero-cell-art{flex:0 0 52px;width:52px;height:52px;border-radius:12px;background:#f0edf9;position:relative;overflow:hidden}
.trade-placeholder{font-size:13px;line-height:1.5;color:#586960;margin:0;padding:12px 0}
.trade-actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.trade-actions .primary{width:auto;flex:1 1 180px}
.trade-actions .text-button{min-height:44px}
.trade-confirm{font-size:14px;line-height:1.5;color:#166349;background:#edf9f4;border-radius:12px;padding:14px}
.trade-history{margin-top:24px}
.trade-history summary{font-size:14px;color:#586960;cursor:pointer;min-height:44px;padding-block:12px}
.trade button:focus-visible,.trade select:focus-visible,.trade input:focus-visible,.trade summary:focus-visible,.shop-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.trade .field select{padding-right:28px;text-overflow:ellipsis}
.trade-inventory{margin:18px 0 24px}
.trade-inventory h4{font-size:16px;margin:0 0 6px}.trade-inventory h4>span{font-weight:400;color:var(--muted);margin-left:5px}
.trade-inventory>.small-note{margin:0 0 14px}
.trade-search{margin-bottom:12px}
.trade-inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;max-height:360px;overflow:auto;overscroll-behavior:contain;padding:4px;scroll-padding:4px}
.trade-inventory-item{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:158px;padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;text-align:center}
.trade-inventory-item:hover:not(:disabled){background:#edf6f1}
.trade-inventory-item[aria-pressed=true]{border:2px solid #087b60;padding:11px 5px;background:#edf6f1}
.trade-inventory-item .hero-cell-art{position:relative;overflow:hidden;display:block;width:52px;height:52px;flex-shrink:0;border-radius:10px;background:#f0edf9}
.trade-inventory-item strong{font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.trade-item-stats,.trade-item-source{font-size:11px;line-height:1.5;color:#586960}
.trade-item-selected{font-size:11px;font-weight:650;color:#087657}
.trade-inventory>.trade-piece{margin-top:16px}
.trade-inventory-item:disabled{opacity:.65}
[data-theme=dark] .trade-inventory-item:hover:not(:disabled),[data-theme=dark] .trade-inventory-item[aria-pressed=true]{background:#203e33}
[data-theme=dark] .trade-inventory-item[aria-pressed=true]{border-color:#6dddaf}
[data-theme=dark] :is(.trade-item-stats,.trade-item-source){color:#b0c1b8}
[data-theme=dark] .trade-item-selected{color:#6dddaf}
.trade .primary{background:#087b60}
.trade .primary:disabled{background:#e4eae7;color:#586960}
:root[data-theme=dark] .trade-label,:root[data-theme=dark] .trade-recipient span,:root[data-theme=dark] .trade-status,:root[data-theme=dark] .trade-placeholder,:root[data-theme=dark] .trade-history summary,:root[data-theme=dark] .trade .intro,:root[data-theme=dark] .trade .small-note{color:#b0c1b8}
:root[data-theme=dark] .trade-confirm{background:#203e33;color:#bcead7}
:root[data-theme=dark] .trade-status.is-complete{color:#6dddaf}
@media(max-width:360px){.trade-toolbar{gap:10px}.trade-toolbar .primary{padding-inline:10px}.trade-card-heading{align-items:flex-start}}