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

.community-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--web-section-gap); align-items: start; }
.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 { 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: 8px; background: var(--web-panel); color: var(--web-muted); text-align: left; cursor: pointer; }
.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: var(--web-radius); padding: 18px; margin-bottom: var(--web-section-gap); box-shadow: var(--web-shadow-soft); }
.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 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 { color: var(--web-gold); text-transform: uppercase; letter-spacing: .08em; font-size: .75em; }
.community-post-category { display: inline-block; margin-left: 8px; color: var(--web-muted); font-weight: 700; letter-spacing: 0; text-transform: none; }
.community-post-title { margin: 10px 0 8px; font-size: 1.2rem; line-height: 1.25; color: var(--web-ink); }
.community-post-body { white-space: pre-wrap; line-height: 1.55; }
.community-post-image { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--web-surface); border-radius: 8px; margin: 14px 0; }
.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-post-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 760px) { .community-toolbar { align-items: stretch; } .community-tabs { width: 100%; } .community-toolbar input { max-width: none; width: 100%; } .community-toolbar > .community-select { width: 100%; } .community-compose-prompt { min-height: 54px; } .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-actions button { flex: 1 1 42%; } }

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

:root {
  --ct-color-bg: #0d1117;
  --ct-color-surface-1: rgba(22, 28, 36, 0.94);
  --ct-color-surface-2: rgba(29, 36, 45, 0.97);
  --ct-color-surface-3: rgba(38, 46, 57, 0.98);
  --ct-color-surface-sunken: #10151c;
  --ct-color-scrim: rgba(3, 7, 14, 0.72);
  --ct-color-border: rgba(193, 188, 174, 0.22);
  --ct-color-border-strong: #7c7e79;
  --ct-color-text: #f1eee7;
  --ct-color-text-secondary: #b8b7b2;
  --ct-color-text-muted: #9a9993;
  --ct-color-text-inverse: #0d1117;
  --ct-color-brand: #c1a878;
  --ct-color-brand-hover: #d2bc90;
  --ct-color-brand-strong: #967d52;
  --ct-color-brand-soft: rgba(193, 168, 120, 0.14);
  --ct-color-info: #9eaaa7;
  --ct-color-info-soft: rgba(158, 170, 167, 0.14);
  --ct-color-success: #8eaa99;
  --ct-color-success-soft: rgba(142, 170, 153, 0.14);
  --ct-color-warning: #d9a85b;
  --ct-color-warning-soft: rgba(217, 168, 91, 0.14);
  --ct-color-danger: #c97872;
  --ct-color-danger-text: #e0948e;
  --ct-color-danger-soft: rgba(201, 120, 114, 0.12);
  --ct-color-neutral: #a4a6ad;
  --ct-color-neutral-soft: rgba(164, 166, 173, 0.12);
  --ct-color-accent-rose: #b39b91;
  --ct-color-focus: #e3cfa5;
  --ct-font-body: "Inter", Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --ct-font-heading: var(--ct-font-body);
  --ct-font-size-xs: 0.75rem;
  --ct-font-size-sm: 0.8125rem;
  --ct-font-size-md: 0.875rem;
  --ct-font-size-lg: 1rem;
  --ct-font-size-xl: 1.125rem;
  --ct-font-size-2xl: 1.25rem;
  --ct-font-size-3xl: 1.5rem;
  --ct-font-size-4xl: 1.875rem;
  --ct-line-xs: 1rem;
  --ct-line-sm: 1.125rem;
  --ct-line-md: 1.25rem;
  --ct-line-lg: 1.5rem;
  --ct-line-xl: 1.625rem;
  --ct-line-2xl: 1.75rem;
  --ct-line-3xl: 2rem;
  --ct-line-4xl: 2.375rem;
  --ct-weight-regular: 400;
  --ct-weight-medium: 500;
  --ct-weight-semibold: 600;
  --ct-weight-bold: 700;
  --ct-weight-display: 800;
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 20px;
  --ct-space-6: 24px;
  --ct-space-7: 32px;
  --ct-space-8: 40px;
  --ct-space-9: 48px;
  --ct-space-10: 64px;
  --ct-control-sm: 32px;
  --ct-control-md: 40px;
  --ct-control-lg: 48px;
  --ct-radius-sm: 8px;
  --ct-radius-md: 12px;
  --ct-radius-lg: 16px;
  --ct-radius-pill: 999px;
  --ct-shadow-1: 0 1px 2px rgba(3, 9, 22, 0.3);
  --ct-shadow-2: 0 10px 26px rgba(3, 9, 22, 0.2);
  --ct-shadow-3: 0 20px 44px rgba(3, 9, 22, 0.24);
  --ct-z-base: 1;
  --ct-z-sticky: 20;
  --ct-z-sidebar: 70;
  --ct-z-topbar: 80;
  --ct-z-dropdown: 120;
  --ct-z-overlay: 1000;
  --ct-z-alert: 9999;
  --ct-z-toast: 10000;
  --ct-motion-fast: 120ms;
  --ct-motion-base: 200ms;
  --ct-motion-spin: 700ms;
  --ct-ease: cubic-bezier(0.2, 0, 0, 1);
  --ct-focus-width: 2px;
  --ct-focus-offset: 2px;
  --ct-disabled-opacity: 0.45;
  --ct-sidebar-w: 248px;
  --ct-sidebar-w-collapsed: 72px;
  --ct-topbar-h: 60px;
  --ct-content-max: 1800px;
  --ct-page-pad: clamp(16px, 2vw, 32px);
  --ct-tcg-pokemon: #f2c94c;
  --ct-tcg-yu-gi-oh: #b48cf0;
  --ct-tcg-magic-the-gathering: #c9a27a;
  --ct-tcg-flesh-and-blood: #e26d6d;
  --ct-tcg-riftbound: #6ea8f2;
  --ct-tcg-one-piece: #f28cb1;
  --ct-tcg-digimon: #57c7c2;
  --ct-tcg-dragonball: #f5a33b;
  --ct-tcg-gundam: #8fa3bf;
  --ct-tcg-vanguard: #8c96f5;
  --ct-tcg-topps: #8bc77a;
  --ct-tcg-star-wars-unlimited: #d6d9de;
  --ct-tcg-lorcana: #7fb6e0;
  --ct-tcg-other: var(--ct-color-brand);
  --ct-navy-surface: rgba(13, 24, 40, 0.92);
  --ct-navy-surface-raised: rgba(19, 33, 54, 0.96);
  --ct-navy-surface-sunken: rgba(8, 16, 28, 0.9);
  --ct-navy-overlay: rgba(8, 16, 28, 0.86);
  --ct-navy-hero-start: rgba(20, 36, 60, 0.96);
  --ct-navy-hero-end: rgba(10, 19, 32, 0.94);
  --ct-navy-glow: rgba(40, 62, 96, 0.55);
  --ct-navy-border: rgba(150, 172, 204, 0.16);
  --ct-navy-border-strong: rgba(170, 190, 220, 0.32);
  --ct-navy-hairline: rgba(255, 255, 255, 0.12);
  --ct-gold-soft: rgba(193, 168, 120, 0.16);
  --ct-shadow-card-media: 0 6px 18px rgba(0, 0, 0, 0.45);

  --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: var(--ct-radius-md);
  --web-radius-pill: var(--ct-radius-pill);
  --web-content-max: var(--ct-content-max);
  --web-page-pad: var(--ct-page-pad);
  --web-section-gap: var(--ct-space-4);
  --web-card-min: 280px;
  --web-card-media-height: clamp(210px, 14vw, 238px);
  --web-body-font: var(--ct-font-body);
  --web-heading-font: var(--ct-font-heading);
  --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,
:root[data-theme-schema] {
  --web-bg: var(--ct-color-bg);
  --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: var(--ct-color-surface-1);
  --web-panel-strong: var(--ct-color-surface-2);
  --web-ink: var(--ct-color-text);
  --web-muted: var(--ct-color-text-secondary);
  --web-line: var(--ct-color-border);
  --web-green: var(--ct-color-brand);
  --web-green-dark: var(--ct-color-brand-strong);
  --web-gold: var(--ct-color-brand);
  --web-blue: var(--ct-color-info);
  --web-coral: var(--ct-color-danger);
  --web-ok: var(--ct-color-success);
  --web-lilac: var(--ct-color-neutral);
  --web-rose: var(--ct-color-accent-rose);
  --web-teal-soft: var(--ct-color-info-soft);
  --web-sky-soft: var(--ct-color-info-soft);
  --web-sun-soft: var(--ct-color-brand-soft);
  --web-rose-soft: var(--ct-color-danger-soft);
  --web-lilac-soft: var(--ct-color-neutral-soft);
  --web-surface: var(--ct-color-surface-1);
  --web-surface-strong: var(--ct-color-surface-2);
  --web-shadow: var(--ct-shadow-3);
  --web-shadow-soft: var(--ct-shadow-2);
  --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;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, [role="button"], summary, option, optgroup) {
  color: var(--ct-color-text);
  background-color: var(--ct-color-surface-sunken);
  border-color: var(--ct-color-border);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

:where(button:not(.primary-button):not(.danger-button),
  .secondary-button, .icon-button, .segment, .icon-only) {
  color: var(--ct-color-text);
  background: var(--ct-color-surface-2);
}

.primary-button,
.danger-button {
  color: var(--ct-color-text-inverse);
  -webkit-text-fill-color: currentColor;
}

.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: var(--ct-color-surface-1);
}

.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: var(--ct-color-surface-sunken);
  color: var(--ct-color-text);
  -webkit-text-fill-color: currentColor;
}

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: 22px;
  height: 22px;
  border-radius: var(--web-radius);
  border: 1px solid var(--web-logo-border);
  object-fit: cover;
  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-brand img[src*="cardtrade-logo-gather-transparent"] {
  width: 72px;
  height: auto;
  aspect-ratio: 748 / 619;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 0 3px rgba(255,255,255,0.45));
}

.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: 28px;
    height: 28px;
  }

  .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: var(--ct-color-text-muted);
}

.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: var(--ct-color-surface-2);
  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: var(--ct-color-border-strong);
  background: var(--ct-color-surface-3);
  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: var(--ct-color-surface-2);
  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: var(--ct-color-surface-2);
  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: var(--ct-color-brand);
  background: var(--ct-color-surface-3);
}

.category-chip[data-category] {
  background: var(--ct-color-surface-2);
}

.category-chip[data-category]:hover,
.category-chip[data-category].is-active {
  color: var(--web-ink);
  border-color: var(--ct-color-brand);
  background: var(--ct-color-surface-3);
}

.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 {
  --ct-button-bg: var(--ct-color-brand);
  --ct-button-text: var(--ct-color-text-inverse);
  --ct-button-border: var(--ct-color-brand);
  --ct-button-hover: var(--ct-color-brand-hover);
  color: var(--ct-button-text);
  border-color: var(--ct-button-border);
  background: var(--ct-button-bg);
  box-shadow: none;
}

.filter-bar .filter-actions .secondary-button:first-child:hover {
  background: var(--ct-button-hover);
  border-color: var(--ct-button-border);
}

.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: var(--ct-color-surface-2);
  color: var(--web-ink);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.filter-chip.is-active {
  border-color: var(--ct-color-brand);
  background: var(--ct-color-brand-soft);
  color: var(--ct-color-brand);
}

.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: var(--ct-color-danger-text);
  -webkit-text-fill-color: currentColor;
  background: var(--ct-color-danger-soft);
  border-color: var(--ct-color-danger);
  box-shadow: none;
}

.danger-button:hover:not([disabled]),
.danger-button:focus-visible:not([disabled]) {
  color: var(--ct-color-danger-text);
  background: var(--ct-color-surface-3);
  border-color: var(--ct-color-danger);
}

.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: var(--ct-color-surface-3);
  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 var(--ct-color-border);
  border-radius: 10px;
  background: var(--ct-color-surface-1);
  color: var(--ct-color-text);
  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: var(--ct-color-brand);
  background: var(--ct-color-brand-soft);
}

#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: var(--ct-color-surface-sunken);
  color: var(--ct-color-text);
  border-color: var(--ct-field-border, var(--ct-color-border-strong));
  -webkit-text-fill-color: currentColor;
}

#authModal .auth-form input::placeholder,
#authModal .auth-form textarea::placeholder {
  color: var(--ct-color-text-muted);
  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: 20px;
    height: 20px;
  }

  .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: var(--ct-font-size-4xl);
}

#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 var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-2);
  box-shadow: none;
}

#view-marketplace .metric strong {
  font-size: var(--ct-font-size-2xl);
}

#view-marketplace .metric span {
  font-size: var(--ct-font-size-xs);
}

#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;
}

#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;
  }
}

/* R1 bridge: existing renderers use the same primitives as new ct-* markup. */
body.ct-web-app {
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-regular);
  line-height: var(--ct-line-md);
}

h1 {
  font-size: var(--ct-font-size-3xl);
  line-height: var(--ct-line-3xl);
  font-weight: var(--ct-weight-bold);
}

h2 {
  font-size: var(--ct-font-size-xl);
  line-height: var(--ct-line-xl);
  font-weight: var(--ct-weight-bold);
}

h3 {
  font-size: var(--ct-font-size-lg);
  line-height: var(--ct-line-lg);
  font-weight: var(--ct-weight-semibold);
}

.marketplace-hero h1 {
  font-size: var(--ct-font-size-4xl);
  line-height: var(--ct-line-4xl);
  font-weight: var(--ct-weight-display);
}

:is(.ct-btn, .primary-button, .secondary-button, .danger-button, .icon-button, .icon-only) {
  --ct-button-bg: var(--ct-color-surface-2);
  --ct-button-text: var(--ct-color-text);
  --ct-button-border: var(--ct-color-border-strong);
  --ct-button-hover: var(--ct-color-surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-2);
  min-height: var(--ct-control-md);
  padding: var(--ct-space-2) var(--ct-space-4);
  border: 1px solid var(--ct-button-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-button-bg);
  color: var(--ct-button-text);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
  font-family: var(--ct-font-body);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-md);
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: background var(--ct-motion-fast) var(--ct-ease), border-color var(--ct-motion-fast) var(--ct-ease), transform var(--ct-motion-fast) var(--ct-ease);
}

:is(.ct-btn--primary, .primary-button) {
  --ct-button-bg: var(--ct-color-brand);
  --ct-button-text: var(--ct-color-text-inverse);
  --ct-button-border: var(--ct-color-brand);
  --ct-button-hover: var(--ct-color-brand-hover);
}

:is(.ct-btn--danger, .danger-button) {
  --ct-button-bg: var(--ct-color-danger-soft);
  --ct-button-text: var(--ct-color-danger-text);
  --ct-button-border: var(--ct-color-danger);
}

.ct-btn--ghost {
  --ct-button-bg: transparent;
  --ct-button-text: var(--ct-color-text-secondary);
  --ct-button-border: transparent;
}

:is(.ct-btn, .primary-button, .secondary-button, .danger-button, .icon-button, .icon-only):hover:not(:disabled) {
  background: var(--ct-button-hover);
  color: var(--ct-button-text);
  border-color: var(--ct-button-border);
  box-shadow: none;
  transform: none;
}

:is(.ct-btn, .primary-button, .secondary-button, .danger-button, .icon-button, .icon-only):active:not(:disabled) {
  transform: translateY(1px);
}

:is(.ct-btn--primary, .primary-button):active:not(:disabled) {
  background: var(--ct-color-brand-strong);
}

:is(.ct-btn, .primary-button, .secondary-button, .danger-button, .icon-button, .icon-only):disabled {
  color: var(--ct-button-text);
  -webkit-text-fill-color: currentColor;
  opacity: var(--ct-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:is(.ct-btn--sm, .compact-actions > button, .card-actions > button) {
  min-height: var(--ct-control-sm);
  padding: var(--ct-space-1) var(--ct-space-3);
  font-size: var(--ct-font-size-sm);
}

.ct-btn--lg {
  min-height: var(--ct-control-lg);
}

:is(.ct-btn--icon, .icon-only) {
  min-width: var(--ct-control-md);
  padding: var(--ct-space-2);
}

:is(.ct-btn, .primary-button, .secondary-button, .icon-button).is-loading::before,
.ct-spinner {
  content: "";
  display: inline-block;
  width: var(--ct-space-4);
  height: var(--ct-space-4);
  flex: 0 0 var(--ct-space-4);
  border: var(--ct-focus-width) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--ct-radius-pill);
  animation: buttonSpinner var(--ct-motion-spin) linear infinite;
}

:is(.primary-button, .secondary-button, .icon-button).is-success {
  --ct-button-bg: var(--ct-color-success-soft);
  --ct-button-text: var(--ct-color-success);
  --ct-button-border: var(--ct-color-success);
  background: var(--ct-button-bg);
  color: var(--ct-button-text);
  border-color: var(--ct-button-border);
  box-shadow: none;
}

:is(.ct-btn-group, .button-row, .card-actions, .compact-actions) {
  gap: var(--ct-space-2);
}

.ct-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

:is(.ct-segmented, .collection-view-switcher, .segmented-control, .auth-tabs) {
  gap: var(--ct-space-1);
  padding: var(--ct-space-1);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-sunken);
}

.ct-segmented {
  display: inline-flex;
  flex-wrap: wrap;
}

:is(.ct-segmented__item, .collection-view-tab, .segment) {
  min-height: var(--ct-control-sm);
  padding: var(--ct-space-1) var(--ct-space-3);
  border: 1px solid transparent;
  border-radius: var(--ct-radius-sm);
  background: transparent;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-sm);
  box-shadow: none;
}

:is(.ct-segmented__item, .collection-view-tab, .segment):is(.is-active, [aria-pressed="true"]) {
  border-color: var(--ct-color-border-strong);
  background: var(--ct-color-surface-3);
  color: var(--ct-color-text);
}

:is(.ct-segmented__item, .collection-view-tab, .segment):hover:not(:disabled) {
  background: var(--ct-color-surface-2);
}

:is(.ct-field, .ct-form-section, .ct-fieldset) {
  display: grid;
  gap: var(--ct-space-2);
  min-width: 0;
}

:is(.ct-field__label, .form-grid > label, .auth-form > label) {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-medium);
  line-height: var(--ct-line-sm);
}

:is(.ct-input, .ct-select, .ct-textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea,
    .global-search input, .filter-bar input, .filter-bar select,
    .detail-search-panel input, .detail-search-panel select,
    .tool-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .tool-panel select, .tool-panel textarea, .auth-form input, .auth-form select,
    .auth-form textarea, .message-composer textarea, .modal-panel input,
    .modal-panel select, .modal-panel textarea) {
  min-width: 0;
  min-height: var(--ct-control-md);
  padding: var(--ct-space-2) var(--ct-space-3);
  border: 1px solid var(--ct-field-border, var(--ct-color-border-strong));
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-sunken);
  color: var(--ct-color-text);
  -webkit-text-fill-color: currentColor;
  font-family: var(--ct-font-body);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-regular);
  line-height: var(--ct-line-md);
  box-shadow: none;
  transition: border-color var(--ct-motion-fast) var(--ct-ease);
}

:is(.ct-input, .ct-select, .ct-textarea) {
  width: 100%;
}

:is(.ct-textarea, .tool-panel textarea, .auth-form textarea, .modal-panel textarea) {
  min-height: calc(var(--ct-control-lg) * 2);
  resize: vertical;
}

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

:is(input, select, textarea):is(:disabled, [readonly]) {
  color: var(--ct-color-text-muted);
  -webkit-text-fill-color: currentColor;
  background-color: var(--ct-color-surface-2);
}

:is(input, select, textarea):disabled {
  cursor: not-allowed;
}

:is(input, select, textarea):is([aria-invalid="true"], :user-invalid) {
  --ct-field-border: var(--ct-color-danger);
  border-color: var(--ct-color-danger);
}

:is(.ct-check, .check-row) {
  gap: var(--ct-space-2);
  min-height: var(--ct-control-sm);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-line-md);
}

:is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ct-color-brand);
}

:is(.ct-field__hint, .helper-text, .form-hint) {
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-regular);
  line-height: var(--ct-line-sm);
}

.ct-field__error {
  color: var(--ct-color-danger-text);
  font-size: var(--ct-font-size-xs);
  line-height: var(--ct-line-sm);
}

.password-toggle-btn span {
  color: var(--ct-color-text-secondary);
}

:is(.ct-option-card, .sell-method-option, .profile-legal-form-option) {
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-1);
  color: var(--ct-color-text);
  box-shadow: none;
}

:is(.ct-option-card, .sell-method-option, .profile-legal-form-option):is(.is-active, [aria-pressed="true"], :has(input:checked)) {
  border-color: var(--ct-color-brand);
  background: var(--ct-color-brand-soft);
}

:is(.ct-panel, .tool-panel, .search-results-panel) {
  border-color: var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-1);
  color: var(--ct-color-text);
  box-shadow: var(--ct-shadow-1);
}

.ct-panel {
  border-width: 1px;
  border-style: solid;
  padding: var(--ct-space-5);
}

.ct-panel--flush {
  padding: 0;
}

.ct-panel--sunken {
  background: var(--ct-color-surface-sunken);
}

:is(.ct-badge, .ct-status-pill, .pill) {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-1);
  padding: var(--ct-space-1) var(--ct-space-2);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-color-neutral-soft);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-xs);
}

:is(.ct-badge--brand, .pill.gold) {
  background: var(--ct-color-brand-soft);
  color: var(--ct-color-brand);
  border-color: var(--ct-color-brand);
}

:is(.ct-badge--info, .pill.blue) {
  background: var(--ct-color-info-soft);
  color: var(--ct-color-info);
  border-color: var(--ct-color-info);
}

:is(.ct-badge--success, .ct-status-pill--success, .pill.success) {
  background: var(--ct-color-success-soft);
  color: var(--ct-color-success);
  border-color: var(--ct-color-success);
}

:is(.ct-badge--warning, .ct-status-pill--warning) {
  background: var(--ct-color-warning-soft);
  color: var(--ct-color-warning);
  border-color: var(--ct-color-warning);
}

:is(.ct-badge--danger, .ct-status-pill--danger, .pill.coral) {
  background: var(--ct-color-danger-soft);
  color: var(--ct-color-danger-text);
  border-color: var(--ct-color-danger);
}

.ct-status-pill::before {
  content: "";
  width: var(--ct-space-1);
  height: var(--ct-space-1);
  border-radius: var(--ct-radius-pill);
  background: currentColor;
}

:is(.ct-list, .compact-list) {
  gap: var(--ct-space-2);
}

.ct-list {
  display: grid;
}

:is(.ct-list-item, .compact-item) {
  border-color: var(--ct-color-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-1);
  color: var(--ct-color-text);
  box-shadow: none;
}

:is(.ct-list-item__title, .compact-title) {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-md);
}

:is(.ct-list-item__meta, .compact-meta) {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  line-height: var(--ct-line-sm);
}

:is(.ct-kpi, .metric, .stat-tile) {
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-2);
  color: var(--ct-color-text-secondary);
  box-shadow: none;
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-medium);
  line-height: var(--ct-line-sm);
  font-variant-numeric: tabular-nums;
}

:is(.ct-kpi, .metric, .stat-tile)::before {
  display: none;
}

:is(.ct-kpi__value, .metric strong, .stat-tile strong) {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-2xl);
  font-weight: var(--ct-weight-bold);
  line-height: var(--ct-line-2xl);
}

.ct-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--ct-space-3);
}

:is(.ct-table, .bulk-import-table) {
  width: 100%;
  border-collapse: collapse;
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-sm);
  line-height: var(--ct-line-md);
  font-variant-numeric: tabular-nums;
}

:is(.ct-table, .bulk-import-table) :is(th, td) {
  padding: var(--ct-space-3);
  border-bottom: 1px solid var(--ct-color-border);
  text-align: left;
}

:is(.ct-table, .bulk-import-table) th {
  background: var(--ct-color-surface-2);
  color: var(--ct-color-text-secondary);
  font-weight: var(--ct-weight-semibold);
}

:is(.ct-empty-state, .ct-locked-state, .empty-state) {
  border-color: var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-1);
  color: var(--ct-color-text-secondary);
  box-shadow: none;
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-line-md);
}

:is(.ct-empty-state, .ct-locked-state, .empty-state) strong {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-lg);
  line-height: var(--ct-line-lg);
}

.ct-inline-alert {
  padding: var(--ct-space-3) var(--ct-space-4);
  border: 1px solid var(--ct-color-info);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-info-soft);
  color: var(--ct-color-info);
}

.ct-inline-alert--danger {
  border-color: var(--ct-color-danger);
  background: var(--ct-color-danger-soft);
  color: var(--ct-color-danger-text);
}

:is(.ct-toast, .toast) {
  border-color: var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-3);
  color: var(--ct-color-text);
  box-shadow: var(--ct-shadow-2);
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-line-md);
}

:is(.ct-skeleton, .marketplace-skeleton-line) {
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-color-surface-2);
}

/* Native controls and legacy buttons share one keyboard-focus treatment. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-focus);
  outline-offset: var(--ct-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  :is(.ct-btn, .primary-button, .secondary-button, .danger-button, .icon-button, .icon-only) {
    transition: none;
  }

  :is(.ct-btn, .primary-button, .secondary-button, .icon-button).is-loading::before,
  .ct-spinner,
  .ct-skeleton {
    animation: none;
  }
}
/* ==========================================================================
   R2 – Desktop-Marktplatz (ct-tcg-picker, ct-filterbar, ct-listing-tile,
   ct-listing-row). Scoped to #view-marketplace and, since R3, shared with
   #view-search via :is(); markup, data attributes,
   actions and query logic stay unchanged.
   ========================================================================== */
:is(#view-marketplace, #view-search) {
  --ct-mp-surface: var(--ct-navy-surface);
  --ct-mp-surface-raised: var(--ct-navy-surface-raised);
  --ct-mp-surface-sunken: var(--ct-navy-surface-sunken);
  --ct-mp-border: var(--ct-navy-border);
  --ct-mp-border-strong: var(--ct-navy-border-strong);
  --ct-mp-gold: var(--ct-color-brand);
  --ct-mp-gold-soft: var(--ct-gold-soft);
}

#view-marketplace {
  display: none;
}

#view-marketplace.is-active {
  display: grid;
  gap: var(--ct-space-5);
  align-content: start;
}

:is(#view-marketplace, #view-search) [data-game],
:is(#view-marketplace, #view-search) [data-category] {
  --game-accent: var(--ct-tcg-other);
}
:is(#view-marketplace, #view-search) :is([data-game="pokemon"], [data-category="pokemon"]) { --game-accent: var(--ct-tcg-pokemon); }
:is(#view-marketplace, #view-search) :is([data-game="yu-gi-oh"], [data-category="yu-gi-oh"]) { --game-accent: var(--ct-tcg-yu-gi-oh); }
:is(#view-marketplace, #view-search) :is([data-game="magic-the-gathering"], [data-category="magic-the-gathering"]) { --game-accent: var(--ct-tcg-magic-the-gathering); }
:is(#view-marketplace, #view-search) :is([data-game="flesh-and-blood"], [data-category="flesh-and-blood"]) { --game-accent: var(--ct-tcg-flesh-and-blood); }
:is(#view-marketplace, #view-search) :is([data-game="riftbound"], [data-category="riftbound"]) { --game-accent: var(--ct-tcg-riftbound); }
:is(#view-marketplace, #view-search) :is([data-game="one-piece"], [data-category="one-piece"]) { --game-accent: var(--ct-tcg-one-piece); }
:is(#view-marketplace, #view-search) :is([data-game="digimon"], [data-category="digimon"]) { --game-accent: var(--ct-tcg-digimon); }
:is(#view-marketplace, #view-search) :is([data-game="dragonball"], [data-category="dragonball"]) { --game-accent: var(--ct-tcg-dragonball); }
:is(#view-marketplace, #view-search) :is([data-game="gundam"], [data-category="gundam"]) { --game-accent: var(--ct-tcg-gundam); }
:is(#view-marketplace, #view-search) :is([data-game="vanguard"], [data-category="vanguard"]) { --game-accent: var(--ct-tcg-vanguard); }
:is(#view-marketplace, #view-search) :is([data-game="topps"], [data-category="topps"]) { --game-accent: var(--ct-tcg-topps); }
:is(#view-marketplace, #view-search) :is([data-game="star-wars-unlimited"], [data-category="star-wars-unlimited"]) { --game-accent: var(--ct-tcg-star-wars-unlimited); }
:is(#view-marketplace, #view-search) :is([data-game="lorcana"], [data-category="lorcana"]) { --game-accent: var(--ct-tcg-lorcana); }

/* --- Page header (hero) ------------------------------------------------- */
#view-marketplace .marketplace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ct-space-4) var(--ct-space-6);
  align-items: start;
  margin: 0;
  padding: var(--ct-space-5) var(--ct-space-6);
  min-height: 0;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-lg);
  background: linear-gradient(135deg, var(--ct-navy-hero-start), var(--ct-navy-hero-end));
  box-shadow: var(--ct-shadow-2);
}

#view-marketplace .marketplace-hero .hero-copy {
  display: grid;
  gap: var(--ct-space-2);
  max-width: 640px;
  padding: 0;
}

#view-marketplace .marketplace-hero h1 {
  margin: 0;
  font-size: var(--ct-font-size-4xl);
  line-height: var(--ct-line-4xl);
}

#view-marketplace .hero-subline {
  margin: 0;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-line-md);
}

#view-marketplace .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
  margin-top: var(--ct-space-2);
}

#view-marketplace .hero-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, auto);
  gap: var(--ct-space-2);
  margin: 0;
}

#view-marketplace .hero-metrics .metric {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: var(--ct-space-3) var(--ct-space-4);
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-mp-surface-sunken);
  text-align: left;
}

#view-marketplace .hero-metrics .metric strong {
  color: var(--ct-mp-gold);
  font-size: var(--ct-font-size-2xl);
  line-height: var(--ct-line-2xl);
}

#view-marketplace .hero-metrics .metric span {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-medium);
}

#view-marketplace .tcg-world-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-2) var(--ct-space-4);
  margin: 0;
  padding: var(--ct-space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--ct-mp-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#view-marketplace .tcg-world-label {
  display: flex;
  align-items: baseline;
  gap: var(--ct-space-2);
}

#view-marketplace .tcg-world-label span {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-semibold);
}

#view-marketplace .tcg-world-label small {
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-xs);
}

#view-marketplace .tcg-world-list {
  gap: var(--ct-space-2);
}

#view-marketplace .tcg-world-chip .tcg-logo {
  min-width: 0;
  min-height: var(--ct-control-sm);
  padding: 4px 12px;
  border: 1px solid var(--ct-mp-border-strong);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-mp-surface-sunken);
  box-shadow: none;
}

#view-marketplace .tcg-world-chip .tcg-logo-main {
  font-size: var(--ct-font-size-sm);
}

#view-marketplace .tcg-world-chip:hover .tcg-logo {
  border-color: var(--ct-mp-gold);
}

/* --- ct-tcg-picker ------------------------------------------------------ */
#view-marketplace .marketplace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ct-space-3);
  margin: 0;
  padding: 0;
  text-align: left;
}

#view-marketplace .marketplace-toolbar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--ct-space-3);
  text-align: left;
}

#view-marketplace .marketplace-toolbar .eyebrow {
  margin: 0;
  order: 2;
  color: var(--ct-color-text-muted);
}

#view-marketplace .marketplace-toolbar h2 {
  margin: 0;
  font-size: var(--ct-font-size-2xl);
  line-height: var(--ct-line-2xl);
}

:is(#view-marketplace, #view-search) .category-slider {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

:is(#view-marketplace, #view-search) .category-slide-button {
  display: none;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: var(--ct-space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:is([data-loop-copy="0"], [data-loop-copy="2"]) {
  display: none;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ct-space-3);
  width: auto;
  min-width: 0;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 6px var(--ct-space-3) 6px var(--ct-space-2);
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-mp-surface);
  box-shadow: inset 3px 0 0 var(--game-accent);
  color: var(--ct-color-text);
  text-align: left;
  transform: none;
  transition: border-color var(--ct-motion-fast) var(--ct-ease), background-color var(--ct-motion-fast) var(--ct-ease), box-shadow var(--ct-motion-base) var(--ct-ease), transform var(--ct-motion-base) var(--ct-ease);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:hover {
  z-index: 2;
  border-color: var(--ct-mp-border-strong);
  background: var(--ct-mp-surface-raised);
  box-shadow: inset 3px 0 0 var(--game-accent);
  transform: scale(0.94);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:is(.is-active, [aria-pressed="true"]):hover {
  box-shadow: inset 3px 0 0 var(--ct-mp-gold);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:is(.is-active, [aria-pressed="true"]) {
  border-color: var(--ct-mp-gold);
  background: linear-gradient(90deg, var(--ct-mp-gold-soft), var(--ct-mp-surface-raised));
  box-shadow: inset 3px 0 0 var(--ct-mp-gold);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-back {
  flex: 0 0 auto;
  width: 28px;
  height: 39px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ct-navy-hairline);
  border-radius: 4px;
  background: var(--ct-mp-surface-sunken);
  box-shadow: none;
  transform: none;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-back::before,
:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-back::after {
  content: none;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip[data-category="all"] .category-chip-back-img {
  padding: 3px;
  object-fit: contain;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-back-img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform var(--ct-motion-base) var(--ct-ease);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:hover .category-chip-back-img {
  transform: scale(0.9);
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-label {
  position: static;
  display: block;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  height: auto;
  max-height: calc(2 * var(--ct-line-sm));
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: none;
  color: inherit;
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-sm);
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: normal;
}

:is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:is(.is-active, [aria-pressed="true"]) .category-chip-label {
  color: var(--ct-mp-gold);
}

/* --- ct-filterbar ------------------------------------------------------- */
#view-marketplace .filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--ct-space-3);
  margin: 0;
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-mp-surface);
  box-shadow: none;
}

#view-marketplace .filter-bar .filter-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--ct-space-2);
  margin: 0;
}

#view-marketplace .filter-bar .filter-intro strong {
  font-size: var(--ct-font-size-md);
}

#view-marketplace .filter-bar .filter-intro span {
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-xs);
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) label:not([hidden]) {
  display: grid;
  gap: var(--ct-space-1);
  min-width: 0;
  margin: 0;
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) label > span {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-semibold);
  letter-spacing: 0.02em;
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) :is(select, input) {
  width: 100%;
  min-width: 0;
  height: var(--ct-control-md);
  min-height: 0;
  border: 1px solid var(--ct-mp-border-strong);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-mp-surface-sunken);
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-md);
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) :is(select, input):hover {
  border-color: var(--ct-color-text-muted);
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) .filter-actions {
  display: flex;
  gap: var(--ct-space-2);
  margin: 0;
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) .filter-actions button {
  height: var(--ct-control-md);
  min-height: 0;
  white-space: nowrap;
}

:is(#view-marketplace .filter-bar, #view-search .detail-search-panel) .filter-actions button[type="submit"] {
  --ct-button-bg: var(--ct-color-brand);
  --ct-button-text: var(--ct-color-text-inverse);
  --ct-button-border: var(--ct-color-brand);
  --ct-button-hover: var(--ct-color-brand-hover);
}

/* --- Result header: view switcher --------------------------------------- */
:is(#view-marketplace, #view-search) .collection-view-switcher {
  justify-self: end;
  margin: 0;
}

/* --- ct-listing-tile (grid) --------------------------------------------- */
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-rows: auto;
  gap: var(--ct-space-4);
  align-items: stretch;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) > .listing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-mp-surface);
  box-shadow: inset 0 2px 0 var(--game-accent);
  transition: border-color var(--ct-motion-fast) var(--ct-ease), box-shadow var(--ct-motion-base) var(--ct-ease), transform var(--ct-motion-base) var(--ct-ease);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) > .listing-card:is(:hover, :focus-within) {
  border-color: var(--ct-mp-border-strong);
  box-shadow: inset 0 2px 0 var(--game-accent), var(--ct-shadow-2);
  transform: translateY(-2px);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 200px;
  min-height: 0;
  margin: 0;
  padding: 34px var(--ct-space-3) var(--ct-space-3);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--ct-navy-glow), var(--ct-mp-surface-sunken) 72%);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-image-frame > :is(.listing-media, .two-sided-card-media, .listing-placeholder) {
  width: auto;
  max-width: 100%;
  height: 154px;
  min-height: 0;
  max-height: 154px;
  margin: 0 auto;
  aspect-ratio: 63 / 88;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-media {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--ct-shadow-card-media);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--ct-mp-border-strong);
  border-radius: 6px;
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-sm);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-badge-row {
  position: absolute;
  inset: var(--ct-space-2) var(--ct-space-2) auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ct-space-1);
  margin: 0;
  padding: 0;
  background: none;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-badge-row > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 22px;
  margin: 0;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-navy-overlay);
  color: var(--ct-color-text-secondary);
  font-size: 0.6875rem;
  font-weight: var(--ct-weight-semibold);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-category-meta::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--game-accent);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-trade-meta {
  color: var(--ct-color-success);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ct-space-2);
  min-width: 0;
  margin: 0;
  padding: var(--ct-space-3);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ct-space-1);
  margin: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-title {
  display: -webkit-box;
  min-height: calc(2 * var(--ct-line-md));
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-md);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ct-space-2);
  min-width: 0;
  margin: 0;
  text-align: left;
}

:is(#view-marketplace, #view-search) .listing-price {
  color: var(--ct-mp-gold);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ct-line-xl);
  white-space: nowrap;
}

:is(#view-marketplace, #view-search) .listing-price-wrap > span {
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-xs);
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  line-height: var(--ct-line-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-description.is-empty {
  display: none;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-fact {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Labels stay available to assistive tech; values are shown as compact pills. */
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-fact dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-fact dd {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-mp-surface-sunken);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-medium);
  line-height: var(--ct-line-xs);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#view-marketplace, #view-search) .listing-seller-row {
  display: flex;
  align-items: center;
  gap: var(--ct-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-seller-row {
  margin-top: auto;
  padding-top: var(--ct-space-2);
  border-top: 1px solid var(--ct-mp-border);
}

:is(#view-marketplace, #view-search) .listing-seller-row .seller-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ct-mp-gold-soft);
  color: var(--ct-mp-gold);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-bold);
}

:is(#view-marketplace, #view-search) .listing-seller-row > span:last-child {
  display: grid;
  min-width: 0;
}

:is(#view-marketplace, #view-search) .listing-seller-row strong,
:is(#view-marketplace, #view-search) .listing-seller-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#view-marketplace, #view-search) .listing-seller-row strong {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-semibold);
}

:is(#view-marketplace, #view-search) .listing-seller-row small {
  color: var(--ct-color-text-muted);
  font-size: 0.6875rem;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .card-actions > button {
  flex: 1 1 0;
  min-width: max-content;
  height: var(--ct-control-sm);
  min-height: 0;
  padding: 0 var(--ct-space-2);
  font-size: var(--ct-font-size-sm);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) .listing-safety-note {
  margin: 0;
  font-size: var(--ct-font-size-xs);
}

/* --- ct-listing-row (list) ---------------------------------------------- */
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view {
  --ct-mp-list-columns: 40px minmax(0, 2.4fr) minmax(0, 2fr) minmax(76px, 0.8fr) minmax(64px, 0.7fr) minmax(88px, 0.8fr) minmax(0, 1.5fr) 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-mp-surface);
  container-type: inline-size;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > :is(.empty-state, .marketplace-inline-state, .marketplace-skeleton) {
  border: 0;
  border-radius: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > :is(.listing-card, .marketplace-list-header) {
  display: grid;
  grid-template-columns: var(--ct-mp-list-columns);
  grid-template-areas: "img title meta cond lang price seller actions";
  align-items: center;
  column-gap: var(--ct-space-4);
  row-gap: 2px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 6px var(--ct-space-4) 6px var(--ct-space-3);
  border: 0;
  border-bottom: 1px solid var(--ct-mp-border);
  border-radius: 0;
  background: transparent;
  box-shadow: inset 3px 0 0 var(--game-accent);
  transform: none;
  transition: background-color var(--ct-motion-fast) var(--ct-ease);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > .marketplace-list-header {
  grid-template-areas: "card card meta cond lang price seller actions";
  padding-top: var(--ct-space-2);
  padding-bottom: var(--ct-space-2);
  background: var(--ct-mp-surface-sunken);
  box-shadow: none;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-medium);
}

:is(#view-marketplace, #view-search) .marketplace-column-card { grid-area: card; }
:is(#view-marketplace, #view-search) .marketplace-column-set { grid-area: meta; }
:is(#view-marketplace, #view-search) .marketplace-column-condition { grid-area: cond; }
:is(#view-marketplace, #view-search) .marketplace-column-language { grid-area: lang; }
:is(#view-marketplace, #view-search) .marketplace-column-price { grid-area: price; text-align: right; }
:is(#view-marketplace, #view-search) .marketplace-column-seller { grid-area: seller; }
:is(#view-marketplace, #view-search) .marketplace-column-actions { grid-area: actions; text-align: right; }

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > .listing-card.is-list-view:last-child {
  border-bottom: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > .listing-card.is-list-view:is(:hover, :focus-within) {
  background: var(--ct-mp-surface-raised);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-card.is-list-view :is(.listing-body-list, .listing-card-top-list, .listing-copy-stack, .listing-inline-details, .listing-list-footer) {
  display: contents;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-image-frame-list {
  grid-area: img;
  display: grid;
  place-items: center;
  width: 40px;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: var(--ct-mp-surface-sunken);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-image-frame-list > * {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-media-list {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-image-frame-list .card-flip-button {
  display: none;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-placeholder-list {
  display: grid;
  place-items: center;
  color: var(--ct-color-text-muted);
  font-size: 0.5625rem;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-title {
  grid-area: title;
  align-self: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-mini-meta {
  grid-area: meta;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view :is(.listing-list-condition, .listing-list-language) {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-list-condition { grid-area: cond; }
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-list-language { grid-area: lang; }

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view :is(.listing-list-condition, .listing-list-language) small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view :is(.listing-list-condition, .listing-list-language) strong {
  display: block;
  overflow: hidden;
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-price-wrap {
  grid-area: price;
  display: grid;
  justify-items: end;
  gap: 0;
  min-width: 0;
  margin: 0;
  text-align: right;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-price {
  font-size: var(--ct-font-size-lg);
  line-height: var(--ct-line-lg);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-price-wrap > span,
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-trade-meta {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.6875rem;
  text-overflow: ellipsis;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-trade-meta {
  color: var(--ct-color-success);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-seller-row {
  grid-area: seller;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .card-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .card-actions > button {
  height: var(--ct-control-sm);
  min-height: 0;
  padding: 0 var(--ct-space-3);
  font-size: var(--ct-font-size-sm);
}

@container (max-width: 900px) {
  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > :is(.listing-card, .marketplace-list-header) {
    grid-template-columns: 40px minmax(0, 1.6fr) minmax(64px, 0.7fr) minmax(56px, 0.6fr) minmax(0, 1.1fr) 68px;
    grid-template-areas:
      "img title title title price actions"
      "img meta cond lang seller actions";
    row-gap: 2px;
  }

  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view > .marketplace-list-header {
    grid-template-areas:
      "card card card card price actions"
      ". meta cond lang seller actions";
  }

  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--ct-space-2);
  }

  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-seller-row .seller-avatar {
    width: 20px;
    height: 20px;
    font-size: 0.625rem;
  }

  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid).is-list-view .listing-seller-row small {
    display: none;
  }
}

/* --- Empty / error states ----------------------------------------------- */
:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid, #view-search #detailedCardGrid) > :is(.empty-state, .marketplace-inline-state) {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--ct-space-2);
  padding: var(--ct-space-8) var(--ct-space-6);
  border: 1px dashed var(--ct-mp-border-strong);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-mp-surface);
  text-align: center;
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid, #view-search #detailedCardGrid) > :is(.empty-state, .marketplace-inline-state) p {
  max-width: 52ch;
  margin: 0;
  color: var(--ct-color-text-secondary);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid, #view-search #detailedCardGrid) > .marketplace-inline-state.is-error {
  border: 1px solid var(--ct-color-danger);
  box-shadow: inset 3px 0 0 var(--ct-color-danger);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid, #view-search #detailedCardGrid) > .marketplace-inline-state.is-error strong {
  color: var(--ct-color-danger-text);
}

:is(#view-marketplace #listingGrid, #view-search #detailedListingGrid, #view-search #detailedCardGrid) .empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ct-space-2);
  margin-top: var(--ct-space-2);
}

/* --- Responsive desktop widths ----------------------------------------- */
@media (max-width: 1360px) {
  #view-marketplace .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #view-marketplace .filter-bar .filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  #view-marketplace .marketplace-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-marketplace .hero-metrics {
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip,
  :is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip-back-img,
  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid) > .listing-card {
    transition: none;
  }

  :is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:hover,
  :is(#view-marketplace #categoryRail, #view-search #detailedSearchGameRail) .category-chip:hover .category-chip-back-img,
  :is(#view-marketplace #listingGrid, #view-search #detailedListingGrid):not(.is-list-view) > .listing-card:is(:hover, :focus-within) {
    transform: none;
  }
}

/* ==========================================================================
   R3 – Desktop-Suche. Reuses the R2 tokens, TCG picker, listing tiles/rows and
   states through the shared :is(#view-marketplace, #view-search) selectors
   above. Only search-specific layout lives here; form fields, parameters,
   suggestions and actions stay unchanged.
   ========================================================================== */
#view-search.is-active {
  gap: var(--ct-space-5);
}

#view-search .workspace-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ct-space-4);
  margin: 0;
}

#view-search .workspace-header > .secondary-button {
  flex: 0 0 auto;
  width: auto;
}

/* --- ct-search-form ------------------------------------------------------ */
#view-search .detail-search-panel {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ct-space-3);
  margin: 0;
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-mp-surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#view-search .detail-search-slider-row {
  justify-items: stretch;
  gap: var(--ct-space-2);
  margin-top: var(--ct-space-1);
  padding-top: var(--ct-space-3);
  border-top: 1px solid var(--ct-mp-border);
  text-align: left;
}

#view-search .detail-search-slider-label {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-semibold);
  letter-spacing: 0.02em;
}

#view-search .detail-search-panel .filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: var(--ct-space-1);
}

#view-search .detail-search-panel .filter-actions button {
  min-width: 112px;
}

/* --- Result panels ------------------------------------------------------- */
#view-search .search-result-layout {
  gap: var(--ct-space-5);
}

#view-search .search-results-panel {
  gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-mp-surface-sunken);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#view-search .search-results-panel .panel-heading {
  align-items: center;
  margin: 0;
}

#view-search .search-results-panel .panel-heading h2 {
  font-size: var(--ct-font-size-lg);
  line-height: var(--ct-line-lg);
}

#view-search .search-results-panel .collection-view-switcher {
  justify-self: start;
}

#view-search :is(#detailedCardGrid, #detailedListingGrid) > :is(.empty-state, .marketplace-inline-state) {
  padding: var(--ct-space-6);
}

/* --- ct-card-result (card hits, tile style shared with listings) --------- */
#view-search #detailedCardGrid {
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-rows: auto;
  gap: var(--ct-space-4);
}

#view-search #detailedCardGrid > .card-result {
  display: flex;
  flex-direction: column;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-mp-surface);
  box-shadow: inset 0 2px 0 var(--game-accent);
  transition: border-color var(--ct-motion-fast) var(--ct-ease), box-shadow var(--ct-motion-base) var(--ct-ease), transform var(--ct-motion-base) var(--ct-ease);
}

#view-search #detailedCardGrid > .card-result:is(:hover, :focus-within) {
  border-color: var(--ct-mp-border-strong);
  box-shadow: inset 0 2px 0 var(--game-accent), var(--ct-shadow-2);
  transform: translateY(-2px);
}

#view-search #detailedCardGrid > .card-result.is-selected {
  border-color: var(--ct-mp-gold);
  box-shadow: inset 0 2px 0 var(--ct-mp-gold), 0 0 0 1px var(--ct-mp-gold);
}

#view-search #detailedCardGrid .card-result-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 200px;
  min-height: 0;
  margin: 0;
  padding: 34px var(--ct-space-3) var(--ct-space-3);
  overflow: hidden;
  border: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--ct-navy-glow), var(--ct-mp-surface-sunken) 72%);
}

#view-search #detailedCardGrid .card-result-image-frame > :is(.card-result-media, .two-sided-card-media, .card-result-placeholder) {
  width: auto;
  max-width: 100%;
  height: 154px;
  min-height: 0;
  max-height: 154px;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: 63 / 88;
  background: none;
}

#view-search #detailedCardGrid .card-result-media {
  display: block;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--ct-shadow-card-media);
  filter: none;
  transform: none;
}

#view-search #detailedCardGrid .two-sided-card-media .card-result-media {
  width: auto;
  height: 100%;
}

#view-search #detailedCardGrid .card-result-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--ct-mp-border-strong);
  border-radius: 6px;
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-sm);
}

#view-search #detailedCardGrid .card-flip-button {
  right: var(--ct-space-2);
  bottom: var(--ct-space-2);
  min-height: 0;
  height: 24px;
  padding: 0 var(--ct-space-2);
  font-size: 0.6875rem;
}

#view-search #detailedCardGrid .listing-badge-row {
  position: absolute;
  inset: var(--ct-space-2) var(--ct-space-2) auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ct-space-1);
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

#view-search #detailedCardGrid .listing-badge-row > .pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  margin: 0;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-navy-overlay);
  color: var(--ct-color-text-secondary);
  font-size: 0.6875rem;
  font-weight: var(--ct-weight-semibold);
  white-space: nowrap;
}

#view-search #detailedCardGrid .listing-badge-row > .pill.blue {
  color: var(--ct-color-success);
}

#view-search #detailedCardGrid .card-result-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ct-space-2);
  min-width: 0;
  padding: var(--ct-space-3);
}

#view-search #detailedCardGrid .listing-title {
  display: -webkit-box;
  min-height: calc(2 * var(--ct-line-md));
  margin: 0;
  overflow: hidden;
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-md);
  font-weight: var(--ct-weight-semibold);
  line-height: var(--ct-line-md);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#view-search #detailedCardGrid .card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

#view-search #detailedCardGrid .card-facts .listing-fact {
  display: block;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#view-search #detailedCardGrid .card-facts .listing-fact dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#view-search #detailedCardGrid .card-facts .listing-fact dd {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid var(--ct-mp-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-mp-surface-sunken);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-weight-medium);
  line-height: var(--ct-line-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-search #detailedCardGrid .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 0;
}

#view-search #detailedCardGrid .card-actions > button {
  flex: 1 1 0;
  min-width: max-content;
  height: var(--ct-control-sm);
  min-height: 0;
  padding: 0 var(--ct-space-2);
  font-size: var(--ct-font-size-sm);
}

/* --- Responsive desktop widths ----------------------------------------- */
@media (max-width: 1360px) {
  #view-search .detail-search-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-search #detailedCardGrid > .card-result {
    transition: none;
  }

  #view-search #detailedCardGrid > .card-result:is(:hover, :focus-within) {
    transform: none;
  }
}