/* Collection tools use the same paper, ink and collectible colours as the cards. */
.collection-card-shell { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.collection-card-shell > a { width: 100%; }
.collection-feature-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 13px; border: 1px solid #d0c8db; border-radius: 99px; background: #fff9; color: #665773; font: 700 12px inherit; cursor: pointer; transition: background .18s, transform .18s, color .18s; }
.collection-feature-toggle:hover, .collection-feature-toggle.is-featured { color: #6535a0; background: #efe3ff; border-color: #b391d7; }
.collection-feature-toggle:hover { transform: translateY(-2px); }
.trading-quota { color: #75667d; font-size: .76rem; font-weight: 650; }
.profile-collection-toolbar { flex-wrap: wrap; gap: 10px; }
.collection-size-control { display: flex; align-items: center; gap: 10px; margin-left: auto; color: #665773; font-size: 12px; font-weight: 750; }
.collection-stack-control { display: inline-flex; align-items: center; gap: 7px; color: #665773; font-size: 12px; font-weight: 750; cursor: pointer; }
.collection-stack-control input { accent-color: #8850d1; cursor: pointer; }
.collection-size-control input { width: 120px; min-height: 28px; accent-color: #8850d1; cursor: pointer; }
.collection-size-control output { min-width: 4ch; font-variant-numeric: tabular-nums; }
.public-profile-page > #profileCardGrid, #profileCardGrid .collection-set-grid { grid-template-columns: repeat(auto-fill, minmax(0, min(100%, var(--collection-card-width, 288px)))); }
#profileCardGrid .collection-card-size-stage { width: 340px; zoom: var(--collection-card-scale, .8); }
#profileCardGrid .collection-card-size-stage .trading-card { width: 340px; }
#profileCardGrid .collection-card-shell { align-items: start; }
#profileCardGrid .collection-card-shell { gap: calc(13px * var(--collection-card-scale, .8)); }
#profileCardGrid .collection-feature-toggle { zoom: var(--collection-card-scale, .8); }

.public-profile-page > .collection-by-set { display: flex; flex-direction: column; gap: 48px; }
.collection-set-section { width: 100%; min-width: 0; }
.collection-set-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 12px 0 24px; padding: 0 0 16px; border-bottom: 2px solid #d8cde3; }
.collection-set-heading span { color: #796586; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.collection-set-heading h2 { margin: 5px 0 0; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
.collection-set-heading a { color: inherit; text-decoration: none; }
.collection-set-heading a:hover { text-decoration: underline; text-underline-offset: 5px; }
.collection-set-heading p { flex-shrink: 0; margin: 0; color: #665773; text-align: right; font-size: 12px; line-height: 1.7; }
.collection-set-heading small { color: #84798c; }
.collection-set-heading > div:first-child { min-width: 0; }
.collection-set-summary { flex: 0 0 260px; display: grid; gap: 8px; text-align: right; }
.collection-set-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #665773; font-size: 12px; font-variant-numeric: tabular-nums; }
.collection-set-progress progress { display: block; width: 100%; height: 7px; margin-top: 6px; overflow: hidden; border: 0; border-radius: 99px; background: #e5dce9; accent-color: #8954bd; }
.collection-set-progress progress::-webkit-progress-bar { background: #e5dce9; border-radius: 99px; }
.collection-set-progress progress::-webkit-progress-value { background: #8954bd; border-radius: 99px; }
.collection-set-progress progress::-moz-progress-bar { background: #8954bd; border-radius: 99px; }
.collection-set-progress.is-complete .collection-set-progress-label > * { color: #327d61; }
.collection-set-progress.is-complete progress { accent-color: #327d61; }
.collection-set-progress.is-complete progress::-webkit-progress-value { background: #327d61; }
.collection-set-progress.is-complete progress::-moz-progress-bar { background: #327d61; }
.collection-set-grid { max-width: none; gap: 36px 28px; padding: 0; }
.collection-stack-entry { min-width: 0; padding-top: calc(40px * var(--collection-card-scale, .8)); }
.collection-card-stack { position: relative; isolation: isolate; width: 100%; margin: 0 0 22px; }
.collection-card-stack::before, .collection-card-stack::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 2px solid #a493b7; border-radius: 11px; background: linear-gradient(145deg, #f6f0fc, #d8c7ea); box-shadow: 1px 2px 2px #4930571a; }
.collection-card-stack[data-layers="2"]::before, .collection-card-stack[data-layers="3"]::before { content: ''; transform: translate(10px, 10px); }
.collection-card-stack[data-layers="3"]::after { content: ''; transform: translate(20px, 20px); z-index: -2; background: #cbb8dd; }
.collection-copy-count { position: absolute; z-index: 2; right: -7px; top: -38px; min-width: 40px; padding: 6px 10px; border: 2px solid #493057; border-radius: 99px; background: #fff8de; color: #493057; box-shadow: 2px 3px 0 #493057; text-align: center; font-size: 16px; line-height: 1.1; font-weight: 900; pointer-events: none; }
.collection-copy-picker { display: grid; gap: 5px; width: 100%; margin: 0; color: #796586; font-size: 11px; font-weight: 750; }
.collection-copy-picker select { width: 100%; min-width: 0; padding: 9px 25px 9px 9px; border: 1px solid #c4b5d1; border-radius: 8px; background: #fffc; color: #493057; font: inherit; font-size: 12px; text-overflow: ellipsis; }
.collection-copy-detail { margin: 0; color: #665773; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.collection-copy-filter { display: block; margin-top: 6px; color: #796586; font-size: 11px; }
.collection-stack-entry > .collection-copy-picker, .collection-stack-entry > .collection-copy-detail { margin-top: 12px; }
.collection-stack-entry .collection-feature-toggle { margin-top: 0; }
@media (max-width: 600px) {
    .collection-size-control { margin-left: 0; }
    .collection-set-heading { align-items: stretch; flex-direction: column; gap: 12px; }
    .collection-set-summary { flex-basis: auto; text-align: left; }
    .collection-set-heading p { font-size: 11px; text-align: left; }
}
#openTradeComposerButton[hidden] { display: none; }
.showcase-editor { padding: 20px; }
.showcase-editor[hidden] { display: none; }
.showcase-editor-panel button { padding: 9px 13px; border: 2px solid #25252d; border-radius: 8px; background: #f4eaff; box-shadow: 2px 2px 0 #25252d; color: #25252d; font-weight: 900; cursor: pointer; }
.showcase-editor-panel .showcase-editor-close { padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 2rem; line-height: 1; }
.showcase-editor .showcase-editor-panel { width: min(1800px, 100%); max-height: calc(100dvh - 40px); padding: 24px; gap: 15px; border: 2px solid #32273e; border-radius: 20px; background: #fdfaf5; box-shadow: 0 28px 100px #10082288, 7px 7px 0 #31223d; box-sizing: border-box; }
.showcase-editor-panel > header { flex-shrink: 0; }
.showcase-editor-panel > header h3 { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -.06em; margin: 4px 0; }
.showcase-editor-panel > header p { font-size: .78rem; }
.showcase-editor-panel > footer { flex-shrink: 0; margin-top: auto; }
.showcase-editor-panel > footer button { padding: 12px 22px; border-radius: 10px; }
.showcase-editor-panel .showcase-items-settings { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.showcase-editor-panel .showcase-items-settings legend { float: left; margin: 0 8px 0 0; color: #75667d; font-size: .75rem; }
.showcase-items-settings label { font-size: .8rem; }
.showcase-items-settings input { accent-color: #8d55ef; width: 17px; height: 17px; }
.card-picker { --picker-accent: #8850d1; --picker-wash: #eee3fa; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; }
.picker-heading strong { font-size: .84rem; font-weight: 850; letter-spacing: -.02em; }
.picker-heading > span { padding: 5px 10px; border-radius: 99px; background: var(--picker-wash); color: #44334f; font: 750 12px ui-monospace, monospace; }
.is-full .picker-heading > span { background: var(--picker-accent); color: #fff; }
.picker-tray { display: flex; gap: 12px; flex-shrink: 0; overflow-x: auto; padding: 15px; border: 1px solid #ded1e6; border-radius: 14px; background: radial-gradient(ellipse at 30% 0, #f8efff, transparent 65%), #f1ece6; box-shadow: inset 0 2px 8px #47334e0a; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #bdb0ca transparent; }
.picker-slot { position: relative; flex: 0 0 116px; min-width: 0; min-height: 169px; display: flex; flex-direction: column; border: 1px dashed #bdb0ca; border-radius: 10px; scroll-snap-align: start; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.picker-slot.is-filled { border-color: transparent; }
.picker-slot-empty { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 20px 0; color: #9c8da8; }
.picker-slot-empty > span { font-size: 26px; font-weight: 300; }
.picker-slot-empty small { font-size: .67rem; font-weight: 650; }
.is-dragging .picker-slot { border-style: dashed; border-color: var(--picker-accent); }
.picker-slot.is-drop-target { transform: translateY(-3px); background: var(--picker-wash); border: 2px solid var(--picker-accent); box-shadow: 0 0 0 4px #ad81e326; }
.picker-library { display: flex; min-height: 0; flex-direction: column; margin-top: 10px; }
.picker-library .card-browser { margin: 0 !important; gap: 8px; padding: 12px 0; border: 0; background: transparent; }
.picker-library .card-browser > label { flex: 1 1 100px; }
.picker-library .card-browser-search { flex: 1 1 100%; }
.picker-library .card-browser input, .picker-library .card-browser select { min-height: 36px; padding: 6px 9px; background: #fff; font-size: .74rem; border-radius: 7px; border: 1px solid #cfc7d5; }
.picker-library .card-browser input[type=checkbox] { min-height: 0; }
.picker-library .card-browser > label { font-size: .67rem; }
.picker-library .card-browser > button { font-size: .7rem; padding: 7px; border: 0; color: #75667d; box-shadow: none; }
.picker-results { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 10px; font-size: .68rem; color: #8a7b92; }
.picker-grid { min-height: 140px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-content: start; gap: 16px 14px; overflow-y: auto; overscroll-behavior: contain; padding: 5px 7px 12px 3px; scrollbar-width: thin; }
.picker-tile { position: relative; min-width: 0; transition: transform .2s; }
.card-picker .picker-card, .picker-drag-ghost { display: block; position: relative; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 9px; box-shadow: none; color: inherit; text-align: inherit; cursor: grab; touch-action: none; transition: transform .2s, filter .2s; }
.card-picker .picker-card:focus-visible { outline: 3px solid var(--picker-accent); outline-offset: 5px; }
.card-picker .picker-card:hover { transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 6px 5px #36234224); }
.card-picker .picker-card:active { cursor: grabbing; }
/* Scale the complete shared component uniformly; retain its framing and all metadata. */
.picker-card > .trading-card { width: 340px; zoom: var(--picker-card-scale, .42); margin: auto; }
.picker-tray { --picker-card-scale: .25; }
.picker-drag-ghost { --picker-card-scale: .3; }
.picker-check { position: absolute; top: 27px; right: 7px; display: grid; place-items: center; width: 25px; height: 25px; background: #fffc; color: #594368; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px #0002; font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .18s, transform .18s, background .18s; }
.picker-card:hover .picker-check, .picker-card:focus-visible .picker-check, .is-selected .picker-check { opacity: 1; transform: scale(1); }
.is-selected .picker-check { background: var(--picker-accent); color: white; border-color: #fff; }
.picker-grid .is-selected .picker-card { outline: 2px solid var(--picker-accent); outline-offset: 4px; }
.picker-caption { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 9px; font-size: .65rem; font-weight: 750; }
.picker-caption > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-picker .picker-caption button, .card-picker .picker-order button { display: grid; place-items: center; border: 0; padding: 0; border-radius: 5px; width: 28px; min-height: 28px; background: transparent; box-shadow: none; color: #726181; cursor: pointer; }
.card-picker .picker-caption button:hover, .card-picker .picker-order button:hover { background: var(--picker-wash); color: #4e267a; }
.picker-order { display: flex; align-items: center; justify-content: space-between; font: 650 10px ui-monospace, monospace; color: #86768f; }
.picker-order button:disabled { opacity: .25; cursor: default; }
.picker-message { flex-shrink: 0; font-size: .75rem; color: #a13964; margin: 6px 0 0; }
.picker-message:empty { display: none; }
.picker-empty { grid-column: 1 / -1; padding: 25px 8px; color: #86768f; font-size: .85rem; text-align: center; }
.picker-drag-ghost { position: fixed; width: 110px !important; z-index: 35000; pointer-events: none; transform: rotate(-7deg) scale(1.07); filter: drop-shadow(0 15px 18px #16082170); opacity: .95; }
.public-profile-page #tradeComposer { padding: 24px; background: #fcfaf5; border: 1px solid #d9d1dc; box-shadow: 0 4px 22px #33254009; border-radius: 18px; }
#tradeComposer h2 { font-size: 1.7rem; letter-spacing: -.04em; margin-top: 6px; }
#tradeComposer > div > p { color: #7b6b83; font-size: .84rem; }
#tradeComposer #tradeForm { display: block; }
.trade-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.trade-workbench .card-picker { padding: 18px; border: 1px solid #ded5e5; border-radius: 14px; background: #fff; }
.trade-workbench .card-picker + .card-picker { --picker-accent: #30856c; --picker-wash: #dff3e9; border-color: #c9e2d5; }
.trade-workbench .card-picker + .card-picker .picker-tray { background: radial-gradient(ellipse at 30% 0, #eafff2, transparent 65%), #eef1e9; border-color: #c9e2d5; }
.trade-workbench .picker-grid { max-height: 460px; }
.trade-workbench .picker-heading strong { font-size: 1.06rem; }
.trade-workbench .picker-tray { min-height: 196px; }
.trade-review { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #dfd6e4; margin-top: 20px; padding-top: 18px; }
.trade-review p { font-size: .85rem; font-weight: 750; }
.trade-review button { flex-shrink: 0; }
.trade-review button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.trade-confirmation { position: fixed; inset: 0; margin: auto; width: min(1500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 26px; border: 2px solid #33263e; border-radius: 18px; background: #fdfaf5; color: #33263e; box-shadow: 0 24px 80px #170d2d66; }
.trade-confirmation:not([open]) { display: none; }
.trade-confirmation::backdrop { background: #1b1227a8; backdrop-filter: blur(8px); }
.trade-confirmation header, .trade-confirmation footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.trade-confirmation h2 { margin: 0 0 18px; font-size: 1.6rem; letter-spacing: -.04em; }
.trade-confirmation > p { font-size: .8rem; color: #7c6a88; margin: 20px 0; }
.trade-confirmation button:not(.card-preview-button) { padding: 10px 16px; border: 1px solid #a392b2; border-radius: 8px; background: white; font-weight: 750; cursor: pointer; }
.trade-confirmation #confirmTradeButton { background: #ffd166; border: 2px solid #302339; box-shadow: 3px 3px 0 #302339; }
.trade-confirmation #tradeActionConfirm { background: #ffd166; border: 2px solid #302339; box-shadow: 3px 3px 0 #302339; }
.trade-confirmation [role=alert]:empty { display: none; }
.trade-confirmation-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trade-confirmation-cards > section > h3 { font-size: .9rem; }
.trade-confirmation-cards > section > div, .trade-bundle { display: flex; flex-wrap: wrap; align-content: start; align-items: flex-start; gap: 18px; }
.trade-confirmation-cards .card-preview-button, .trade-bundle .card-preview-button { width: auto; }
.trade-card-item { display: flex; flex: 0 0 auto; min-width: 0; flex-direction: column; align-items: stretch; }
.trade-card-item .card-preview-button { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; }
.trade-card-ownership { margin-top: 8px; padding: 8px; border: 1px solid #ded5e5; border-radius: 9px; background: #faf7fc; color: #493650; text-align: left; }
.trade-card-new { display: block; padding: 4px 6px; margin-bottom: 6px; border-radius: 5px; background: #d6f1df; color: #195838; font-size: .7rem; font-weight: 900; overflow-wrap: anywhere; }
.trade-card-new > span { font-weight: 650; }
.trade-card-counts { display: grid; gap: 4px; margin: 0; font-size: .72rem; line-height: 1.35; }
.trade-card-counts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.trade-card-counts dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card-counts dd { flex-shrink: 0; margin: 0; font-weight: 850; font-variant-numeric: tabular-nums; }
.picker-tile .trade-card-ownership { margin: 0 0 9px; }
.trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { width: 340px; zoom: .8; }
.trade-list-item .trade-card-pair { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; }
.trade-card-pair > div > small { display: block; font-size: .8rem; margin-bottom: 12px; font-weight: 800; }
.trades-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1800px; margin: 0 auto 20px; }
.trades-toolbar > a { color: #704396; font-size: .84rem; font-weight: 800; }
#showcaseOptions { display: grid; flex: 1; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px 24px; }
#showcaseOptions > .picker-heading { grid-column: 2; grid-row: 1; }
#showcaseOptions > .picker-tray { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; overflow: auto; min-height: 0; }
#showcaseOptions > .picker-library { grid-column: 1; grid-row: 1 / 4; margin-top: 0; }
#showcaseOptions > .picker-message { grid-column: 2; grid-row: 3; }
#showcaseOptions .picker-slot { min-height: 0; height: auto; aspect-ratio: 1 / 2.1; }
#showcaseOptions > .picker-tray { grid-auto-rows: max-content; }
.picker-library .card-browser, .picker-results { flex-shrink: 0; }
.showcase-editor-panel .social-kicker { padding: 0; background: transparent; color: #8a7697; transform: none; font-size: .65rem; letter-spacing: .12em; }
.showcase-editor .showcase-editor-panel { gap: 10px; padding: 20px; }
.showcase-editor-panel > header h3 { font-size: 1.8rem; }
.picker-library .card-browser { position: relative; }
.picker-library .card-browser > button { position: absolute; inset: auto 0 -24px auto; margin: 0; width: max-content; height: 23px; min-height: 23px; padding: 0 4px; background: transparent; box-shadow: none; border: 0; }
#showcaseEditor [hidden] { display: none; }
.picker-results > span:last-child { display: none; }
#showcaseOptions .picker-slot:not(.is-filled) { aspect-ratio: auto; min-height: 140px; }
.card-picker .card-browser select, .card-picker .card-browser input { box-shadow: none; border-width: 1px; }
.card-picker .picker-grid .picker-card { touch-action: pan-y; }
.card-browser-filters { position: relative; flex: 1 1 100%; }
.card-browser-filters > summary { display: flex; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; padding: 6px 0; color: #75538e; font-size: .71rem; font-weight: 750; }
.card-browser-filters > summary::-webkit-details-marker { display: none; }
.card-browser-filter-panel { position: absolute; inset: calc(100% + 3px) 0 auto; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; border: 1px solid #ccbed9; border-radius: 12px; background: #fffdfa; box-shadow: 0 12px 30px #30174226; }
.card-browser-filter-panel label { font-size: .67rem; }
.picker-library .card-browser:has(.card-browser-filters) { padding-bottom: 6px; }
.picker-library .card-browser:has(.card-browser-filters) > button { bottom: -22px; }
@media (hover: none) { .picker-check { opacity: 1; transform: scale(1); } .picker-card .picker-check { width: 23px; height: 23px; } }
@media (max-width: 760px) {
    .showcase-editor { padding: 6px; }
    .showcase-editor .showcase-editor-panel { padding: 16px 12px; max-height: calc(100dvh - 12px); border-radius: 14px; gap: 10px; }
    .picker-grid { --picker-card-scale: .4; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px 12px; }
    .picker-tray { padding: 10px; gap: 12px; }
    .picker-slot { flex-basis: 98px; min-height: 145px; }
    .picker-tray .picker-caption { display: none; }
    .picker-results > span:last-child { display: none; }
    .trade-workbench { grid-template-columns: 1fr; gap: 18px; }
    .public-profile-page #tradeComposer { padding: 18px 12px; }
    .trade-workbench .card-picker { padding: 12px; }
    .trade-workbench .picker-grid { max-height: 350px; }
    .trade-workbench .picker-tray { min-height: 159px; }
    .trade-review { align-items: stretch; flex-direction: column; }
    .trade-confirmation { padding: 18px; }
    .trade-confirmation-cards { gap: 12px; }
    .trade-bundle { gap: 14px; }
    .trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { zoom: .35; }
    .trade-list-item .trade-card-pair { grid-template-columns: 1fr 1fr; gap: 14px; }
    .trade-card-pair > b { display: none; }
    #showcaseOptions { display: flex; gap: 8px; }
    #showcaseOptions > .picker-tray { display: flex; min-height: 0; max-height: 206px; }
    #showcaseOptions .picker-slot { flex-basis: 88px; min-height: 120px; aspect-ratio: auto; }
    #showcaseOptions > .picker-library { margin-top: 0; }
    #showcaseOptions .picker-heading { padding-bottom: 0; }
    #showcaseOptions .card-browser { padding: 4px 0; }
    #showcaseOptions .card-browser > label { flex-basis: 80px; }
}
.motion-reduced :is(.card-picker *, .collection-feature-toggle) { transition: none !important; animation: none !important; }

/* A focused trading workspace, opened from the collector or an individual card. */
#tradeComposer { position: fixed; inset: 0; margin: auto; width: min(1800px, calc(100vw - 28px)); max-width: none; height: min(1100px, calc(100dvh - 28px)); max-height: calc(100dvh - 28px); padding: 22px; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; background: #fdfaf5; border: 2px solid #33263e; border-radius: 18px; color: #33263e; box-shadow: 0 28px 100px #10082266; }
#tradeComposer:not([open]), #tradeComposer[hidden] { display: none; }
#tradeComposer::backdrop { background: #21162fba; backdrop-filter: blur(8px); }
.trade-dialog-header { display: flex; flex-shrink: 0; justify-content: space-between; align-items: flex-start; gap: 16px; }
.trade-dialog-header h2 { margin: 5px 0 4px; }
.trade-dialog-header .social-kicker { padding: 0; color: #8b729a; background: transparent; transform: none; font-size: .65rem; }
.trade-dialog-header p { font-size: .78rem; color: #7c6988; }
#closeTradeComposerButton { padding: 2px 8px; border: 0; box-shadow: none; background: transparent; font-size: 26px; }
#tradeComposer #tradeForm { display: flex; flex: 1; min-height: 0; flex-direction: column; margin-top: 16px; gap: 0; align-items: stretch; }
#tradeComposer .trade-workbench { flex: 1; min-height: 0; margin: 0; gap: 18px; }
#tradeComposer .trade-message { flex-shrink: 0; display: grid; gap: 5px; margin-top: 12px; color: #66566f; font-size: .76rem; font-weight: 750; }
#tradeComposer .trade-message textarea { width: 100%; min-height: 58px; box-sizing: border-box; resize: vertical; padding: 9px 11px; border: 1px solid #cfc2d7; border-radius: 9px; background: #fff; color: #33263e; font: inherit; }
#tradeComposer .card-picker { padding: 14px; }
#tradeComposer .picker-tray { min-height: 200px; max-height: 270px; padding: 10px; }
#tradeComposer .picker-slot { flex-basis: 140px; min-height: 180px; }
#tradeComposer .picker-tray .picker-caption, #tradeComposer .picker-order { display: none; }
#tradeComposer .picker-library { flex: 1; min-height: 0; margin-top: 6px; }
#tradeComposer .picker-grid { min-height: 65px; max-height: none; }
#tradeComposer .trade-review { flex-shrink: 0; margin-top: 12px; padding-top: 12px; }
#tradeComposer #tradeStatus:empty { display: none; }
.trade-inventory-tabs { display: none; }
@media (min-width: 761px) and (max-height: 800px) {
    .public-profile-page #tradeComposer { padding: 16px; }
    .trade-dialog-header .social-kicker, .trade-dialog-header > div > p:first-of-type { display: none; }
    .trade-dialog-header h2 { margin: 0; font-size: 1.4rem !important; }
    .trade-dialog-header .trading-quota { margin: 6px 0 0; }
    #tradeComposer #tradeForm { margin-top: 12px; }
    #tradeComposer .card-picker { padding: 10px; }
    #tradeComposer .picker-tray { --picker-card-scale: .17; min-height: 105px; max-height: 118px; padding: 7px; }
    #tradeComposer .picker-slot { flex-basis: 75px; min-height: 101px; }
    #tradeComposer .picker-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
    #tradeComposer .picker-slot-empty { padding: 8px 0; gap: 5px; }
    #tradeComposer .picker-slot-empty small { font-size: .55rem; }
    #tradeComposer .picker-library .card-browser { padding-top: 5px; gap: 3px; }
    #tradeComposer .trade-review { margin-top: 8px; padding-top: 8px; }
    #tradeComposer .trade-review p { margin: 0; }
}
@media (max-width: 760px) {
    #tradeComposer { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); padding: 14px 10px; }
    .trade-dialog-header h2 { font-size: 1.35rem !important; }
    .trade-dialog-header p { font-size: .7rem; }
    .trade-dialog-header > div > p:first-of-type { display: none; }
    #tradeComposer #tradeForm { margin-top: 10px; }
    .trade-inventory-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
    .trade-inventory-tabs button { flex: 1; font-size: .78rem; padding: 8px; border-width: 1px; box-shadow: none; background: #fff; }
    .trade-inventory-tabs [aria-selected=true] { background: #ede1fa; border-color: #a57ace; }
    #tradeComposer .trade-workbench { display: flex; }
    #tradeComposer .card-picker { flex: 1; padding: 10px; }
    #tradeComposer .picker-heading { display: none; }
    #tradeForm[data-active-inventory=offered] #requestedCards, #tradeForm[data-active-inventory=requested] #offeredCards { display: none; }
    #tradeComposer .picker-tray { --picker-card-scale: .2; min-height: 120px; max-height: 150px; }
    #tradeComposer .picker-slot { flex-basis: 78px; min-height: 112px; }
    #tradeComposer .trade-review { flex-direction: row; gap: 8px; margin-top: 8px; padding-top: 8px; align-items: center; }
    #tradeComposer .trade-review p { font-size: .7rem; }
    #tradeComposer .trade-review button { padding: 8px 12px; font-size: .76rem; }
}

/* Let wide screens show the actual cards at a comfortable reading size. */
.trades-page { max-width: 1848px; }
.trades-page .trade-list { max-width: 1800px; }
.trades-page .trade-filters { flex-wrap: wrap; }
.trade-list-item .trade-bundle { flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 4px 8px 14px 2px; scrollbar-width: thin; }
.trade-list-item .trade-bundle .card-preview-button { flex: 0 0 auto; }
.trade-list-item .trade-bundle .card-preview-button > .trading-card { width: 340px; zoom: .36; }
.trade-list-item .trade-card-pair > div { min-width: 0; }
.trade-list-item .trade-bundle:focus-visible { outline: 2px solid #7543c5; outline-offset: 3px; }
@media (max-width: 600px) {
    .trades-page .trade-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .trades-page .trade-filters button { min-width: 0; padding: 9px 4px; font-size: 12px; }
}
.trade-list-item { padding: 28px; }
.trade-list-item .trade-card-pair { gap: 28px; }
@media (min-width: 761px) and (max-width: 1100px) {
    .trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { zoom: .65; }
    #showcaseOptions { grid-template-columns: minmax(0, 1.3fr) minmax(290px, 1fr); }
    #showcaseOptions .picker-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 760px) {
    .trade-list-item { padding: 14px; }
    .trade-list-item .trade-card-pair { gap: 14px; }
}

/* Keep ownership at readable text size beside the scaled shared card surface. */
.trade-card-item { width: calc(340px * var(--trade-card-scale, .8)); }
.trade-card-item .card-preview-button { width: 100%; color: inherit; text-decoration: none; }
.trade-confirmation-cards .trade-card-item .card-preview-button > .trading-card,
.trade-bundle .trade-card-item .card-preview-button > .trading-card,
.trade-card-item .card-preview-button > .collectible-caption { width: 340px; zoom: var(--trade-card-scale, .8); }
.trade-list-item { --trade-card-scale: .44; }
.trade-confirmation-cards > section { min-width: 0; }
#tradeComposer .picker-tray { min-height: 125px; max-height: 155px; }
#tradeComposer .picker-slot { flex-basis: 220px; min-height: 105px; }
#tradeComposer .picker-tray .picker-tile { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; }
#tradeComposer .picker-tray .trade-card-ownership { grid-column: 2; grid-row: 1; margin: 0; }
#tradeComposer .picker-tray .picker-card { grid-column: 1; grid-row: 1; }
#tradeComposer .picker-tray .picker-card > .trading-card,
#tradeComposer .picker-tray .picker-card > .collectible-caption { width: 340px; zoom: .16; }
#tradeComposer .picker-tray .picker-check { top: 3px; right: 0; width: 18px; height: 18px; font-size: 12px; }
@media (max-width: 760px) {
    .trade-confirmation { --trade-card-scale: .42; }
    .trade-confirmation-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-list-item .trade-card-pair { grid-template-columns: minmax(0, 1fr); }
    .trade-list-item .trade-card-pair > b { display: none; }
}
@media (max-width: 380px) {
    .trade-confirmation { --trade-card-scale: .32; }
}