/* ensure author display rules never override the hidden attribute */
[hidden] { display: none !important; }

.community-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; overflow: hidden; padding: clamp(22px, 2.4vw, 34px); margin-bottom: 20px; border: 1px solid var(--web-line); border-radius: 24px; background: radial-gradient(ellipse at 95% 15%, rgba(179,154,104,.22), transparent 55%), linear-gradient(120deg, var(--web-panel), var(--web-surface)); }
.community-hero-copy { position: relative; z-index: 1; max-width: 640px; }
.community-hero h1 { margin: 10px 0 14px; color: var(--web-ink); font-size: clamp(1.8rem, 2.7vw, 2.8rem); line-height: 1.08; letter-spacing: -.045em; }
.community-hero-copy > p:not(.eyebrow) { max-width: 490px; margin: 0 0 22px; color: var(--web-muted); line-height: 1.65; }
.community-hero .workspace-header-actions { justify-content: flex-start; flex-wrap: wrap; }
.community-hero-art { display: grid; align-content: center; justify-items: center; padding: 10px; }
.community-hero-logo { display: block; width: min(100%, 230px); max-height: 170px; object-fit: contain; border-radius: 14px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); }
.community-art-orbit { margin-top: 12px; font-size: .75rem; color: var(--web-muted); text-align: center; }
.community-topic-hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.community-topic-hubs > button { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 92px; padding: 15px; border: 1px solid var(--web-line); border-radius: 15px; background: var(--web-panel); color: var(--web-ink); font: inherit; text-align: left; cursor: pointer; }
.community-topic-hubs > button:hover { border-color: var(--web-gold); background: var(--web-surface); }
.community-topic-hubs > button > span:nth-child(2) { flex: 1; }
.community-topic-hubs strong, .community-topic-hubs small { display: block; }
.community-topic-hubs small { margin-top: 5px; color: var(--web-muted); font-size: .76rem; line-height: 1.5; }
.community-hub-icon { display: grid; place-items: center; width: 40px; height: 44px; flex: 0 0 40px; border-radius: 12px; color: var(--web-gold); background: var(--web-sun-soft); font-size: 1.4rem; font-weight: 800; }
.community-compose-card { margin-bottom: 22px; border: 1px solid var(--web-line); border-radius: 16px; padding: 12px; background: var(--web-panel); }
.community-compose-card .community-compose-prompt { margin: 0; border: 0; background: var(--web-surface); box-shadow: none; }
.community-compose-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.community-compose-shortcuts button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; color: var(--web-muted); background: transparent; font: inherit; font-size: .8rem; cursor: pointer; }
.community-compose-shortcuts button:hover { background: var(--web-surface); color: var(--web-gold); }
.community-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.community-feed-heading h2 { margin: 4px 0 0; color: var(--web-ink); font-size: 1.18rem; }
.community-feed-heading > span { color: var(--web-muted); font-size: .72rem; text-align: right; }
.community-feed-heading .eyebrow { margin: 0; font-size: .62rem; }
.community-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.community-reactions button { min-height: 36px; padding: 5px 10px; border: 1px solid var(--web-line); border-radius: 999px; background: transparent; color: var(--web-muted); font: inherit; font-size: .76rem; cursor: pointer; }
.community-reactions button[aria-pressed="true"] { border-color: var(--web-gold); background: var(--web-sun-soft); color: var(--web-ink); }
.community-reactions button:disabled { opacity: .55; cursor: wait; }
.community-group-tag { margin: 8px 0 0; padding: 4px 8px; border: 0; border-radius: 6px; color: var(--web-gold); background: var(--web-sun-soft); font: inherit; font-size: .76rem; cursor: pointer; }
.community-group-list { display: grid; gap: 10px; max-height: 40vh; overflow: auto; margin: 14px 0; }
.community-group-item { padding: 14px; border: 1px solid var(--web-line); border-radius: 12px; background: var(--web-surface); }
.community-group-item h3 { margin: 0 0 5px; font-size: 1rem; color: var(--web-ink); overflow-wrap: anywhere; }
.community-group-item p { margin: 5px 0; color: var(--web-muted); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-group-item small { display: block; color: var(--web-muted); margin: 8px 0; }
.community-group-item > div { display: flex; flex-wrap: wrap; gap: 8px; }
.community-group-create { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--web-line); }
.community-group-create h3 { margin: 0; }
.community-group-create label { display: grid; gap: 6px; }
.community-group-search { display: flex; gap: 8px; }
.community-group-search input { flex: 1; min-width: 0; }
#communityJoinedGroups { display: grid; gap: 6px; margin-bottom: 12px; }
#communityJoinedGroups > button { min-height: 40px; padding: 8px; border: 0; border-radius: 8px; background: var(--web-surface); color: var(--web-ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .community-hero { grid-template-columns: minmax(0, 1fr); border-radius: 18px; padding: 24px 20px; }
  .community-hero-art { display: none; }
  .community-topic-hubs { gap: 8px; }
  .community-topic-hubs > button { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px; }
  .community-topic-hubs > button > span:last-child { display: none; }
  .community-topic-hubs strong { font-size: .8rem; }
  .community-topic-hubs small { font-size: .68rem; }
  .community-feed-heading > span { display: none; }
}
.community-layout { display: grid; grid-template-columns: minmax(155px, 190px) minmax(0, 680px) minmax(205px, 245px); justify-content: center; gap: clamp(12px, 1.4vw, 22px); align-items: start; }
.community-feed { min-width: 0; }
.community-sidebar { position: sticky; top: 16px; display: grid; gap: 12px; min-width: 0; }
.community-side-card { padding: 14px; border: 1px solid var(--web-line); border-radius: 14px; background: var(--web-panel); box-shadow: var(--web-shadow-soft); }
.community-side-card h2 { margin: 0 0 10px; color: var(--web-ink); font-size: .98rem; }
.community-side-card p, .community-side-card li, .community-side-note span { color: var(--web-muted); font-size: .82rem; line-height: 1.5; }
.community-mobile-filter-rails { display: none; }
.community-side-card p { margin: 0; }
.community-side-card ul { display: grid; gap: 7px; padding-left: 18px; margin: 12px 0 0; }
.community-side-nav, #communitySidebarGames { display: grid; gap: 3px; }
.community-side-nav button, #communitySidebarGames button { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--web-muted); text-align: left; font: inherit; font-size: .82rem; cursor: pointer; }
.community-side-nav button:hover, #communitySidebarGames button:hover { background: var(--web-surface); color: var(--web-ink); }
.community-side-nav button.is-active, #communitySidebarGames button.is-active { background: var(--web-sun-soft); color: var(--web-gold); font-weight: 800; }
.community-side-nav button span { width: 18px; color: var(--web-gold); text-align: center; font-size: 1.1em; }
.community-side-note { display: grid; gap: 7px; border-color: rgba(179, 154, 104, .35); }
.community-side-note strong { color: var(--web-gold); font-size: .85rem; }
.community-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.community-toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 12px; flex-wrap: wrap; }
.community-tabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.community-tab { flex: 0 0 auto; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--web-muted); padding: 10px 8px; font: inherit; cursor: pointer; }
.community-tab.is-active { color: var(--web-ink); border-color: var(--web-gold); }
.community-toolbar input { min-width: 240px; flex: 1; max-width: 360px; }
.community-select { position: relative; min-width: 150px; }
.community-select-trigger { width: 100%; min-height: 42px; text-align: left; }
.community-select-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--web-line); border-radius: 8px; background: #0b1827; box-shadow: var(--web-shadow-soft); }
.community-select-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--web-ink); text-align: left; cursor: pointer; }
.community-select-menu button:hover, .community-select-menu button.is-active { background: rgba(179, 154, 104, .18); color: var(--web-gold); }
.community-field-label { display: block; margin-bottom: 6px; }
.community-compose-prompt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0 0 var(--web-section-gap); padding: 9px 14px; border: 1px solid var(--web-line); border-radius: 12px; background: var(--web-panel); color: var(--web-muted); text-align: left; cursor: pointer; box-shadow: var(--web-shadow-soft); }
.community-compose-prompt:hover { border-color: var(--web-gold); }
.community-compose-prompt:focus-visible, .community-side-nav button:focus-visible, #communitySidebarGames button:focus-visible, .community-post button:focus-visible { outline: 2px solid var(--web-gold); outline-offset: 2px; }
.community-compose-prompt strong { margin-left: auto; color: var(--web-gold); }
.community-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.community-active-filters:empty { display: none; }
.community-filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--web-gold); border-radius: 18px; background: rgba(179, 154, 104, .12); color: var(--web-ink); cursor: pointer; }
.community-filter-reset { min-height: 34px; padding: 4px 10px; border: 0; background: transparent; color: var(--web-muted); text-decoration: underline; cursor: pointer; }
.community-composer-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .68); }
.community-composer { width: min(620px, 100%); max-height: min(88vh, 820px); overflow: auto; display: grid; gap: 16px; }
.community-composer .panel-heading { display: flex; align-items: center; justify-content: space-between; }
.community-type-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.community-type-field legend { margin-bottom: 8px; }
.community-type-options { display: flex; flex-wrap: wrap; gap: 8px; }
.community-type-option { min-height: 40px; padding: 8px 12px; border: 1px solid var(--web-line); border-radius: 20px; background: transparent; color: var(--web-muted); cursor: pointer; }
.community-type-option.is-active { border-color: var(--web-gold); background: rgba(179, 154, 104, .16); color: var(--web-ink); }
.community-card-picker { display: grid; gap: 10px; }
.community-card-picker > button { justify-self: start; }
.community-card-results { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.community-card-results button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px; border: 1px solid var(--web-line); border-radius: 8px; background: var(--web-panel-strong); color: var(--web-ink); text-align: left; cursor: pointer; }
.community-card-results img, .community-selected-card img { width: 42px; height: 56px; object-fit: contain; }
.community-selected-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-left: 3px solid var(--web-gold); background: rgba(179, 154, 104, .1); }
.test-hand-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; }
.test-hand-card { display: grid; justify-items: center; gap: 6px; width: 112px; }
.test-hand-artwork { display: block; width: 112px; height: 156px; object-fit: contain; border-radius: 6px; }
.test-hand-placeholder { display: grid; place-items: center; border: 1px solid var(--web-line); background: var(--web-surface); color: var(--web-muted); }
.test-hand-card-title { width: 100%; margin: 0; color: var(--web-ink); font-size: .85rem; line-height: 1.25; text-align: center; }
.community-discover-list { display: grid; gap: 8px; }
.community-discover-list h2 { margin: 0 0 4px; font-size: 1.1rem; }
.community-discover-user { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--web-line); background: var(--web-panel); }
.community-discover-user .community-avatar { flex: 0 0 40px; }
.community-discover-user > strong { flex: 1; }
.community-post { background: var(--web-panel); border: 1px solid var(--web-line); border-radius: 15px; padding: 16px; margin-bottom: var(--web-section-gap); box-shadow: var(--web-shadow-soft); scroll-margin-top: 90px; transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; }
.community-post:hover { border-color: rgba(179, 154, 104, .55); }
.community-post-highlight { border-color: var(--web-gold); box-shadow: 0 0 0 3px var(--web-gold); }
.community-post-header { display: flex; align-items: center; gap: 10px; }
.community-post-header > div:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.community-post-header strong { overflow-wrap: anywhere; font-size: .96rem; }
.community-post-header .icon-button { flex: 0 0 38px; min-width: 38px; min-height: 38px; border-radius: 50%; }
.community-post-header span, .community-card-link span { color: var(--web-muted); font-size: .88em; }
.community-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--web-teal-soft); color: var(--web-blue); font-weight: 800; }
.community-post-type { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; background: var(--web-sun-soft); color: var(--web-gold); text-transform: uppercase; letter-spacing: .05em; font-size: .68em; font-weight: 800; }
.community-post-category { display: inline-block; margin-left: 6px; padding: 4px 8px; border-radius: 999px; background: var(--web-surface); color: var(--web-muted); font-size: .76em; font-weight: 700; letter-spacing: 0; text-transform: none; }
.community-post-title { margin: 10px 0 6px; font-size: 1.12rem; line-height: 1.35; color: var(--web-ink); overflow-wrap: anywhere; }
.community-post-body { margin: 8px 0 0; color: var(--web-ink); white-space: pre-wrap; line-height: 1.58; overflow-wrap: anywhere; }
.community-post-body.is-truncated { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.community-post-expand { margin-top: 6px; padding: 0; border: 0; background: transparent; color: var(--web-blue); font: inherit; font-weight: 800; cursor: pointer; }
.community-post-image { display: block; width: 100%; max-height: 440px; aspect-ratio: 16 / 10; object-fit: contain; background: var(--web-surface); border-radius: 11px; margin: 14px 0; }
.community-post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; margin-top: 12px; }
.community-image-frame { min-width: 0; padding: 0; border: 0; border-radius: 11px; background: var(--web-surface); cursor: zoom-in; }
.community-image-frame .community-post-image { height: 280px; margin: 0; }
.community-profile-link { width: fit-content; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--web-ink); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.community-profile-link:hover { color: var(--web-blue); }
.community-image-upload-progress { width: 100%; height: 6px; margin: 8px 0; accent-color: var(--web-blue); }
.community-image-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; margin: 8px 0; }
.community-image-preview-item { position: relative; display: grid; gap: 5px; padding: 6px; border: 1px solid var(--web-line); border-radius: 9px; background: var(--web-panel-strong); }
.community-image-preview-item img { width: 100%; height: 88px; object-fit: contain; border-radius: 6px; background: var(--web-surface); }
.community-image-preview-item > span { color: var(--web-muted); font-size: .72rem; text-align: center; }
.community-image-preview-item > div { display: flex; justify-content: center; gap: 6px; }
.community-image-preview-item button { min-width: 34px; min-height: 32px; border: 1px solid var(--web-line); border-radius: 7px; background: var(--web-panel); color: var(--web-ink); cursor: pointer; }
.community-image-preview-item button:disabled { opacity: .4; cursor: default; }
.community-comment-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.community-comment-like { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 4px; border: 0; background: transparent; color: var(--web-muted); font: inherit; font-size: .8rem; cursor: pointer; }
.community-comment-like[aria-pressed="true"] { color: var(--web-coral); }
.community-comment-replies { margin-left: 24px; }
.community-comment-replies.is-collapsed { display: none; }
.community-reply-toggle { margin: 5px 0; padding: 3px 0; border: 0; background: transparent; color: var(--web-blue); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.community-profile-content { display: grid; gap: 12px; max-height: 70vh; overflow: auto; }
.community-profile-banner { width: 100%; height: 150px; object-fit: cover; border-radius: 11px; background: var(--web-surface); }
.community-profile-identity { display: flex; align-items: center; gap: 12px; }
.community-profile-avatar { width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; border-radius: 50%; background: var(--web-teal-soft); }
.community-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-profile-badges, .community-profile-tcgs { display: flex; flex-wrap: wrap; gap: 6px; }
.community-profile-badge, .community-profile-tcg { padding: 5px 9px; border-radius: 999px; background: var(--web-sun-soft); color: var(--web-gold); font-size: .76rem; font-weight: 800; }
.community-profile-post { padding: 10px; border-radius: 9px; background: var(--web-surface); }
.community-profile-post p { margin: 5px 0 0; color: var(--web-muted); }
.community-profile-editor { display: grid; gap: 9px; }
.community-profile-editor textarea { min-height: 78px; }
.community-image-lightbox { z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.9); }
.community-image-lightbox[hidden] { display: none; }
.community-image-lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.community-lightbox-close { position: absolute; top: 18px; right: 20px; color: #fff; }
.community-card-link { display: grid; gap: 4px; border-left: 3px solid var(--web-gold); padding: 10px 12px; background: var(--web-sun-soft); margin: 14px 0; }
.community-poll { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--web-line); border-radius: 11px; background: var(--web-panel-strong); }
.community-poll-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--web-ink); }
.community-poll-heading span, .community-poll > small { color: var(--web-muted); font-size: .78rem; }
.community-poll-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--web-line); border-radius: 9px; background: var(--web-panel); color: var(--web-ink); font: inherit; text-align: left; cursor: pointer; }
.community-poll-option:hover:not(:disabled), .community-poll-option.is-selected { border-color: var(--web-blue); }
.community-poll-option:disabled { cursor: default; opacity: .9; }
.community-poll-option-percent { color: var(--web-muted); font-size: .82rem; }
.community-poll-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 5px; background: var(--web-line); }
.community-poll-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--web-blue); }
.community-poll-composer { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--web-line); border-radius: 10px; }
.community-poll-composer > label { display: grid; gap: 6px; }
.community-poll-composer > label input, .community-poll-composer select { width: 100%; }
.community-poll-toggle { display: flex !important; align-items: center; gap: 8px !important; }
.community-comment.is-reply { margin-left: 36px; padding-left: 12px; border-left: 2px solid var(--web-line); }
.community-reply-button { margin-top: 5px; padding: 3px 0; border: 0; background: transparent; color: var(--web-blue); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.community-reply-target { padding: 8px 10px; border-radius: 8px; background: var(--web-surface); color: var(--web-muted); font-size: .84rem; }
.web-notification-item.is-unread { background: var(--web-surface); }
.community-post-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 13px; padding-top: 8px; border-top: 1px solid var(--web-line); }
.community-post-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--web-muted); font: inherit; font-size: .82rem; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.community-post-actions button:hover { background: var(--web-surface); color: var(--web-ink); }
.community-post-actions button[data-action="community-like"][aria-pressed="true"] { color: var(--web-coral); }
.community-post-actions button[data-action="community-like"]:active { transform: scale(.97); }
.community-post-menu { position: relative; margin-left: auto; }
.community-post-menu summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--web-muted); cursor: pointer; list-style: none; }
.community-post-menu summary::-webkit-details-marker { display: none; }
.community-post-menu[open] summary, .community-post-menu summary:hover { background: var(--web-surface); color: var(--web-ink); }
.community-post-menu-items { position: absolute; z-index: 30; right: 0; top: calc(100% + 4px); display: grid; min-width: 190px; padding: 5px; border: 1px solid var(--web-line); border-radius: 11px; background: var(--web-panel-strong); box-shadow: var(--web-shadow); }
.community-post-menu-items button { justify-content: flex-start; width: 100%; text-align: left; }
.community-like-icon { font-size: 1.2em; line-height: 1; }
.workspace-header-actions { display: flex; align-items: center; gap: 8px; }
.community-avatar-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.community-moderation-badge { color: var(--web-gold); font-size: .78em; }
.community-modal-overlay { position: fixed; z-index: 1010; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .68); }
.community-modal { width: min(720px, 100%); max-height: min(88vh, 820px); display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.community-admin-modal { width: min(900px, 100%); }
.community-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.community-modal-header h2, .community-modal-header p { margin: 0; }
.community-modal-header p { margin-top: 4px; color: var(--web-muted); }
.community-comments-list { min-height: 90px; overflow: auto; display: grid; gap: 10px; }
.community-comment { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--web-line); }
.community-comment .community-avatar { flex: 0 0 40px; }
.community-comment-content { flex: 1; min-width: 0; }
.community-comment-content strong, .community-comment-content time { display: inline-block; margin-right: 8px; }
.community-comment-content time, .community-comment-content p { color: var(--web-muted); font-size: .88em; }
.community-comment-content p { margin: 6px 0 0; color: var(--web-ink); white-space: pre-wrap; }
.community-comment-form { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--web-line); }
.community-comment-form label { display: grid; gap: 6px; }
.community-image-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.community-image-upload label { display: grid; gap: 6px; }
.community-moderation-item { padding: 12px; border: 1px solid var(--web-line); border-radius: 10px; background: var(--web-panel-strong); }
.community-moderation-item > strong, .community-moderation-item > small { display: block; }
.community-moderation-item > small { margin-top: 4px; color: var(--web-muted); }
.community-moderation-item > p { max-height: 110px; overflow: auto; white-space: pre-wrap; }
.community-admin-tabs { display: flex; gap: 8px; }
.community-admin-tabs button.is-active { border-color: var(--web-gold); color: var(--web-gold); }
@media (max-width: 1120px) { .community-layout { grid-template-columns: minmax(0, 760px); } .community-sidebar { display: none; } }
@media (max-width: 760px) { .community-toolbar { align-items: stretch; gap: 8px; } .community-tabs { width: 100%; } .community-toolbar input { min-width: 0; max-width: none; width: 100%; } .community-toolbar > .community-select { display: none; } .community-mobile-filter-rails { display: grid; gap: 6px; margin: 0 0 10px; } .community-mobile-filter-rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .community-mobile-filter-rail::-webkit-scrollbar { display: none; } .community-mobile-filter-rail button { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--web-line); border-radius: 999px; background: var(--web-panel); color: var(--web-muted); font: inherit; font-size: .76rem; white-space: nowrap; cursor: pointer; } .community-mobile-filter-rail button.is-active { border-color: var(--web-gold); background: var(--web-sun-soft); color: var(--web-ink); font-weight: 800; } .community-compose-prompt { min-height: 52px; padding: 8px 10px; } .community-compose-prompt strong { font-size: .78rem; } .community-composer-overlay { align-items: end; padding: 0; } .community-composer { width: 100%; max-height: 90dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; } .community-post { padding: 13px; } .community-post-actions { justify-content: space-between; gap: 1px; } .community-post-actions button { flex: 1 1 30%; padding-inline: 6px; font-size: .76rem; } .community-post-menu { margin-left: 0; } }
@media (max-width: 760px) { .community-post-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .community-post-gallery::-webkit-scrollbar { display: none; } .community-image-frame { flex: 0 0 100%; scroll-snap-align: center; } .community-image-frame .community-post-image { height: min(72vw, 340px); } .community-comment.is-reply { margin-left: 12px; padding-left: 8px; } .community-comment-replies { margin-left: 8px; } .community-image-preview { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .community-profile-identity { flex-wrap: wrap; align-items: flex-start; } .community-profile-identity > div:nth-child(2) { min-width: 0; flex: 1; } .community-profile-identity > button { margin-left: auto; } .community-profile-editor fieldset { min-width: 0; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .community-post, .community-post-actions button { transition: none; } }

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-ext.woff2?v=34b9c504cab7a73e37b7") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --web-bg: #07111f;
  --web-page-bg-image: url("assets/backgrounds/magic-theme-background.jpg?v=b38deca7312f5f9faef7"), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  --web-page-bg-overlay: linear-gradient(90deg, rgba(3, 7, 14, 0.92) 0%, rgba(3, 7, 14, 0.48) 22%, rgba(3, 7, 14, 0.36) 50%, rgba(3, 7, 14, 0.58) 78%, rgba(3, 7, 14, 0.92) 100%), linear-gradient(180deg, rgba(3, 7, 14, 0.62) 0%, rgba(3, 7, 14, 0.72) 100%);
  --web-panel: rgba(8, 17, 28, 0.88);
  --web-panel-strong: rgba(11, 24, 39, 0.94);
  --web-ink: #edf5ff;
  --web-muted: #b6c6d9;
  --web-line: rgba(157, 188, 203, 0.38);
  --web-green: #b39a68;
  --web-green-dark: #927b50;
  --web-gold: #b39a68;
  --web-blue: #4f93a3;
  --web-coral: #b96f6f;
  --web-ok: #57977d;
  --web-lilac: #8a8f9c;
  --web-rose: #a77e78;
  --web-teal-soft: rgba(79, 147, 163, 0.11);
  --web-sky-soft: rgba(79, 147, 163, 0.09);
  --web-sun-soft: rgba(179, 154, 104, 0.11);
  --web-rose-soft: rgba(185, 111, 111, 0.1);
  --web-lilac-soft: rgba(138, 143, 156, 0.1);
  --web-surface: rgba(8, 17, 28, 0.8);
  --web-surface-strong: rgba(11, 24, 39, 0.9);
  --web-shadow: 0 20px 44px rgba(3, 9, 22, 0.24);
  --web-shadow-soft: 0 10px 26px rgba(3, 9, 22, 0.2);
  --web-logo-filter: none;
  --web-logo-border: rgba(31, 115, 204, 0.28);
  --web-logo-shadow: 0 10px 24px rgba(15, 61, 124, 0.14);
  --web-radius: 12px;
  --web-radius-pill: 999px;
  --web-content-max: 1800px;
  --web-page-pad: clamp(14px, 2.1vw, 32px);
  --web-section-gap: clamp(10px, 1vw, 16px);
  --web-card-min: 280px;
  --web-card-media-height: clamp(210px, 14vw, 238px);
  --web-body-font: "Inter", Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --web-heading-font: "Inter", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --web-heading-scale: 1.08;
  --web-text-scale: 0.9;
  --web-filter-text-scale: 0.86;
  --web-html-bg-position: center center, center center;
  --web-html-bg-size: contain, cover;
  --web-page-bg-position: center center, center center, center center;
  --web-page-bg-size: cover, contain, cover;
  --web-page-bg-repeat: no-repeat, no-repeat, no-repeat;
  --web-page-bg-attachment: scroll, scroll, scroll;
  --web-hero-bg-image: linear-gradient(135deg, var(--web-surface-strong), var(--web-surface));
  --web-hero-bg-position: center center;
  --web-hero-bg-size: cover;
  --web-hero-bg-repeat: no-repeat;
  --web-hero-artwork-image: none;
  --web-hero-artwork-position: center center;
  --web-hero-artwork-size: cover;
  --web-hero-artwork-width: 0;
  --web-hero-artwork-opacity: 0;
  --web-hero-artwork-overlay: linear-gradient(90deg, var(--web-surface-strong), transparent);
}

:root[data-theme-schema="pokemon"] {
  --web-page-bg-image: url("assets/backgrounds/pokemon-theme-background.jpg?v=5944ee3b6e4338fd85e2"), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  --web-page-bg-overlay: linear-gradient(90deg, rgba(4, 12, 32, 0.9) 0%, rgba(6, 14, 40, 0.58) 22%, rgba(8, 16, 44, 0.46) 50%, rgba(8, 16, 44, 0.62) 78%, rgba(4, 12, 32, 0.9) 100%), linear-gradient(180deg, rgba(4, 10, 30, 0.66) 0%, rgba(5, 14, 38, 0.76) 100%);
  --web-panel: rgba(255, 246, 187, 0.9);
  --web-panel-strong: rgba(255, 237, 148, 0.92);
  --web-line: #e0be50;
  --web-green: #244793;
  --web-green-dark: #1b356e;
  --web-gold: #f4c61b;
  --web-blue: #3058b0;
  --web-surface: rgba(255, 247, 196, 0.88);
  --web-surface-strong: rgba(255, 236, 145, 0.92);
  --web-logo-border: rgba(244, 198, 27, 0.68);
  --web-logo-shadow: 0 10px 24px rgba(244, 198, 27, 0.3);
}

:root[data-theme-schema="riftbound"] {
  --web-page-bg-image: url("assets/backgrounds/riftbound-theme-background.jpg?v=59ad48b45fc06287eba0"), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  --web-page-bg-overlay: linear-gradient(90deg, rgba(5, 4, 18, 0.9) 0%, rgba(8, 5, 24, 0.5) 22%, rgba(12, 6, 30, 0.34) 50%, rgba(8, 5, 24, 0.56) 78%, rgba(5, 4, 18, 0.92) 100%), linear-gradient(180deg, rgba(8, 4, 18, 0.52) 0%, rgba(5, 4, 16, 0.72) 100%);
  --web-panel: rgba(255, 244, 232, 0.76);
  --web-panel-strong: rgba(255, 235, 214, 0.84);
  --web-line: #edb060;
  --web-green: #8f3d0a;
  --web-green-dark: #6f2f08;
  --web-gold: #f2b24d;
  --web-blue: #7c3cff;
  --web-coral: #d94a38;
  --web-lilac: #8c4dff;
  --web-rose: #cf4fbd;
  --web-surface: rgba(255, 241, 224, 0.82);
  --web-surface-strong: rgba(255, 230, 205, 0.9);
  --web-logo-border: rgba(242, 178, 77, 0.7);
  --web-logo-shadow: 0 12px 28px rgba(242, 96, 31, 0.36);
  --web-hero-bg-image: linear-gradient(135deg, rgba(255, 244, 232, 0.95), rgba(255, 235, 214, 0.5)), url("assets/backgrounds/riftbound-theme-background.jpg?v=59ad48b45fc06287eba0");
  --web-hero-bg-position: center center, center center;
  --web-hero-bg-size: cover, cover;
  --web-hero-bg-repeat: no-repeat, no-repeat;
}

:root[data-theme-schema="flesh-and-blood"] {
  --web-page-bg-image: url("assets/backgrounds/flesh-and-blood-theme-background.jpg?v=27da8ef391847280e6d7"), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  --web-page-bg-overlay: linear-gradient(90deg, rgba(1, 6, 24, 0.9) 0%, rgba(3, 14, 44, 0.48) 22%, rgba(5, 30, 76, 0.28) 50%, rgba(3, 14, 44, 0.56) 78%, rgba(1, 6, 24, 0.92) 100%), linear-gradient(180deg, rgba(3, 10, 34, 0.46) 0%, rgba(1, 6, 24, 0.72) 100%);
  --web-panel: rgba(236, 246, 255, 0.74);
  --web-panel-strong: rgba(220, 238, 255, 0.84);
  --web-line: #85bfff;
  --web-green: #1f6dbd;
  --web-green-dark: #19579a;
  --web-gold: #60d5ff;
  --web-blue: #2a72ff;
  --web-coral: #d24c5f;
  --web-lilac: #5f6cff;
  --web-rose: #5a9dff;
  --web-surface: rgba(235, 247, 255, 0.82);
  --web-surface-strong: rgba(218, 236, 255, 0.9);
  --web-logo-border: rgba(96, 213, 255, 0.7);
  --web-logo-shadow: 0 12px 30px rgba(39, 141, 255, 0.38);
  --web-hero-bg-image: linear-gradient(135deg, rgba(236, 246, 255, 0.95), rgba(220, 238, 255, 0.5)), url("assets/backgrounds/flesh-and-blood-theme-background.jpg?v=27da8ef391847280e6d7");
  --web-hero-bg-position: center center, center center;
  --web-hero-bg-size: cover, cover;
  --web-hero-bg-repeat: no-repeat, no-repeat;
}

:root[data-theme-schema="yu-gi-oh"] {
  --web-page-bg-image: url("assets/backgrounds/yu-gi-oh-theme-background.jpg?v=aede051887ebe66947c6"), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  --web-page-bg-overlay: linear-gradient(90deg, rgba(11, 4, 20, 0.92) 0%, rgba(24, 6, 28, 0.52) 22%, rgba(49, 9, 38, 0.3) 50%, rgba(24, 6, 28, 0.6) 78%, rgba(11, 4, 20, 0.94) 100%), linear-gradient(180deg, rgba(25, 5, 26, 0.54) 0%, rgba(10, 3, 18, 0.76) 100%);
  --web-panel: rgba(255, 238, 243, 0.74);
  --web-panel-strong: rgba(255, 224, 235, 0.84);
  --web-line: #e36a89;
  --web-green: #a91a39;
  --web-green-dark: #85152d;
  --web-gold: #ff9c4a;
  --web-blue: #7847ff;
  --web-coral: #d92347;
  --web-lilac: #9b59ff;
  --web-rose: #dc3a83;
  --web-surface: rgba(255, 238, 245, 0.82);
  --web-surface-strong: rgba(255, 224, 236, 0.9);
  --web-logo-border: rgba(217, 35, 71, 0.7);
  --web-logo-shadow: 0 12px 30px rgba(217, 35, 71, 0.38);
  --web-hero-bg-image: linear-gradient(135deg, rgba(255, 238, 243, 0.95), rgba(255, 224, 235, 0.5)), url("assets/backgrounds/yu-gi-oh-theme-background.jpg?v=aede051887ebe66947c6");
  --web-hero-bg-position: center center, center center;
  --web-hero-bg-size: cover, cover;
  --web-hero-bg-repeat: no-repeat, no-repeat;
}

:root[data-theme-schema] {
  --web-bg: #0d1117;
  --web-page-bg-overlay: linear-gradient(90deg, rgba(9, 12, 17, 0.94) 0%, rgba(13, 17, 23, 0.82) 50%, rgba(9, 12, 17, 0.94) 100%), linear-gradient(180deg, rgba(9, 12, 17, 0.84) 0%, rgba(9, 12, 17, 0.96) 100%);
  --web-panel: rgba(22, 28, 36, 0.94);
  --web-panel-strong: rgba(29, 36, 45, 0.97);
  --web-ink: #f1eee7;
  --web-muted: #b8b7b2;
  --web-line: rgba(193, 188, 174, 0.22);
  --web-green: #c1a878;
  --web-green-dark: #967d52;
  --web-gold: #c1a878;
  --web-blue: #9eaaa7;
  --web-coral: #c97872;
  --web-ok: #8eaa99;
  --web-lilac: #a4a6ad;
  --web-rose: #b39b91;
  --web-teal-soft: rgba(158, 170, 167, 0.14);
  --web-sky-soft: rgba(158, 170, 167, 0.12);
  --web-sun-soft: rgba(193, 168, 120, 0.14);
  --web-rose-soft: rgba(201, 120, 114, 0.12);
  --web-lilac-soft: rgba(164, 166, 173, 0.12);
  --web-surface: rgba(22, 28, 36, 0.9);
  --web-surface-strong: rgba(29, 36, 45, 0.96);
  --web-logo-border: rgba(193, 168, 120, 0.4);
  --web-logo-shadow: 0 10px 24px rgba(193, 168, 120, 0.14);
  --web-hero-bg-image: linear-gradient(135deg, var(--web-surface-strong), var(--web-surface));
  --web-hero-artwork-overlay: linear-gradient(90deg, var(--web-surface-strong), rgba(22, 28, 36, 0.35));
}











* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color-scheme: dark;
  color: var(--web-ink);
  background-color: var(--web-bg);
  background-image: none;
}

html[data-theme-schema],
html[data-theme-schema] body.ct-web-app {
  color-scheme: dark;
}


body.ct-web-app {
  margin: 0;
  min-height: 100vh;
  display: block;
  overflow-x: clip;
  color-scheme: dark;
  color: var(--web-ink);
  background-color: var(--web-bg);
  background-image: var(--web-page-bg-overlay), var(--web-page-bg-image);
  background-position: var(--web-page-bg-position);
  background-size: var(--web-page-bg-size);
  background-attachment: var(--web-page-bg-attachment);
  background-repeat: var(--web-page-bg-repeat);
  font-family: var(--web-body-font);
  font-size: calc(1rem * var(--web-text-scale));
}


button,
input,
select,
textarea,
option {
  color-scheme: dark;
  font: inherit;
  -webkit-text-fill-color: currentColor;
}

input::placeholder,
textarea::placeholder {
  color: var(--web-muted);
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--web-ink);
  -webkit-box-shadow: 0 0 0 1000px #0b1827 inset;
  box-shadow: 0 0 0 1000px #0b1827 inset;
  caret-color: var(--web-ink);
}

option,
optgroup {
  color: var(--web-ink);
  background-color: #0b1827;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--web-muted);
  -webkit-text-fill-color: var(--web-muted);
}

button,
input,
select,
textarea {
  color: var(--web-ink);
  background-color: #0b1827;
}

button {
  cursor: pointer;
}

/* Defensive hardening for Chrome/Chromium: keep future form controls and buttons readable even if native browser defaults are active. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button,
[role="button"],
summary,
option,
optgroup {
  color: var(--web-ink) !important;
  background-color: #0b1827 !important;
  border-color: var(--web-line) !important;
  -webkit-text-fill-color: var(--web-ink) !important;
  text-shadow: none !important;
}

button:not(.primary-button):not(.danger-button),
.secondary-button,
.icon-button,
.segment,
.icon-only {
  color: var(--web-ink) !important;
  background: linear-gradient(180deg, #172632, #0e1925) !important;
}

.primary-button,
.danger-button {
  color: #142235 !important;
  -webkit-text-fill-color: #142235 !important;
}

.nav-item.is-active {
  color: #142235 !important;
  -webkit-text-fill-color: #142235 !important;
  background: linear-gradient(180deg, #c4ac7b, #aa9160) !important;
  border-color: rgba(179, 154, 104, 0.5) !important;
}

.modal-panel,
.modal-panel * ,
.toast,
.toast *,
.workspace-panel,
.workspace-panel *,
.search-results-panel,
.search-results-panel *,
.detail-search-panel,
.detail-search-panel *,
.filter-bar,
.filter-bar *,
.tool-panel,
.tool-panel *,
.auth-form,
.auth-form * {
  color-scheme: dark !important;
}

.modal-panel,
.toast,
.workspace-panel,
.search-results-panel,
.detail-search-panel,
.filter-bar,
.tool-panel,
.auth-form {
  background-color: #0b1827 !important;
}

.modal-panel input,
.modal-panel select,
.modal-panel textarea,
.toast input,
.toast select,
.toast textarea,
.workspace-panel input,
.workspace-panel select,
.workspace-panel textarea,
.search-results-panel input,
.search-results-panel select,
.search-results-panel textarea,
.detail-search-panel input,
.detail-search-panel select,
.detail-search-panel textarea,
.filter-bar input,
.filter-bar select,
.filter-bar textarea,
.tool-panel input,
.tool-panel select,
.tool-panel textarea,
.auth-form input,
.auth-form select,
.auth-form textarea {
  background-color: #0b1827 !important;
  color: var(--web-ink) !important;
  -webkit-text-fill-color: var(--web-ink) !important;
}

img {
  max-width: 100%;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 68px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--web-page-pad);
  background: linear-gradient(110deg, rgba(9, 23, 40, 0.98), rgba(6, 15, 28, 0.94));
  color: #f7f5ef;
  border-bottom: 1px solid rgba(140, 190, 255, 0.24);
  box-shadow: 0 12px 30px rgba(4, 13, 31, 0.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.78rem;
}

.app-brand span {
  font-family: var(--web-heading-font);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.app-brand img {
  width: 60px;
  height: 40px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-logo-border);
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 244, 255, 0.95));
  box-shadow: var(--web-logo-shadow);
  filter: var(--web-logo-filter);
  transition: filter 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.app-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  -ms-overflow-style: none;
}

.nav-menu {
  position: relative;
  flex: 0 0 auto;
}

.nav-menu summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--web-radius);
  border: 1px solid transparent;
  padding: 9px 13px;
  color: #e9efe9;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.nav-menu[open] summary,
.nav-menu summary:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.nav-menu[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.nav-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: max-content;
  min-width: 192px;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(118, 176, 255, 0.28);
  border-radius: var(--web-radius);
  background: rgba(8, 20, 38, 0.98);
  box-shadow: 0 18px 36px rgba(2, 8, 20, 0.34);
}

.nav-menu-list .nav-item {
  width: 100%;
  justify-content: flex-start;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  flex: 0 0 auto;
}

.nav-item,
.mode-link {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 13px;
  color: #e9efe9;
  background: transparent;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item:hover,
.mode-link:hover,
.nav-item.is-active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.nav-item.is-active {
  color: #142235 !important;
  -webkit-text-fill-color: #142235 !important;
  background: linear-gradient(180deg, #e5c27e, #c9a86a) !important;
  border-color: rgba(201, 168, 106, 0.72) !important;
  box-shadow: 0 10px 24px rgba(4, 19, 42, 0.24);
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a78cb, #145291);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-item.is-active::after {
  transform: scaleX(1);
}

.nav-item:hover,
.mode-link:hover {
  transform: translateY(-1px);
}

.sidebar-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.mode-link {
  justify-content: center;
  background: linear-gradient(180deg, #c4ac7b, #aa9160);
  color: #142235;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.mode-link.is-subtle {
  background: rgba(255, 255, 255, 0.08);
  color: #e9efe9;
}

.app-frame {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

@media (min-width: 1081px) {
  body.ct-web-app {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    align-items: start;
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px 14px;
    border-right: 1px solid rgba(140, 190, 255, 0.2);
    border-bottom: 0;
  }

  .app-brand {
    padding: 2px 8px 16px;
    border-bottom: 1px solid rgba(140, 190, 255, 0.16);
  }

  .app-brand img {
    width: 72px;
    height: 48px;
  }

  .app-brand span {
    font-size: 0.96rem;
  }

  .app-nav {
    display: grid;
    align-content: start;
    gap: 4px;
  }

  .nav-item,
  .nav-menu summary {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.86rem;
  }

  .nav-menu-list {
    position: static;
    width: auto;
    min-width: 0;
    margin: 4px 0 4px 8px;
    padding: 4px;
    background: rgba(5, 14, 27, 0.72);
    box-shadow: none;
  }

  .sidebar-actions {
    margin-top: auto;
    margin-left: 0;
    display: grid;
    gap: 6px;
  }

  .mode-link {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .app-topbar {
    top: 0;
    max-height: none;
    padding: 12px var(--web-page-pad);
    background: rgba(7, 17, 31, 0.78);
    border-bottom: 1px solid rgba(157, 188, 203, 0.18);
  }

  .app-topbar:hover,
  .app-topbar:focus-within {
    max-height: none;
    padding: 12px var(--web-page-pad);
  }

  .app-content {
    padding-top: 22px;
  }
}

.app-topbar {
  position: sticky;
  top: 68px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--web-page-pad);
  max-height: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(249, 252, 255, 0.84), rgba(241, 247, 255, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px rgba(2, 8, 20, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: max-height 0.22s ease, padding 0.22s ease;
  cursor: pointer;
}

.app-topbar:hover,
.app-topbar:focus-within {
  max-height: 60px;
  padding: 8px var(--web-page-pad);
  cursor: default;
}

@media (min-width: 1081px) {
  .app-topbar,
  .app-topbar:hover,
  .app-topbar:focus-within {
    top: 0;
    max-height: none;
    padding: 12px var(--web-page-pad);
    background: rgba(7, 17, 31, 0.78);
    cursor: default;
  }
}

.global-search {
  width: min(560px, 46vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.global-search input {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 0.84rem;
}

.global-search .icon-button,
.app-topbar .secondary-button,
.app-topbar .primary-button,
.app-topbar .icon-button,
.app-topbar .segment {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 0.78rem;
}

.global-search input,
.filter-bar input,
.filter-bar select,
.detail-search-panel input,
.detail-search-panel select,
.tool-panel input,
.tool-panel select,
.tool-panel textarea,
.auth-form input,
.auth-form select,
.message-composer textarea,
.modal-panel textarea,
.modal-panel input,
.modal-panel select {
  width: 100%;
  min-height: 40px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  background: #fbfdfc;
  color: var(--web-ink);
  padding: 9px 12px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#sortFilter {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

.filter-bar input,
.filter-bar select,
.detail-search-panel input,
.detail-search-panel select,
.filter-bar .secondary-button,
.filter-bar .primary-button,
.detail-search-panel .secondary-button,
.detail-search-panel .primary-button {
  font-size: calc(0.92rem * var(--web-filter-text-scale));
}

#detailedSearchGame.is-placeholder {
  color: rgba(34, 49, 63, 0.58);
}

.filter-bar .secondary-button,
.filter-bar .primary-button {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.8rem;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--web-green);
  background: #102238;
  box-shadow: 0 0 0 3px rgba(15, 107, 92, 0.13);
}

.topbar-cluster,
.button-row,
.panel-heading,
.modal-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-cluster {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary-button,
.secondary-button,
.icon-button,
.icon-only,
.segment,
.danger-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.1;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.primary-button {
  color: #142235;
  background: linear-gradient(135deg, #c4ac7b, #aa9160);
  border-color: rgba(179, 154, 104, 0.5);
  box-shadow: 0 12px 26px rgba(179, 154, 104, 0.12);
}

.primary-button:hover {
  background: linear-gradient(135deg, #cdb988, #b29a69);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(20, 82, 145, 0.14);
}

.secondary-button,
.icon-button,
.segment {
  color: var(--web-ink);
  background: linear-gradient(180deg, #182b40, #0b1827);
  border-color: var(--web-line);
  box-shadow: 0 8px 20px rgba(17, 25, 34, 0.06);
}

.secondary-button:hover,
.icon-button:hover,
.segment:hover {
  border-color: rgba(20, 82, 145, 0.35);
  background: linear-gradient(180deg, #243c55, #102238);
  transform: translateY(-1px);
}

.primary-button:active,
.secondary-button:active,
.icon-button:active,
.segment:active,
.danger-button:active {
  transform: translateY(0) scale(0.985);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.icon-button:focus-visible,
.segment:focus-visible,
.danger-button:focus-visible,
.nav-item:focus-visible,
.mode-link:focus-visible {
  outline: 2px solid rgba(42, 120, 203, 0.38);
  outline-offset: 2px;
}

.primary-button[disabled],
.secondary-button[disabled],
.icon-button[disabled],
.segment[disabled],
.danger-button[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.secondary-button.is-loading {
  position: relative;
}

.secondary-button.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(20, 82, 145, 0.25);
  border-top-color: rgba(20, 82, 145, 0.95);
  animation: buttonSpinner 700ms linear infinite;
}

.primary-button.is-success,
.secondary-button.is-success,
.icon-button.is-success {
  color: #edf5ff;
  border-color: rgba(22, 118, 80, 0.72);
  background: linear-gradient(135deg, #2b8f6a, #1f6f52);
  box-shadow: 0 12px 26px rgba(31, 111, 82, 0.26);
}

@keyframes buttonSpinner {
  to {
    transform: rotate(360deg);
  }
}

.danger-button {
  color: #ffffff;
  background: var(--web-coral);
  box-shadow: 0 10px 22px rgba(208, 90, 70, 0.22);
}

.icon-only {
  min-width: 42px;
  padding: 8px;
  background: #0b1827;
  border-color: var(--web-line);
  font-size: 1.4rem;
}

.sync-state {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  color: var(--web-muted);
  background: #0b1827;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(17, 25, 34, 0.035);
}

.sync-state.is-busy {
  color: var(--web-blue);
  animation: syncPulse 1.4s ease infinite;
}

.sync-state.is-error {
  color: var(--web-coral);
}

.incoming-trade-alert {
  width: min(var(--web-content-max), calc(100% - (var(--web-page-pad) * 2)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 2px solid #f2c94c;
  border-radius: var(--web-radius);
  color: #261d05;
  background: linear-gradient(110deg, #fff5b8, #ffd86b);
  box-shadow: 0 12px 30px rgba(242, 201, 76, 0.3);
  animation: incomingTradeAlertIn 320ms ease both, incomingTradeAlertPulse 2.8s ease-in-out 320ms infinite;
}

.incoming-trade-alert > div {
  display: grid;
  gap: 3px;
}

.incoming-trade-alert strong {
  font-size: 1.05rem;
}

.incoming-trade-alert span {
  color: #5b480d;
  font-size: 0.9rem;
  font-weight: 600;
}

.incoming-trade-alert .primary-button {
  flex: 0 0 auto;
  background: #123c72;
  border-color: #123c72;
}

.handshake-celebration {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(4, 12, 25, 0.18);
  opacity: 0;
  transition: opacity 220ms ease;
}

.handshake-celebration.is-visible {
  opacity: 1;
}

.handshake-celebration-card {
  display: grid;
  min-width: min(360px, calc(100vw - 32px));
  gap: 8px;
  place-items: center;
  padding: 24px 28px;
  border: 2px solid #f2c94c;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(145deg, #164a88, #0d2b53);
  box-shadow: 0 24px 70px rgba(3, 9, 22, 0.46), 0 0 0 8px rgba(242, 201, 76, 0.14);
  transform: translateY(12px) scale(0.9) rotate(-2deg);
  transition: transform 320ms cubic-bezier(0.2, 1.35, 0.45, 1);
}

.handshake-celebration.is-visible .handshake-celebration-card {
  transform: translateY(0) scale(1) rotate(0);
}

.handshake-celebration-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid rgba(242, 201, 76, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 2rem;
  animation: handshakeCelebrationBounce 600ms ease 120ms both;
}

.handshake-celebration-card strong {
  font-size: 1.3rem;
}

.handshake-celebration-card span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
}

@keyframes handshakeCelebrationBounce {
  0% { transform: scale(0.5) rotate(-12deg); }
  70% { transform: scale(1.12) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes incomingTradeAlertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes incomingTradeAlertPulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(242, 201, 76, 0.3); }
  50% { box-shadow: 0 14px 38px rgba(242, 170, 34, 0.52); }
}

@media (max-width: 700px) {
  .incoming-trade-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .incoming-trade-alert .primary-button {
    width: 100%;
  }
}

@keyframes syncPulse {
  0%,
  100% {
    box-shadow: 0 6px 16px rgba(17, 25, 34, 0.035);
  }

  50% {
    box-shadow: 0 8px 20px rgba(31, 115, 204, 0.22);
  }
}

.app-content {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 1.6vw, 26px) clamp(16px, 2vw, 28px) clamp(28px, 3vw, 48px);
}

#view-my-listings {
  width: 100%;
  max-width: none;
}

#view-my-listings .workspace-header {
  flex-wrap: wrap;
}

#view-my-listings .filter-bar {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}

.workspace-panel {
  display: none;
}

.workspace-panel.is-active {
  display: block;
  animation: workspaceFadeIn 300ms ease;
}

@keyframes workspaceFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.workspace-header h1 {
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.workspace-panel.is-active > .workspace-header h1 {
  color: #f2f7ff;
  text-shadow: 0 8px 24px rgba(3, 9, 22, 0.45);
}

.workspace-panel.is-active > .workspace-header .eyebrow {
  color: #5ca8ff;
}

#view-sell .workspace-header h1 {
  color: #f2f7ff;
  text-shadow: 0 8px 24px rgba(3, 9, 22, 0.45);
}

#view-sell .workspace-header .eyebrow {
  color: #5ca8ff;
}

#view-search .workspace-header h1 {
  color: #f2f7ff;
  text-shadow: 0 8px 24px rgba(3, 9, 22, 0.45);
}

#view-search .workspace-header .eyebrow {
  color: #5ca8ff;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--web-green);
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
.compact-title,
.order-title,
.thread-title {
  font-family: var(--web-heading-font);
  font-weight: 800;
  letter-spacing: 0;
}

h1 {
  margin-bottom: 0;
  font-size: calc(clamp(1.38rem, 1.7vw, 1.95rem) * var(--web-heading-scale));
  line-height: 1.12;
  letter-spacing: 0;
}

h2 {
  font-size: calc(clamp(1.02rem, 1.1vw, 1.22rem) * var(--web-heading-scale));
  line-height: 1.18;
  margin-bottom: 0;
}

h3 {
  font-size: calc(1rem * var(--web-heading-scale));
  line-height: 1.2;
}

.metric-strip,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 10px;
}

.metric,
.stat-tile {
  min-height: 72px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(15, 107, 92, 0.32);
  background: linear-gradient(142deg, rgba(22, 37, 52, 0.96), rgba(35, 64, 68, 0.92) 58%, rgba(106, 90, 61, 0.82));
  padding: 12px 13px;
  box-shadow: 0 14px 30px rgba(6, 22, 38, 0.28);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.metric::before,
.stat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 40%, rgba(255, 226, 148, 0.14));
  pointer-events: none;
}

button.metric {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.stat-tile {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.stat-button {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.stat-button:hover,
.stat-button:focus-visible {
  border-color: rgba(184, 146, 46, 0.58);
  box-shadow: 0 18px 34px rgba(6, 22, 38, 0.34);
  transform: translateY(-1px);
}

.metric:nth-child(1) {
  background: linear-gradient(146deg, rgba(22, 37, 52, 0.98), rgba(35, 64, 68, 0.9));
}

.metric:nth-child(2) {
  background: linear-gradient(146deg, rgba(34, 61, 60, 0.96), rgba(22, 37, 52, 0.9));
}

.metric:nth-child(3) {
  background: linear-gradient(146deg, rgba(22, 37, 52, 0.97), rgba(106, 90, 61, 0.82));
}

.metric strong,
.stat-tile strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.3rem;
  color: #ffffff;
  line-height: 1.08;
  position: relative;
  z-index: 1;
}

.metric span,
.stat-tile span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.deck-filter-metric {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.deck-filter-metric:hover,
.deck-filter-metric:focus-visible {
  border-color: rgba(184, 146, 46, 0.58);
  box-shadow: 0 18px 34px rgba(6, 22, 38, 0.34);
  transform: translateY(-1px);
}

.deck-filter-metric.is-active {
  border-color: rgba(184, 146, 46, 0.7);
  box-shadow: inset 0 -2px 0 rgba(255, 214, 120, 0.6), 0 18px 34px rgba(6, 22, 38, 0.34);
}

html.ct-edge-safe * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  will-change: auto !important;
}

html.ct-edge-safe *::before,
html.ct-edge-safe *::after {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* Edge stability mode: reduce compositing layers and repaint pressure. */
html.ct-edge-safe,
html.ct-edge-safe body.ct-web-app {
  background-attachment: scroll !important;
}

html.ct-edge-safe {
  background-image: none !important;
  background-color: #0a1320 !important;
}

html.ct-edge-safe body.ct-web-app {
  background-image: none !important;
  background-color: #0a1320 !important;
}

html.ct-edge-safe body.ct-web-app {
  overflow-x: hidden;
}

html.ct-edge-safe .app-sidebar,
html.ct-edge-safe .app-topbar {
  position: static;
  box-shadow: none;
}

html.ct-edge-safe .app-sidebar,
html.ct-edge-safe .app-topbar,
html.ct-edge-safe .marketplace-hero,
html.ct-edge-safe .filter-bar,
html.ct-edge-safe .detail-search-panel,
html.ct-edge-safe .search-results-panel,
html.ct-edge-safe .listing-card,
html.ct-edge-safe .card-result,
html.ct-edge-safe .order-card,
html.ct-edge-safe .thread-item,
html.ct-edge-safe .compact-item,
html.ct-edge-safe .empty-state,
html.ct-edge-safe .message-bubble,
html.ct-edge-safe .modal-panel,
html.ct-edge-safe .toast,
html.ct-edge-safe .metric,
html.ct-edge-safe .stat-tile,
html.ct-edge-safe .mode-link,
html.ct-edge-safe .primary-button,
html.ct-edge-safe .secondary-button,
html.ct-edge-safe .segment,
html.ct-edge-safe .icon-button {
  box-shadow: none !important;
  background-image: none !important;
}

html.ct-edge-safe .marketplace-hero-image,
html.ct-edge-safe .listing-media,
html.ct-edge-safe .listing-image,
html.ct-edge-safe .card-result-media,
html.ct-edge-safe .listing-view-media,
html.ct-edge-safe .category-chip-back-img {
  transform: none !important;
  filter: none !important;
}

html.ct-edge-safe .marketplace-hero-image {
  display: none !important;
}

html.ct-low-bandwidth .marketplace-hero-image {
  display: none !important;
}

html.ct-edge-safe .nav-menu-list {
  box-shadow: none;
}

.marketplace-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(min(100%, 300px), 0.6fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  min-height: 0;
  padding: clamp(22px, 2.6vw, 36px);
  margin-bottom: var(--web-section-gap);
  border: 1px solid rgba(201, 168, 106, 0.3);
  border-radius: 18px;
  background-color: var(--web-surface-strong);
  background-image: var(--web-hero-bg-image);
  background-position: var(--web-hero-bg-position);
  background-size: var(--web-hero-bg-size);
  background-repeat: var(--web-hero-bg-repeat);
  box-shadow: 0 22px 48px rgba(3, 9, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.marketplace-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--web-hero-artwork-width);
  background-image: var(--web-hero-artwork-overlay), var(--web-hero-artwork-image);
  background-position: center center, var(--web-hero-artwork-position);
  background-size: cover, var(--web-hero-artwork-size);
  background-repeat: no-repeat;
  opacity: var(--web-hero-artwork-opacity);
  pointer-events: none;
  z-index: -1;
}

.marketplace-hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 760px;
}

.marketplace-hero h1,
.marketplace-hero h2 {
  color: var(--web-ink);
}

.marketplace-hero h1 {
  max-width: 980px;
  margin-top: 6px;
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1.08;
}

.marketplace-hero .eyebrow {
  font-size: clamp(0.85rem, 0.9vw, 1.05rem);
}

.hero-subline {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--web-muted);
  font-size: clamp(0.96rem, 1vw, 1.08rem);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 1.8vw, 26px);
}

.marketplace-hero .hero-actions {
  gap: 8px;
  margin-top: 18px;
}

.marketplace-hero .hero-actions > button {
  min-width: 112px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(3, 12, 24, 0.2);
}

.marketplace-hero .hero-actions > button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(3, 12, 24, 0.38);
}

.marketplace-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.marketplace-benefits span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 92, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #22433d;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 850;
}

.tcg-world-strip {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--web-radius);
  border: 1px solid rgba(17, 25, 34, 0.08);
  background: linear-gradient(180deg, rgba(248, 251, 249, 0.98), rgba(241, 246, 243, 0.96));
  box-shadow: var(--web-shadow-soft);
}

.tcg-world-label {
  display: grid;
  gap: 2px;
}

.tcg-world-label span {
  font-weight: 850;
  color: var(--web-ink);
  font-size: 0.95rem;
}

.tcg-world-label small {
  color: var(--web-muted);
  font-size: 0.78rem;
}

.tcg-world-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tcg-world-chip {
  flex: 0 0 auto;
  display: inline-grid;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms ease;
}

.tcg-world-chip:hover {
  transform: translateY(-1px);
}

.tcg-world-chip:focus-visible {
  outline: 2px solid rgba(15, 107, 92, 0.32);
  outline-offset: 2px;
}

.tcg-world-chip .tcg-logo {
  min-width: 138px;
  min-height: 38px;
  padding: 6px 11px;
}

.tcg-world-chip .tcg-logo-main {
  font-size: clamp(0.92rem, 1vw, 1.08rem);
}

.tcg-world-chip .tcg-logo-sub {
  font-size: clamp(0.62rem, 0.7vw, 0.76rem);
}

.hero-metrics {
  align-self: stretch;
  align-content: center;
  min-width: 300px;
  padding-left: clamp(8px, 1.5vw, 26px);
  transform: scale(1.08);
  transform-origin: center right;
}

.marketplace-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.marketplace-toolbar > div:first-child {
  flex: 0 0 auto;
}

.category-slider {
  --category-chip-width: 124px;
  --category-chip-gap: 8px;
  --category-rail-visible-cards: 5;
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  width: min(
    100%,
    calc((var(--category-chip-width) * var(--category-rail-visible-cards)) + (var(--category-chip-gap) * (var(--category-rail-visible-cards) - 1)) + 76px + 16px)
  );
  margin-inline: auto;
}

.marketplace-toolbar .category-slider {
  --category-chip-width: 136px;
  --category-chip-gap: 10px;
}

.marketplace-toolbar .category-chip-back {
  width: 114px;
  height: 158px;
}

.marketplace-toolbar .category-chip-label {
  font-size: 0.8rem;
  max-width: 118px;
}

.category-slide-button {
  width: 38px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  color: var(--web-ink);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(17, 25, 34, 0.035);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

.category-slide-button:hover {
  border-color: rgba(15, 107, 92, 0.32);
  background: #f6faf8;
  transform: translateY(-1px);
}

.category-slide-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.category-slide-button:focus-visible {
  outline: 2px solid rgba(15, 107, 92, 0.28);
  outline-offset: 1px;
}

.category-slide-button:disabled:hover {
  background: #ffffff;
  border-color: var(--web-line);
  box-shadow: 0 6px 16px rgba(17, 25, 34, 0.035);
}

.category-rail {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--category-chip-gap);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 4px 8px;
  scroll-padding-inline: 2px;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.category-rail::-webkit-scrollbar {
  height: 6px;
}

.category-rail::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.category-rail::-webkit-scrollbar-thumb {
  background: rgba(31, 115, 204, 0.55);
  border-radius: 999px;
}

.category-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 115, 204, 0.55) rgba(255, 255, 255, 0.2);
}

.category-chip {
  flex: 0 0 auto;
  min-width: 118px;
  min-height: 48px;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 0;
  padding: 8px 10px;
  scroll-snap-align: start;
  border-radius: 12px;
  border: 1px solid var(--web-line);
  color: var(--web-ink);
  background: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  font-size: 0.84rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(17, 25, 34, 0.05);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.category-chip--card {
  width: var(--category-chip-width);
  min-width: var(--category-chip-width);
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 8px 10px;
  border-radius: 12px;
  white-space: normal;
}

.category-chip-back {
  position: relative;
  width: 106px;
  height: 148px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background-color: #182c3d;
  background-image: linear-gradient(145deg, rgba(1, 8, 18, 0.2), rgba(1, 8, 18, 0.82)), url("assets/backgrounds/cardtrade-global-background.jpg?v=c32b54ce5fd3b24249f4");
  background-position: center;
  background-size: cover;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.category-chip-back::before,
.category-chip-back::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 2px;
}

.category-chip-back::after {
  inset: 12px;
  border-color: rgba(255, 255, 255, 0.28);
}

.category-chip-back span {
  display: none;
}

.category-chip-back-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

/* CardTrade logo (transparent PNG) needs contain + dark background */
.category-chip[data-category="all"] .category-chip-back-img {
  object-fit: contain;
  padding: 14px;
  background: #0d1b2a;
}

.category-chip-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.category-chip-logo {
  width: auto;
  display: flex;
  justify-content: center;
}

.tcg-logo {
  min-width: 104px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  gap: 1px;
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid #dce5e1;
  color: #243731;
  background: #f4f7f5;
  box-shadow: none;
  font-family: var(--web-body-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

.tcg-logo.has-image {
  background: #ffffff;
  border-color: rgba(24, 32, 43, 0.1);
  color: var(--web-ink);
}

.tcg-logo-img {
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
}

.tcg-logo-text {
  display: grid;
  place-items: center;
  gap: 1px;
}

.category-chip .tcg-logo {
  width: 100%;
  min-width: 0;
}

.game-pill {
  padding: 0;
  border: 0;
  background: transparent;
}

.game-pill .tcg-logo {
  min-width: auto;
  min-height: 28px;
  padding: 5px 8px;
  box-shadow: none;
}

.game-pill .tcg-logo.has-image {
  min-width: 110px;
}

.game-pill .tcg-logo-img {
  max-height: 24px;
}

.tcg-logo-main,
.tcg-logo-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcg-logo-main {
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.02;
}

.tcg-logo-sub {
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0.86;
  text-transform: uppercase;
}

.game-pill .tcg-logo-main {
  font-size: 0.74rem;
}

.game-pill .tcg-logo-sub {
  font-size: 0.5rem;
}

.tcg-logo-all,
.tcg-logo-other {
  color: #17332e;
  background: #f4f7f5;
  border-color: #d8e2dc;
}

.tcg-logo-pokemon,
.tcg-logo-one-piece,
.tcg-logo-dragonball {
  color: #3f3829;
  background: #f7f1df;
  border-color: #ded4b7;
}

.tcg-logo-yu-gi-oh,
.tcg-logo-magic-the-gathering,
.tcg-logo-gundam,
.tcg-logo-vanguard,
.tcg-logo-lorcana {
  color: #22333f;
  background: #eef5f8;
  border-color: #d7e3e9;
}

.tcg-logo-flesh-and-blood,
.tcg-logo-riftbound,
.tcg-logo-digimon,
.tcg-logo-topps,
.tcg-logo-sports {
  color: #1c3731;
  background: #eef6f3;
  border-color: #d4e5df;
}

.category-chip:hover,
.category-chip.is-active {
  color: var(--web-ink);
  border-color: rgba(14, 102, 85, 0.34);
  background: #eef6f3;
}

.category-chip[data-category] {
  background: #ffffff;
}

.category-chip[data-category]:hover,
.category-chip[data-category].is-active {
  color: var(--web-ink);
  border-color: rgba(14, 102, 85, 0.34);
  background: #eef6f2;
}

.category-chip[data-category].is-active {
  box-shadow: inset 0 -2px 0 var(--web-green), 0 8px 18px rgba(17, 25, 34, 0.08);
  transform: translateY(-1px);
}

.category-chip--card.is-active .category-chip-back {
  border-color: rgba(14, 102, 85, 0.55);
  box-shadow: 0 0 0 2px rgba(14, 102, 85, 0.22), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: clamp(14px, 1.2vw, 18px);
  margin-bottom: var(--web-section-gap);
  border: 1px solid rgba(148, 176, 214, 0.36);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.9));
  box-shadow: 0 14px 34px rgba(8, 20, 38, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.filter-intro {
  align-self: center;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.filter-intro strong {
  color: var(--web-ink);
  font-size: clamp(1.18rem, 1.1vw, 1.34rem);
  line-height: 1.1;
}

.filter-intro span {
  color: var(--web-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.filter-bar .filter-actions {
  justify-content: flex-end;
}

.filter-bar .filter-actions .secondary-button:first-child {
  color: #ffffff;
  border-color: #1f73cc;
  background: linear-gradient(135deg, #2a78cb, #145291);
  box-shadow: 0 10px 22px rgba(20, 82, 145, 0.24);
}

.filter-bar .filter-actions .secondary-button:first-child:hover {
  background: linear-gradient(135deg, #2f83de, #145291);
  border-color: #145291;
}

.detail-search-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
  align-items: end;
  padding: clamp(12px, 1vw, 16px);
  margin-bottom: var(--web-section-gap);
  border: 1px solid rgba(148, 176, 214, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.9));
  box-shadow: 0 14px 34px rgba(8, 20, 38, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.detail-search-slider-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  justify-items: center;
  text-align: center;
}

.detail-search-slider-label {
  color: var(--web-muted);
  font-size: calc(0.8rem * var(--web-filter-text-scale));
  font-weight: 760;
}

.detail-game-slider {
  --category-chip-width: 124px;
  --category-chip-gap: 8px;
  width: min(
    100%,
    calc((var(--category-chip-width) * var(--category-rail-visible-cards)) + (var(--category-chip-gap) * (var(--category-rail-visible-cards) - 1)) + 76px + 16px)
  );
  margin-inline: auto;
}

.detail-search-panel .filter-actions {
  grid-column: 1 / -1;
  justify-content: center;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--web-ink);
  font-weight: 750;
}

label span {
  color: var(--web-muted);
  font-size: calc(0.84rem * var(--web-filter-text-scale));
}

.filter-bar label span {
  font-size: 0.72rem;
}

.sponsored-listings {
  margin-bottom: var(--web-section-gap);
  display: grid;
  gap: 14px;
}

.sponsored-listings.is-hidden {
  display: none;
}

.sponsored-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.sponsored-header h3 {
  margin: 0;
  font-size: clamp(1.12rem, 1vw, 1.3rem);
  color: var(--web-ink);
}

.sponsored-header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 98, 20, 0.24);
  background: rgba(255, 206, 92, 0.18);
  color: #6d5320;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sponsored-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 320px), 34%);
  gap: var(--web-section-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 2px 2px 8px;
}

.sponsored-carousel:focus-visible {
  outline: 2px solid var(--web-gold);
  outline-offset: 3px;
}

.sponsored-carousel > .listing-card {
  min-width: 0;
  scroll-snap-align: start;
}

.sponsored-listings .listing-card {
  border: 1px solid rgba(225, 183, 88, 0.58);
  background: linear-gradient(145deg, rgba(28, 42, 52, 0.98), rgba(22, 31, 42, 0.98));
  box-shadow: 0 18px 40px rgba(140, 98, 32, 0.2), 0 0 0 1px rgba(88, 183, 210, 0.12);
}

.sponsored-listings .listing-card:hover {
  border-color: #e5c27e;
  box-shadow: 0 24px 48px rgba(140, 98, 32, 0.28), 0 0 24px rgba(88, 183, 210, 0.14);
}

.sponsored-listings .listing-image-frame {
  background: linear-gradient(145deg, #263e4b, #1b2b3a);
  border-bottom-color: rgba(225, 183, 88, 0.34);
}

.sponsored-listings .listing-body {
  background: linear-gradient(180deg, rgba(27, 39, 50, 0.98), rgba(20, 29, 40, 0.98));
}

.sponsored-listings .listing-title {
  color: #f8edcf;
}

.listing-card.is-sponsored .listing-badge-row {
  gap: 6px;
}

.listing-card.is-sponsored .pill.gold {
  background: linear-gradient(135deg, rgba(255, 214, 112, 0.55), rgba(255, 183, 42, 0.35));
  border: 1px solid rgba(155, 117, 29, 0.32);
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--web-card-min)), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--web-section-gap);
  align-items: stretch;
}

.listing-grid.is-list-view {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0;
}

.listing-grid.is-list-view .listing-card {
  min-height: 0;
}

/* Keep list cards single-column even if a renderer updates the cards before the container state. */
.listing-grid:has(> .listing-card.is-list-view) {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0;
}

#myListingsViewList.is-list-view,
#favoritesGrid.is-list-view,
#detailedListingGrid.is-list-view {
  grid-template-columns: 1fr;
}

.favorites-metrics {
  margin-bottom: 16px;
}

.favorites-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.38fr);
  gap: 16px;
  align-items: start;
}

/* single active section takes full width */
.favorites-layout.is-single-section {
  grid-template-columns: 1fr;
}

.favorites-main,
.favorites-sidecar {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.search-result-layout {
  display: grid;
  gap: 18px;
  scroll-margin-top: 120px;
}

.search-results-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(24, 32, 43, 0.08);
  border-radius: var(--web-radius);
  background: var(--web-surface);
  box-shadow: var(--web-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#view-search .search-results-panel {
  gap: 10px;
  padding: 12px;
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-search .search-results-panel .empty-state {
  min-height: 0;
  gap: 4px;
  padding: 16px 18px;
  border: 1px dashed rgba(157, 188, 203, 0.22);
  border-radius: 10px;
  color: #aebdca;
  background: rgba(7, 17, 31, 0.58);
  box-shadow: none;
}

#view-search .search-results-panel .empty-state strong {
  color: #dbe8f4;
  font-size: 1rem;
  line-height: 1.2;
}

#view-search .search-results-panel .empty-state p {
  font-size: 0.82rem;
  line-height: 1.35;
}

.open-search-panel {
  overflow: hidden;
  border: 1px solid rgba(24, 32, 43, 0.1);
  border-radius: var(--web-radius);
  background: var(--web-surface);
  box-shadow: var(--web-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.open-search-toggle {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: var(--web-ink);
  text-align: left;
  cursor: pointer;
}

.open-search-toggle:hover,
.open-search-toggle:focus-visible,
.open-search-toggle.is-open {
  background: rgba(255, 255, 255, 0.42);
}

.open-search-toggle-icon,
.open-search-request-placeholder {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--web-panel-strong);
  border: 1px solid rgba(17, 25, 34, 0.1);
}

.open-search-toggle-icon {
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
}

.open-search-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.open-search-toggle-copy strong {
  font-size: 1rem;
}

.open-search-toggle-copy small,
.open-search-request-copy small {
  color: var(--web-muted);
  font-size: 0.78rem;
}

.open-search-toggle-status {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--web-panel-strong);
  color: var(--web-muted);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.open-search-toggle-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.open-search-toggle.is-open .open-search-toggle-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.open-search-content {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(17, 25, 34, 0.08);
}

.open-search-content[hidden] {
  display: none;
}

.open-search-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.open-search-toolbar label {
  display: grid;
  gap: 6px;
}

.open-search-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px;
}

.open-search-request-item {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid rgba(17, 25, 34, 0.1);
  border-radius: 12px;
  background: var(--web-panel-strong);
  color: var(--web-ink);
  text-align: left;
  cursor: pointer;
}

.open-search-request-item:hover,
.open-search-request-item:focus-visible {
  border-color: var(--web-green);
  transform: translateY(-1px);
}

.open-search-request-item img,
.open-search-request-placeholder {
  width: 54px;
  height: 68px;
  object-fit: contain;
}

.open-search-request-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.open-search-request-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.open-search-request-top strong,
.open-search-request-top small,
.open-search-request-title,
.open-search-request-copy > small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.open-search-request-top strong {
  color: var(--web-green);
  font-size: 0.74rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.open-search-request-top small,
.open-search-request-copy > small {
  white-space: nowrap;
}

.open-search-request-title {
  font-weight: 800;
}

.open-search-request-action {
  color: var(--web-green);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.card-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--web-card-min)), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--web-section-gap);
  align-items: stretch;
}

.listing-card,
.card-result,
.order-card,
.thread-item,
.compact-item,
.empty-state,
.message-bubble {
  border-radius: var(--web-radius);
  border: 1px solid rgba(17, 25, 34, 0.08);
  background: var(--web-panel-strong);
  box-shadow: 0 12px 30px rgba(2, 8, 20, 0.13);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.saved-search-card-thumb {
  display: block;
  flex-shrink: 0;
  width: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--web-radius);
  overflow: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
}

.saved-search-card-thumb:hover {
  opacity: 0.85;
  transform: scale(1.04);
}

.saved-search-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--web-radius);
}

.saved-search-card-thumb-placeholder {
  background: linear-gradient(135deg, rgba(13, 38, 76, 0.06), rgba(15, 107, 92, 0.08));
  border: 1px dashed rgba(13, 38, 76, 0.18);
}

.listing-card,
.card-result,
.listing-view-card {
  --game-accent: var(--web-green);
  --game-accent-dark: var(--web-green-dark);
  --game-soft: #f4f6f5;
}

.listing-card[data-game="pokemon"],
.card-result[data-game="pokemon"],
.listing-view-card[data-game="pokemon"],
.listing-card[data-game="one-piece"],
.card-result[data-game="one-piece"],
.listing-view-card[data-game="one-piece"],
.listing-card[data-game="dragonball"],
.card-result[data-game="dragonball"],
.listing-view-card[data-game="dragonball"] {
  --game-accent: var(--web-gold);
  --game-accent-dark: #6f612d;
  --game-soft: #f7f1df;
}

.listing-card[data-game="yu-gi-oh"],
.card-result[data-game="yu-gi-oh"],
.listing-view-card[data-game="yu-gi-oh"],
.listing-card[data-game="magic-the-gathering"],
.card-result[data-game="magic-the-gathering"],
.listing-view-card[data-game="magic-the-gathering"],
.listing-card[data-game="gundam"],
.card-result[data-game="gundam"],
.listing-view-card[data-game="gundam"],
.listing-card[data-game="vanguard"],
.card-result[data-game="vanguard"],
.listing-view-card[data-game="vanguard"],
.listing-card[data-game="lorcana"],
.card-result[data-game="lorcana"],
.listing-view-card[data-game="lorcana"] {
  --game-accent: var(--web-blue);
  --game-accent-dark: #294557;
  --game-soft: #eef5f8;
}

.listing-card[data-game="flesh-and-blood"],
.card-result[data-game="flesh-and-blood"],
.listing-view-card[data-game="flesh-and-blood"],
.listing-card[data-game="riftbound"],
.card-result[data-game="riftbound"],
.listing-view-card[data-game="riftbound"],
.listing-card[data-game="digimon"],
.card-result[data-game="digimon"],
.listing-view-card[data-game="digimon"],
.listing-card[data-game="topps"],
.card-result[data-game="topps"],
.listing-view-card[data-game="topps"],
.listing-card[data-game="sports"],
.card-result[data-game="sports"],
.listing-view-card[data-game="sports"] {
  --game-accent: var(--web-green);
  --game-accent-dark: var(--web-green-dark);
  --game-soft: #eef6f3;
}

.listing-card {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.listing-card.is-list-view {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 5px 10px;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.listing-card.is-list-view .listing-image-frame,
.listing-card.is-list-view .listing-image-frame-list {
  min-height: 0;
  border-bottom: 0;
  border-right: 1px solid rgba(17, 25, 34, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

.listing-card.is-list-view .listing-placeholder,
.listing-card.is-list-view .listing-placeholder-list,
.listing-card.is-list-view .listing-media,
.listing-card.is-list-view .listing-media-list {
  width: 100%;
  height: 62px;
  padding: 3px;
  object-fit: contain;
}

.listing-card.is-list-view .listing-body,
.listing-card.is-list-view .listing-body-list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(110px, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.listing-card.is-list-view .listing-card-top,
.listing-card.is-list-view .listing-card-top-list {
  display: contents;
}

.listing-card.is-list-view .listing-copy-stack {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.listing-card.is-list-view .listing-inline-details {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.listing-card.is-list-view .listing-inline-details span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.listing-card.is-list-view .listing-inline-details small {
  color: var(--web-muted);
  font-size: 0.62rem;
  line-height: 1.1;
}

.listing-card.is-list-view .listing-inline-details strong {
  color: var(--web-ink);
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: nowrap;
}

.listing-card.is-list-view .listing-list-footer {
  display: contents;
}

.listing-card.is-list-view .listing-title {
  font-size: 1rem;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.listing-card.is-list-view .listing-mini-meta {
  color: var(--web-muted);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-card.is-list-view .listing-seller-row {
  min-width: 0;
  gap: 8px;
}

.listing-card.is-list-view .listing-seller-row strong {
  font-size: 0.82rem;
}

.listing-card.is-list-view .listing-seller-row small {
  font-size: 0.62rem;
}

.listing-card.is-list-view .card-actions {
  margin-top: 0;
  justify-content: flex-end;
  gap: 6px;
}

.listing-card.is-list-view .listing-copy-stack {
  grid-column: 1;
}

.listing-card.is-list-view .listing-price-wrap {
  grid-column: 2;
  grid-row: 1;
}

.listing-card.is-list-view .listing-seller-row {
  grid-column: 3;
  grid-row: 1;
}

.listing-card.is-list-view .card-actions {
  grid-column: 4;
  grid-row: 1;
}

.listing-card.is-list-view .card-actions button {
  min-height: 30px;
  padding: 0.4rem 0.65rem;
  font-size: 0.74rem;
}

.listing-card.is-list-view .listing-price-wrap {
  justify-items: end;
  gap: 2px;
}

.listing-card.is-list-view .listing-price {
  font-size: 1.02rem;
}

.listing-card.is-list-view .listing-badge-row {
  display: none;
}

.listing-card.is-list-view .listing-description,
.listing-card.is-list-view .listing-facts,
.listing-card.is-list-view .listing-safety-note {
  display: none;
}

.listing-card.is-list-view:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.06);
}

.listing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 107, 92, 0.26);
  box-shadow: 0 20px 42px rgba(17, 25, 34, 0.12);
}

.card-result {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.card-result.is-selected {
  border-color: var(--web-green);
  box-shadow: inset 0 0 0 2px rgba(14, 102, 85, 0.22), 0 10px 26px rgba(24, 32, 43, 0.07);
}

.listing-image-frame,
.card-result-image-frame {
  position: relative;
  min-height: var(--web-card-media-height);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--game-soft);
  border-bottom: 1px solid rgba(17, 25, 34, 0.075);
}

.listing-media {
  width: 100%;
  height: var(--web-card-media-height);
  background: var(--game-soft);
  object-fit: contain;
  padding: 16px;
  filter: drop-shadow(0 10px 12px rgba(17, 25, 34, 0.12));
  transition: transform 260ms ease;
}

.card-result-media {
  width: 100%;
  height: var(--web-card-media-height);
  background: var(--game-soft);
  object-fit: contain;
  padding: 16px;
  filter: drop-shadow(0 10px 12px rgba(17, 25, 34, 0.12));
}

.two-sided-card-media {
  position: relative;
  width: 100%;
  height: var(--web-card-media-height);
  display: grid;
  place-items: center;
}

.two-sided-card-media .listing-media,
.two-sided-card-media .card-result-media {
  grid-area: 1 / 1;
}

.two-sided-card-media .card-side-back {
  display: none;
}

.two-sided-card-media.is-flipped .card-side-front {
  display: none;
}

.two-sided-card-media.is-flipped .card-side-back {
  display: block;
}

.card-flip-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(17, 25, 34, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--web-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(17, 25, 34, 0.16);
  cursor: pointer;
}

.card-flip-button:hover,
.card-flip-button:focus-visible {
  background: var(--web-green);
  color: #fff;
}

.listing-placeholder {
  width: 100%;
  height: var(--web-card-media-height);
  display: grid;
  place-items: center;
  color: var(--web-muted);
  background: var(--game-soft);
  font-weight: 800;
}

.card-result-placeholder {
  width: 100%;
  height: var(--web-card-media-height);
  display: grid;
  place-items: center;
  color: var(--web-muted);
  background: var(--game-soft);
  font-weight: 800;
}

.listing-badge-row {
  position: static;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 9px 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: rgba(8, 17, 28, 0.94);
}

.listing-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 17px;
}

.card-result-body {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.listing-title {
  margin: 0;
  min-height: calc(1.18em * 2);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.listing-price-wrap {
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.listing-price-wrap span {
  color: var(--web-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.listing-description {
  margin: 0;
  min-height: calc(1.4em * 2);
  color: var(--web-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-description.is-empty {
  visibility: hidden;
}

#view-marketplace .listing-badge-row {
  min-height: 0;
  padding: 6px 10px;
  gap: 5px;
}

#view-marketplace .listing-body {
  gap: 8px;
  padding: 12px;
}

#view-marketplace .listing-title {
  min-height: 0;
}

#view-marketplace .listing-description {
  min-height: 0;
  font-size: .78rem;
}

#view-marketplace .listing-description.is-empty {
  display: none;
}

#view-marketplace .listing-facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

#view-marketplace .listing-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#view-marketplace .listing-fact dt {
  margin: 0;
  font-size: .64rem;
}

#view-marketplace .listing-fact dd {
  font-size: .78rem;
}

.listing-safety-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e7c878;
  border-radius: 8px;
  color: #6c4d09;
  background: #fff8df;
  font-size: 0.78rem;
}

.listing-safety-note.info {
  border-color: #b9d4eb;
  color: #20547e;
  background: #eef7ff;
}

.listing-safety-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #bd8610;
  font-size: 0.72rem;
  font-weight: 900;
}

.listing-safety-note.info .listing-safety-icon {
  background: #2d79ad;
}

.listing-safety-note strong,
.listing-safety-note small {
  display: block;
}

.listing-safety-note small {
  margin-top: 3px;
  line-height: 1.35;
}

.listing-safety-report {
  padding: 2px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

.listing-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.listing-fact {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid rgba(17, 25, 34, 0.065);
  background: #fbfcfb;
}

.listing-fact dt {
  margin: 0 0 3px;
  color: var(--web-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.listing-fact dd {
  margin: 0;
  color: var(--web-ink);
  font-size: 0.88rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.listing-seller-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.seller-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 999px;
  color: var(--web-green-dark);
  background: #e8f2ee;
  border: 1px solid #d4e5df;
  font-weight: 900;
}

.listing-seller-row strong,
.listing-seller-row small {
  display: block;
}

.listing-seller-row small {
  margin-top: 2px;
  color: var(--web-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.listing-meta,
.order-meta,
.compact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--web-muted);
  font-size: 0.84rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #21302d;
  background: #eef3f0;
  border: 1px solid #d9e5de;
  font-size: 0.78rem;
  font-weight: 800;
}

.pill.gold {
  color: #3f3829;
  background: #f7f1df;
  border-color: #ded4b7;
}

.pill.gold.game-pill {
  padding: 0;
  border: 0;
  background: transparent;
}

.pill.blue {
  color: #294557;
  background: #eef5f8;
  border-color: #d7e3e9;
}

.pill.coral {
  color: #713732;
  background: #f7eceb;
  border-color: #e5c8c4;
}

.pill.success {
  color: #1f5e45;
  background: #edf8f2;
  border-color: #c8e8d5;
}

.listing-card .listing-price {
  color: #f4d27e;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: auto;
}

.card-actions.two-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-actions.one-action {
  grid-template-columns: 1fr;
}

.listing-card[data-listing-id],
.card-result[data-card-id],
.compact-item[data-listing-id],
.compact-item.cart-reminder-item[data-listing-id] {
  cursor: pointer;
}

.compact-item[data-seller-id],
.compact-item[data-saved-search-id] {
  cursor: pointer;
}

.card-actions .secondary-button,
.card-actions .primary-button {
  min-height: 42px;
  padding: 9px 10px;
  font-size: 0.86rem;
  white-space: normal;
}

.split-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

#view-sell .split-workspace {
  transition: grid-template-columns 220ms ease;
}

#view-sell .split-workspace.my-listings-hidden {
  grid-template-columns: minmax(0, 1fr);
}

#view-sell .sell-my-listings-panel {
  opacity: 1;
  transform: translateY(0);
  max-height: 2400px;
  overflow: hidden;
  transition: opacity 220ms ease, transform 220ms ease, max-height 280ms ease, padding 280ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#view-sell .sell-my-listings-panel.is-collapsed {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.swap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.38fr);
  gap: 16px;
  align-items: start;
}

.my-swap-cards-panel {
  overflow: hidden;
  border: 1px solid rgba(24, 32, 43, 0.1);
  border-radius: var(--web-radius);
  background: var(--web-surface);
  box-shadow: var(--web-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.my-swap-cards-toggle {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--web-ink);
  text-align: left;
  cursor: pointer;
}

.my-swap-cards-toggle:hover,
.my-swap-cards-toggle:focus-visible,
.my-swap-cards-toggle.is-open {
  background: rgba(255, 255, 255, 0.42);
}

.my-swap-cards-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 25, 34, 0.1);
  border-radius: 12px;
  background: var(--web-panel-strong);
  color: var(--web-green);
  font-size: 1.35rem;
  font-weight: 800;
}

.my-swap-cards-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.my-swap-cards-heading strong {
  font-size: 1.05rem;
}

.my-swap-cards-heading small {
  color: var(--web-muted);
  font-size: 0.8rem;
}

.my-swap-cards-count {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--web-panel-strong);
  color: var(--web-muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.my-swap-cards-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.my-swap-cards-toggle.is-open .my-swap-cards-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.my-swap-cards-content {
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(17, 25, 34, 0.08);
}

.my-swap-cards-content[hidden] {
  display: none;
}

.my-swap-cards-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.my-swap-filter {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(17, 25, 34, 0.1);
  border-radius: 10px;
  background: var(--web-panel-strong);
  color: var(--web-ink);
  cursor: pointer;
}

.my-swap-filter span {
  font-size: 0.78rem;
  font-weight: 750;
}

.my-swap-filter strong {
  font-size: 1rem;
}

.my-swap-filter.is-active {
  border-color: var(--web-green);
  background: var(--web-sky-soft);
  color: var(--web-green);
}

.my-swap-cards-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.my-swap-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 11px;
  border: 1px solid rgba(17, 25, 34, 0.1);
  border-radius: 12px;
  background: var(--web-panel-strong);
}

.my-swap-card-image,
.my-swap-card-placeholder {
  width: 72px;
  height: 96px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--web-surface-soft);
}

.my-swap-card-placeholder {
  display: grid;
  place-items: center;
  color: var(--web-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.my-swap-card-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.my-swap-card-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.my-swap-card-heading h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--web-ink);
  font-size: 0.92rem;
  text-overflow: ellipsis;
}

.my-swap-card-copy > p {
  margin: 0;
  overflow: hidden;
  color: var(--web-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-swap-card-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--web-muted);
  font-size: 0.76rem;
}

.my-swap-card-values strong {
  color: var(--web-ink);
}

.my-swap-card .compact-actions {
  margin-top: 2px;
}

.my-swap-card .compact-actions > * {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.74rem;
}

.my-swap-cards-list.is-list-view {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--web-line);
  border-radius: 12px;
  background: rgba(11, 24, 39, 0.42);
}

.my-swap-card.is-list-view {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 88px;
  padding: 9px 14px;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(157, 188, 203, 0.16);
  background: rgba(16, 29, 43, 0.76);
}

.my-swap-card.is-list-view:nth-child(even) {
  background: rgba(21, 36, 51, 0.82);
}

.my-swap-card.is-list-view:last-child {
  border-bottom: 0;
}

.my-swap-card.is-list-view .my-swap-card-image,
.my-swap-card.is-list-view .my-swap-card-placeholder {
  width: 72px;
  height: 84px;
}

.my-swap-card.is-list-view .my-swap-card-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
}

.my-swap-card.is-list-view .my-swap-card-heading,
.my-swap-card.is-list-view .my-swap-card-copy > p,
.my-swap-card.is-list-view .my-swap-card-values {
  min-width: 0;
  grid-column: 1;
}

.my-swap-card.is-list-view .my-swap-card-heading {
  align-items: center;
}

.my-swap-card.is-list-view .my-swap-card-copy > p,
.my-swap-card.is-list-view .my-swap-card-values {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-swap-card.is-list-view .compact-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 0;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .my-swap-card.is-list-view {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 8px;
    gap: 10px;
  }

  .my-swap-card.is-list-view .my-swap-card-image,
  .my-swap-card.is-list-view .my-swap-card-placeholder {
    width: 58px;
    height: 68px;
  }

  .my-swap-card.is-list-view .my-swap-card-copy {
    display: block;
  }

  .my-swap-card.is-list-view .compact-actions {
    margin-top: 6px;
    justify-content: flex-start;
  }
}

.my-swap-cards-footer {
  display: flex;
  justify-content: flex-end;
}

.swap-main,
.swap-sidecar {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.compact-heading {
  min-height: 42px;
}

.tool-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(157, 188, 203, 0.24);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
  box-shadow: 0 14px 32px rgba(2, 8, 20, 0.2);
}

.form-grid {
  display: grid;
  gap: 10px;
}

.form-grid.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-legal-form-picker {
  position: relative;
}

.profile-legal-form-trigger {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.profile-legal-form-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(17, 25, 34, 0.12);
  border-radius: 12px;
  background: var(--web-surface-strong);
  box-shadow: 0 12px 28px rgba(2, 8, 20, 0.16);
}

.profile-legal-form-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--web-text);
  font: inherit;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.profile-legal-form-option:hover,
.profile-legal-form-option:focus-visible {
  border-color: rgba(33, 150, 243, 0.4);
  background: rgba(33, 150, 243, 0.06);
}

.profile-legal-form-option.is-selected {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.4);
}

.form-grid.three-cols {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr) minmax(180px, 0.8fr);
}

.deckbuilder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.deckbuilder-main,
.deckbuilder-sidecar {
  min-width: 0;
  display: contents;
}

/* Keep the web builder in the same working order as the PWA while retaining
   the existing forms and event-bound IDs for desktop-only management actions. */
#view-deckbuilder .deck-library-panel,
#view-deckbuilder .deck-meta-panel,
#view-deckbuilder .deck-metrics,
#view-deckbuilder .deck-card-search-form,
#view-deckbuilder #deckCardSearchResults,
#view-deckbuilder #manualDeckCardForm,
#view-deckbuilder #deckTxtImportForm,
#view-deckbuilder .deck-card-list,
#view-deckbuilder .deckbuilder-sidecar > section {
  grid-column: 1;
}

#view-deckbuilder .deck-metrics { order: 1; }
#view-deckbuilder #deckCardSearchForm { order: 2; }
#view-deckbuilder #deckCardSearchResults { order: 3; }
#view-deckbuilder .deck-card-list { order: 4; }
#view-deckbuilder .deckbuilder-sidecar > section { order: 5; }
#view-deckbuilder .deck-library-panel { order: 8; }
#view-deckbuilder .deck-meta-panel { order: 9; }
#view-deckbuilder #deckTxtImportForm { order: 10; }
#view-deckbuilder #manualDeckCardForm { order: 11; }

#view-deckbuilder .deck-library-panel,
#view-deckbuilder .deck-meta-panel,
#view-deckbuilder #deckTxtImportForm,
#view-deckbuilder #manualDeckCardForm {
  padding: 12px;
  gap: 10px;
}

#view-deckbuilder .deck-library-panel .panel-heading,
#view-deckbuilder .deck-meta-panel .form-grid,
#view-deckbuilder #deckTxtImportForm .panel-heading,
#view-deckbuilder #manualDeckCardForm .panel-heading {
  min-height: 34px;
}

#view-deckbuilder .deck-card-list {
  display: grid;
  gap: 10px;
}

#view-deckbuilder .deck-card-search-form {
  background: var(--web-surface-strong);
  padding: 14px;
  gap: 10px;
}

#view-deckbuilder .deck-card-search-form .panel-heading h2 {
  font-size: 1rem;
}

#view-deckbuilder .deck-card-search-form input,
#view-deckbuilder .deck-card-search-form select,
#view-deckbuilder #manualDeckCardForm input,
#view-deckbuilder #deckMetaForm input,
#view-deckbuilder #deckMetaForm select {
  min-height: 42px;
}

@media (max-width: 760px) {
  #view-deckbuilder .deckbuilder-layout {
    gap: 10px;
  }

  #view-deckbuilder .deck-card-search-form .form-grid.two-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-deckbuilder .deck-meta-panel .form-grid.three-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.deck-meta-panel {
  background: #ffffff;
}

.deck-library-panel {
  background: #ffffff;
}

.deck-library-list {
  display: grid;
  gap: 10px;
}

.deck-library-item {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  color: inherit;
  background: #ffffff;
  box-shadow: var(--web-shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.deck-library-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 107, 92, 0.22);
  box-shadow: 0 14px 28px rgba(17, 25, 34, 0.09);
}

.deck-library-item.is-active {
  border-color: rgba(49, 138, 96, 0.36);
  background: #f3fbf6;
}

.deck-library-icon {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--web-green);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.deck-library-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.deck-library-copy strong {
  color: var(--web-ink);
  font-size: 0.98rem;
  line-height: 1.2;
}

.deck-library-copy small {
  color: var(--web-muted);
  font-weight: 700;
  line-height: 1.35;
}

.deck-library-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--web-green-dark);
  background: rgba(49, 138, 96, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.deck-metrics .stat-tile strong {
  color: var(--web-green);
}

.favorites-metrics .metric,
.profile-summary .stat-tile,
.deck-metrics .stat-tile {
  min-height: 72px;
}

.favorites-metrics .metric strong,
.profile-summary .stat-tile strong,
.deck-metrics .stat-tile strong {
  font-size: 1.18rem;
}

.favorites-metrics .metric span,
.profile-summary .stat-tile span,
.deck-metrics .stat-tile span {
  font-size: 0.74rem;
}

.favorites-segmented-control {
  flex-wrap: wrap;
}

.favorites-segmented-control .segment {
  min-height: 34px;
  font-size: 0.82rem;
}

.favorite-filter-metric {
  cursor: pointer;
}

.favorite-filter-metric.is-active {
  border-color: rgba(255, 214, 120, 0.72);
  box-shadow: inset 0 -2px 0 rgba(255, 214, 120, 0.66), 0 18px 34px rgba(6, 22, 38, 0.34);
}

.profile-summary {
  gap: 8px;
}

.profile-age-status {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(214, 179, 106, 0.12);
  border: 1px solid rgba(214, 179, 106, 0.35);
}

.profile-age-status .helper-text {
  margin: 0 0 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.profile-age-status button {
  margin: 4px 0 6px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  grid-template-columns: none !important;
}

.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.profile-summary > div,
.profile-summary .stat-tile {
  border-radius: 16px;
}

.profile-summary .stat-tile {
  padding: 11px 12px;
}

.profile-summary .stat-tile strong,
.profile-summary .stat-tile span {
  position: relative;
  z-index: 1;
}

.profile-finance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--web-section-gap);
  margin-top: var(--web-section-gap);
}

.profile-finance-card {
  align-content: start;
}

.profile-finance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-finance-heading .eyebrow {
  margin-bottom: 4px;
}

.profile-finance-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-finance-metrics > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: 10px;
  background: var(--web-panel-strong);
}

.profile-finance-metrics span,
.profile-latest-invoice small {
  color: var(--web-muted);
  font-size: 0.75rem;
}

.profile-finance-metrics strong {
  overflow: hidden;
  color: var(--web-ink);
  font-size: 1rem;
  text-overflow: ellipsis;
}

.profile-finance-notice {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(46, 141, 224, 0.2);
  border-radius: 10px;
  background: var(--web-sky-soft);
}

.profile-finance-notice[hidden] {
  display: none;
}

.profile-finance-notice p {
  margin: 0;
  color: var(--web-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.profile-finance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-invoice-frequency {
  display: grid;
  gap: 6px;
}

.profile-invoice-frequency small {
  min-height: 18px;
  color: var(--web-muted);
  font-size: 0.76rem;
}

.profile-invoice-overview {
  min-width: 0;
}

.profile-latest-invoice {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: 10px;
  background: var(--web-panel-strong);
}

.profile-latest-invoice > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-latest-invoice > span:first-child strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-card-list {
  display: grid;
  gap: 10px;
}

.deck-card-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: #ffffff;
  box-shadow: var(--web-shadow-soft);
}

.deck-card-row.is-owned {
  border-color: rgba(49, 138, 96, 0.34);
  background: #f3fbf6;
}

.deck-card-row.is-missing {
  border-color: rgba(201, 91, 65, 0.22);
}

.deck-section-group {
  display: grid;
  gap: 10px;
}

.deck-section-group + .deck-section-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 25, 34, 0.1);
}

.deck-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--web-ink);
  font-size: 1rem;
  font-weight: 900;
}

.deck-card-click {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.deck-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.deck-card-copy strong {
  color: #16232b;
  font-size: 0.98rem;
  line-height: 1.18;
}

.deck-card-copy small {
  color: #57666c;
  font-weight: 700;
  line-height: 1.35;
}

.deck-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #1f5e45;
  background: rgba(49, 138, 96, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.deck-card-row.is-missing .deck-state-pill {
  color: #a23b2b;
  background: rgba(201, 91, 65, 0.12);
}

.deck-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.deck-row-label {
  color: #57666c;
  font-size: 0.78rem;
  font-weight: 800;
}

.deck-row-owned {
  min-width: 22px;
  color: #16232b;
  text-align: center;
  font-weight: 900;
}

.deck-row-actions .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
}

.deck-row-quantity {
  min-width: 26px;
  color: #16232b;
  text-align: center;
  font-weight: 900;
}

.deck-progress-panel {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: #ffffff;
  box-shadow: var(--web-shadow-soft);
}

.deck-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(17, 25, 34, 0.08);
  overflow: hidden;
}

.deck-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f5e45, #56c98d);
  transition: width 0.25s ease;
}

.deck-progress-label {
  margin: 0;
  color: #16232b;
  font-weight: 900;
  font-size: 0.9rem;
}

.deck-progress-split {
  margin: 0;
  color: #57666c;
  font-weight: 700;
  font-size: 0.82rem;
}

.deck-validation-panel .compact-list:empty::before {
  content: 'Keine Probleme gefunden.';
  color: var(--web-muted);
  font-weight: 700;
}

.deck-validation-issue {
  padding: 8px 10px;
  border-radius: var(--web-radius);
  background: rgba(201, 91, 65, 0.16);
  color: #ff9f8c;
  font-weight: 700;
  font-size: 0.85rem;
}

.deck-validation-issue.is-warning {
  background: rgba(201, 158, 65, 0.18);
  color: #f2c477;
}

.deck-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.deck-toolbar input[type="search"] {
  flex: 1 1 220px;
}

.deck-toolbar select {
  flex: 0 0 auto;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-chip {
  border: 1px solid rgba(17, 25, 34, 0.14);
  border-radius: 999px;
  padding: 6px 14px;
  background: #ffffff;
  color: var(--web-ink);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.filter-chip.is-active {
  border-color: var(--web-green-dark);
  background: rgba(49, 138, 96, 0.12);
  color: var(--web-green-dark);
}

.collection-view-switcher,
.deck-view-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(17, 25, 34, 0.06);
}

.collection-view-tab,
.deck-view-tab {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  background: transparent;
  color: var(--web-ink);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}

.collection-view-tab.is-active,
.deck-view-tab.is-active {
  background: var(--web-green-dark);
  color: #ffffff;
}

.collection-view-tab:focus-visible,
.deck-view-tab:focus-visible {
  outline: 2px solid var(--web-gold);
  outline-offset: 2px;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.deck-grid-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: #ffffff;
  box-shadow: var(--web-shadow-soft);
  text-align: center;
  color: #16232b;
}

.deck-grid-item img,
.deck-grid-item .compact-badge {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: calc(var(--web-radius) - 4px);
}

.deck-grid-quantity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.deck-analysis-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.deck-analysis-metric {
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: #ffffff;
  text-align: center;
}

.deck-analysis-metric strong {
  display: block;
  color: #16232b;
  font-size: 1.15rem;
}

.deck-analysis-metric span {
  color: #57666c;
  font-weight: 700;
  font-size: 0.8rem;
}

.deck-analysis-distribution {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.deck-analysis-distribution-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--web-radius);
  background: rgba(17, 25, 34, 0.04);
  color: #16232b;
  font-weight: 700;
}

.deck-search-card,
.missing-card-item {
  background: #ffffff;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.check-row span {
  color: var(--web-ink);
}

.compact-list,
.order-list,
.thread-list {
  display: grid;
  gap: 10px;
}

.wide-list {
  gap: 10px;
}

#view-my-searches .metric-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

#mySearchList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#mySearchList.is-list-view {
  grid-template-columns: 1fr;
  gap: 0;
}

.compact-item,
.order-card,
.thread-item {
  padding: 14px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

@keyframes cardRevealIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-result-grid > .listing-card,
.card-result-grid > .card-result,
.compact-list > .compact-item,
.order-list > .order-card,
.thread-list > .thread-item {
  animation: cardRevealIn 280ms ease both;
}

.tcg-world-strip {
  background: linear-gradient(155deg, rgba(29, 36, 45, 0.98), rgba(22, 28, 36, 0.98));
  border-color: var(--web-line);
}

.tcg-world-label span {
  color: var(--web-ink);
}

.tcg-world-label small {
  color: var(--web-muted);
}

.tcg-world-chip .tcg-logo,
.tcg-world-chip .tcg-logo.has-image {
  color: var(--web-ink);
  background: #28313b;
  border-color: rgba(193, 188, 174, 0.3);
}

.app-topbar {
  max-height: 60px;
  padding: 8px var(--web-page-pad);
  background: linear-gradient(135deg, rgba(22, 28, 36, 0.98), rgba(29, 36, 45, 0.98));
  border-bottom-color: var(--web-line);
}

.app-topbar:hover,
.app-topbar:focus-within {
  max-height: 60px;
  padding: 8px var(--web-page-pad);
}

.global-search input {
  background: #202933;
  color: var(--web-ink);
}

.nav-item.is-active {
  color: #172027 !important;
  -webkit-text-fill-color: #172027 !important;
  background: linear-gradient(180deg, #d7c08d, #b89c65) !important;
  border-color: rgba(193, 168, 120, 0.72) !important;
}

.app-sidebar .app-nav .nav-item.is-active,
.app-sidebar .app-nav .nav-item.is-active:hover,
.app-sidebar .app-nav .nav-item.is-active:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f5f9f, #164677) !important;
  border-color: #e5c27e !important;
  box-shadow: 0 8px 18px rgba(4, 19, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

.filter-bar,
.detail-search-panel {
  background: linear-gradient(135deg, rgba(29, 36, 45, 0.98), rgba(22, 28, 36, 0.98));
  border-color: var(--web-line);
}

.listing-image-frame,
.card-result-image-frame,
.listing-media,
.card-result-media,
.listing-placeholder,
.card-result-placeholder {
  background: #28313b;
}

.listing-card,
.card-result,
.order-card,
.thread-item,
.compact-item,
.empty-state,
.message-bubble {
  color: var(--web-ink);
}

.listing-fact,
.deck-search-card,
.missing-card-item {
  color: var(--web-ink);
  background: #202933;
  border-color: rgba(193, 188, 174, 0.2);
}

.listing-fact dt,
.listing-price-wrap span,
.listing-seller-row small {
  color: var(--web-muted);
}

.sponsored-header span {
  color: #e5d4a8;
  background: rgba(193, 168, 120, 0.16);
  border-color: rgba(193, 168, 120, 0.34);
}

.listing-card.is-sponsored .pill.gold {
  color: #ead8aa;
  background: rgba(193, 168, 120, 0.16);
  border-color: rgba(193, 168, 120, 0.34);
}

.danger-button,
.danger-button[disabled] {
  color: #fff2f0 !important;
  -webkit-text-fill-color: #fff2f0 !important;
  background: #8f4548 !important;
  border-color: #b96b68 !important;
  opacity: 1;
  box-shadow: 0 8px 18px rgba(143, 69, 72, 0.2);
}

.danger-button:hover:not([disabled]),
.danger-button:focus-visible:not([disabled]) {
  color: #ffffff !important;
  background: #a95758 !important;
  border-color: #d0837e !important;
}

.action-modal-intro {
  margin: 0;
  color: var(--web-ink);
  line-height: 1.5;
}

#actionModal .modal-panel {
  color: var(--web-ink);
  background: #0b1827;
  border-color: rgba(193, 188, 174, 0.72);
}

#actionModal .modal-heading h2 {
  color: var(--web-ink);
}

.promo-package-list {
  display: grid;
  gap: 10px;
}

.promo-package-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--web-line);
  border-radius: 12px;
  background: #202933;
  color: var(--web-ink);
  cursor: pointer;
}

.promo-package-option:has(input:checked) {
  border-color: var(--web-gold);
  background: rgba(193, 168, 120, 0.16);
  box-shadow: inset 0 0 0 1px rgba(193, 168, 120, 0.24);
}

.promo-package-option input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--web-gold);
}

.promo-package-option span {
  display: grid;
  gap: 3px;
}

.promo-package-option strong {
  color: var(--web-ink);
  font-size: 1rem;
}

.promo-package-option small,
#actionModal .form-hint {
  color: var(--web-muted);
}

.listing-card,
.card-result,
.compact-item,
.order-card,
.thread-item {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.listing-card:hover,
.card-result:hover,
.compact-item:hover,
.order-card:hover,
.thread-item:hover {
  transform: translateY(-3px);
  border-color: rgba(193, 188, 174, 0.32);
  background: var(--web-panel-strong);
  box-shadow: 0 20px 42px rgba(2, 8, 20, 0.24);
}

.listing-card:hover .listing-media,
.card-result:hover .card-result-media {
  transform: scale(1.025);
}

.my-listing-card:hover,
.trade-room-mini-card:hover,
.trade-room-offer-item:hover {
  transform: translateY(-3px);
  border-color: rgba(193, 188, 174, 0.32);
  background: var(--web-panel-strong);
  box-shadow: 0 20px 42px rgba(2, 8, 20, 0.24);
}

.my-listing-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.my-listing-card:hover .my-listing-thumb {
  transform: scale(1.025);
}

.deck-library-item:hover {
  border-color: rgba(193, 188, 174, 0.32);
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(2, 8, 20, 0.18);
}

.category-chip:hover,
.category-chip[data-category]:hover {
  transform: translateY(-2px);
  color: var(--web-ink);
  border-color: var(--web-line);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(2, 8, 20, 0.16);
}

.card-result-grid > .listing-card:nth-child(2),
.card-result-grid > .card-result:nth-child(2),
.compact-list > .compact-item:nth-child(2),
.order-list > .order-card:nth-child(2),
.thread-list > .thread-item:nth-child(2) {
  animation-delay: 35ms;
}

.card-result-grid > .listing-card:nth-child(3),
.card-result-grid > .card-result:nth-child(3),
.compact-list > .compact-item:nth-child(3),
.order-list > .order-card:nth-child(3),
.thread-list > .thread-item:nth-child(3) {
  animation-delay: 70ms;
}

.card-result-grid > .listing-card:nth-child(4),
.card-result-grid > .card-result:nth-child(4),
.compact-list > .compact-item:nth-child(4),
.order-list > .order-card:nth-child(4),
.thread-list > .thread-item:nth-child(4) {
  animation-delay: 105ms;
}

.card-result-grid > .listing-card:nth-child(5),
.card-result-grid > .card-result:nth-child(5),
.compact-list > .compact-item:nth-child(5),
.order-list > .order-card:nth-child(5),
.thread-list > .thread-item:nth-child(5) {
  animation-delay: 140ms;
}

.card-result-grid > .listing-card:nth-child(6),
.card-result-grid > .card-result:nth-child(6),
.compact-list > .compact-item:nth-child(6),
.order-list > .order-card:nth-child(6),
.thread-list > .thread-item:nth-child(6) {
  animation-delay: 175ms;
}

.card-result-grid > .listing-card:nth-child(7),
.card-result-grid > .card-result:nth-child(7),
.compact-list > .compact-item:nth-child(7),
.order-list > .order-card:nth-child(7),
.thread-list > .thread-item:nth-child(7) {
  animation-delay: 210ms;
}

.card-result-grid > .listing-card:nth-child(8),
.card-result-grid > .card-result:nth-child(8),
.compact-list > .compact-item:nth-child(8),
.order-list > .order-card:nth-child(8),
.thread-list > .thread-item:nth-child(8) {
  animation-delay: 245ms;
}

.compact-item:hover,
.order-card:hover,
.thread-item:hover {
  transform: translateY(-3px);
  border-color: rgba(193, 188, 174, 0.32);
  background: var(--web-panel-strong);
  box-shadow: 0 20px 42px rgba(2, 8, 20, 0.24);
}

.compact-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.favorite-search-item {
  grid-template-columns: 48px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.favorite-search-item:has(.saved-search-card-thumb) {
  grid-template-columns: 48px 40px minmax(0, 1fr);
}

.favorite-search-collapsible {
  padding: 0;
  overflow: hidden;
}

.favorite-search-collapsible > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 48px 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}

.favorite-search-collapsible > summary::-webkit-details-marker {
  display: none;
}

.favorite-search-summary-label {
  align-self: center;
  color: var(--web-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.favorite-search-summary-label::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.favorite-search-collapsible[open] .favorite-search-summary-label::after {
  transform: rotate(225deg) translateY(-1px);
}

.favorite-search-panel {
  padding: 0 14px 12px;
  border-top: 1px dashed rgba(17, 25, 34, 0.12);
}

.rich-order-card {
  display: grid;
  gap: 13px;
}

.order-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.order-card-top > div {
  min-width: 0;
}

.order-total-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #173f31;
  background: #edf8f2;
  border: 1px solid #c8e8d5;
  font-size: 0.94rem;
  font-weight: 900;
}

.order-info-grid,
.order-status-info,
.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.order-info-grid > div,
.order-status-info > div,
.order-detail-note {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--web-radius);
  border: 1px solid rgba(31, 115, 204, 0.13);
  background: rgba(255, 255, 255, 0.62);
}

.order-info-grid span,
.order-status-info span,
.order-detail-note span {
  color: var(--web-muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.order-info-grid span,
.order-status-info span {
  text-transform: uppercase;
}

.order-info-grid strong,
.order-status-info strong,
.order-detail-note strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.order-info-grid .is-paid {
  color: var(--web-ok);
}

.order-info-grid .is-pending {
  color: var(--web-coral);
}

.order-status-info {
  padding: 11px;
  border-radius: var(--web-radius);
  border: 1px solid rgba(31, 115, 204, 0.16);
  background: rgba(238, 245, 248, 0.72);
}

.order-detail-panel {
  padding-top: 4px;
  border-top: 1px solid rgba(17, 25, 34, 0.09);
}

.order-detail-grid section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.order-detail-grid h4 {
  margin: 0;
  color: var(--web-ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.order-detail-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
  border-radius: var(--web-radius);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 25, 34, 0.08);
}

.order-detail-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.order-detail-row small {
  color: var(--web-muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.order-detail-row > strong {
  flex: 0 0 auto;
}

.my-listing-card {
  grid-template-columns: minmax(110px, 138px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}

.my-listing-card .my-listing-media {
  grid-column: 1;
  grid-row: 1;
}

.my-listing-card .my-listing-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.my-listing-card .my-listing-actions {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#myListingsViewList,
#myListingsList {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 10px;
}

#myListingsViewList {
  width: 100%;
  max-width: none;
}

#myListingsViewList.is-list-view {
  grid-template-columns: 1fr;
  gap: 0;
}

#myListingsViewList .my-listing-card-list {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  height: auto;
  padding: 5px 10px;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

#myListingsViewList .my-listing-card-list .my-listing-media {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#myListingsViewList .my-listing-card-list .my-listing-thumb,
#myListingsViewList .my-listing-card-list .two-sided-card-media {
  width: 58px;
  height: 62px;
  object-fit: contain;
}

#myListingsViewList .my-listing-card-list .my-listing-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#myListingsViewList .my-listing-card-list .my-listing-head {
  display: contents;
}

#myListingsViewList .my-listing-card-list .my-listing-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

#myListingsViewList .my-listing-card-list .compact-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
}

#myListingsViewList .my-listing-card-list .my-listing-price {
  flex: 0 0 auto;
  white-space: nowrap;
}

#myListingsViewList .my-listing-card-list .my-listing-footer {
  display: contents;
}

#myListingsViewList .my-listing-card-list .my-listing-note {
  display: none;
}

#myListingsViewList .my-listing-card-list .my-listing-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  width: auto;
  padding: 0;
  gap: 6px;
}

#myListingsViewList .my-listing-card-list .my-listing-actions > button {
  min-height: 30px;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}

.my-listing-more {
  position: relative;
}

.my-listing-more summary {
  min-height: 30px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--web-line);
  border-radius: 8px;
  color: var(--web-ink);
  background: var(--web-panel-strong);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
  list-style: none;
}

.my-listing-more summary::-webkit-details-marker {
  display: none;
}

.my-listing-more-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  min-width: 130px;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--web-line);
  border-radius: 8px;
  background: var(--web-panel-strong);
  box-shadow: 0 12px 24px rgba(2, 8, 20, 0.2);
}

.my-listing-more-menu button {
  width: 100%;
  text-align: left;
}

@media (min-width: 1480px) {
  #myListingsViewList,
  #myListingsList {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  }
}

@media (min-width: 2200px) {
  #myListingsViewList,
  #myListingsList {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  }
}

#favoritesGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}

#favoritesGrid .listing-card {
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
}

#favoritesGrid .listing-image-frame {
  min-height: 0;
  height: 100%;
  border-right: 1px solid rgba(17, 25, 34, 0.075);
  border-bottom: 0;
}

#favoritesGrid .listing-media,
#favoritesGrid .listing-placeholder,
#favoritesGrid .two-sided-card-media {
  height: 100%;
  aspect-ratio: 5 / 7;
}

#favoritesGrid .listing-body {
  gap: 5px;
  padding: 10px;
}

#favoritesGrid .listing-title {
  min-height: 0;
  font-size: 0.9rem;
  -webkit-line-clamp: 2;
}

#favoritesGrid .listing-card-top {
  gap: 6px;
}

#favoritesGrid .listing-price-wrap {
  gap: 2px;
}

#favoritesGrid .listing-price {
  font-size: 1rem;
}

#favoritesGrid .listing-description {
  font-size: 0.68rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
}

#favoritesGrid .listing-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

#favoritesGrid .listing-seller-row {
  gap: 6px;
}

#favoritesGrid .card-actions {
  gap: 5px;
}

@media (max-width: 920px) {
  #favoritesGrid {
    grid-template-columns: 1fr;
  }

  #favoritesGrid .listing-card {
    grid-template-columns: minmax(112px, 148px) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .listing-card.is-list-view {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .listing-card.is-list-view .listing-card-top,
  .listing-card.is-list-view .listing-card-top-list {
    display: contents;
  }

  .listing-card.is-list-view .listing-body,
  .listing-card.is-list-view .listing-body-list {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
  }

  .listing-card.is-list-view .listing-price-wrap {
    grid-column: 2;
  }

  .listing-card.is-list-view .listing-seller-row,
  .listing-card.is-list-view .card-actions {
    display: none;
  }

  .listing-card.is-list-view .listing-list-footer {
    display: grid;
    gap: 8px;
  }

  .listing-card.is-list-view .card-actions {
    justify-content: stretch;
  }

  .listing-card.is-list-view .card-actions > button {
    flex: 1 1 auto;
  }

  #myListingsViewList .my-listing-card-list {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  #myListingsViewList .my-listing-card-list .my-listing-media {
    grid-row: 1 / span 2;
  }

  #myListingsViewList .my-listing-card-list .my-listing-copy {
    grid-column: 2;
    grid-row: 1;
    display: block;
  }

  #myListingsViewList .my-listing-card-list .my-listing-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: start;
  }

  #myListingsViewList .my-listing-card-list .my-listing-price {
    margin-top: 4px;
  }

  #myListingsViewList .my-listing-card-list .my-listing-footer {
    display: none;
  }

  #myListingsViewList .my-listing-card-list .my-listing-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }
}

@media (max-width: 620px) {
  #favoritesGrid .listing-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  #favoritesGrid .listing-image-frame {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 25, 34, 0.075);
  }

  #favoritesGrid .listing-media,
  #favoritesGrid .listing-placeholder,
  #favoritesGrid .two-sided-card-media {
    width: min(100%, 150px);
    height: auto;
    justify-self: center;
    aspect-ratio: 5 / 7;
  }
}

.my-listing-media {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.my-listing-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  min-height: 0;
  transition: transform 260ms ease;
}

.my-listing-media .my-listing-thumb {
  width: 100%;
  height: auto;
}

.my-listing-media .two-sided-card-media {
  height: auto;
  aspect-ratio: 5 / 7;
}

.my-listing-media .two-sided-card-media .my-listing-thumb {
  grid-area: 1 / 1;
  height: 100%;
}

.my-listing-media .two-sided-card-media > img.my-listing-thumb {
  width: 100%;
  object-fit: contain;
}

.listing-card:hover .listing-media,
.my-listing-card:hover .my-listing-thumb {
  transform: scale(1.025);
}

.my-listing-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
}

.my-listing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
}

.my-listing-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.my-listing-card .compact-title {
  min-height: calc(1.18em * 2);
  font-size: 0.94rem;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-listing-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--web-muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.my-listing-category {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #9ed8c8;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-listing-status {
  justify-self: start;
  min-height: 22px;
  padding: 3px 7px;
  font-size: .68rem;
}

.my-listing-price {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.my-listing-price strong {
  font-size: 1rem;
  line-height: 1;
}

.my-listing-status-meta {
  font-weight: 850;
}

.my-listing-status-meta.blue {
  color: #9ed8c8;
}

.my-listing-status-meta.coral {
  color: #f0a39e;
}

.my-listing-price span {
  color: var(--web-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.my-listing-footer {
  display: grid;
  gap: 5px;
}

.my-listing-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.my-listing-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(157, 188, 203, 0.16);
  background: rgba(7, 17, 31, 0.58);
}

.my-listing-metric strong {
  color: #edf5ff;
  font-size: 0.82rem;
  font-weight: 900;
}

.my-listing-metric span {
  color: #aebdca;
  font-size: 0.7rem;
  font-weight: 800;
}

.my-listing-metric-icon {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--web-green);
  box-shadow: 0 0 0 3px rgba(14, 102, 85, 0.12);
}

.my-listing-metric-icon.is-favorites {
  background: var(--web-gold);
  box-shadow: 0 0 0 3px rgba(184, 146, 46, 0.12);
}

.my-listing-metric-icon.is-date {
  background: var(--web-blue);
  box-shadow: 0 0 0 3px rgba(58, 121, 164, 0.12);
}

.my-listing-metric-icon.is-market {
  background: #8668c5;
  box-shadow: 0 0 0 3px rgba(134, 104, 197, 0.14);
}

.my-listing-metric-icon.is-trend {
  background: #d08b2f;
  box-shadow: 0 0 0 3px rgba(208, 139, 47, 0.14);
}

.my-listing-note {
  margin: 0;
  color: var(--web-muted);
  font-size: 0.68rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-listing-card .compact-meta {
  font-size: 0.7rem;
}

.my-listing-actions {
  border-top: 1px dashed rgba(17, 25, 34, 0.12);
  padding-top: 5px;
}

.my-listing-actions .secondary-button,
.my-listing-actions .danger-button {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 0.72rem;
}

.my-listing-actions .primary-button {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 0.72rem;
}

@media (max-width: 920px) {
  #myListingsViewList,
  #myListingsList {
    grid-template-columns: 1fr;
  }

  .my-listing-card {
    grid-template-columns: minmax(112px, 148px) minmax(0, 1fr);
  }

  .my-listing-card .my-listing-actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .my-listing-thumb {
    width: 100%;
    min-height: 0;
    aspect-ratio: 5 / 7;
  }

  .my-listing-head {
    grid-template-columns: 1fr;
  }

  .my-listing-price {
    justify-items: start;
    text-align: left;
  }

  .my-listing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .my-listing-card {
    grid-template-columns: 1fr;
  }

  .my-listing-card .my-listing-copy,
  .my-listing-card .my-listing-media,
  .my-listing-card .my-listing-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .my-listing-thumb {
    width: min(100%, 150px);
    justify-self: center;
  }

  .my-listing-stats {
    grid-template-columns: 1fr;
  }
}

.sell-price-suggestion {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--web-radius);
  border: 1px dashed rgba(15, 107, 92, 0.28);
  background: rgba(15, 107, 92, 0.07);
  color: var(--web-ink);
}

.sell-price-suggestion span {
  color: var(--web-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.sell-price-suggestion .secondary-button[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
}

.sell-selected-card-panel[hidden],
.sell-card-lookup-panel[hidden] {
  display: none;
}

.selected-sell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(15, 107, 92, 0.22);
  border-radius: var(--web-radius);
  background: rgba(15, 107, 92, 0.06);
}

.selected-sell-card-image {
  width: 58px;
  height: 78px;
  object-fit: contain;
  border-radius: 6px;
  background: #edf2ef;
}

.selected-sell-card small {
  display: block;
  margin-top: 4px;
  color: var(--web-muted);
}

.sell-attribute-fieldset {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.12);
  border-radius: var(--web-radius);
}

.sell-attribute-fieldset legend {
  padding: 0 6px;
  font-weight: 800;
}

.compact-feature-grid {
  margin-bottom: 10px;
}

.compact-thumb {
  width: 58px;
  height: 72px;
  object-fit: contain;
  border-radius: 6px;
  background: #edf2ef;
  box-shadow: inset 0 0 0 1px rgba(17, 25, 34, 0.05);
}

.compact-badge {
  width: 58px;
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #ffffff;
  background: var(--web-green);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.favorite-item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.favorite-avatar {
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.favorite-search-badge {
  background: var(--web-blue);
}

.compact-title,
.order-title,
.thread-title {
  margin: 0 0 3px;
  font-weight: 800;
  line-height: 1.18;
}

.compact-note {
  margin: 6px 0 0;
  color: var(--web-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.favorite-search-item .compact-meta {
  font-size: 0.72rem;
}

.search-request-row {
  display: grid;
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}

.search-request-preview {
  width: 100%;
  min-width: 0;
  grid-column: 1;
  grid-row: 1 / 5;
}

.search-request-preview .saved-search-card-thumb,
.search-request-preview .saved-search-card-thumb-placeholder,
.my-search-badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: 8px;
  background: #f4f7f5;
  overflow: hidden;
}

.search-request-preview .saved-search-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.my-search-badge {
  background: linear-gradient(145deg, rgba(13, 38, 76, 0.94), rgba(15, 107, 92, 0.88));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.my-search-badge span {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-request-type,
.search-request-status {
  display: flex;
  align-items: center;
}

.search-request-type {
  grid-column: 2;
  grid-row: 1;
}

.search-request-details {
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
}

.search-request-details .compact-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-request-actions {
  grid-column: 2;
  grid-row: 4;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.search-request-actions button {
  white-space: nowrap;
}

#mySearchList .search-request-row.is-list-view {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  height: auto;
  padding: 5px 10px;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

#mySearchList .search-request-row.is-list-view .search-request-preview {
  grid-column: 1;
  grid-row: 1;
  width: 58px;
  min-width: 0;
}

#mySearchList .search-request-row.is-list-view .search-request-preview .saved-search-card-thumb,
#mySearchList .search-request-row.is-list-view .search-request-preview .saved-search-card-thumb-placeholder,
#mySearchList .search-request-row.is-list-view .my-search-badge {
  width: 58px;
  height: 62px;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

#mySearchList .search-request-row.is-list-view .search-request-type,
#mySearchList .search-request-row.is-list-view .search-request-status {
  display: none;
}

#mySearchList .search-request-row.is-list-view .search-request-details {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#mySearchList .search-request-row.is-list-view .search-request-details .compact-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  white-space: normal;
}

#mySearchList .search-request-row.is-list-view .search-request-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

#mySearchList .search-request-row.is-list-view .search-request-actions button {
  min-height: 30px;
  padding: 0.4rem 0.65rem;
}

@media (max-width: 920px) {
  #mySearchList {
    grid-template-columns: 1fr;
  }

  .search-request-row {
    grid-template-columns: minmax(112px, 148px) minmax(0, 1fr);
    gap: 10px;
  }

  .search-request-status {
    grid-column: 2;
    grid-row: 3;
  }

  .search-request-actions {
    grid-column: 2;
    grid-row: 4;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .search-request-row {
    grid-template-columns: 1fr;
  }

  .search-request-preview,
  .search-request-type,
  .search-request-details,
  .search-request-status,
  .search-request-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .search-request-preview {
    width: min(100%, 150px);
    justify-self: center;
  }

  #mySearchList .search-request-row.is-list-view {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 8px;
  }

  #mySearchList .search-request-row.is-list-view .search-request-preview {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 50px;
  }

  #mySearchList .search-request-row.is-list-view .search-request-preview .saved-search-card-thumb,
  #mySearchList .search-request-row.is-list-view .search-request-preview .saved-search-card-thumb-placeholder,
  #mySearchList .search-request-row.is-list-view .my-search-badge {
    width: 50px;
    height: 58px;
  }

  #mySearchList .search-request-row.is-list-view .search-request-details {
    grid-column: 2;
    grid-row: 1;
  }

  #mySearchList .search-request-row.is-list-view .search-request-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
}

.swap-card .listing-price {
  font-size: 1rem;
}

.swap-card .swap-card-submeta {
  min-height: calc(1.35em * 2);
  align-content: flex-start;
}

.listing-view-modal {
  width: min(1340px, 100%);
  overflow-x: hidden;
}

.listing-view-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.listing-view-media-frame {
  min-height: clamp(430px, 62vh, 660px);
  display: grid;
  place-items: center;
  border-radius: var(--web-radius);
  border: 1px solid rgba(17, 25, 34, 0.08);
  background: var(--game-soft, #f4f6f5);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.listing-view-media,
.listing-view-placeholder {
  width: 100%;
  height: 100%;
  min-height: clamp(430px, 62vh, 660px);
}

.listing-view-media {
  object-fit: contain;
  padding: 16px;
  filter: drop-shadow(0 14px 20px rgba(17, 25, 34, 0.16));
}

.listing-view-placeholder {
  display: grid;
  place-items: center;
  color: var(--web-muted);
  font-weight: 900;
}

.listing-view-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.listing-view-body .listing-facts {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.listing-view-title {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.15;
}

.listing-view-description {
  margin: 0;
  color: var(--web-muted);
  line-height: 1.45;
}

.listing-view-card .card-actions {
  margin-top: auto;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.listing-view-card .card-actions .secondary-button,
.listing-view-card .card-actions .primary-button {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-view-card .listing-seller-row > span:last-child {
  min-width: 0;
}

.listing-view-card .listing-seller-row small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-view-body .listing-fact dd {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
  line-height: 1.2;
}

.listing-view-body .listing-fact dd.fact-value-date {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.listing-view-body .listing-fact dd.fact-value-card-number {
  white-space: normal;
  overflow-wrap: anywhere;
}

.swap-search-item,
.trade-room-card {
  align-items: start;
}

.trade-room-card > div:last-child {
  min-width: 0;
  width: 100%;
}

.trade-room-request-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(31, 115, 204, 0.24);
  border-radius: var(--web-radius);
  background: var(--web-sky-soft);
}

.trade-room-request-preview img,
.trade-room-request-placeholder {
  width: 52px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: contain;
  background: #ffffff;
}

.trade-room-request-placeholder {
  display: grid;
  place-items: center;
  color: var(--web-blue);
  font-size: 0.72rem;
  font-weight: 900;
}

.trade-room-request-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.trade-room-request-copy strong,
.trade-room-request-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-room-request-copy strong {
  color: var(--web-ink);
}

.trade-room-request-copy span {
  color: var(--web-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.trade-room-request-copy .trade-room-request-label {
  color: var(--web-blue);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-room-request-preview .secondary-button {
  flex: 0 0 auto;
}

.trade-room-page-summary {
  display: grid;
  gap: 12px;
  margin-bottom: var(--web-section-gap);
  padding: 16px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: var(--web-panel-strong);
  box-shadow: var(--web-shadow);
}

.trade-room-page-summary > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-room-page-summary > div:first-child strong {
  margin-left: 4px;
}

.trade-room-invite-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 4px solid var(--web-muted);
  border-radius: 8px;
  color: var(--web-muted);
  background: rgba(255, 255, 255, 0.62);
}

.trade-room-invite-note.is-actionable {
  border-left-color: var(--web-gold);
  color: var(--web-ink);
  background: var(--web-sun-soft);
}

.trade-room-invite-note span {
  font-size: 0.88rem;
  font-weight: 600;
}

.trade-room-payment-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 2px solid rgba(205, 157, 55, 0.7);
  border-radius: var(--web-radius);
  background: linear-gradient(110deg, #fff6c9, #ffe8a1);
  box-shadow: 0 10px 26px rgba(205, 157, 55, 0.18);
}

.trade-room-payment-step h3,
.trade-room-payment-step p {
  margin: 0;
}

.trade-room-payment-step h3 {
  color: #4b3710;
}

.trade-room-payment-step p:not(.eyebrow) {
  margin-top: 4px;
  color: #745d24;
  font-size: 0.88rem;
  font-weight: 600;
}

.trade-room-payment-step .primary-button {
  flex: 0 0 auto;
}

.trade-room-page-panel {
  display: grid;
  gap: 14px;
}

.trade-room-page-panel .trade-room-card-groups {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.trade-room-value-overview {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(205, 157, 55, 0.72);
  border-radius: var(--web-radius);
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.98), rgba(255, 247, 235, 0.9));
  box-shadow: var(--web-shadow-soft);
}

.trade-room-value-header,
.trade-room-value-sides {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trade-room-value-header {
  justify-content: space-between;
}

.trade-room-value-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.trade-room-value-status {
  padding: 8px 14px;
  border: 1px solid rgba(205, 157, 55, 0.44);
  border-radius: var(--web-radius-pill);
  color: #a4771f;
  background: rgba(205, 157, 55, 0.1);
  font-weight: 900;
  white-space: nowrap;
}

.trade-room-value-status.is-balanced {
  color: var(--web-ok);
  border-color: rgba(43, 143, 106, 0.36);
  background: rgba(43, 143, 106, 0.1);
}

.trade-room-value-sides {
  align-items: stretch;
}

.trade-room-value-sides > div:not(.trade-room-value-divider) {
  display: grid;
  flex: 1;
  gap: 4px;
}

.trade-room-value-sides span {
  color: #655b50;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-room-value-sides strong {
  color: #221d18;
  font-size: 1.75rem;
  line-height: 1;
}

.trade-room-value-sides small {
  color: #756b60;
  font-size: 0.86rem;
}

.trade-room-value-divider {
  width: 2px;
  background: rgba(205, 157, 55, 0.7);
}

.trade-room-value-bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  border-radius: var(--web-radius-pill);
  background: #d2a13b;
}

.trade-room-value-bar span:first-child {
  background: #62c1e8;
}

.trade-room-value-bar span:last-child {
  background: #c79632;
}

.trade-room-value-detail,
.trade-room-value-adjustment {
  margin: 0;
  color: #aa7c25;
  font-size: 0.98rem;
  font-weight: 800;
}

.trade-room-value-adjustment {
  color: #80601f;
}

.trade-room-payout-summary {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(205, 157, 55, 0.42);
}

.trade-room-payout-summary .eyebrow {
  margin: 0;
}

.trade-room-payout-row,
.trade-room-payout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.trade-room-payout-row span {
  color: #655b50;
  font-weight: 800;
}

.trade-room-payout-row strong {
  font-size: 1.05rem;
  white-space: nowrap;
}

.trade-room-payout-row .is-positive {
  color: var(--web-ok);
}

.trade-room-payout-row .is-negative {
  color: var(--web-danger);
}

.trade-room-payout-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(43, 143, 106, 0.26);
}

.trade-room-payout-total span {
  color: #2b6f58;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-room-payout-total strong {
  color: var(--web-ok);
  font-size: 1.65rem;
}

.trade-room-payout-note {
  color: #756b60;
}

.trade-room-progress {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
}

.trade-room-progress h3 {
  margin: 0;
  font-size: 1.1rem;
}

.trade-room-progress-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.trade-room-progress-step {
  display: grid;
  gap: 5px;
  color: var(--web-muted);
  font-size: 0.76rem;
  text-align: center;
}

.trade-room-progress-step span {
  display: grid;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  place-items: center;
  border: 2px solid var(--web-line);
  border-radius: 50%;
  background: #ffffff;
  font-weight: 900;
}

.trade-room-progress-step.is-done {
  color: var(--web-green-dark);
}

.trade-room-progress-step.is-done span {
  border-color: var(--web-green);
  color: #ffffff;
  background: var(--web-green);
}

.trade-room-history {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--web-line);
}

.trade-room-history > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--web-muted);
  font-size: 0.84rem;
}

.trade-room-history time {
  white-space: nowrap;
}

.trade-room-detail-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
  box-shadow: var(--web-shadow-soft);
}

.trade-room-detail-heading,
.trade-room-offer-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trade-room-detail-heading {
  justify-content: space-between;
}

.trade-room-detail-heading span,
.trade-room-offer-copy span,
.trade-room-mini-card span,
.trade-room-empty-line {
  display: block;
  color: var(--web-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.trade-room-card-groups,
.trade-room-partner-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: #ffffff;
}

.trade-room-card-group h4,
.trade-room-partner-section h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
}

.trade-room-card-group-value {
  display: block;
  margin-top: 3px;
  color: var(--web-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.trade-room-selected-grid,
.trade-room-partner-list {
  display: grid;
  gap: 8px;
}

.trade-room-mini-card,
.trade-room-offer-item {
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: var(--web-panel-strong);
  box-shadow: var(--web-shadow-soft);
  padding: 8px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.trade-room-mini-card:hover,
.trade-room-offer-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 107, 92, 0.2);
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(17, 25, 34, 0.085);
}

.trade-room-mini-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.trade-room-mini-card img,
.trade-room-offer-item img,
.trade-room-mini-placeholder {
  width: 42px;
  height: 58px;
  border-radius: 6px;
  object-fit: contain;
  background: #eef2f0;
}

.trade-room-mini-placeholder {
  display: grid;
  place-items: center;
  color: var(--web-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.trade-room-mini-card strong,
.trade-room-offer-copy strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-room-offer-copy {
  min-width: 0;
  flex: 1;
}

.trade-room-offer-item .primary-button {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .trade-room-payment-step {
    align-items: stretch;
    flex-direction: column;
  }

  .trade-room-payment-step .primary-button {
    width: 100%;
  }

  .trade-room-progress-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 12px;
  }

  .trade-room-value-header,
  .trade-room-value-sides {
    align-items: flex-start;
    flex-direction: column;
  }

  .trade-room-value-divider {
    width: 100%;
    height: 2px;
  }

  .trade-room-request-preview {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .trade-room-request-preview .secondary-button {
    width: 100%;
  }

  .trade-room-offer-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .trade-room-offer-item .primary-button {
    width: 100%;
  }
}

.compact-actions,
.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.compact-actions .trade-flow-primary {
  box-shadow: 0 12px 24px rgba(22, 78, 150, 0.24);
}

.compact-actions .is-handshake-cta {
  animation: handshakeCtaPulse 1500ms ease-in-out infinite;
}

@keyframes handshakeCtaPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(22, 78, 150, 0.24);
  }

  50% {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(22, 78, 150, 0.34);
  }
}

.favorite-search-item .compact-actions {
  margin-top: 6px;
}

.favorite-search-item .compact-actions .primary-button,
.favorite-search-item .compact-actions .danger-button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.84rem;
}

.favorite-search-item .compact-actions .primary-button {
  white-space: nowrap;
}

.cart-recent-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--web-line);
}

.cart-recent-header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.cart-recent-header p {
  margin: 6px 0 0;
}

.cart-reminder-item {
  background: #fffdf6;
  border-color: rgba(168, 126, 48, 0.24);
}

.rich-order-card .order-actions {
  margin-top: 0;
}

.segmented-control {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  background: #ffffff;
}

.segment {
  min-height: 36px;
  border-color: transparent;
}

.segment.is-active {
  color: #ffffff;
  background: var(--web-green);
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 620px;
}

.thread-list,
.chat-panel {
  min-height: 620px;
  max-height: calc(100vh - 190px);
  overflow: auto;
  border: 1px solid rgba(17, 25, 34, 0.08);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
  box-shadow: var(--web-shadow-soft);
  padding: 10px;
}

.thread-item {
  width: 100%;
  text-align: left;
  color: var(--web-ink);
}

.thread-item.is-active {
  border-color: var(--web-green);
  box-shadow: inset 3px 0 0 var(--web-green);
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.chat-header {
  padding: 10px 12px;
  border-radius: var(--web-radius);
  color: var(--web-muted);
  background: #ffffff;
  border: 1px solid rgba(17, 25, 34, 0.08);
  font-weight: 800;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 6px;
}

.message-bubble {
  width: min(74%, 620px);
  padding: 10px 12px;
  box-shadow: none;
}

.message-bubble.is-own {
  align-self: flex-end;
  color: #ffffff;
  background: var(--web-green);
  border-color: var(--web-green);
}

.message-bubble p {
  margin: 0;
  line-height: 1.42;
}

.message-bubble small {
  display: block;
  margin-top: 6px;
  color: inherit;
  opacity: 0.72;
}

.message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.profile-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 4px;
}

.cart-shipping-field {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.cart-shipping-field span {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--web-muted);
  text-transform: uppercase;
}

.cart-shipping-field select {
  width: 100%;
}

.avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--web-radius);
  color: #ffffff;
  background: var(--web-green);
  font-size: 1.2rem;
  font-weight: 900;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-state {
  display: grid;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px);
  color: #5a6c84;
  border: 1px dashed rgba(132, 165, 208, 0.48);
  border-radius: 16px;
  background: radial-gradient(circle at 85% -40%, rgba(42, 120, 203, 0.12), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 250, 255, 0.9));
  box-shadow: 0 8px 24px rgba(9, 20, 40, 0.08);
}

.empty-state strong {
  display: block;
  color: #11233d;
  margin-bottom: 0;
  font-size: clamp(1.24rem, 1.4vw, 1.54rem);
  line-height: 1.08;
}

.empty-state p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}

.empty-state.compact-info {
  gap: 6px;
  padding: 14px 16px;
}

.empty-state.compact-info strong {
  font-size: 1rem;
}

.empty-state.compact-info p {
  font-size: 0.88rem;
  line-height: 1.4;
}

.empty-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
}

.toast {
  padding: 12px 14px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  background: var(--web-surface-strong);
  box-shadow: var(--web-shadow);
  font-weight: 750;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: toastSlideIn 220ms ease;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast.is-error {
  border-color: #e4b4ac;
  color: var(--web-coral);
}

.toast.is-success {
  border-color: #b7d8c5;
  color: var(--web-ok);
}

.toast.is-info {
  border-color: rgba(88, 183, 210, 0.42);
  color: var(--web-ink);
}

.toast.is-warning {
  border-color: rgba(201, 168, 106, 0.54);
  color: #f0d18f;
}

@media (min-width: 1081px) {
  .app-sidebar {
    overflow: hidden;
  }

  .app-nav {
    overflow-y: auto;
    align-content: start;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(88, 183, 210, 0.38) transparent;
  }

  .nav-section {
    display: grid;
    gap: 1px;
  }

  .nav-section + .nav-section,
  .nav-section + .nav-menu,
  .nav-menu + .nav-menu {
    margin-top: 12px;
  }

  .nav-section-label {
    display: block;
    padding: 4px 10px 5px;
    color: rgba(182, 198, 217, 0.58);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .nav-item,
  .nav-menu summary {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #c8d6e5 !important;
    -webkit-text-fill-color: #c8d6e5 !important;
  }

  .nav-item:hover,
  .nav-item:focus-visible,
  .nav-menu summary:hover,
  .nav-menu summary:focus-visible,
  .nav-menu[open] summary {
    border-color: transparent !important;
    background: rgba(88, 183, 210, 0.1) !important;
    color: #edf5ff !important;
    -webkit-text-fill-color: #edf5ff !important;
    transform: none;
  }

  .nav-item.is-active,
  .app-sidebar .app-nav .nav-item.is-active,
  .app-sidebar .app-nav .nav-item.is-active:hover,
  .app-sidebar .app-nav .nav-item.is-active:focus-visible {
    border-color: transparent !important;
    border-left: 2px solid var(--web-blue) !important;
    background: rgba(88, 183, 210, 0.16) !important;
    color: #edf5ff !important;
    -webkit-text-fill-color: #edf5ff !important;
    box-shadow: none !important;
  }

  .nav-item::after {
    display: none;
  }

  .nav-menu-list {
    border: 0;
    background: transparent;
  }

  .topbar-cluster {
    gap: 6px;
  }

  #refreshButton {
    min-width: 40px;
    width: 40px;
    overflow: hidden;
    padding-inline: 8px;
    font-size: 0;
  }

  #refreshButton::before {
    content: "↻";
    font-size: 1rem;
  }

  .web-notification-button {
    min-width: 40px;
    width: 40px;
    padding-inline: 8px;
  }

  .notification-icon {
    font-size: 1rem;
    line-height: 1;
  }

  #authButton {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 1080px) {
  .nav-section-label {
    display: none;
  }
}

@media (max-width: 560px) {
  .toast-region {
    right: 12px;
    bottom: 12px;
    width: min(100% - 24px, 360px);
  }
}

.sell-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 var(--web-section-gap);
  padding: 0;
  list-style: none;
}

.sell-stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(157, 188, 203, 0.18);
  border-radius: 10px;
  color: var(--web-muted);
  background: rgba(8, 17, 28, 0.46);
}

.sell-stepper li span {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(157, 188, 203, 0.14);
  color: var(--web-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.sell-stepper li strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sell-stepper li.is-active {
  border-color: rgba(88, 183, 210, 0.52);
  background: rgba(88, 183, 210, 0.12);
  color: var(--web-ink);
}

.sell-stepper li.is-active span,
.sell-stepper li.is-complete span {
  background: var(--web-blue);
  color: #07111f;
}

.sell-method-chooser {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: center;
  margin-bottom: var(--web-section-gap);
  padding: 16px 18px;
  border: 1px solid rgba(157, 188, 203, 0.2);
  border-radius: var(--web-radius);
  background: rgba(8, 17, 28, 0.6);
}

.sell-method-chooser h2 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}

.sell-method-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sell-method-option {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(157, 188, 203, 0.2) !important;
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.8) !important;
  color: var(--web-ink) !important;
  text-align: left;
  cursor: pointer;
}

.sell-method-option small {
  color: var(--web-muted);
  font-size: 0.72rem;
}

.sell-method-option:hover,
.sell-method-option.is-active {
  border-color: rgba(88, 183, 210, 0.58) !important;
  background: rgba(88, 183, 210, 0.13) !important;
}

#view-sell .sell-method-panel[hidden],
#view-sell #sellForm[hidden],
#view-sell #sellReviewPanel[hidden] {
  display: none !important;
}

#view-sell .sell-card-lookup-panel {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

#view-sell .sell-card-lookup-panel .form-grid.three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#view-sell #sellSelectedCardSummary {
  grid-column: 1;
}

#view-sell #sellForm {
  grid-column: 2;
}

#view-sell #sellReviewPanel {
  grid-column: 1 / -1;
}

#view-sell #sellForm .sell-form-actions > [type="submit"] {
  display: none;
}

.sell-review-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(157, 188, 203, 0.16);
}

.sell-review-image {
  width: 62px;
  height: 84px;
  border-radius: 8px;
  object-fit: contain;
  background: #edf2ef;
}

.sell-review-copy {
  display: grid;
  gap: 4px;
}

.sell-review-copy small {
  color: var(--web-muted);
}

.sell-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
}

.sell-review-list > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(157, 188, 203, 0.1);
}

.sell-review-list dt {
  color: var(--web-muted);
  font-size: 0.78rem;
}

.sell-review-list dd {
  margin: 0;
  color: var(--web-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.sell-review-actions {
  justify-content: flex-end;
}

@media (max-width: 1080px) {
  .sell-method-chooser {
    grid-template-columns: 1fr;
  }

  #view-sell .sell-card-lookup-panel,
  #view-sell #sellSelectedCardSummary,
  #view-sell #sellForm,
  #view-sell #sellReviewPanel {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .sell-stepper {
    gap: 5px;
  }

  .sell-stepper li {
    justify-content: center;
    padding: 8px 5px;
  }

  .sell-stepper li strong {
    display: none;
  }

  .sell-method-options,
  .sell-review-list {
    grid-template-columns: 1fr;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 22, 28, 0.52);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-backdrop.is-hidden {
  display: none;
}

.modal-panel {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--web-radius);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(9, 17, 24, 0.3);
}

.modal-heading {
  justify-content: space-between;
}

#authModal .modal-panel {
  width: min(560px, 100%);
  background: #0b1827;
  color: #f4f9ff;
  border-color: rgba(185, 204, 225, 0.72);
}

.auth-tabs {
  width: 100%;
  background: #13263a;
}

.auth-tabs .segment {
  flex: 1;
  color: #d8e7f5;
}

.auth-tabs .segment.is-active {
  color: #ffffff;
}

.auth-form label,
.auth-form label span,
.auth-form .helper-text {
  color: #d8e7f5;
}

#authModal .auth-form input,
#authModal .auth-form select,
#authModal .auth-form textarea {
  background-color: #07182b !important;
  color: #f4f9ff !important;
  border-color: rgba(185, 204, 225, 0.72) !important;
  -webkit-text-fill-color: #f4f9ff !important;
}

#authModal .auth-form input::placeholder,
#authModal .auth-form textarea::placeholder {
  color: #b9cce1 !important;
  opacity: 1;
}

.auth-form {
  display: none;
  gap: 12px;
}

.auth-form.is-active {
  display: grid;
}

.button-row.compact {
  flex-wrap: wrap;
}

.modal-actions {
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-panel.is-active,
  .card-result-grid > .listing-card,
  .card-result-grid > .card-result,
  .compact-list > .compact-item,
  .order-list > .order-card,
  .thread-list > .thread-item,
  .sync-state.is-busy,
  .toast,
  .secondary-button.is-loading::before,
  .compact-actions .is-handshake-cta {
    animation: none !important;
  }

  .listing-media,
  .my-listing-thumb,
  #view-sell .sell-my-listings-panel,
  #view-sell .split-workspace,
  .listing-card,
  .compact-item,
  .order-card,
  .thread-item {
    transition: none !important;
  }
}


















@media (max-width: 1080px) {
  :root {
    --web-content-max: 100%;
    --web-card-min: 260px;
    --web-section-gap: 14px;
  }

  body.ct-web-app {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: relative;
    z-index: 10000;
    height: auto;
    padding: 14px;
    flex-wrap: wrap;
  }

  .app-frame {
    position: relative;
    z-index: 0;
  }

  .nav-menu[open] {
    z-index: 10001;
  }

  .app-topbar {
    top: 0;
  }

  .app-nav {
    display: flex;
    overflow: visible;
    padding-bottom: 2px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .sidebar-actions {
    margin-left: 0;
  }

  .app-topbar,
  .workspace-header,
  .split-workspace,
  .deckbuilder-layout,
  .favorites-layout,
  .swap-layout,
  .chat-layout {
    grid-template-columns: 1fr;
  }

  .app-topbar,
  .workspace-header {
    align-items: stretch;
    flex-direction: column;
  }

  .global-search {
    width: 100%;
  }

  .detail-search-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-intro {
    grid-column: 1 / -1;
  }

  .marketplace-hero {
    grid-template-columns: 1fr;
  }

  .marketplace-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .listing-view-card {
    grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1fr);
  }

  .category-slider {
    width: min(
      100%,
      calc((var(--category-chip-width) * var(--category-rail-visible-cards)) + (var(--category-chip-gap) * (var(--category-rail-visible-cards) - 1)) + 76px + 16px)
    );
  }

  .category-rail {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  :root {
    --web-page-pad: 14px;
    --web-card-min: 100%;
    --web-card-media-height: 220px;
  }

  .app-content {
    padding: 14px;
  }

  .app-topbar:hover,
  .app-topbar:focus-within {
    padding: 14px;
  }

  .app-topbar {
    gap: 12px;
  }

  .global-search {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .global-search .icon-button {
    min-width: 88px;
  }

  .filter-bar,
  .detail-search-panel,
  .form-grid.two-cols,
  .form-grid.three-cols,
  .metric-strip,
  .stat-grid,
  .my-listings-filter {
    margin-bottom: 12px;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  #view-sell .sell-card-lookup-panel .form-grid.three-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-swap-cards-toggle {
    grid-template-columns: 40px minmax(0, 1fr) auto 10px;
    gap: 9px;
    padding: 11px 12px;
  }

  .my-swap-cards-icon {
    width: 40px;
    height: 40px;
  }

  .my-swap-cards-heading small {
    display: none;
  }

  .my-swap-cards-content {
    padding: 12px;
  }

  .my-swap-cards-filters,
  .my-swap-cards-list {
    grid-template-columns: 1fr 1fr;
  }

  .my-swap-card {
    grid-column: 1 / -1;
  }

  .my-swap-cards-footer .secondary-button {
    width: 100%;
  }

  .open-search-toggle {
    grid-template-columns: 38px minmax(0, 1fr) auto 10px;
    gap: 9px;
    padding: 11px 12px;
  }

  .open-search-toggle-icon {
    width: 38px;
    height: 38px;
  }

  .open-search-toggle-copy small {
    display: none;
  }

  .open-search-content {
    padding: 12px;
  }

  .open-search-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .open-search-request-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .open-search-request-item img,
  .open-search-request-placeholder {
    width: 48px;
    height: 62px;
  }

  .open-search-request-action {
    grid-column: 2;
  }

  .empty-state {
    padding: 18px;
  }

  .empty-state strong {
    font-size: 1.2rem;
  }

  .empty-state p {
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .empty-actions > * {
    flex: 1 1 0;
  }

  .filter-bar .filter-actions {
    justify-content: stretch;
  }

  .filter-bar .filter-actions > * {
    flex: 1 1 0;
  }

  .metric-strip,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  #view-my-searches .metric-strip,
  .profile-finance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-finance-grid {
    grid-template-columns: 1fr;
  }

  .profile-finance-actions > * {
    flex: 1 1 180px;
  }

  .profile-latest-invoice {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-latest-invoice .secondary-button,
  .profile-latest-invoice > .pill {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .metric,
  .stat-tile {
    min-height: 64px;
    padding: 11px 12px;
  }

  .metric strong,
  .stat-tile strong {
    font-size: 1.16rem;
  }

  .metric span,
  .stat-tile span {
    font-size: 0.74rem;
  }

  .message-composer {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .app-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 9px 14px 10px;
  }

  .app-brand {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .app-brand img {
    width: 60px;
    height: 40px;
  }

  .app-brand span {
    font-size: 0.78rem;
  }

  .topbar-cluster {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .app-nav,
  .topbar-cluster,
  .sync-state {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .app-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 0;
  }

  .app-nav > .nav-item,
  .app-nav > .nav-menu > summary {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 0.82rem;
  }

  .nav-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 28px));
    max-height: min(60vh, 460px);
    overflow-y: auto;
    z-index: 9999;
  }

  .app-nav > .nav-menu:last-child .nav-menu-list {
    left: auto;
    right: 0;
  }

  .topbar-cluster {
    gap: 10px;
  }

  .mode-link {
    width: auto;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .sidebar-actions {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }

  .marketplace-hero {
    padding: 18px;
    gap: 14px;
  }

  .marketplace-hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1rem;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-subline {
    max-width: none;
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .hero-actions > * {
    width: 100%;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    padding-left: 0;
    transform: none;
  }

  .metric,
  .stat-tile {
    min-width: 0;
  }

  .listing-grid,
  .card-result-grid {
    grid-template-columns: 1fr;
  }

  .listing-grid {
    grid-auto-rows: 1fr;
  }

  .listing-card {
    height: 100%;
  }

  .listing-image-frame,
  .card-result-image-frame,
  .listing-media,
  .listing-placeholder,
  .card-result-media,
  .card-result-placeholder {
    min-height: 220px;
    height: 220px;
  }

  .listing-card-top {
    grid-template-columns: 1fr;
  }

  .listing-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-price-wrap {
    justify-items: start;
    text-align: left;
  }

  .card-actions {
    grid-template-columns: 1fr;
  }

  .listing-view-card {
    grid-template-columns: 1fr;
  }

  .listing-view-media-frame,
  .listing-view-media,
  .listing-view-placeholder {
    min-height: clamp(330px, 62vh, 500px);
  }

  .deck-card-click {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .deck-library-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .deck-library-status {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .deck-state-pill {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .message-bubble {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .hero-metrics,
  .listing-facts {
    grid-template-columns: 1fr;
  }

  .category-slider {
    --category-chip-width: 100px;
    --category-rail-visible-cards: 3;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .category-chip,
  .tcg-logo {
    min-width: 96px;
  }

  .category-chip--card {
    min-width: var(--category-chip-width);
    width: var(--category-chip-width);
  }
}

@media (max-width: 980px) {
  .listing-view-card {
    grid-template-columns: 1fr;
  }

  .listing-view-card .card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-view-body .listing-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .listing-view-card .card-actions {
    grid-template-columns: 1fr;
  }
}

h1,
h2,
h3,
h4,
.compact-title,
.order-title,
.thread-title,
.listing-title,
.listing-view-title {
  color: var(--web-ink);
}

.bulk-import-workspace {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  border-top: 1px solid var(--web-line);
  border-bottom: 1px solid var(--web-line);
  background: var(--web-surface-strong);
}

.bulk-import-heading,
.bulk-import-form,
.bulk-import-confirmation,
.bulk-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bulk-import-heading h2 {
  margin: 2px 0 0;
  font-size: 1.15rem;
  letter-spacing: 0;
}

.bulk-import-form {
  justify-content: flex-start;
}

.bulk-import-form label {
  width: min(520px, 100%);
}

.bulk-import-form input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: #fbfdfc;
}

.bulk-import-preview {
  display: grid;
  gap: 12px;
}

.bulk-import-preview[hidden] {
  display: none;
}

.bulk-import-summary {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bulk-import-summary .pill {
  min-height: 30px;
}

.bulk-import-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bulk-import-filters label {
  display: grid;
  gap: 4px;
  min-width: 180px;
  font-size: 0.85rem;
  color: var(--web-text-muted, #5b6472);
}

.bulk-import-filters select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: #fbfdfc;
}

.bulk-import-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
}

.bulk-import-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.bulk-import-table th,
.bulk-import-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--web-line);
  text-align: left;
  vertical-align: top;
}

.bulk-import-table th {
  color: var(--web-muted);
  background: rgba(15, 107, 92, 0.06);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.bulk-import-table tr:last-child td {
  border-bottom: 0;
}

.bulk-import-table tr[data-status="ready"] td:first-child {
  border-left: 3px solid #1f8a63;
}

.bulk-import-table tr[data-status="invalid"],
.bulk-import-table tr[data-status="not_found"],
.bulk-import-table tr[data-status="ambiguous"] {
  background: rgba(181, 62, 62, 0.06);
}

/* Marketplace presentation layer: keep the existing data and actions, but give cards the visual priority. */
#view-marketplace .marketplace-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 20px 24px;
  border-color: rgba(88, 183, 210, 0.22);
  background: rgba(8, 17, 28, 0.78);
  box-shadow: 0 12px 28px rgba(3, 9, 22, 0.2);
}

#view-marketplace .marketplace-hero h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.7rem);
}

#view-marketplace .hero-subline {
  max-width: 500px;
  font-size: 0.94rem;
}

#view-marketplace .hero-metrics {
  min-width: 220px;
  padding-left: 0;
  transform: none;
}

#view-marketplace .metric-strip {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
}

#view-marketplace .metric {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(157, 188, 203, 0.18);
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-marketplace .metric strong {
  font-size: 1.2rem;
}

#view-marketplace .metric span {
  font-size: 0.7rem;
}

#view-marketplace .tcg-world-strip {
  margin-top: 0;
  padding: 10px 12px;
  border-color: rgba(157, 188, 203, 0.16);
  background: rgba(11, 24, 39, 0.62);
  box-shadow: none;
}

#view-marketplace .tcg-world-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#view-marketplace .tcg-world-chip .tcg-logo {
  min-width: 112px;
  min-height: 34px;
  padding: 5px 9px;
}

#view-marketplace .marketplace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

#view-marketplace .marketplace-toolbar > div:first-child {
  width: 100%;
  text-align: center;
}

#view-marketplace .marketplace-toolbar .category-slider {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}

#view-marketplace .marketplace-toolbar .category-chip-back {
  width: 80px;
  height: 112px;
}

#view-marketplace .filter-bar {
  grid-template-columns: minmax(150px, 1fr) repeat(4, minmax(105px, 0.8fr)) auto;
  gap: 8px;
  padding: 10px 12px;
  border-color: rgba(157, 188, 203, 0.18);
  border-radius: 10px;
  background: rgba(8, 17, 28, 0.62);
  box-shadow: none;
}

#view-marketplace .filter-intro strong {
  font-size: 0.84rem;
}

#view-marketplace .filter-intro span,
#view-marketplace .filter-bar label span {
  font-size: 0.68rem;
}

#view-marketplace .listing-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

#view-marketplace .listing-card {
  border-color: rgba(157, 188, 203, 0.18);
  background: rgba(11, 24, 39, 0.84);
  box-shadow: 0 10px 24px rgba(3, 9, 22, 0.18);
}

#view-marketplace .listing-card:hover {
  border-color: rgba(88, 183, 210, 0.48);
  box-shadow: 0 16px 30px rgba(3, 9, 22, 0.28);
}

#view-marketplace .listing-image-frame {
  min-height: 0;
  height: auto;
  background: #0d1b2a;
}

#view-marketplace .listing-media,
#view-marketplace .listing-placeholder {
  min-height: 220px;
  height: 220px;
  background: #0d1b2a;
}

#view-marketplace .listing-media {
  padding: 12px;
}

#view-marketplace .listing-badge-row {
  min-height: 0;
  padding: 6px 9px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  background: rgba(7, 17, 31, 0.92);
}

#view-marketplace .listing-category-meta,
#view-marketplace .listing-trade-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

#view-marketplace .listing-category-meta {
  flex: 1 1 auto;
  color: #9ed8c8;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#view-marketplace .listing-trade-meta {
  flex: 0 0 auto;
  color: #d5e8e1;
  font-size: 0.68rem;
  font-weight: 800;
}

#view-marketplace .listing-badge-row .sponsored-label {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 3px 6px;
  font-size: 0.6rem;
  white-space: nowrap;
}

#view-marketplace .sponsored-label {
  color: #f1d38b;
  border-color: rgba(201, 168, 106, 0.42);
  background: rgba(201, 168, 106, 0.12);
  font-size: 0.62rem;
}

#view-marketplace .listing-body {
  position: relative;
  z-index: 1;
  gap: 8px;
  padding: 12px;
}

#view-marketplace .listing-title {
  min-height: calc(1.18em * 2);
  font-size: 0.94rem;
  line-height: 1.18;
  align-self: start;
}

#view-marketplace .listing-description {
  display: none;
}

#view-marketplace .listing-facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
}

#view-marketplace .listing-fact {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#view-marketplace .listing-fact dt {
  font-size: 0.62rem;
}

#view-marketplace .listing-fact dd {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #dbe8f4;
  font-size: 0.76rem;
}

#view-marketplace .listing-price-wrap .listing-price {
  color: #f4d27e;
  font-size: 1.2rem;
  font-weight: 950;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

#view-marketplace .listing-card .listing-price {
  color: #f4d27e !important;
}

#view-marketplace .listing-seller-row {
  min-height: 34px;
  padding-top: 0;
}

#view-marketplace .card-actions {
  gap: 5px;
}

#view-marketplace .card-actions > * {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 0.72rem;
}

#view-marketplace .empty-state,
#view-marketplace .marketplace-inline-state {
  padding: 22px;
  border: 1px solid rgba(157, 188, 203, 0.2);
  border-radius: 12px;
  background: rgba(8, 17, 28, 0.7);
  box-shadow: none;
}

#view-marketplace .empty-state strong,
#view-marketplace .marketplace-inline-state strong {
  color: #edf5ff;
  font-size: 1.05rem;
}

#view-marketplace .empty-state p,
#view-marketplace .marketplace-inline-state p {
  color: var(--web-muted);
  font-size: 0.84rem;
}

.marketplace-inline-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.marketplace-skeleton {
  min-width: 0;
  overflow: hidden;
  padding-bottom: 14px;
  border: 1px solid rgba(157, 188, 203, 0.12);
  border-radius: 12px;
  background: rgba(11, 24, 39, 0.72);
}

.marketplace-skeleton-media,
.marketplace-skeleton-line {
  background: linear-gradient(90deg, rgba(157, 188, 203, 0.08), rgba(157, 188, 203, 0.18), rgba(157, 188, 203, 0.08));
  background-size: 200% 100%;
  animation: marketplaceSkeletonPulse 1.4s ease-in-out infinite;
}

.marketplace-skeleton-media {
  height: 220px;
  margin-bottom: 14px;
}

.marketplace-skeleton-line {
  width: 78%;
  height: 10px;
  margin: 0 14px 9px;
  border-radius: 999px;
}

.marketplace-skeleton-line.is-wide { width: 88%; }
.marketplace-skeleton-line.is-short { width: 46%; }

@keyframes marketplaceSkeletonPulse {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1080px) {
  #view-marketplace .marketplace-hero,
  #view-marketplace .marketplace-toolbar {
    grid-template-columns: 1fr;
  }

  #view-marketplace .hero-metrics {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  #view-marketplace .marketplace-hero {
    padding: 16px;
  }

  #view-marketplace .hero-actions > button {
    flex: 1 1 0;
    min-width: 0;
  }

  #view-marketplace .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-marketplace .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-marketplace .filter-intro,
  #view-marketplace .filter-actions {
    grid-column: 1 / -1;
  }

  #view-marketplace .listing-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #view-marketplace .listing-image-frame,
  #view-marketplace .listing-media,
  #view-marketplace .listing-placeholder,
  .marketplace-skeleton-media {
    min-height: 164px;
    height: 164px;
  }

  #view-marketplace .listing-body {
    padding: 9px;
  }

  #view-marketplace .listing-title {
    font-size: 0.98rem;
  }

  #view-marketplace .listing-facts,
  #view-marketplace .listing-seller-row {
    display: grid;
  }

  #view-marketplace .listing-seller-row {
    display: flex;
  }

  #view-marketplace .card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bulk-import-card-name {
  display: block;
  font-weight: 800;
}

.bulk-import-card-meta,
.bulk-import-error {
  display: block;
  margin-top: 3px;
  color: var(--web-muted);
  line-height: 1.4;
}

.bulk-import-error {
  color: #a33434;
}

@media (max-width: 720px) {
  .bulk-import-heading,
  .bulk-import-form,
  .bulk-import-confirmation {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-import-heading .secondary-button,
  .bulk-import-form .primary-button,
  .bulk-import-confirmation .primary-button {
    width: 100%;
  }
}

.subscription-workspace {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 22px;
  border-top: 1px solid var(--web-line);
  background: var(--web-surface-strong);
}

.profile-collapsible > summary {
  list-style: none;
  cursor: pointer;
}

.profile-collapsible > summary::-webkit-details-marker {
  display: none;
}

.profile-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.profile-collapsible-summary::after {
  content: '＋';
  color: var(--web-muted);
  font-size: 1.2rem;
  font-weight: 800;
}

.profile-collapsible[open] > .profile-collapsible-summary::after {
  content: '−';
}

.profile-collapsible-summary h2 {
  margin: 0;
}

.profile-collapsible-actions {
  margin-top: 14px;
}

.subscription-heading,
.subscription-current,
.subscription-plan-header,
.subscription-plan-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subscription-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.subscription-heading h2,
.subscription-plan h3 {
  margin: 2px 0 0;
  letter-spacing: 0;
}

.subscription-current {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.subscription-plan {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: var(--web-surface-strong);
}

.subscription-plan[data-plan="professional"] {
  border-top: 4px solid #1f8a63;
}

.subscription-plan[data-plan="business"] {
  border-top: 4px solid #2a78cb;
}

.subscription-price {
  white-space: nowrap;
  color: var(--web-ink);
  font-size: 1.15rem;
  font-weight: 900;
}

/* Trade workspace presentation: existing trade actions and financial values remain untouched. */
#view-swap .workspace-header {
  margin-bottom: 12px;
}

#view-swap .workspace-header h1,
#view-trade-room .workspace-header h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.45rem);
}

#view-swap .filter-bar {
  padding: 10px 12px;
  gap: 8px;
  border-color: rgba(157, 188, 203, 0.18);
  background: rgba(8, 17, 28, 0.62);
  box-shadow: none;
}

#view-swap .my-swap-cards-panel,
#view-swap .swap-main,
#view-swap .swap-sidecar,
#view-trade-room .trade-room-page-panel {
  background: transparent;
}

#view-swap .my-swap-cards-panel {
  border-color: rgba(157, 188, 203, 0.2);
  background: rgba(8, 17, 28, 0.62);
  box-shadow: none;
}

#view-swap .my-swap-cards-toggle:hover,
#view-swap .my-swap-cards-toggle:focus-visible,
#view-swap .my-swap-cards-toggle.is-open {
  background: rgba(88, 183, 210, 0.08);
}

#view-swap .my-swap-cards-content {
  border-top-color: rgba(157, 188, 203, 0.14);
}

#view-swap .swap-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
}

#view-swap .swap-main {
  gap: 10px;
}

#view-swap .swap-main .listing-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

#view-swap .swap-main .listing-grid.is-list-view {
  grid-template-columns: 1fr;
  gap: 0;
}

#view-swap .swap-sidecar {
  gap: 10px;
}

#view-swap .swap-sidecar .tool-panel {
  padding: 14px;
}

#view-trade-room .trade-room-page-summary,
#view-trade-room .trade-room-page-panel,
#view-trade-room .trade-room-progress,
#view-trade-room .trade-room-detail-panel,
#view-trade-room .trade-room-value-overview,
#view-trade-room .trade-room-payout-summary {
  border-color: rgba(157, 188, 203, 0.2);
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 10px 24px rgba(3, 9, 22, 0.18);
}

#view-trade-room .trade-room-page-summary {
  gap: 10px;
  padding: 14px;
}

#view-trade-room .trade-room-page-summary > div:first-child {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(157, 188, 203, 0.14);
}

#view-trade-room .trade-room-page-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

#view-trade-room .trade-room-page-panel > .panel-heading,
#view-trade-room .trade-room-page-panel > .trade-room-partner-section {
  grid-column: 1 / -1;
}

#view-trade-room .trade-room-card-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(157, 188, 203, 0.2);
  border-radius: 12px;
  background: rgba(8, 17, 28, 0.72);
}

#view-trade-room .trade-room-card-group {
  min-width: 0;
}

#view-trade-room .trade-room-card-group + .trade-room-card-group {
  padding-left: 12px;
  border-left: 1px solid rgba(157, 188, 203, 0.16);
}

#view-trade-room .trade-room-card-group h4,
#view-trade-room .trade-room-partner-section h4 {
  color: var(--web-ink);
}

#view-trade-room .trade-room-selected-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

#view-trade-room .trade-room-mini-card,
#view-trade-room .trade-room-offer-item {
  border-color: rgba(157, 188, 203, 0.18);
  background: rgba(11, 24, 39, 0.82);
  box-shadow: none;
}

#view-trade-room .trade-room-mini-card img,
#view-trade-room .trade-room-mini-placeholder {
  background: #0d1b2a;
}

#view-trade-room .trade-room-value-overview {
  grid-column: 2;
  gap: 12px;
  padding: 14px;
  border-color: rgba(88, 183, 210, 0.28);
}

#view-trade-room .trade-room-value-header,
#view-trade-room .trade-room-value-sides {
  gap: 10px;
}

#view-trade-room .trade-room-value-sides > div:not(.trade-room-value-divider) {
  padding: 10px;
  border: 1px solid rgba(157, 188, 203, 0.14);
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.72);
}

#view-trade-room .trade-room-value-sides span,
#view-trade-room .trade-room-value-sides small,
#view-trade-room .trade-room-payout-row span,
#view-trade-room .trade-room-payout-note {
  color: var(--web-muted);
}

#view-trade-room .trade-room-value-sides strong {
  color: var(--web-ink);
  font-size: 1.45rem;
}

#view-trade-room .trade-room-value-divider {
  background: rgba(88, 183, 210, 0.35);
}

#view-trade-room .trade-room-value-bar {
  height: 8px;
  background: rgba(157, 188, 203, 0.16);
}

#view-trade-room .trade-room-value-detail,
#view-trade-room .trade-room-value-adjustment {
  color: var(--web-muted);
  font-size: 0.82rem;
}

#view-trade-room .trade-room-payout-summary {
  gap: 7px;
  padding-top: 12px;
  border-top-color: rgba(157, 188, 203, 0.16);
}

#view-trade-room .trade-room-payout-total {
  border-top-color: rgba(88, 183, 210, 0.24);
}

#view-trade-room .trade-room-payout-total span {
  color: var(--web-muted);
}

#view-trade-room .trade-room-payout-total strong {
  color: #8bd4e7;
  font-size: 1.35rem;
}

#view-trade-room .trade-room-progress {
  grid-column: 1;
  gap: 12px;
  padding: 14px;
}

#view-trade-room .trade-room-progress-steps {
  gap: 4px;
}

#view-trade-room .trade-room-progress-step span {
  border-color: rgba(157, 188, 203, 0.3);
  background: rgba(11, 24, 39, 0.8);
}

#view-trade-room .trade-room-progress-step.is-done {
  color: #8bd4e7;
}

#view-trade-room .trade-room-progress-step.is-done span {
  border-color: var(--web-blue);
  background: var(--web-blue);
}

#view-trade-room .trade-room-history {
  border-top-color: rgba(157, 188, 203, 0.14);
}

#view-trade-room .trade-room-history > div {
  color: var(--web-muted);
}

#view-trade-room .trade-room-payment-step {
  border: 1px solid rgba(201, 168, 106, 0.45);
  border-radius: 12px;
  background: rgba(201, 168, 106, 0.1);
  box-shadow: none;
}

#view-trade-room .trade-room-payment-step h3,
#view-trade-room .trade-room-payment-step p:not(.eyebrow) {
  color: var(--web-ink);
}

#view-trade-room .trade-room-invite-note {
  border-left-color: var(--web-blue);
  color: var(--web-muted);
  background: rgba(88, 183, 210, 0.08);
}

/* Keep the Marketplace TCG carousel inside its own rail; headings never overlap the first card. */
#view-marketplace .marketplace-toolbar .category-rail {
  min-width: 0;
  padding-inline: 0;
  scroll-padding-inline: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

#view-swap .swap-main .empty-state,
#view-swap .swap-sidecar .empty-state {
  min-height: 0;
  gap: 4px;
  padding: 14px 16px;
  border: 1px dashed rgba(157, 188, 203, 0.22);
  border-radius: 10px;
  color: #aebdca;
  background: rgba(7, 17, 31, 0.58);
  box-shadow: none;
}

#view-swap .swap-main .empty-state strong,
#view-swap .swap-sidecar .empty-state strong {
  color: #dbe8f4;
  font-size: 1rem;
  line-height: 1.2;
}

#view-swap .swap-main .empty-state p,
#view-swap .swap-sidecar .empty-state p {
  font-size: 0.82rem;
  line-height: 1.35;
}

#view-community .community-feed .empty-state,
#view-chats .thread-list .empty-state {
  min-height: 0;
  gap: 4px;
  padding: 16px 18px;
  border: 1px dashed rgba(157, 188, 203, 0.22);
  border-radius: 10px;
  color: #aebdca;
  background: rgba(7, 17, 31, 0.58);
  box-shadow: none;
}

#view-community .community-feed .empty-state strong,
#view-chats .thread-list .empty-state strong {
  color: #dbe8f4;
  font-size: 1rem;
  line-height: 1.2;
}

#view-community .community-feed .empty-state p,
#view-chats .thread-list .empty-state p {
  font-size: 0.82rem;
  line-height: 1.35;
}

#view-chats .chat-header {
  color: #aebdca;
  background: rgba(7, 17, 31, 0.58);
  border-color: rgba(157, 188, 203, 0.22);
}

@media (max-width: 900px) {
  #view-trade-room .trade-room-page-panel {
    grid-template-columns: 1fr;
  }

  #view-trade-room .trade-room-value-overview,
  #view-trade-room .trade-room-progress {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  #view-swap .swap-layout,
  #view-trade-room .trade-room-card-groups {
    grid-template-columns: 1fr;
  }

  #view-trade-room .trade-room-card-group + .trade-room-card-group {
    padding-left: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(157, 188, 203, 0.16);
    border-left: 0;
  }

  #view-trade-room .trade-room-value-sides {
    flex-direction: column;
  }

  #view-trade-room .trade-room-value-divider {
    width: 100%;
    height: 1px;
  }

  #view-trade-room .trade-room-progress-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
  }

  #view-trade-room .trade-room-payment-step {
    align-items: stretch;
    flex-direction: column;
  }
}

.subscription-limit {
  margin: 0;
  color: var(--web-muted);
  line-height: 1.5;
}

.subscription-feature-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscription-feature-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  color: var(--web-ink);
  line-height: 1.4;
}

.subscription-feature-list li::before {
  content: '✓';
  color: #1f8a63;
  font-weight: 900;
}

.subscription-plan-actions .primary-button,
.subscription-plan-actions .secondary-button {
  width: 100%;
}

@media (max-width: 980px) {
  .subscription-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .subscription-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .subscription-current {
    justify-content: flex-start;
  }

  .subscription-plan {
    padding: 14px;
    gap: 10px;
  }

  .subscription-plan-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .subscription-price {
    font-size: 1rem;
  }

  .subscription-limit,
  .subscription-feature-list li,
  .subscription-planned-list li {
    font-size: 0.9rem;
  }
}

.subscription-planned-label {
  margin: 0;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.subscription-planned-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--web-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Compact finance views: preserve all rendered values and actions, reduce only chrome. */
#view-fee-invoices .workspace-header,
#view-payouts .workspace-header {
  margin-bottom: 10px;
}

#view-fee-invoices .wide-list,
#view-payouts .compact-list {
  gap: 6px;
}

#view-payouts .compact-list {
  width: 100%;
  max-width: 1000px;
  margin-right: auto;
}

#view-payouts .payout-table-header,
#view-payouts .payout-row {
  display: grid;
  grid-template-columns: 130px 120px 110px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

#view-payouts .payout-table-header {
  padding: 0 12px 6px;
  color: var(--web-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-payouts .payout-row {
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid rgba(157, 188, 203, .16);
  border-radius: 9px;
  background: rgba(11, 24, 39, .72);
}

#view-payouts .payout-amount {
  color: var(--web-ink);
  font-weight: 800;
}

#view-payouts .payout-status,
#view-payouts .payout-date,
#view-payouts .payout-reference {
  overflow: hidden;
  color: var(--web-muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-fee-invoices .wide-list {
  width: 100%;
  max-width: 1120px;
  margin-right: auto;
}

#view-fee-invoices .compact-item,
#view-payouts .compact-item {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 9px 11px;
  border-color: rgba(157, 188, 203, 0.16);
  border-radius: 9px;
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-fee-invoices .invoice-table-header,
#view-fee-invoices .invoice-row {
  display: grid;
  grid-template-columns: 190px 100px 92px 92px 92px 90px auto;
  align-items: center;
  column-gap: 12px;
}

#view-fee-invoices .invoice-table-header {
  padding: 0 12px 6px;
  color: var(--web-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-fee-invoices .invoice-row {
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid rgba(157, 188, 203, .16);
  border-radius: 9px;
  background: rgba(11, 24, 39, .72);
}

#view-fee-invoices .invoice-number,
#view-fee-invoices .invoice-gross {
  color: var(--web-ink);
  font-weight: 800;
}

#view-fee-invoices .invoice-number {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#view-fee-invoices .invoice-number small {
  overflow: hidden;
  color: var(--web-muted);
  font-size: .68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-fee-invoices .invoice-date,
#view-fee-invoices .invoice-net,
#view-fee-invoices .invoice-tax,
#view-fee-invoices .invoice-status {
  color: var(--web-muted);
  font-size: .78rem;
}

#view-fee-invoices .invoice-action {
  justify-self: end;
  white-space: nowrap;
}

#view-fee-invoices .invoice-action .secondary-button {
  padding: 6px 9px;
  font-size: .72rem;
}

#view-fee-invoices .compact-item p,
#view-payouts .compact-item p {
  margin: 4px 0 0;
  font-size: 0.76rem;
}

#view-fee-invoices .compact-item .pill,
#view-payouts .compact-item .pill {
  min-height: 23px;
  padding: 4px 7px;
  font-size: 0.66rem;
}

#view-payouts .workspace-grid.two-column {
  gap: 12px;
  align-items: start;
}

#view-payouts .tool-panel {
  gap: 9px;
  padding: 13px;
}

#view-payouts .profile-summary {
  gap: 6px;
}

#view-payouts .profile-summary > div {
  min-height: 58px;
  padding: 9px 10px;
  border-color: rgba(157, 188, 203, 0.16);
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-payouts .profile-summary strong {
  font-size: 1.05rem;
}

#view-payouts .card-actions {
  gap: 6px;
}

#view-payouts .card-actions > * {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 0.76rem;
}

/* Responsive Deckbuilder card mode. */
#view-deckbuilder .deck-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

#view-deckbuilder .deck-grid-item {
  min-width: 0;
  gap: 5px;
  padding: 8px;
  border-color: rgba(157, 188, 203, 0.16);
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.76);
  color: var(--web-ink);
  box-shadow: none;
  text-align: left;
}

#view-deckbuilder .deck-grid-item img,
#view-deckbuilder .deck-grid-item .compact-badge {
  aspect-ratio: 3 / 4;
  max-height: 230px;
  border-radius: 7px;
  background: #0d1b2a;
}

#view-deckbuilder .deck-grid-item strong {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-deckbuilder .deck-grid-meta {
  min-height: 1.25em;
  overflow: hidden;
  color: var(--web-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-deckbuilder .deck-grid-status {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  color: #8bd4b0;
  background: rgba(43, 143, 106, 0.14);
  font-size: 0.64rem;
  font-weight: 800;
}

#view-deckbuilder .deck-grid-status.is-missing {
  color: #ffad9c;
  background: rgba(208, 90, 70, 0.14);
}

#view-deckbuilder .deck-grid-quantity-row {
  justify-content: flex-start;
  gap: 4px;
  color: var(--web-muted);
  font-size: 0.66rem;
}

#view-deckbuilder .deck-grid-quantity-row span:first-child {
  min-width: 40px;
  font-weight: 800;
}

#view-deckbuilder .deck-grid-quantity-row span:not(:first-child) {
  min-width: 24px;
  color: var(--web-ink);
  font-weight: 800;
  text-align: center;
}

#view-deckbuilder .deck-grid-quantity-row .secondary-button {
  min-width: 26px;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.74rem;
}

#view-deckbuilder .deck-grid-more {
  position: relative;
  margin-top: 2px;
}

#view-deckbuilder .deck-grid-more summary {
  width: fit-content;
  padding: 4px 6px;
  border: 1px solid rgba(157, 188, 203, 0.18);
  border-radius: 7px;
  color: var(--web-muted);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

#view-deckbuilder .deck-grid-more summary::-webkit-details-marker {
  display: none;
}

#view-deckbuilder .deck-grid-more > div {
  position: absolute;
  left: 0;
  bottom: calc(100% + 5px);
  z-index: 10;
  display: grid;
  gap: 4px;
  min-width: 130px;
  padding: 6px;
  border: 1px solid rgba(157, 188, 203, 0.22);
  border-radius: 8px;
  background: #0b1827;
  box-shadow: 0 12px 24px rgba(3, 9, 22, 0.32);
}

#view-deckbuilder .deck-grid-more .secondary-button {
  min-height: 29px;
  padding: 5px 7px;
  font-size: 0.66rem;
  text-align: left;
}

@media (max-width: 620px) {
  #view-deckbuilder .deck-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }
}

@media (max-width: 360px) {
  #view-deckbuilder .deck-grid {
    grid-template-columns: 1fr;
  }
}

/* Account center: compact secondary navigation over the existing profile form. */
#view-profile .profile-account-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: var(--web-section-gap);
  padding: 4px;
  border: 1px solid rgba(157, 188, 203, 0.18);
  border-radius: 10px;
  background: rgba(8, 17, 28, 0.62);
  scrollbar-width: thin;
}

#view-profile .profile-account-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--web-muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

#view-profile .profile-account-tab:hover,
#view-profile .profile-account-tab:focus-visible,
#view-profile .profile-account-tab.is-active {
  border-color: rgba(88, 183, 210, 0.36);
  color: var(--web-ink);
  background: rgba(88, 183, 210, 0.12);
}

#view-profile .split-workspace {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
}

#view-profile #profileForm,
#view-profile .split-workspace > .tool-panel,
#view-profile .profile-collapsible {
  gap: 12px;
  padding: 14px;
  border-color: rgba(157, 188, 203, 0.18);
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 10px 24px rgba(3, 9, 22, 0.16);
}

#view-profile #profileForm .form-grid {
  gap: 10px;
}

#view-profile #profileForm > .form-grid.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#view-profile .profile-summary {
  gap: 7px;
  margin-bottom: 2px;
}

#view-profile .profile-summary > div,
#view-profile .profile-summary .stat-tile,
#view-profile #profileStats .stat-tile {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(157, 188, 203, 0.16);
  border-radius: 9px;
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-profile .profile-summary strong,
#view-profile #profileStats .stat-tile strong {
  color: var(--web-ink);
  font-size: 1.08rem;
}

#view-profile .profile-summary span,
#view-profile #profileStats .stat-tile span {
  color: var(--web-muted);
  font-size: 0.7rem;
}

#view-profile #profileForm > .helper-text,
#view-profile #profileForm > .profile-account-nav {
  color: var(--web-muted);
  font-size: 0.76rem;
}

#view-profile .profile-finance-grid {
  gap: 12px;
  margin-top: 14px;
}

#view-profile .profile-finance-card,
#view-profile .subscription-workspace,
#view-profile .dealer-workspace {
  gap: 10px;
  padding: 14px;
  border-color: rgba(157, 188, 203, 0.18);
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 10px 24px rgba(3, 9, 22, 0.16);
}

#view-profile .profile-collapsible > summary {
  color: var(--web-ink);
}

#view-profile .profile-collapsible-actions {
  margin-top: 8px;
}

@media (max-width: 900px) {
  #view-profile .split-workspace {
    grid-template-columns: 1fr;
  }

  #view-profile #profileStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #view-profile .split-workspace > *,
  #view-profile .profile-collapsible,
  #view-payouts .tool-panel {
    min-width: 0;
    max-width: 100%;
  }

  #view-profile #profileForm > .form-grid.two-cols {
    grid-template-columns: 1fr;
  }

  #view-profile #profileStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-profile .profile-account-nav {
    max-width: 100%;
    margin-right: 0;
  }

  #view-profile .profile-summary {
    min-width: 0;
    flex-wrap: wrap;
  }

  #view-profile .profile-summary > div {
    min-width: 0;
  }

  #view-profile #profileSecurityOverview .profile-summary > div,
  #view-payouts .profile-summary > div {
    display: grid;
  }

  #view-payouts .profile-summary {
    flex-wrap: wrap;
  }

  #view-payouts .profile-summary > div {
    flex: 1 1 120px;
    min-width: 0;
  }
}

/* Deckbuilder presentation: existing deck, format, inventory and validation data stay authoritative. */
#view-deckbuilder .deckbuilder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.32fr);
  gap: 16px;
  align-items: start;
}

#view-deckbuilder .deckbuilder-main,
#view-deckbuilder .deckbuilder-sidecar {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

#view-deckbuilder .deckbuilder-main {
  grid-column: 1;
}

#view-deckbuilder .deckbuilder-sidecar {
  grid-column: 2;
  grid-row: 1;
}

#view-deckbuilder .deck-library-panel,
#view-deckbuilder .deck-meta-panel,
#view-deckbuilder #deckTxtImportForm,
#view-deckbuilder #manualDeckCardForm,
#view-deckbuilder .deck-card-search-form,
#view-deckbuilder .deck-validation-panel,
#view-deckbuilder .search-results-panel,
#view-deckbuilder .deckbuilder-sidecar > section {
  padding: 14px;
  border: 1px solid rgba(157, 188, 203, 0.18);
  border-radius: 12px;
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 10px 24px rgba(3, 9, 22, 0.16);
}

#view-deckbuilder .deck-library-panel {
  order: 0;
}

#view-deckbuilder .deck-meta-panel {
  order: 1;
}

#view-deckbuilder .deck-metrics {
  order: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#view-deckbuilder .deck-progress-panel {
  order: 3;
  padding: 12px 14px;
  border: 1px solid rgba(88, 183, 210, 0.25);
  border-radius: 12px;
  background: rgba(11, 24, 39, 0.82);
  box-shadow: none;
}

#view-deckbuilder .deck-validation-panel {
  order: 4;
}

#view-deckbuilder .search-results-panel {
  order: 5;
}

#view-deckbuilder .deck-metrics .stat-tile,
#view-deckbuilder .deck-metrics .metric {
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(157, 188, 203, 0.16);
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.72);
  box-shadow: none;
}

#view-deckbuilder .deck-metrics .stat-tile strong,
#view-deckbuilder .deck-metrics .metric strong {
  color: var(--web-ink);
  font-size: 1.15rem;
}

#view-deckbuilder .deck-metrics .stat-tile span,
#view-deckbuilder .deck-metrics .metric span {
  color: var(--web-muted);
  font-size: 0.7rem;
}

#view-deckbuilder .deck-library-list {
  gap: 6px;
}

#view-deckbuilder .deck-library-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px;
  border-color: rgba(157, 188, 203, 0.14);
  border-radius: 9px;
  color: var(--web-ink);
  background: rgba(11, 24, 39, 0.7);
  box-shadow: none;
}

#view-deckbuilder .deck-library-item:hover,
#view-deckbuilder .deck-library-item.is-active {
  border-color: rgba(88, 183, 210, 0.46);
  background: rgba(88, 183, 210, 0.1);
  transform: none;
}

#view-deckbuilder .deck-library-icon {
  min-height: 38px;
  color: #07111f;
  background: var(--web-blue);
  font-size: 0.68rem;
}

#view-deckbuilder .deck-library-copy strong,
#view-deckbuilder .deck-library-copy small,
#view-deckbuilder .deck-library-status {
  color: var(--web-ink);
}

#view-deckbuilder .deck-library-copy small {
  color: var(--web-muted);
}

#view-deckbuilder .deck-library-status {
  min-height: 24px;
  padding: 4px 7px;
  background: rgba(88, 183, 210, 0.12);
  font-size: 0.68rem;
}

#view-deckbuilder .deck-card-list {
  gap: 8px;
}

#view-deckbuilder .deck-card-row {
  padding: 10px;
  border-color: rgba(157, 188, 203, 0.16);
  border-radius: 10px;
  background: rgba(11, 24, 39, 0.74);
  box-shadow: none;
}

#view-deckbuilder .deck-card-row.is-owned {
  border-color: rgba(43, 143, 106, 0.45);
  background: rgba(43, 143, 106, 0.1);
}

#view-deckbuilder .deck-card-row.is-missing {
  border-color: rgba(208, 90, 70, 0.38);
  background: rgba(208, 90, 70, 0.08);
}

#view-deckbuilder .missing-card-item {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px;
}

#view-deckbuilder .missing-card-item .compact-thumb,
#view-deckbuilder .missing-card-item .compact-badge {
  width: 58px;
  height: 72px;
  min-height: 0;
}

#view-deckbuilder .missing-card-item .compact-title,
#view-deckbuilder .missing-card-item .compact-meta {
  margin-top: 0;
}

#view-deckbuilder .deck-card-copy strong,
#view-deckbuilder .deck-card-copy small,
#view-deckbuilder .deck-row-label,
#view-deckbuilder .deck-row-owned,
#view-deckbuilder .deck-row-quantity {
  color: var(--web-ink);
}

#view-deckbuilder .deck-card-copy small,
#view-deckbuilder .deck-row-label {
  color: var(--web-muted);
}

#view-deckbuilder .deck-state-pill {
  min-height: 24px;
  padding: 4px 7px;
  color: #8bd4b0;
  background: rgba(43, 143, 106, 0.16);
  font-size: 0.68rem;
}

#view-deckbuilder .deck-card-row.is-missing .deck-state-pill {
  color: #ffad9c;
  background: rgba(208, 90, 70, 0.16);
}

#view-deckbuilder .deck-progress-track {
  height: 8px;
  background: rgba(157, 188, 203, 0.16);
}

#view-deckbuilder .deck-progress-fill {
  background: var(--web-blue);
}

#view-deckbuilder .deck-progress-label {
  color: var(--web-ink);
  font-size: 0.84rem;
}

#view-deckbuilder .deck-progress-split {
  color: var(--web-muted);
  font-size: 0.76rem;
}

#view-deckbuilder .deck-validation-issue {
  border: 1px solid rgba(208, 90, 70, 0.28);
  background: rgba(208, 90, 70, 0.1);
}

#view-deckbuilder .deck-validation-issue.is-warning {
  border-color: rgba(201, 168, 106, 0.3);
  background: rgba(201, 168, 106, 0.1);
}

#view-deckbuilder .deck-view-switcher {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

#view-deckbuilder .deck-view-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--web-muted);
  background: transparent;
}

#view-deckbuilder .deck-view-tab.is-active {
  border-color: rgba(88, 183, 210, 0.36);
  color: var(--web-ink);
  background: rgba(88, 183, 210, 0.12);
}

#view-deckbuilder .deck-grid-item,
#view-deckbuilder .deck-analysis-metric,
#view-deckbuilder .deck-analysis-distribution {
  border-color: rgba(157, 188, 203, 0.16);
  background: rgba(11, 24, 39, 0.76);
  box-shadow: none;
}

#view-deckbuilder .deck-grid-item strong,
#view-deckbuilder .deck-analysis-metric strong,
#view-deckbuilder .deck-analysis-distribution-row {
  color: var(--web-ink);
}

#view-deckbuilder .deck-analysis-metric span {
  color: var(--web-muted);
}

#view-deckbuilder .deck-card-search-form,
#view-deckbuilder #manualDeckCardForm,
#view-deckbuilder #deckTxtImportForm,
#view-deckbuilder .deckbuilder-sidecar > section {
  order: initial;
}

#view-deckbuilder .deckbuilder-sidecar > section {
  gap: 10px;
}

@media (max-width: 980px) {
  #view-deckbuilder .deckbuilder-layout {
    grid-template-columns: 1fr;
  }

  #view-deckbuilder .deckbuilder-main,
  #view-deckbuilder .deckbuilder-sidecar {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  #view-deckbuilder .deck-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-deckbuilder .deck-card-click {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #view-deckbuilder .deck-state-pill {
    grid-column: 2;
    justify-self: start;
  }

  #view-deckbuilder .deck-row-actions {
    justify-content: flex-start;
    gap: 5px;
  }

  #view-deckbuilder .deck-row-actions .deck-row-label {
    flex-basis: 100%;
  }
}

/* Deckbuilder correction pass: compact controls and dark surfaces. */
#view-deckbuilder .deck-header-meta {
  margin: 4px 0 0;
  color: var(--web-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

#view-deckbuilder .deck-header-more,
#view-deckbuilder .deck-card-more {
  position: relative;
}

#view-deckbuilder .deck-header-more summary,
#view-deckbuilder .deck-card-more summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(157, 188, 203, 0.22);
  border-radius: 8px;
  color: var(--web-muted);
  background: rgba(11, 24, 39, 0.76);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

#view-deckbuilder .deck-header-more summary::-webkit-details-marker,
#view-deckbuilder .deck-card-more summary::-webkit-details-marker {
  display: none;
}

#view-deckbuilder .deck-header-more-menu,
#view-deckbuilder .deck-card-more-menu {
  position: absolute;
  right: 0;
  z-index: 12;
  display: grid;
  gap: 5px;
  min-width: 170px;
  padding: 7px;
  border: 1px solid rgba(157, 188, 203, 0.24);
  border-radius: 10px;
  background: #0b1827;
  box-shadow: 0 14px 28px rgba(3, 9, 22, 0.34);
}

#view-deckbuilder .deck-header-more-menu {
  top: calc(100% + 6px);
}

#view-deckbuilder .deck-card-more-menu {
  bottom: calc(100% + 6px);
}

#view-deckbuilder .deck-header-more-menu .secondary-button,
#view-deckbuilder .deck-card-more-menu .secondary-button {
  width: 100%;
  justify-content: flex-start;
  min-height: 32px;
  padding: 7px 9px;
  font-size: 0.74rem;
}

#view-deckbuilder .deck-card-row {
  gap: 7px;
  padding: 8px;
}

#view-deckbuilder .deck-card-click {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
}

#view-deckbuilder .deck-card-click .compact-thumb,
#view-deckbuilder .deck-card-click .compact-badge {
  width: 52px;
  height: 68px;
}

#view-deckbuilder .deck-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, auto)) auto;
  align-items: end;
  gap: 7px 10px;
}

#view-deckbuilder .deck-quantity-control {
  display: grid;
  gap: 3px;
}

#view-deckbuilder .deck-quantity-control > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#view-deckbuilder .deck-quantity-control .deck-row-label {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#view-deckbuilder .deck-quantity-control .secondary-button {
  min-width: 28px;
  min-height: 30px;
  padding: 5px 7px;
}

#view-deckbuilder .deck-row-owned,
#view-deckbuilder .deck-row-quantity {
  min-width: 22px;
  font-size: 0.82rem;
}

#view-deckbuilder .deck-card-more {
  align-self: end;
}

#view-deckbuilder .deck-progress-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}

#view-deckbuilder .deck-progress-track {
  grid-column: 1 / -1;
}

#view-deckbuilder .deck-progress-label,
#view-deckbuilder .deck-progress-split {
  margin: 0;
}

#view-deckbuilder .deck-validation-panel {
  gap: 8px;
  padding: 11px 14px;
}

#deckValidationIssues {
  display: block;
  min-height: 0;
  max-height: clamp(180px, 48vh, 480px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}

#deckValidationIssues:focus-visible {
  outline: 2px solid var(--accent, #58b7d2);
  outline-offset: 2px;
}

#deckValidationIssues .deck-validation-group {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

#deckValidationIssues details.deck-validation-group {
  display: block;
}

#deckValidationIssues .deck-validation-group h3,
#deckValidationIssues .deck-validation-group summary {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

#deckValidationIssues .deck-validation-group summary {
  cursor: pointer;
  padding: 8px 0;
}

#deckValidationIssues details .deck-validation-issue {
  margin-top: 6px;
}

#view-deckbuilder .deck-validation-panel .panel-heading {
  min-height: 30px;
}

#view-deckbuilder .deck-validation-panel .panel-heading h2 {
  font-size: 0.92rem;
}

#view-deckbuilder .deck-validation-issue {
  padding: 6px 8px;
  font-size: 0.76rem;
}

#view-deckbuilder .deck-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  margin-bottom: 8px;
}

#view-deckbuilder .filter-chip-row {
  padding: 4px;
  border: 1px solid rgba(157, 188, 203, 0.12);
  border-radius: 9px;
  background: rgba(11, 24, 39, 0.48);
}

#view-deckbuilder .filter-chip-row::before {
  content: 'Status';
  align-self: center;
  margin-right: 3px;
  color: var(--web-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

#view-deckbuilder .deck-view-switcher {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(157, 188, 203, 0.12);
}

#view-deckbuilder .deck-view-switcher::before {
  content: 'Ansicht';
  align-self: center;
  margin-right: 3px;
  color: var(--web-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

#view-deckbuilder .deck-section-group + .deck-section-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top-color: rgba(157, 188, 203, 0.16);
}

@media (max-width: 620px) {
  #view-deckbuilder .deck-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-deckbuilder .deck-card-more {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #view-deckbuilder .deck-card-more-menu {
    left: 0;
    right: auto;
    bottom: calc(100% + 6px);
  }

  #view-deckbuilder .deck-toolbar {
    grid-template-columns: 1fr;
  }

  #view-deckbuilder .deck-progress-panel {
    grid-template-columns: 1fr;
  }
}

.dealer-workspace {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 22px;
  border-top: 1px solid var(--web-line);
  background: var(--web-surface-strong);
}

.dealer-workspace[hidden] {
  display: none;
}

.dealer-workspace-heading,
.dealer-inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dealer-workspace-heading h2,
.dealer-inventory-heading h3 {
  margin: 2px 0 0;
  letter-spacing: 0;
}

.dealer-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dealer-inventory-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
}

.dealer-inventory-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.dealer-inventory-table th,
.dealer-inventory-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--web-line);
  text-align: left;
  vertical-align: middle;
}

.dealer-inventory-table th {
  background: rgba(15, 107, 92, 0.06);
  color: var(--web-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.dealer-inventory-table input[type="number"] {
  width: 110px;
  min-height: 38px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 7px 9px;
}

@media (max-width: 720px) {
  .dealer-workspace-heading,
  .dealer-inventory-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dealer-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dealer-api-panel {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--web-line);
}

.dealer-api-panel[hidden] {
  display: none;
}

.dealer-api-panel input[type="text"] {
  min-width: 220px;
  min-height: 44px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 9px 11px;
}

.dealer-shop-sync-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.dealer-shop-sync-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dealer-shop-sync-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 9px 11px;
}

@media (max-width: 960px) {
  .dealer-shop-sync-form {
    grid-template-columns: 1fr;
  }
}

.web-notification-button {
  position: relative;
  min-width: 44px;
}

.web-notification-button span {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--web-coral, #c45d5d);
  font-size: 0.7rem;
  font-weight: 900;
}

.web-notification-panel {
  margin-bottom: 14px;
}

.web-notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

@media (max-width: 760px) {
  #view-fee-invoices .invoice-table-header {
    display: none;
  }

  #view-fee-invoices .invoice-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px 12px;
    min-height: 0;
    padding: 11px 12px;
  }

  #view-fee-invoices .invoice-number {
    grid-column: 1;
  }

  #view-fee-invoices .invoice-number small {
    white-space: normal;
  }

  #view-fee-invoices .invoice-date {
    grid-column: 2;
    justify-self: end;
  }

  #view-fee-invoices .invoice-net,
  #view-fee-invoices .invoice-tax,
  #view-fee-invoices .invoice-gross,
  #view-fee-invoices .invoice-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #view-fee-invoices .invoice-net::before,
  #view-fee-invoices .invoice-tax::before,
  #view-fee-invoices .invoice-gross::before,
  #view-fee-invoices .invoice-status::before {
    color: var(--web-muted);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  #view-fee-invoices .invoice-net::before { content: 'Netto'; }
  #view-fee-invoices .invoice-tax::before { content: 'Steuer'; }
  #view-fee-invoices .invoice-gross::before { content: 'Brutto'; }
  #view-fee-invoices .invoice-status::before { content: 'Status'; }

  #view-fee-invoices .invoice-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #view-payouts .payout-table-header {
    display: none;
  }

  #view-payouts .payout-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px 12px;
    min-height: 0;
    padding: 11px 12px;
  }

  #view-payouts .payout-amount {
    grid-column: 1;
  }

  #view-payouts .payout-status {
    grid-column: 2;
    justify-self: end;
  }

  #view-payouts .payout-date,
  #view-payouts .payout-reference {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
  }

  #view-payouts .payout-date::before { content: 'Datum'; }
  #view-payouts .payout-reference::before { content: 'Referenz'; }

  #view-payouts .payout-date::before,
  #view-payouts .payout-reference::before {
    color: var(--web-muted);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .web-notification-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .web-notification-item .secondary-button {
    grid-column: 2;
    justify-self: start;
  }
}

#view-fee-invoices .compact-item > div:first-child,
#view-payouts .compact-item > div:first-child {
  min-width: 0;
}

#view-fee-invoices .compact-actions,
#view-payouts .compact-actions {
  justify-content: flex-end;
}

#myListingsViewList .my-listing-card-list .my-listing-stats {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

#myListingsViewList .my-listing-card-list .my-listing-metric {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#myListingsViewList .my-listing-card-list .my-listing-metric + .my-listing-metric::before {
  content: '·';
  margin-right: 4px;
  color: var(--web-muted);
}

#myListingsViewList .my-listing-card-list .my-listing-metric strong,
#myListingsViewList .my-listing-card-list .my-listing-metric span {
  color: var(--web-muted);
  font-size: 0.66rem;
  line-height: 1.1;
}

#myListingsViewList .my-listing-card-list .my-listing-metric strong {
  color: var(--web-ink);
}

/* Marketplace-specific tile rules must yield to the compact list renderer. */
#view-marketplace .listing-grid.is-list-view {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0;
}

#view-marketplace .listing-card.is-list-view {
  height: auto;
  min-height: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(11, 24, 39, 0.84);
  box-shadow: none;
}

#view-marketplace .listing-card.is-list-view .listing-image-frame,
#view-marketplace .listing-card.is-list-view .listing-image-frame-list {
  min-height: 0;
  height: 78px;
}

#view-marketplace .listing-card.is-list-view .listing-media,
#view-marketplace .listing-card.is-list-view .listing-media-list,
#view-marketplace .listing-card.is-list-view .listing-placeholder,
#view-marketplace .listing-card.is-list-view .listing-placeholder-list {
  min-height: 0;
  height: 78px;
  padding: 3px;
  object-fit: contain;
}

#view-marketplace .listing-card.is-list-view .listing-body,
#view-marketplace .listing-card.is-list-view .listing-body-list {
  grid-template-columns: minmax(0, 1.55fr) minmax(128px, 0.35fr) minmax(180px, 0.5fr) minmax(92px, auto);
  gap: 14px;
  padding: 0;
}

#view-marketplace .listing-card.is-list-view .listing-title {
  min-height: 0;
  font-size: 1.04rem;
}

#view-marketplace .listing-card.is-list-view .listing-seller-row {
  min-height: 0;
}

#view-marketplace .listing-card.is-list-view .card-actions > * {
  min-height: 30px;
}

@media (max-width: 1100px) and (min-width: 761px) {
  #view-marketplace .listing-card.is-list-view .listing-body,
  #view-marketplace .listing-card.is-list-view .listing-body-list {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto) minmax(150px, auto) 86px;
    gap: 10px;
  }
}

/* Keep collection lists scannable without changing tile/grid views. */
.listing-grid.is-list-view,
#myListingsViewList.is-list-view,
#mySearchList.is-list-view,
#swapOfferGrid.is-list-view,
#detailedListingGrid.is-list-view,
#view-chats .thread-list,
#view-orders .order-list,
#mySwapCardsList {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--web-line);
  border-radius: 12px;
  background: rgba(11, 24, 39, 0.42);
}

.listing-grid.is-list-view > .listing-card.is-list-view,
#myListingsViewList.is-list-view > .my-listing-card-list,
#mySearchList.is-list-view > .compact-item,
#swapOfferGrid.is-list-view > .listing-card.is-list-view,
#detailedListingGrid.is-list-view > .listing-card.is-list-view,
#view-chats .thread-list > .thread-item,
#view-orders .order-list > .order-card,
#mySwapCardsList > .compact-item {
  min-width: 0;
  min-height: 88px;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(157, 188, 203, 0.16);
  background: rgba(16, 29, 43, 0.76);
  box-shadow: none;
}

.listing-grid.is-list-view > .listing-card.is-list-view:nth-child(even),
#myListingsViewList.is-list-view > .my-listing-card-list:nth-child(even),
#mySearchList.is-list-view > .compact-item:nth-child(even),
#swapOfferGrid.is-list-view > .listing-card.is-list-view:nth-child(even),
#detailedListingGrid.is-list-view > .listing-card.is-list-view:nth-child(even),
#view-chats .thread-list > .thread-item:nth-child(even),
#view-orders .order-list > .order-card:nth-child(even),
#mySwapCardsList > .compact-item:nth-child(even) {
  background: rgba(21, 36, 51, 0.82);
}

.listing-grid.is-list-view > .listing-card.is-list-view:last-child,
#myListingsViewList.is-list-view > .my-listing-card-list:last-child,
#mySearchList.is-list-view > .compact-item:last-child,
#swapOfferGrid.is-list-view > .listing-card.is-list-view:last-child,
#detailedListingGrid.is-list-view > .listing-card.is-list-view:last-child,
#view-chats .thread-list > .thread-item:last-child,
#view-orders .order-list > .order-card:last-child,
#mySwapCardsList > .compact-item:last-child {
  border-bottom: 0;
}

#myListingsViewList.is-list-view > .my-listing-card-list {
  grid-template-columns: 78px minmax(0, 1fr) minmax(96px, auto);
  padding: 9px 14px;
  gap: 14px;
}

#myListingsViewList.is-list-view .my-listing-thumb,
#myListingsViewList.is-list-view .two-sided-card-media {
  width: 72px;
  height: 84px;
  object-fit: contain;
}

#myListingsViewList.is-list-view .my-listing-copy {
  gap: 14px;
}

#myListingsViewList.is-list-view .my-listing-heading {
  gap: 4px;
}

#myListingsViewList.is-list-view .my-listing-actions {
  min-width: 96px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .listing-card.is-list-view {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .listing-card.is-list-view .listing-image-frame,
  .listing-card.is-list-view .listing-image-frame-list,
  .listing-card.is-list-view .listing-media,
  .listing-card.is-list-view .listing-media-list,
  .listing-card.is-list-view .listing-placeholder,
  .listing-card.is-list-view .listing-placeholder-list {
    height: 72px;
  }

  .listing-card.is-list-view .listing-body,
  .listing-card.is-list-view .listing-body-list {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
  }

  .listing-card.is-list-view .listing-price-wrap {
    grid-column: 2;
  }

  .listing-card.is-list-view .listing-seller-row,
  .listing-card.is-list-view .card-actions {
    display: none;
  }

  #myListingsViewList.is-list-view > .my-listing-card-list {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 8px;
    gap: 10px;
  }

  #myListingsViewList.is-list-view .my-listing-thumb,
  #myListingsViewList.is-list-view .two-sided-card-media {
    width: 58px;
    height: 62px;
  }

  #myListingsViewList.is-list-view .my-listing-media {
    grid-row: 1 / span 2;
  }

  #myListingsViewList.is-list-view .my-listing-copy {
    grid-column: 2;
    grid-row: 1;
    display: block;
  }

  #myListingsViewList.is-list-view .my-listing-actions {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    justify-content: flex-end;
  }
}