.trade-board-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.offer-board{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-sm)}
.offer-board.mine{background:linear-gradient(180deg,var(--purple-panel),var(--surface))}.offer-board.theirs{background:linear-gradient(180deg,var(--pink-panel),var(--surface))}
.offer-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.offer-board-head>div{display:grid;gap:2px}.offer-board-head strong{font-size:15px}.offer-board-head small{font-size:11px;color:var(--ink-soft)}
.presence-pill{border-radius:999px;padding:4px 8px;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;background:var(--neutral-soft);color:var(--ink-faint)}.presence-pill.online{background:var(--mint-soft);color:var(--mint-ink)}.presence-pill.offline{background:var(--amber-soft);color:var(--amber-ink)}
.add-more-callout{margin:0 0 9px;padding:7px 9px;border-radius:10px;background:var(--blue-soft);color:var(--blue-ink);font-size:10px;font-weight:900}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.offer-slot{appearance:none;position:relative;aspect-ratio:1/1;border:1px dashed var(--slot-empty-line);border-radius:16px;background:var(--slot-empty);display:grid;place-items:center;overflow:hidden;padding:5px;color:var(--slot-empty-ink)}.offer-slot.empty span{font-size:28px;font-weight:700}.offer-slot.empty.addable{cursor:pointer;transition:transform .14s var(--ease),border-color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease)}.offer-slot.empty.addable:hover{border-color:var(--purple-focus);background:var(--purple-soft);box-shadow:0 0 0 3px var(--purple-focus-ring)}.offer-slot.empty.addable:active{transform:scale(.97)}.offer-slot.empty.addable:focus-visible{outline:2px solid var(--purple-focus);outline-offset:2px}.offer-slot.filled{border-style:solid;border-color:var(--line);background:var(--surface);grid-template-rows:1fr auto auto;color:var(--ink);cursor:default}.offer-slot.filled img{width:100%;height:100%;min-height:0;object-fit:contain}.offer-slot.filled>span{max-width:100%;font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offer-item-badge{max-width:100%;padding:2px 5px;border-radius:999px;background:var(--pink-soft);color:var(--red-ink);font-size:7px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offer-slot.removable{cursor:pointer}.offer-slot.removable:hover{border-color:var(--purple-focus);box-shadow:0 0 0 3px var(--purple-focus-ring)}
.offer-board footer{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10px;color:var(--ink-soft)}.offer-board footer>span{margin-right:auto}.ready-state{color:var(--mint-ink)}.confirm-state{color:var(--purple-deep)}
.trade-actions{padding:12px;margin-bottom:16px}.trade-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.trade-action{appearance:none;border:1px solid var(--line);border-radius:15px;min-height:58px;background:var(--surface);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);font-size:12px}.trade-action span{font-size:20px}.trade-action strong{font-size:11px}.trade-action.reject{background:var(--red-soft);color:var(--red-ink);border-color:var(--red-line)}.trade-action.add-more{background:var(--blue-soft);color:var(--blue-ink);border-color:var(--blue-line)}.trade-action.ready{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-line)}.trade-action:disabled,.risk-button:disabled{opacity:.45;cursor:not-allowed}
.risk-button{width:min(300px,100%);margin:10px auto 0;min-height:42px;border:1px solid var(--purple-border-soft);border-radius:14px;background:var(--risk-panel);color:var(--risk-ink);display:flex;align-items:center;justify-content:center;gap:7px}.risk-button strong{font-size:11px}.risk-button small{font-size:9px;color:var(--ink-soft)}
.confirm-panel{margin-top:11px;padding:11px;border-radius:14px;background:var(--purple-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}.confirm-panel>div{display:grid;gap:2px}.confirm-panel strong{font-size:12px}.confirm-panel span{font-size:10px;color:var(--ink-soft)}
.trade-actions>.notice{margin-top:10px}
@media(max-width:720px){.trade-board-layout{grid-template-columns:1fr;gap:10px;margin:12px 0}.offer-board{padding:10px;border-radius:20px}.offer-grid{gap:6px}.offer-slot{border-radius:13px}.offer-slot.filled>span{font-size:8px}.trade-actions{padding:9px}.trade-action-row{gap:6px}.trade-action{min-height:52px;display:grid;grid-template-rows:auto auto;gap:1px}.trade-action span{font-size:18px}.trade-action strong{font-size:9px}.risk-button{min-height:38px;margin-top:8px}.confirm-panel{align-items:stretch;display:grid;grid-template-columns:1fr}.confirm-panel .btn{width:100%}}
.offer-slot.inspectable{display:block;padding:0;overflow:visible}.offer-slot-main{appearance:none;border:0;background:transparent;width:100%;height:100%;padding:5px;display:grid;grid-template-rows:1fr auto auto;place-items:center;color:var(--ink);cursor:pointer;border-radius:15px;overflow:hidden}.offer-slot-main img{width:100%;height:100%;min-height:0;object-fit:contain}.offer-slot-main>span{max-width:100%;font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offer-slot-main:hover{box-shadow:inset 0 0 0 2px var(--purple-focus)}.offer-remove-button{position:absolute;right:4px;top:4px;width:26px;height:26px;border:0;border-radius:9px;background:var(--red-soft);color:var(--red-ink);font-size:17px;font-weight:1000;display:grid;place-items:center;z-index:2}.offer-remove-button:hover{box-shadow:0 0 0 3px var(--red-line)}