:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: #10141d;
  --panel-2: #151a24;
  --panel-3: #1d2431;
  --text: #f5f7fb;
  --muted: #98a3b4;
  --line: rgba(255, 255, 255, 0.1);
  --brand: #6ee7f2;
  --brand-2: #2dd4bf;
  --accent: #a78bfa;
  --gold: #f5c451;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  --collectibles-gradient: linear-gradient(
    90deg,
    #15c8ff 0%,
    #22bfff 16%,
    #2fd6d2 32%,
    #6ee875 48%,
    #d8ef54 64%,
    #ffe45c 80%,
    #ff8a6b 100%
  );
  --collectibles-gradient-soft: linear-gradient(
    90deg,
    rgba(21, 200, 255, 0.58) 0%,
    rgba(34, 191, 255, 0.58) 16%,
    rgba(47, 214, 210, 0.58) 32%,
    rgba(110, 232, 117, 0.58) 48%,
    rgba(216, 239, 84, 0.58) 64%,
    rgba(255, 228, 92, 0.58) 80%,
    rgba(255, 138, 107, 0.58) 100%
  );
  --page-title-gradient: var(--collectibles-gradient);
  --page-title-gradient-soft: var(--collectibles-gradient-soft);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: #090909;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.marketplace-page {
  --logo-blue: #1030b0;
  --logo-cyan: #1090a0;
  --logo-green: #10a080;
  --logo-yellow: #e0d010;
  --logo-orange: #f06010;
  --renaiss-hover-rainbow: linear-gradient(90deg, #ffe96e 0%, #ff6863 22%, #ff579a 50%, #6e68ff 80%, #405dff 100%);
  --market-bg: #050811;
  --type-page-title: 30px;
  --type-page-title-weight: 600;
  --type-page-title-lh: 1.2;
  --type-section-title: 22px;
  --type-section-title-weight: 700;
  --type-subsection-title: 18px;
  --type-eyebrow: 11px;
  --type-body: 14px;
  --type-body-sm: 13px;
  --type-caption: 12px;
  --type-stat-label: 12px;
  --type-stat-value: 24px;
  --type-list-title: 15px;
  --type-list-meta: 13px;
  --type-table: 13px;
  --type-table-head: 11px;
  --renaiss-grade-top: #ffe96e;
  --renaiss-grade-s: #ffc800;
  --renaiss-grade-a: #ff6f00;
  --renaiss-grade-b: #ff5e86;
  --renaiss-grade-c: #8260ff;
  --renaiss-variant-legendary: #ffe96e;
  --renaiss-variant-epic: #ffd700;
  --renaiss-variant-rare: #ff6f00;
  --renaiss-variant-uncommon: #ec4899;
  --renaiss-variant-common: #a855f7;
  position: relative;
  overflow-x: hidden;
  background: #090909;
}

body.marketplace-page::before {
  content: "";
  position: fixed;
  top: 12vh;
  right: -8vw;
  z-index: -1;
  width: min(560px, 58vw);
  aspect-ratio: 1;
  background: url("/logo.png?v=20260709-4") center / contain no-repeat;
  pointer-events: none;
}

body.marketplace-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 82%, transparent);
  pointer-events: none;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(8, 10, 15, 0.72);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0;
  width: min(320px, 100%);
  margin-bottom: 24px;
  background: none;
}

.logo-mark {
  display: block;
  width: min(320px, 100%);
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand strong,
.brand small {
  display: none;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.side-nav {
  display: grid;
  gap: 6px;
}

.side-nav a {
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.side-nav a:hover,
.side-nav a[aria-current] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.side-nav-section {
  display: grid;
  gap: 6px;
}

.side-nav-parent {
  display: block;
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.side-subnav {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.side-subitem {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.side-subitem:hover,
.side-subitem.is-active {
  border-color: rgba(110, 231, 242, 0.28);
  background: rgba(110, 231, 242, 0.12);
  color: var(--text);
}

.side-nav-parent[data-side-nav-toggle] {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.side-nav-parent[data-side-nav-toggle]:hover,
.side-nav-parent[data-side-nav-toggle][aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  box-shadow: none;
}

body.marketplace-page .side-nav-parent[data-side-nav-toggle][aria-expanded="true"] {
  border-color: transparent;
  background:
    linear-gradient(rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.9)) padding-box,
    var(--page-title-gradient) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 34px rgba(16, 48, 176, 0.16);
  color: #ffffff;
}

.side-nav-section:has(.side-nav-parent[data-side-nav-toggle][aria-expanded="false"]) .side-subnav {
  display: none;
}

body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem:hover,
body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem.is-active,
body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem[aria-current] {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  box-shadow: none;
}

.main {
  width: min(1500px, 100%);
  padding: 28px clamp(18px, 3vw, 42px) 58px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

h1 {
  margin-bottom: 0;
  font-size: clamp(42px, 8vw, 86px);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 22px;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="search"] {
  border-radius: 8px;
}

#refreshCards {
  min-height: 42px;
  border: 1px solid rgba(110, 231, 242, 0.34);
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(110, 231, 242, 0.18), rgba(45, 212, 191, 0.1));
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  white-space: nowrap;
}

#refreshCards:disabled {
  cursor: wait;
  opacity: 0.62;
}

.filter-group,
.search-box,
.section-block,
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 29, 0.86);
  box-shadow: var(--shadow);
}

.filter-group > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.search-box > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.3fr) minmax(260px, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.listing-grid-section {
  position: relative;
  margin-bottom: 20px;
}

.filter-group {
  padding: 13px;
}

.search-box {
  padding: 13px;
}

input[type="search"] {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 12px;
}

.filter-select {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 36px 0 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  border-bottom: 2px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
  transform: translateY(-64%) rotate(45deg);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.select-wrap:hover::after,
.select-wrap:focus-within::after {
  border-color: #fff;
  transform: translateY(-52%) rotate(45deg);
}

.filter-select:focus-visible {
  border-color: rgba(110, 231, 242, 0.44);
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 231, 242, 0.12);
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-btn {
  min-height: 35px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.filter-btn:hover,
.filter-btn.is-active {
  border-color: rgba(110, 231, 242, 0.38);
  background: rgba(110, 231, 242, 0.13);
  color: var(--text);
}

.section-block {
  padding: 18px;
  margin-bottom: 20px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.inline-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

body.marketplace-page .sidebar {
  background: rgba(3, 5, 12, 0.76);
  border-right-color: rgba(255, 255, 255, 0.08);
}

body.marketplace-page .logo-mark {
  border: 0;
  background: none;
  box-shadow: none;
}

body.marketplace-page .side-nav a:hover,
body.marketplace-page .side-nav a[aria-current] {
  border: 1px solid rgba(16, 144, 160, 0.28);
  background:
    linear-gradient(135deg, rgba(16, 48, 176, 0.2), rgba(16, 160, 128, 0.13) 52%, rgba(240, 96, 16, 0.12));
  color: #f8fbff;
}

body.marketplace-page .side-nav a {
  border: 1px solid transparent;
}

body.marketplace-page .main {
  position: relative;
}

.marketplace-title {
  color: #f8fbff;
  font-weight: 880;
}

.marketplace-title span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: inherit;
  color: inherit;
  text-shadow: none;
  filter: none;
}

body.marketplace-page .eyebrow {
  color: #64d8dc;
}

body.marketplace-page #refreshCards {
  border-color: rgba(16, 160, 128, 0.44);
  background: linear-gradient(135deg, rgba(16, 144, 160, 0.2), rgba(16, 160, 128, 0.14));
  box-shadow: 0 10px 30px rgba(16, 144, 160, 0.12);
}

.market-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  padding: 14px;
  background: rgba(9, 13, 22, 0.76);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--logo-cyan);
}

.summary-card span,
.summary-card small {
  display: block;
  color: #9caabe;
  font-size: var(--type-stat-label, 12px);
  font-weight: 800;
}

.summary-card strong {
  display: block;
  margin: 5px 0 3px;
  color: #f7fbff;
  font-size: var(--type-stat-value, 24px);
  line-height: 1;
}

.summary-cyan::before {
  background: var(--logo-cyan);
}

.summary-blue::before {
  background: var(--logo-blue);
}

.summary-green::before {
  background: var(--logo-green);
}

.summary-amber::before {
  background: linear-gradient(90deg, var(--logo-yellow), var(--logo-orange));
}

body.marketplace-page .filter-group,
body.marketplace-page .search-box,
body.marketplace-page .section-block,
body.marketplace-page .card {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(9, 13, 22, 0.78);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

body.marketplace-page .filter-btn {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #aab7c8;
}

body.marketplace-page .filter-btn:hover,
body.marketplace-page .filter-btn.is-active {
  border-color: rgba(16, 160, 128, 0.42);
  background: linear-gradient(135deg, rgba(16, 144, 160, 0.2), rgba(16, 160, 128, 0.12));
  color: #f8fbff;
}

body.marketplace-page input[type="search"] {
  border-color: rgba(255, 255, 255, 0.085);
  background: rgba(4, 8, 15, 0.92);
}

body.marketplace-page .filter-select {
  border-color: rgba(255, 255, 255, 0.085);
  background: rgba(4, 8, 15, 0.92);
}

body.marketplace-page .section-heading h2 {
  color: #f8fbff;
  font-size: var(--type-section-title);
  font-weight: var(--type-section-title-weight);
  line-height: 1.25;
}

body.marketplace-page .card {
  transform: translateY(0);
}

body.marketplace-page .card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--logo-blue), var(--logo-cyan), var(--logo-green), var(--logo-yellow), var(--logo-orange));
  opacity: 0.72;
}

body.marketplace-page .card:hover,
body.marketplace-page .card:focus-visible {
  border-color: rgba(16, 144, 160, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.38);
}

body.marketplace-page .serial {
  color: #63d6dc;
}

body.marketplace-page .name {
  color: #eef4fb;
}

body.marketplace-page .meta {
  color: #9eacbf;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.card {
  position: relative;
  overflow: hidden;
  background: rgba(16, 20, 29, 0.92);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.card:hover,
.card:focus-visible {
  border-color: rgba(110, 231, 242, 0.42);
  outline: none;
  transform: translateY(-2px);
}

.card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--panel-3);
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 1px solid rgba(245, 196, 81, 0.45);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(245, 196, 81, 0.16);
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.card-body {
  position: relative;
  padding: 12px 12px 14px;
}

.serial {
  margin: 0 0 6px;
  color: var(--brand);
  font-weight: 900;
}

.name {
  min-height: 58px;
  margin: 0 0 12px;
  color: #dfe7f3;
  font-size: 13px;
  line-height: 1.38;
}

.meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.meta strong {
  color: var(--text);
  font-weight: 850;
}

.empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.card-modal[hidden] {
  display: none;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.98);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.56);
}

.modal-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 2;
  min-height: 34px;
  margin: 12px 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.modal-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
}

.modal-image-wrap {
  position: relative;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-3);
}

@media (min-width: 681px) {
  body.marketplace-page .modal-panel {
    width: min(980px, 100%);
    overflow: auto;
  }

  body.marketplace-page .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    float: none;
    margin: 0;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: var(--text);
    z-index: 3;
  }

  body.marketplace-page .modal-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding: 22px 24px;
    align-items: start;
  }

  body.marketplace-page .modal-info {
    min-width: 0;
    padding-left: 4px;
  }

  body.marketplace-page .modal-info h2 {
    font-size: clamp(17px, 2.6vw, 26px);
    line-height: 1.3;
    margin-bottom: 14px;
  }

  body.marketplace-page .modal-image-wrap {
    position: sticky;
    top: 14px;
    align-self: start;
  }
}

body.marketplace-page .card-modal .modal-backdrop {
  background: rgba(9, 9, 9, 0.86);
}

body.marketplace-page .card-modal .modal-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
}

body.marketplace-page .card-modal .modal-close {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(19, 19, 19, 0.96);
  color: #f7f8fb;
}

body.marketplace-page .card-modal .modal-close:hover,
body.marketplace-page .card-modal .modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body.marketplace-page .card-modal .modal-image-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #131313;
}

body.marketplace-page .card-modal .modal-info .serial {
  color: #9ee7ff;
}

body.marketplace-page .card-modal .modal-info h2 {
  color: #f8fafc;
}

body.marketplace-page .card-modal .modal-facts span {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(19, 19, 19, 0.92);
  color: #aab2bf;
}

body.marketplace-page .card-modal .modal-facts strong {
  color: #f7f8fb;
}

body.marketplace-page .card-modal .modal-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.marketplace-page .card-modal .modal-section h3,
body.marketplace-page .card-modal .history-title {
  color: #a8b0bd;
}

body.marketplace-page .card-modal .price-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(19, 19, 19, 0.98);
}

body.marketplace-page .card-modal .price-box span,
body.marketplace-page .card-modal .price-box small {
  color: #a8b0bd;
}

body.marketplace-page .card-modal .price-box strong {
  color: #fff;
}

body.marketplace-page .card-modal .snkr-status,
body.marketplace-page .card-modal .modal-note,
body.marketplace-page .card-modal .history-empty {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(19, 19, 19, 0.92);
  color: #aab2bf;
}

body.marketplace-page .card-modal .modal-note.cache-note {
  border-color: rgba(255, 255, 255, 0.1);
  color: #b8c0cc;
}

body.marketplace-page .card-modal .snkr-match {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(19, 19, 19, 0.92);
}

body.marketplace-page .card-modal .snkr-chart-tabs {
  background: rgba(19, 19, 19, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
}

body.marketplace-page .card-modal .snkr-chart-tab.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.modal-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.modal-info h2 {
  margin: 0 42px 12px 0;
  font-size: clamp(22px, 4vw, 38px);
  line-height: 1.04;
}

.modal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.modal-facts span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.modal-facts strong {
  color: var(--text);
}

.modal-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}

.modal-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
}

.watch-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.72));
  transition: color 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

.watch-button-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.watch-button-icon path {
  fill: none;
  stroke: currentColor;
}

.watch-button:hover,
.watch-button:focus-visible {
  color: #fff;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.82));
  transform: translateY(-1px);
  outline: none;
}

.watch-button.is-watched {
  color: #ef4444;
}

.watch-button.is-watched .watch-button-icon path {
  fill: currentColor;
  stroke: currentColor;
}

.watch-button.is-watched:hover,
.watch-button.is-watched:focus-visible {
  color: #ff5a5a;
}

.watch-button--modal {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  margin: 0;
}

.watch-button--modal .watch-button-icon {
  width: 22px;
  height: 22px;
}

.watch-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.watch-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 140;
  max-width: min(92vw, 360px);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.96);
  color: #f3f4f6;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.watch-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.price-grid + .history-empty,
.price-grid + .snkr-price-chart-wrap {
  margin-top: 10px;
}

.price-box {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.price-box span,
.price-box small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.price-box strong {
  display: block;
  margin: 7px 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.modal-actions:empty {
  display: none;
}

.modal-action {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(110, 231, 242, 0.36);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(110, 231, 242, 0.12);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.modal-note.cache-note {
  border-style: solid;
  border-color: rgba(120, 200, 255, 0.22);
  color: rgba(210, 235, 255, 0.88);
}

.snkr-status,
.modal-note,
.history-empty {
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.snkr-match {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.snkr-match img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--panel-3);
}

.snkr-match span,
.snkr-match small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.snkr-match strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.history-title {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.snkr-price-chart-wrap {
  margin-top: 0;
}

.snkr-chart-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.snkr-chart-toolbar:empty {
  display: none;
}

.snkr-chart-stage {
  position: relative;
}

.snkr-chart-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.snkr-chart-tabs:empty {
  display: none;
}

.snkr-chart-tab {
  min-width: 44px;
  padding: 6px 12px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.marketplace-page .snkr-chart-tab {
  min-height: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #aeb6c4;
}

.snkr-chart-tab:hover {
  color: #dbe7f5;
}

.snkr-chart-tab.is-active {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
}

body.marketplace-page .snkr-chart-tab.is-active {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #f8fbff;
}

.snkr-price-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  background: #050608;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.snkr-chart-tooltip {
  position: absolute;
  z-index: 3;
  display: none;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.96);
  border: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  flex-direction: column;
  gap: 2px;
}

.snkr-chart-tooltip.is-visible {
  display: flex;
}

.snkr-chart-tooltip[hidden] {
  display: none !important;
}

.snkr-chart-tooltip strong {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.2;
}

.snkr-chart-tooltip span {
  color: #b8c7d8;
  font-size: 12px;
}

.snkr-chart-tooltip small {
  color: #7d93aa;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.snkr-price-chart-plot {
  fill: #050608;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.snkr-price-chart-grid {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.snkr-price-chart-axis-y,
.snkr-price-chart-axis-x,
.snkr-price-chart-y-label,
.snkr-price-chart-empty {
  fill: #8fa3b8;
  font-size: 11px;
  font-weight: 700;
}

.snkr-price-chart-y-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.snkr-price-chart-line {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.snkr-price-chart-area {
  pointer-events: none;
}

.snkr-price-chart-dot-wrap {
  cursor: pointer;
}

.snkr-price-chart-dot-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.snkr-price-chart-dot {
  fill: #60a5fa;
  stroke: #0b0d12;
  stroke-width: 1.5;
  pointer-events: none;
  transition: r 0.12s ease, fill 0.12s ease;
}

.snkr-price-chart-dot.is-snapshot {
  fill: #facc15;
}

.snkr-price-chart-dot.is-active,
.snkr-price-chart-dot-wrap:hover .snkr-price-chart-dot {
  fill: #93c5fd;
  r: 6;
}

.match-details {
  margin-top: 12px;
}

.match-candidate-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.match-candidate {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  line-height: 1.4;
}

.match-candidate.is-selected {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.08);
}

.match-candidate small {
  color: var(--muted);
}

.history-list {
  display: grid;
  gap: 6px;
}

.history-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 13px;
}

.history-row strong {
  color: var(--text);
}

.app-shell > .topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  grid-column: 1 / -1;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px clamp(14px, 2vw, 24px);
  background: rgba(8, 10, 15, 0.9);
  backdrop-filter: blur(14px);
}

.app-shell > .topbar .brand {
  margin-bottom: 0;
  width: min(280px, 42vw);
  height: 58px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(110, 231, 242, 0.46);
  border-radius: 8px;
  background: rgba(110, 231, 242, 0.1);
  color: var(--brand);
  font-weight: 900;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.primary-nav a {
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.primary-nav a:hover,
.primary-nav a[aria-current] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.nav-toggle {
  display: none;
}

.page {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 16px clamp(12px, 2vw, 24px) 34px;
}

.page-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 10px;
}

.page-hero h1 {
  font-size: clamp(30px, 5vw, 54px);
}

.summary,
.status-message,
.muted-line {
  color: var(--muted);
}

.summary {
  max-width: 760px;
  margin: 6px 0 0;
  font-size: 14px;
}

.status-message,
.muted-line {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 750;
}

.primary-action {
  min-height: 38px;
  border: 1px solid rgba(110, 231, 242, 0.34);
  border-radius: 8px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(110, 231, 242, 0.18), rgba(45, 212, 191, 0.1));
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.primary-action:disabled {
  cursor: wait;
  opacity: 0.62;
}

.set-size-filter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(110, 231, 242, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  margin: 10px 0 12px;
  background: rgba(7, 12, 20, 0.84);
}

.set-size-filter > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.stat-card,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 29, 0.86);
  box-shadow: var(--shadow);
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
}

.stat-card:nth-child(2)::before {
  background: var(--accent);
}

.stat-card:nth-child(3)::before {
  background: #60a5fa;
}

.stat-card:nth-child(4)::before {
  background: var(--gold);
}

.stat-card span,
.stat-card small {
  display: block;
  color: var(--muted);
  font-size: var(--type-stat-label, 12px);
  font-weight: 800;
}

.stat-card strong {
  display: block;
  margin: 2px 0;
  color: var(--text);
  font-size: var(--type-stat-value, 24px);
  line-height: 1;
}

.panel-grid {
  display: grid;
  gap: 12px;
}

.panel {
  padding: 12px;
}

.panel h2 {
  font-size: var(--type-subsection-title, 18px);
}

.panel-head,
.compact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.tabs {
  display: inline-flex;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.16);
}

.tab-btn {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0 11px;
  background: rgba(14, 19, 29, 0.92);
  color: #c7d2df;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.tab-btn:hover,
.tab-btn.is-active {
  border-color: rgba(110, 231, 242, 0.55);
  background: rgba(45, 212, 191, 0.22);
  color: var(--text);
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

td {
  color: #e5edf7;
}

.loaded-panel {
  background: rgba(12, 16, 24, 0.72);
}

.table-thumb {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--panel-3);
}

.sequential-set-list {
  display: grid;
  gap: 12px;
}

.sequential-set-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(13, 18, 28, 0.96), rgba(8, 12, 20, 0.96));
  color: var(--text);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.sequential-set-row:hover {
  border-color: rgba(110, 231, 242, 0.5);
  background: linear-gradient(180deg, rgba(18, 27, 40, 0.98), rgba(10, 17, 27, 0.98));
  transform: translateY(-1px);
}

.set-rank {
  color: #f7f8fb;
  font-size: 13px;
  font-weight: 900;
}

.set-summary {
  display: grid;
  grid-template-columns: 46px 150px minmax(220px, 1fr) 150px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
}

.set-size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(110, 231, 242, 0.42);
  border-radius: 8px;
  background: rgba(45, 212, 191, 0.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.set-range span,
.set-total span,
.set-note {
  display: block;
  color: #9fb0c4;
  font-size: 11px;
  font-weight: 800;
}

.set-range strong {
  display: block;
  margin: 3px 0 0;
  color: #d9e5f2;
  font-size: 14px;
  line-height: 1.2;
}

.set-total {
  justify-self: end;
  text-align: right;
}

.set-total strong {
  display: block;
  margin-top: 3px;
  color: var(--brand);
  font-size: 20px;
  line-height: 1.05;
}

.set-card-list {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  min-width: 0;
  width: max-content;
  margin: 0 auto;
  padding: 0;
}

.set-card-scroller {
  min-width: 0;
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.set-card-mini {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
  min-width: 320px;
  min-height: 142px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px 6px 6px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  text-decoration: none;
}

.set-card-mini img {
  width: 92px;
  height: 126px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--panel-3);
}

.set-card-mini strong,
.set-card-mini span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-card-mini strong {
  color: #f6f8fc;
  font-size: 14px;
  line-height: 1.25;
}

.set-card-mini span {
  margin-top: 4px;
  color: #9fb0c4;
  font-size: 12.5px;
}

.set-card-mini .set-card-price {
  color: #f7f8fb;
  font-weight: 850;
}

.set-card-mini .set-card-fmv {
  color: #b9efff;
  font-weight: 850;
}

.set-arrow {
  color: var(--brand);
  font-size: 22px;
  font-weight: 700;
  opacity: 0.8;
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filters {
    grid-template-columns: 1fr;
  }

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

  .market-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sequential-set-row {
    grid-template-columns: 42px 88px minmax(150px, 1fr) minmax(0, 1.4fr) minmax(120px, auto) 20px;
    gap: 8px;
  }

}

@media (max-width: 680px) {
  .page {
    padding: 22px 12px 44px;
  }

  .main {
    padding: 22px 12px 44px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-shell > .topbar {
    align-items: stretch;
  }

  .primary-nav {
    justify-content: start;
  }

  .page-hero,
  .panel-head,
  .compact-head,
  .set-size-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .tabs {
    width: 100%;
  }

  .market-summary {
    grid-template-columns: 1fr;
  }

  .tab-btn {
    flex: 1;
  }

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

  .card-modal {
    padding: 10px;
  }

  .modal-grid,
  .price-grid {
    grid-template-columns: 1fr;
  }

  .sequential-set-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .set-summary {
    grid-template-columns: 1fr;
  }

  .set-total {
    justify-self: stretch;
    text-align: left;
  }

  .set-card-list {
    width: max-content;
  }

  .set-card-mini {
    flex: 0 0 280px;
    width: 280px;
  }

  .modal-grid {
    padding: 14px;
  }
}

/* Marketplace bgbg redesign */
html,
body,
#root,
.app {
  min-height: 100%;
  height: 100%;
  background: #090909 !important;
}

body.marketplace-page {
  --logo-blue: #1030b0;
  --logo-cyan: #1090a0;
  --logo-green: #10a080;
  --logo-yellow: #e0d010;
  --logo-orange: #f06010;
  --logo-pink: #d946ef;
  --rainbow-line: linear-gradient(110deg, var(--logo-blue), #6d5dfc 24%, var(--logo-pink) 46%, var(--logo-orange) 70%, #a8e018);
  --page-title-gradient: var(--collectibles-gradient);
  --page-title-gradient-soft: var(--collectibles-gradient-soft);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background: #090909 !important;
}

.marketplace-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background-color: #090909;
  background-image: url("../bgbg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.marketplace-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.08);
  pointer-events: none;
}

body.marketplace-page::before {
  content: none;
}

body.marketplace-page::after {
  content: none;
}

body.marketplace-page .app-shell {
  position: relative;
  z-index: 1;
}

body.marketplace-page .sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border-right-color: rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 9, 0.98);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.marketplace-page .sidebar::before {
  content: none;
}

body.marketplace-page .sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(9, 9, 9, 0.98);
  pointer-events: none;
}

body.marketplace-page .brand {
  position: relative;
  z-index: 1;
  opacity: 0.96;
  width: min(320px, 100%);
}

body.marketplace-page .sidebar-user {
  position: relative;
  z-index: 1;
  margin: 0 14px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

body.marketplace-page .sidebar-user-greeting {
  color: #d6dbe3;
  font-size: 13px;
  line-height: 1.4;
}

body.marketplace-page .sidebar-user-greeting strong {
  color: #fff;
  font-weight: 800;
}

body.marketplace-page .sidebar-user-login,
body.marketplace-page .sidebar-user-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

body.marketplace-page .sidebar-user-login {
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

body.marketplace-page .sidebar-user-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

body.marketplace-page .sidebar-user-register:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

body.marketplace-page .sidebar-user-login:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

body.marketplace-page .sidebar-user-logout {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #aeb6c4;
}

body.marketplace-page .sidebar-user-logout:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

body.marketplace-page .topbar-user {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

body.marketplace-page .sidebar-auth {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
}

body.marketplace-page .topbar-user-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  box-shadow: none;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body.marketplace-page .sidebar-auth .topbar-user-login {
  width: 100%;
  min-height: 58px;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 10px;
}

body.marketplace-page .sidebar-login-logo,
body.marketplace-page .sidebar-login-logo img {
  display: block;
  width: 28px;
  height: 28px;
}

body.marketplace-page .sidebar-login-logo {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #050505;
}

body.marketplace-page .sidebar-login-logo img {
  object-fit: contain;
  transform: scale(1.24);
}

body.marketplace-page .topbar-user-login:hover,
body.marketplace-page .topbar-user-login:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
  outline: none;
}

body.marketplace-page .topbar-user-name {
  cursor: default;
  justify-content: flex-start;
  gap: 12px;
  max-width: 220px;
}

body.marketplace-page .topbar-user-name:hover {
  transform: translateY(-1px);
}

body.marketplace-page .topbar-profile {
  position: relative;
  width: 100%;
}

body.marketplace-page .topbar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

body.marketplace-page .topbar-user-avatar-fallback {
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

body.marketplace-page .topbar-user-text {
  display: grid;
  min-width: 0;
}

body.marketplace-page .topbar-user-text strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.1;
}

body.marketplace-page .topbar-user-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.marketplace-page .topbar-user-rp {
  color: #8fd3ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

body.marketplace-page .topbar-profile-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: none;
  width: 210px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  background: rgba(7, 7, 7, 0.98);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.46);
}

body.marketplace-page .topbar-profile-menu.is-open {
  display: grid;
  gap: 6px;
}

body.marketplace-page .topbar-profile-action {
  display: flex;
  align-items: center;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #d9e1ec;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body.marketplace-page .topbar-profile-action:hover,
body.marketplace-page .topbar-profile-action:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

body.marketplace-page .topbar-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.marketplace-page .topbar-profile-logout {
  color: #ffb4b4;
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.auth-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 26px;
  background: rgba(7, 7, 7, 0.98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
}

.auth-modal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--collectibles-gradient-soft);
  opacity: 0.54;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #d9e1ec;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.auth-modal-copy {
  margin-bottom: 18px;
  padding-right: 58px;
}

.auth-modal-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1.05;
}

.auth-modal-status {
  margin: 0;
  color: #aeb6c4;
  font-size: 13px;
  line-height: 1.45;
}

.auth-modal-form {
  display: grid;
  gap: 12px;
}

.auth-modal-form [hidden] {
  display: none !important;
}

.auth-modal-form label {
  display: grid;
  gap: 7px;
  color: #d8e3ee;
  font-size: 12px;
  font-weight: 900;
}

.auth-modal-form input,
.auth-modal-form select {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font: inherit;
  outline: none;
}

.auth-modal-form select option {
  background: #111;
  color: #fff;
}

.auth-modal-form input:focus,
.auth-modal-form select:focus {
  border-color: rgba(255, 255, 255, 0.32);
}

.auth-modal-form button[type="submit"],
.auth-modal-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.auth-modal-form button[type="submit"] {
  margin-top: 4px;
  border: 1px solid #fff;
  background: #fff;
  color: #050505;
}

.auth-modal-toggle {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.auth-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  body.marketplace-page .top-actions {
    justify-content: flex-start;
  }

  body.marketplace-page .topbar-user {
    width: 100%;
    justify-content: flex-start;
  }
}

body.marketplace-page.login-page .login-panel {
  max-width: 420px;
  position: relative;
  overflow: hidden;
}

body.marketplace-page.login-page .auth-panel {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

body.marketplace-page.login-page .auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--collectibles-gradient-soft);
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body.marketplace-page.login-page .auth-panel h2 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 22px;
}

body.marketplace-page.login-page .login-status {
  margin: 0 0 12px;
  color: #9aa3af;
  font-size: 13px;
}

body.marketplace-page.login-page .login-note {
  margin: 12px 0 0;
  color: #8f99a7;
  font-size: 12px;
  line-height: 1.45;
}

body.marketplace-page.login-page .auth-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

body.marketplace-page.login-page .auth-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0 14px;
  background: #fff;
  color: #050505;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

body.marketplace-page.login-page .login-form button[type="submit"] {
  min-height: 42px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #050505;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

body.marketplace-page.login-page .login-form button[type="submit"]:hover,
body.marketplace-page.login-page .auth-switch a:hover {
  transform: translateY(-1px);
}

body.marketplace-page .side-nav {
  position: relative;
  z-index: 1;
}

body.marketplace-page .logo-mark {
  display: block;
}

body.marketplace-page .side-nav a {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  color: #aeb6c4;
}

body.marketplace-page .side-nav a:hover,
body.marketplace-page .side-nav a[aria-current] {
  border-color: transparent;
  background:
    linear-gradient(rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.9)) padding-box,
    var(--page-title-gradient) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 34px rgba(16, 48, 176, 0.16);
  color: #ffffff;
}

body.marketplace-page .main {
  position: relative;
  margin-inline: auto;
}

body.marketplace-page .topbar {
  align-items: center;
  margin-bottom: 46px;
}

body.marketplace-page .eyebrow {
  margin-bottom: 10px;
  color: #b7c2d1;
  font-size: var(--type-eyebrow);
}

body.marketplace-page .marketplace-title {
  display: inline-block;
  margin-bottom: 14px;
  background: var(--page-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
  text-shadow: none;
  filter: none;
}

body.marketplace-page .marketplace-subtitle {
  max-width: 620px;
  margin: 0;
  color: #d9e1ec;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.55;
}

body.marketplace-page.marketplace-home-page .topbar,
body.marketplace-page.section-home-page .topbar {
  padding-bottom: 28px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.marketplace-page.section-home-page .topbar {
  margin-bottom: 28px;
}

body.marketplace-page.marketplace-home-page .marketplace-filter-sticky {
  padding-top: 28px;
}

@media (min-width: 768px) {
  body.marketplace-page.marketplace-home-page .marketplace-filter-sticky {
    padding-top: 28px;
  }
}

body.marketplace-page.marketplace-home-page .marketplace-title,
body.marketplace-page.section-home-page .marketplace-title,
body.marketplace-page.gacha-detail-page .marketplace-title,
body.marketplace-page.gacha-transactions-page .marketplace-title {
  margin-bottom: 0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f8fafc;
  color: #f8fafc;
  font-size: var(--type-page-title);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
}

body.marketplace-page .marketplace-title span {
  display: contents;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: inherit;
  color: inherit;
  text-shadow: none;
  filter: none;
}

body.marketplace-page #refreshCards {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    var(--page-title-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
}

body.marketplace-page #refreshCards:hover {
  box-shadow: 0 16px 46px rgba(16, 144, 160, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.marketplace-page .market-summary,
body.marketplace-page .filters,
body.marketplace-page .section-block {
  position: relative;
}

body.marketplace-page .market-summary {
  margin-top: 0;
}

body.marketplace-page .summary-card,
body.marketplace-page .filter-group,
body.marketplace-page .search-box,
body.marketplace-page .section-block,
body.marketplace-page .card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 9, 0.98);
  border-radius: 16px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.marketplace-page .summary-card {
  background: rgba(9, 9, 9, 0.98);
}

body.marketplace-page .filter-group,
body.marketplace-page .search-box {
  background: rgba(9, 9, 9, 0.98);
}

body.marketplace-page .summary-card::before {
  inset: 0 0 auto;
  width: auto;
  height: 1px;
  border-radius: 0;
}

body.marketplace-page .summary-cyan::before,
body.marketplace-page .summary-blue::before,
body.marketplace-page .summary-green::before,
body.marketplace-page .summary-amber::before {
  background: linear-gradient(
    90deg,
    rgba(21, 200, 255, 0.62) 0%,
    rgba(34, 191, 255, 0.62) 16%,
    rgba(47, 214, 210, 0.62) 32%,
    rgba(110, 232, 117, 0.62) 48%,
    rgba(216, 239, 84, 0.62) 64%,
    rgba(255, 228, 92, 0.62) 80%,
    rgba(255, 138, 107, 0.62) 100%
  );
}

body.marketplace-page .summary-card span,
body.marketplace-page .summary-card small,
body.marketplace-page .filter-group > span,
body.marketplace-page .search-box > span {
  color: #a8b0bd;
}

body.marketplace-page .summary-card strong,
body.marketplace-page .section-heading h2 {
  color: #fff;
}

body.marketplace-page .filter-btn {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(9, 9, 9, 0.64);
  color: #b8c0cc;
}

body.marketplace-page .filter-btn:hover,
body.marketplace-page .filter-btn.is-active {
  border-color: transparent;
  background:
    linear-gradient(#121212, #121212) padding-box,
    var(--page-title-gradient) border-box;
  color: #fff;
}

body.marketplace-page input[type="search"] {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 9, 0.98);
  color: #fff;
}

body.marketplace-page input[type="search"]::placeholder {
  color: #707886;
}

body.marketplace-page .card {
  isolation: isolate;
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.marketplace-page .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: var(--renaiss-hover-rainbow);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.18s ease;
}

body.marketplace-page .card::after {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  z-index: -1;
  filter: none;
  transform: none;
  box-shadow:
    0 0 22px rgba(255, 233, 110, 0.14),
    0 0 30px rgba(255, 87, 154, 0.16),
    0 0 38px rgba(64, 93, 255, 0.18);
  transition: opacity 0.18s ease;
}

body.marketplace-page .card:hover,
body.marketplace-page .card:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(9, 9, 9, 0.98);
  transform: translateY(-3px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
}

body.marketplace-page .card:hover::before,
body.marketplace-page .card:focus-visible::before {
  opacity: 1;
}

body.marketplace-page .card:hover::after,
body.marketplace-page .card:focus-visible::after {
  opacity: 1;
}

body.marketplace-page .card img {
  position: relative;
  z-index: 2;
  border-radius: 16px 16px 0 0;
}

body.marketplace-page .badge {
  z-index: 4;
}

body.marketplace-page .card-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 16px 16px;
  background: rgba(9, 9, 9, 0.98);
  padding: 12px;
  min-height: 148px;
}

body.marketplace-page .card > .watch-button {
  position: absolute;
  right: 10px;
  top: 10px;
  margin: 0;
}

body.marketplace-page .serial {
  color: #9ee7ff;
}

body.marketplace-page .name,
body.marketplace-page .meta strong {
  color: #f7f8fb;
}

body.marketplace-page .meta {
  color: #aab2bf;
}

body.marketplace-page .empty {
  background: rgba(12, 12, 12, 0.58);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 680px) {
  body.marketplace-page .topbar {
    margin-bottom: 32px;
  }

  body.marketplace-page.marketplace-home-page .topbar {
    margin-bottom: 0;
  }

  body.marketplace-page.section-home-page .topbar {
    margin-bottom: 28px;
  }

  body.marketplace-page .eyebrow {
    margin-bottom: 8px;
  }

  body.marketplace-page .marketplace-title {
    margin-bottom: 10px;
  }

  body.marketplace-page .marketplace-subtitle {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.45;
  }
}

body.marketplace-page.sequential-page .page {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  margin-inline: auto;
  padding: 34px clamp(18px, 3vw, 42px) 58px;
}

body.marketplace-page.sequential-page .page-hero {
  align-items: center;
  margin-bottom: 30px;
}

body.marketplace-page.sequential-page .page-hero h1 {
  font-size: clamp(42px, 8vw, 86px);
  line-height: 1.08;
  padding-bottom: 0.08em;
}

body.marketplace-page.sequential-page .summary {
  max-width: none;
  margin: 0;
  color: #d9e1ec;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

body.marketplace-page.sequential-page .primary-action {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    var(--page-title-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

body.marketplace-page.sequential-page .primary-action:hover {
  box-shadow: 0 16px 46px rgba(16, 144, 160, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.marketplace-page.sequential-page .status-message,
body.marketplace-page.sequential-page .muted-line {
  color: #a8b0bd;
}

body.marketplace-page.sequential-page .muted-line {
  margin-bottom: 18px;
}

body.marketplace-page.sequential-page .side-nav-parent:not([data-side-nav-toggle]) {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.9)) padding-box,
    var(--page-title-gradient) border-box;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 34px rgba(16, 48, 176, 0.16);
}

body.marketplace-page.sequential-page .side-subitem {
  position: relative;
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 9, 0.64);
  color: #b8c0cc;
}

body.marketplace-page.sequential-page .side-subitem:hover,
body.marketplace-page.sequential-page .side-subitem.is-active {
  border-color: transparent;
  background:
    linear-gradient(#121212, #121212) padding-box,
    var(--page-title-gradient) border-box;
  color: #fff;
}

body.marketplace-page.sequential-page .set-size-filter,
body.marketplace-page.sequential-page .stat-card,
body.marketplace-page.sequential-page .panel,
body.marketplace-page.sequential-page .sequential-set-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 12, 0.96);
  border-radius: 12px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  color: #f4f7fb;
}

body.marketplace-page.sequential-page .stat-card::before {
  inset: 0 0 auto;
  width: auto;
  height: 1px;
  background: var(--collectibles-gradient-soft);
}

body.marketplace-page.sequential-page .stat-card span,
body.marketplace-page.sequential-page .stat-card small,
body.marketplace-page.sequential-page .set-size-filter > span {
  color: #a8b0bd;
}

body.marketplace-page.sequential-page .stat-card strong,
body.marketplace-page.sequential-page .panel h2,
body.marketplace-page.sequential-page td {
  color: #fff;
}

body.marketplace-page.sequential-page th {
  color: #a8b0bd;
  font-size: var(--type-table-head);
}

body.marketplace-page.sequential-page th,
body.marketplace-page.sequential-page td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  font-size: var(--type-table);
}

body.marketplace-page.sequential-page .sequential-set-row:hover,
body.marketplace-page.sequential-page .sequential-set-row:focus-within {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 12, 0.96);
  transform: none;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body.marketplace-page.sequential-page .sequential-set-row > .set-summary,
body.marketplace-page.sequential-page .sequential-set-row > .set-card-scroller {
  position: relative;
  z-index: 2;
}

body.marketplace-page.sequential-page .set-summary {
  align-items: stretch;
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

body.marketplace-page.sequential-page .set-rank {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 900;
}

body.marketplace-page.sequential-page .set-range,
body.marketplace-page.sequential-page .set-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.marketplace-page.sequential-page .set-range span,
body.marketplace-page.sequential-page .set-total span {
  color: rgba(196, 208, 222, 0.72);
}

body.marketplace-page.sequential-page .set-range strong {
  color: #eef2f7;
}

body.marketplace-page.sequential-page .set-total strong {
  color: #fff;
}

body.marketplace-page.sequential-page .set-size-chip {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  padding: 0 12px;
  border: 1px solid rgba(174, 192, 210, 0.18);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(16, 48, 176, 0.2),
    rgba(16, 160, 128, 0.13) 52%,
    rgba(240, 96, 16, 0.12)
  );
  color: rgba(238, 245, 252, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.marketplace-page.sequential-page .set-arrow {
  color: rgba(238, 245, 252, 0.72);
}

body.marketplace-page.sequential-page .sequential-results-section {
  margin-top: 18px;
}

body.marketplace-page.sequential-page .sequential-results-heading {
  margin-bottom: 12px;
}

body.marketplace-page.sequential-page .sequential-results-heading h2 {
  margin: 0;
  color: #fff;
  font-size: var(--type-section-title);
  font-weight: var(--type-section-title-weight);
  line-height: 1.25;
}

body.marketplace-page.sequential-page .sequential-results-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body.marketplace-page.sequential-page .table-thumb,
body.marketplace-page.sequential-page .set-card-mini-media img {
  background: #111;
}

body.marketplace-page.sequential-page .set-card-mini {
  display: grid;
  flex: 0 0 360px;
  width: 360px;
  max-width: 360px;
  min-width: 360px;
  min-height: 176px;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: #f4f7fb;
}

body.marketplace-page.sequential-page .set-card-mini strong {
  color: #eef2f7;
}

body.marketplace-page.sequential-page .set-card-mini span {
  color: rgba(196, 208, 222, 0.72);
}

body.marketplace-page.sequential-page .set-card-mini .set-card-price {
  color: #eef2f7;
  font-weight: 800;
}

body.marketplace-page.sequential-page .set-card-mini .set-card-fmv {
  color: rgba(196, 208, 222, 0.72);
  font-weight: 700;
}

body.marketplace-page.sequential-page .set-card-mini-media {
  position: relative;
  z-index: 2;
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  height: 176px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

body.marketplace-page.sequential-page .set-card-mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.marketplace-page.sequential-page .set-card-mini-media .gacha-pack-media-rip-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

body.marketplace-page.sequential-page .set-card-mini-media:hover .gacha-pack-media-rip-overlay,
body.marketplace-page.sequential-page .set-card-mini-media:focus-within .gacha-pack-media-rip-overlay {
  opacity: 1;
}

body.marketplace-page.sequential-page .set-card-mini-media .gacha-pack-media-rip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0 8px;
  pointer-events: auto;
  border: 1px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#101010, #101010) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

body.marketplace-page.sequential-page .set-card-mini-media .gacha-pack-media-rip-btn:hover {
  background:
    linear-gradient(#161616, #161616) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
  transform: translateY(-1px);
}

body.marketplace-page.sequential-page .set-card-mini > div {
  position: relative;
  z-index: 2;
}

body.marketplace-page.sequential-page .set-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

body.marketplace-page.sequential-page .sequential-card-action {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

body.marketplace-page.sequential-page .sequential-card-action:hover,
body.marketplace-page.sequential-page .sequential-card-action:focus-visible {
  background:
    linear-gradient(rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.98)) padding-box,
    var(--collectibles-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 34px rgba(21, 200, 255, 0.08), 0 0 22px rgba(255, 138, 107, 0.06);
  transform: translateY(-1px);
}

body.marketplace-page.sequential-page .sequential-card-watchlist {
  border-color: rgba(110, 231, 242, 0.18);
}

body.marketplace-page.sequential-page .sequential-card-portfolio {
  border-color: rgba(245, 196, 81, 0.18);
}

body.marketplace-page.sequential-page .sequential-add-panel {
  width: min(560px, calc(100vw - 24px));
}

body.marketplace-page.sequential-page .sequential-add-form button[type="submit"] {
  width: 100%;
}

body.marketplace-page.sequential-page .gacha-warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 81, 0.25);
  border-radius: 8px;
  background: rgba(245, 196, 81, 0.08);
  color: rgba(255, 238, 190, 0.94);
  font-size: 15px;
  line-height: 1.5;
}

body.marketplace-page.sequential-page .gacha-warning[hidden] {
  display: none;
}

@media (max-width: 680px) {
  body.marketplace-page.sequential-page .page {
    padding: 22px 12px 44px;
  }

  body.marketplace-page.sequential-page .page-hero {
    margin-bottom: 22px;
  }
}

body.marketplace-page #refreshCards,
body.marketplace-page .primary-action,
body.marketplace-page .filter-btn,
body.marketplace-page .tab-btn,
body.marketplace-page .side-subitem,
body.marketplace-page .modal-action {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(12, 12, 12, 0.96), rgba(12, 12, 12, 0.96)) padding-box,
    var(--collectibles-gradient-soft) border-box;
  color: #d8e3ee;
  box-shadow: none;
}

body.marketplace-page #refreshCards,
body.marketplace-page .primary-action,
body.marketplace-page .modal-action {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    var(--collectibles-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

body.marketplace-page #refreshCards:hover,
body.marketplace-page .primary-action:hover,
body.marketplace-page .modal-action:hover,
body.marketplace-page .filter-btn:hover,
body.marketplace-page .tab-btn:hover,
body.marketplace-page .side-subitem:hover {
  background:
    linear-gradient(rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.98)) padding-box,
    var(--collectibles-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 34px rgba(21, 200, 255, 0.08), 0 0 22px rgba(255, 138, 107, 0.06);
}

body.marketplace-page .marketplace-filters--renaiss {
  --renaiss-filter-bg: #090909;
  --renaiss-input-bg: #131313;
  margin: 0 -24px 22px;
  padding: 0 24px;
}

body.marketplace-page .marketplace-filter-sticky {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--renaiss-filter-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-filter-sticky {
    gap: 16px;
    padding-top: 24px;
  }
}

body.marketplace-page .marketplace-filter-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.marketplace-page .marketplace-filter-scroll::-webkit-scrollbar {
  display: none;
}

body.marketplace-page .marketplace-filter-lane-row {
  display: flex;
  align-items: center;
  min-width: max-content;
  padding-bottom: 8px;
}

body.marketplace-page .marketplace-filter-lane-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: max-content;
}

body.marketplace-page .marketplace-filter-lane-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

body.marketplace-page .marketplace-filter-selected-group {
  --marketplace-pill-overlap: 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

body.marketplace-page .marketplace-filter-selected-group .marketplace-filter-pill.is-selected-collapsed:not(:first-child) {
  margin-left: calc(-1 * var(--marketplace-pill-overlap));
}

body.marketplace-page .marketplace-filter-selected-group .marketplace-filter-pill.is-selected-collapsed {
  position: relative;
  flex: 0 0 auto;
  background: var(--renaiss-filter-bg);
  box-shadow: -3px 0 0 var(--renaiss-filter-bg);
}

body.marketplace-page .marketplace-filter-divider {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  min-height: 32px;
  margin: 0 16px;
  background: rgba(255, 255, 255, 0.2);
}

body.marketplace-page .marketplace-filter-options-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}

body.marketplace-page .marketplace-filter-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

body.marketplace-page .marketplace-filter-pill:active {
  transform: scale(0.98);
}

body.marketplace-page .marketplace-filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.marketplace-page .marketplace-filter-pill-inner,
body.marketplace-page .marketplace-filter-pill-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.marketplace-page .marketplace-filter-pill-inner svg,
body.marketplace-page .marketplace-filter-pill-content svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

body.marketplace-page .marketplace-filter-pill {
  padding: 8px 16px;
}

body.marketplace-page .marketplace-filter-pill.is-selected-collapsed {
  border-color: rgba(255, 255, 255, 0.5);
  background: var(--renaiss-filter-bg);
  color: #fff;
  font-weight: 600;
}

body.marketplace-page .marketplace-filter-pill.is-selected-collapsed .marketplace-filter-pill-content svg:last-child {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  opacity: 1;
}

body.marketplace-page .marketplace-filter-toolbar {
  padding-bottom: 16px;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-filter-toolbar {
    padding-bottom: 24px;
  }
}

body.marketplace-page .marketplace-filter-toolbar-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-filter-toolbar-row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

body.marketplace-page .marketplace-filter-toolbar-primary {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-filter-toolbar-primary {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

body.marketplace-page .marketplace-listed-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  user-select: none;
}

body.marketplace-page .marketplace-listed-switch {
  position: relative;
  width: 48px;
  height: 24px;
  flex: 0 0 48px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #000;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

body.marketplace-page .marketplace-listed-switch.is-checked {
  border-color: transparent;
  background: var(--renaiss-hover-rainbow);
}

body.marketplace-page .marketplace-listed-switch-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transform: translate(0, -50%) scale(0.7);
  transition: transform 0.16s ease;
}

body.marketplace-page .marketplace-listed-switch.is-checked .marketplace-listed-switch-thumb {
  transform: translate(24px, -50%) scale(0.7);
}

body.marketplace-page .marketplace-listed-toggle-label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

body.marketplace-page .marketplace-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

body.marketplace-page .marketplace-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  display: flex;
  width: 20px;
  height: 20px;
  color: #9ca3af;
  pointer-events: none;
  transform: translateY(-50%);
}

body.marketplace-page .marketplace-search-icon svg {
  width: 20px;
  height: 20px;
}

body.marketplace-page .marketplace-search-field input[type="search"] {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: var(--renaiss-input-bg);
  color: #fff;
  padding: 0 16px 0 40px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.16s ease;
}

body.marketplace-page .marketplace-search-field input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

body.marketplace-page .marketplace-search-field input[type="search"]:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

body.marketplace-page .marketplace-sort-field--desktop {
  display: none;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-sort-field--desktop {
    display: block;
  }
}

body.marketplace-page .marketplace-sort-combobox {
  position: relative;
  display: flex;
  align-items: center;
}

body.marketplace-page .marketplace-sort-select {
  appearance: none;
  min-width: 240px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  padding: 0 36px 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.16s ease;
}

body.marketplace-page .marketplace-sort-select:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

body.marketplace-page .marketplace-sort-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform: translateY(-50%);
}

body.marketplace-page .marketplace-sort-chevron svg {
  width: 16px;
  height: 16px;
}

body.marketplace-page .marketplace-sort-mobile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: #07050f;
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

body.marketplace-page .marketplace-sort-mobile-btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

body.marketplace-page .marketplace-sort-mobile-chevron {
  display: flex;
  width: 16px;
  height: 16px;
}

body.marketplace-page .marketplace-sort-mobile-chevron svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-sort-mobile-btn {
    display: none;
  }
}

body.marketplace-page .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;
}


@media (max-width: 767px) {
  body.marketplace-page .marketplace-filters--renaiss {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Renaiss marketplace listing grid + card tiles */
body.marketplace-page .cards.marketplace-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 8px;
  align-items: stretch;
}

@media (min-width: 1280px) {
  body.marketplace-page .cards.marketplace-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 16px;
  }
}

@media (min-width: 1536px) {
  body.marketplace-page .cards.marketplace-listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1920px) {
  body.marketplace-page .cards.marketplace-listing-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.marketplace-page .card.marketplace-card {
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
  animation: marketplace-card-in 0.42s ease backwards;
  animation-delay: calc(var(--card-index, 0) * 50ms);
}

body.marketplace-page .card.marketplace-card::before,
body.marketplace-page .card.marketplace-card::after {
  content: none;
  display: none;
}

body.marketplace-page .card.marketplace-card:hover,
body.marketplace-page .card.marketplace-card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}

@keyframes marketplace-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

body.marketplace-page .marketplace-card-frame {
  position: relative;
  height: 100%;
  padding: 1px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}

body.marketplace-page .marketplace-card-rainbow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--renaiss-hover-rainbow);
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

body.marketplace-page .marketplace-card-rainbow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(8px);
}

body.marketplace-page .marketplace-card:hover .marketplace-card-rainbow,
body.marketplace-page .marketplace-card:focus-visible .marketplace-card-rainbow {
  opacity: 1;
}

body.marketplace-page .marketplace-card-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 11px;
  background: #131313;
}

body.marketplace-page .marketplace-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #131313;
}

body.marketplace-page .marketplace-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #131313;
}

body.marketplace-page .marketplace-card-listed-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #376833;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

body.marketplace-page .marketplace-card-listed-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #78ff6c;
}

body.marketplace-page .marketplace-card-new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(253, 198, 0, 0.18);
  color: #fdc600;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

body.marketplace-page .marketplace-card:has(.marketplace-card-listed-badge) .marketplace-card-new-badge {
  top: 44px;
}

body.marketplace-page .marketplace-card > .marketplace-card-frame .watch-button,
body.marketplace-page .marketplace-card-media > .watch-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

body.marketplace-page .marketplace-card-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: #131313;
  transition: background 0.18s ease;
}

body.marketplace-page .marketplace-card:hover .marketplace-card-footer,
body.marketplace-page .marketplace-card:focus-visible .marketplace-card-footer {
  background: rgba(255, 255, 255, 0.05);
}

body.marketplace-page .marketplace-card-title {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  body.marketplace-page .marketplace-card-title {
    font-size: 16px;
  }
}

body.marketplace-page .marketplace-card-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.marketplace-page .marketplace-card-price {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 1.2em;
}

@media (min-width: 640px) {
  body.marketplace-page .marketplace-card-price {
    font-size: 16px;
  }
}

body.marketplace-page .marketplace-card-fmv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  line-height: 1;
}

body.marketplace-page .marketplace-card-fmv-label {
  color: #fdc600;
  font-size: 12px;
  font-weight: 500;
}

body.marketplace-page .marketplace-card-fmv-value {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

body.marketplace-page .cards.marketplace-listing-grid .empty {
  border-radius: 12px;
}

body.marketplace-page .filters.filters--inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

body.marketplace-page .filters.filters--inline .filter-group,
body.marketplace-page .filters.filters--inline .search-box {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
}

body.marketplace-page .filters.filters--inline .filter-group--sort {
  flex: 0 0 190px;
}

body.marketplace-page .filters.filters--inline .filter-group--search {
  flex: 1 1 180px;
  min-width: 160px;
}

body.marketplace-page .filters .filter-control {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.marketplace-page .filters .filter-control > span {
  display: block;
  margin-bottom: 5px;
  color: #a8b0bd;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.marketplace-page .filters .segmented {
  flex-wrap: nowrap;
  gap: 4px;
}

body.marketplace-page .filters .filter-btn,
body.marketplace-page .filters .filter-select,
body.marketplace-page .filters input[type="search"] {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(9, 9, 9, 0.98);
  color: #b8c0cc;
  box-shadow: none;
}

body.marketplace-page .filters .filter-btn {
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

body.marketplace-page .filters .filter-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 34px;
  padding: 0 40px 0 12px;
  line-height: 34px;
  font-size: 12px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

body.marketplace-page .filters .search-box {
  padding: 0;
}

body.marketplace-page .filters .filter-select:hover,
body.marketplace-page .filters .filter-select:focus-visible,
body.marketplace-page .filters input[type="search"]:hover,
body.marketplace-page .filters input[type="search"]:focus-visible,
body.marketplace-page .filters .filter-btn:hover,
body.marketplace-page .filters .filter-btn.is-active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

body.marketplace-page .filters input[type="search"]::placeholder {
  color: #7f8997;
}

body.marketplace-page .filters .filter-select option {
  background: #0d0d0d;
  color: #fff;
}

body.marketplace-page .filters .select-wrap {
  isolation: isolate;
}

body.marketplace-page .filters .select-wrap::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 58%);
  pointer-events: none;
}

body.marketplace-page .filters .select-wrap:focus-within::before,
body.marketplace-page .filters .select-wrap:hover::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
}

@media (max-width: 1050px) {
  body.marketplace-page .filters.filters--inline {
    align-items: end;
  }
}

body.marketplace-page .filter-btn.is-active,
body.marketplace-page .tab-btn.is-active,
body.marketplace-page .side-subitem.is-active {
  background:
    linear-gradient(rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.98)) padding-box,
    var(--page-title-gradient) border-box;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 14px 34px rgba(47, 214, 210, 0.10);
}

body.marketplace-page button:disabled {
  cursor: wait;
  opacity: 0.62;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem {
  background: rgba(9, 9, 9, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0 8px rgba(0, 0, 0, 0.08);
  color: #b8c0cc;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem:hover {
  background: linear-gradient(
    135deg,
    rgba(17, 22, 30, 0.92) 0%,
    rgba(10, 14, 20, 0.96) 100%
  );
  border-color: rgba(83, 116, 163, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 8px rgba(70, 108, 160, 0.06);
  color: #d8e0ea;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem.is-active {
  background: linear-gradient(
    135deg,
    rgba(28, 43, 63, 0.98) 0%,
    rgba(15, 24, 36, 0.98) 100%
  );
  border-color: rgba(111, 151, 207, 1);
  box-shadow:
    inset 3px 0 0 rgba(120, 162, 219, 0.9),
    0 0 10px rgba(74, 112, 166, 0.12);
  color: #f3f5f8;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem:not(.is-active) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #aeb6c4;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem:not(.is-active):hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: #f3f5f8;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem {
  background: rgba(9, 9, 9, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0 8px rgba(0, 0, 0, 0.08);
  color: #b8c0cc;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem:hover {
  background: linear-gradient(
    135deg,
    rgba(17, 22, 30, 0.92) 0%,
    rgba(10, 14, 20, 0.96) 100%
  );
  border-color: rgba(83, 116, 163, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 8px rgba(70, 108, 160, 0.06);
  color: #d8e0ea;
}

body.marketplace-page.sequential-page .side-subnav .side-subitem.is-active {
  background: linear-gradient(
    135deg,
    rgba(28, 43, 63, 0.98) 0%,
    rgba(15, 24, 36, 0.98) 100%
  );
  border-color: rgba(111, 151, 207, 1);
  box-shadow:
    inset 3px 0 0 rgba(120, 162, 219, 0.9),
    0 0 10px rgba(74, 112, 166, 0.12);
  color: #f3f5f8;
}

body.marketplace-page.sequential-page .primary-action {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(12, 12, 12, 0.96), rgba(12, 12, 12, 0.96)) padding-box,
    var(--collectibles-gradient-soft) border-box;
  color: #d8e3ee;
  box-shadow: none;
}

body.marketplace-page.sequential-page .primary-action {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    var(--collectibles-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

body.marketplace-page.sequential-page .primary-action:hover {
  border-color: transparent;
  background:
    linear-gradient(rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.98)) padding-box,
    var(--collectibles-gradient) border-box;
  color: #fff;
  box-shadow: 0 14px 34px rgba(21, 200, 255, 0.08), 0 0 22px rgba(255, 138, 107, 0.06);
}

/* App extensions: gacha, onchain, verify links */
  color: #9fb0c4;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
}

  color: #fca5a5;
}

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 9, 9, 0.96);
}

  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 16px;
}

  display: grid;
  gap: 4px;
}

  margin: 0;
}

  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

  display: grid;
  gap: 12px;
}

  min-height: 900px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #050608;
}

  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  background: #050608;
}

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

  color: #9fb0c4;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #9fb0c4;
  font-size: 12px;
  font-weight: 700;
}

  white-space: nowrap;
}

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

  display: grid;
  gap: 8px;
}

  color: #9fb0c4;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(9, 9, 9, 0.96);
}

  display: grid;
  gap: 10px;
  padding: 12px;
}

  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

  color: #86efac;
}

  color: #fca5a5;
}

  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

  width: 100%;
  min-height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.02);
}

  display: block;
  width: 100%;
  height: 140px;
}

  display: grid;
  place-items: center;
  min-height: 140px;
  color: #9fb0c4;
  font-size: 12px;
  font-weight: 700;
}

  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #9fb0c4;
  font-size: 11px;
  font-weight: 700;
}

  white-space: nowrap;
}

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

  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  color: #9fb0c4;
  font-size: 11px;
  font-weight: 700;
}

  overflow: hidden;
}

  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  color: inherit;
}

  width: 68px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #d8e3ee;
  font-size: 22px;
  font-weight: 900;
}

  display: grid;
  gap: 3px;
  min-width: 0;
}

  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

  color: #9fb0c4;
  font-size: 11px;
  font-weight: 700;
}

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

    grid-template-columns: 1fr;
  }
}

.top-actions { display: flex; gap: 8px; align-items: center; }
.action-button { min-height: 38px; border: 1px solid rgba(110, 231, 242, 0.34); border-radius: 8px; padding: 0 14px; background: linear-gradient(180deg, rgba(110, 231, 242, 0.18), rgba(45, 212, 191, 0.1)); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 900; white-space: nowrap; }
.action-button:disabled { cursor: wait; opacity: 0.62; }
.status-strip { margin-bottom: 12px; }
.compact-empty { padding: 14px; }
.inline-count { color: var(--muted); font-size: 0.55em; font-weight: 800; }
.verify-links { margin-top: 12px; }
.verify-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.verify-link-card { display: grid; gap: 4px; min-height: 68px; border: 1px solid rgba(110, 231, 242, 0.28); border-radius: 8px; padding: 10px 12px; background: rgba(110, 231, 242, 0.08); color: var(--text); text-decoration: none; }
.verify-link-card:hover { border-color: rgba(110, 231, 242, 0.5); background: rgba(110, 231, 242, 0.14); }
.verify-link-card strong { font-size: 13px; }
.verify-link-card span { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; }
.pack-workspace { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); gap: 12px; margin-bottom: 12px; }
.pack-list { display: grid; gap: 8px; }
.pack-list-item { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.035); cursor: pointer; text-align: left; }
.pack-list-item:hover, .pack-list-item.is-active { border-color: rgba(110, 231, 242, 0.42); background: rgba(110, 231, 242, 0.08); }
.pack-list-item strong, .pack-list-item span { display: block; }
.pack-list-item strong { color: var(--text); font-size: 14px; }
.pack-list-item span { color: var(--muted); font-size: 12px; }
.pack-detail { display: grid; gap: 12px; }
.pack-pull-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.pack-pull-card img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--panel-3); }
.plasma-only-panel[hidden] { display: none !important; }
.limited-pack-panel, .open-events-panel, .latest-mints-panel, .pack-manager, .onchain-panel { margin-top: 12px; }
.limited-pack-summary, .latest-mint-summary { margin-bottom: 12px; }
.limited-subheading h3 { margin: 0 0 10px; font-size: 14px; }
.limited-recent-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.limited-recent-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: rgba(255, 255, 255, 0.035); }
.limited-recent-card img, .limited-recent-card .token-image-fallback { width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; object-fit: cover; background: var(--panel-3); }
.limited-recent-meta { display: grid; gap: 4px; }
.limited-recent-meta strong { font-size: 12px; line-height: 1.3; }
.limited-recent-card small { color: var(--muted); font-size: 11px; }
.limited-filter-bar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 0.7fr)); gap: 10px; margin-bottom: 10px; }
.limited-pack-count { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 900; }
.status-pulled { border: 1px solid rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); color: #fecaca; }
.status-remaining { border: 1px solid rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.12); color: #a7f3d0; }
.latest-mint-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.latest-mint-card img, .token-image-fallback { width: 72px; aspect-ratio: 3 / 4; border-radius: 6px; object-fit: cover; background: var(--panel-3); }
.tier-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 900; }
.tier-badge.tier-top { background: rgba(255, 233, 110, 0.16); color: var(--renaiss-grade-top); }
.tier-badge.tier-s { background: rgba(255, 200, 0, 0.16); color: var(--renaiss-grade-s); }
.tier-badge.tier-a { background: rgba(255, 111, 0, 0.16); color: var(--renaiss-grade-a); }
.tier-badge.tier-b { background: rgba(255, 94, 134, 0.16); color: var(--renaiss-grade-b); }
.tier-badge.tier-c { background: rgba(130, 96, 255, 0.16); color: var(--renaiss-grade-c); }
.tier-badge.tier-d,
.tier-badge.tier-empty { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.field-label { display: grid; gap: 7px; min-width: 0; }
.field-label span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.field-label input, .field-label select { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: rgba(4, 8, 15, 0.92); color: var(--text); }
.onchain-form { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.mint-form { grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(100px, 140px) auto; }
.contract-form { grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(150px, 0.8fr)) minmax(100px, 130px) auto; }
.onchain-result { display: grid; gap: 12px; }
.onchain-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.onchain-summary > div, .transfer-row, .mint-event, .onchain-token { border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.035); }
.onchain-summary > div { padding: 11px; }
.onchain-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr); gap: 12px; }
.onchain-token { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; margin-bottom: 10px; }
.onchain-token img { width: 96px; aspect-ratio: 3 / 4; border-radius: 6px; object-fit: cover; }
.mint-list { display: grid; gap: 10px; }
.mint-event { padding: 12px; }
body.marketplace-page .main .marketplace-title, body.marketplace-page .page-hero .marketplace-title { display: inline-block; margin-bottom: 14px; background: var(--page-title-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 900; }
body.marketplace-page.marketplace-home-page .main .marketplace-title {
  margin-bottom: 0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f8fafc;
  color: #f8fafc;
  font-size: var(--type-page-title);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
}

body.marketplace-page.section-home-page .main .marketplace-title,
body.marketplace-page.section-home-page .page .marketplace-title,
body.marketplace-page.gacha-detail-page .main .marketplace-title,
body.marketplace-page.gacha-transactions-page .main .marketplace-title {
  margin-bottom: 0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f8fafc;
  color: #f8fafc;
  font-size: var(--type-page-title);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
}
body.marketplace-page .main h1:not(.marketplace-title) { font-size: clamp(42px, 8vw, 86px); line-height: 0.95; }
body.marketplace-page .summary, body.marketplace-page .marketplace-subtitle { max-width: none; margin: 0; color: #d9e1ec; font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; line-height: 1.55; }
body.marketplace-page .panel, body.marketplace-page .stat-card, body.marketplace-page .status-strip, body.marketplace-page .pack-list-item, body.marketplace-page .limited-recent-card { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(9, 9, 9, 0.98); border-radius: 12px; box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34); }
body.marketplace-page .action-button { border: 1px solid transparent; background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, var(--collectibles-gradient) border-box; color: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); }
@media (max-width: 1050px) { .pack-workspace, .limited-filter-bar, .mint-form, .contract-form, .onchain-columns, .onchain-summary, .limited-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pack-workspace, .limited-filter-bar, .mint-form, .contract-form, .onchain-columns, .onchain-form, .onchain-summary, .limited-recent-grid { grid-template-columns: 1fr; } }

/* Watchlist page additions */
body.marketplace-page.watchlist-page .watchlist-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.marketplace-page.watchlist-page .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-decoration: none;
}

body.marketplace-page.watchlist-page .watchlist-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

body.marketplace-page.watchlist-page .top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.marketplace-page.watchlist-page .watch-external-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.marketplace-page.watchlist-page .portfolio-file-field { display: grid; gap: 6px; color: #d8e3ee; font-size: 12px; font-weight: 900; }
body.marketplace-page.watchlist-page .portfolio-file-field[hidden] { display: none !important; }
body.marketplace-page.watchlist-page .portfolio-file-control { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: rgba(255, 255, 255, 0.045); color: #fff; cursor: pointer; overflow: hidden; }
body.marketplace-page.watchlist-page .portfolio-file-control input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.marketplace-page.watchlist-page .portfolio-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none; }
body.marketplace-page.watchlist-page .portfolio-file-name { position: relative; min-width: 0; color: #b8c2d0; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }

body.marketplace-page.watchlist-page .watchlist-panel {
  min-height: 360px;
}

body.marketplace-page.watchlist-page .watch-list {
  display: grid;
  gap: 12px;
}

body.marketplace-page.watchlist-page .watch-card,
body.marketplace-page.watchlist-page .watch-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body.marketplace-page.watchlist-page .watch-card img,
body.marketplace-page.watchlist-page .watch-row img,
body.marketplace-page.watchlist-page .watch-card-fallback,
body.marketplace-page.watchlist-page .token-image-fallback {
  width: 76px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: cover;
  background:
    linear-gradient(rgba(9, 9, 9, 0.72), rgba(9, 9, 9, 0.72)) padding-box,
    var(--collectibles-gradient-soft) border-box;
}

body.marketplace-page.watchlist-page .watch-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.marketplace-page.watchlist-page .watch-card-title,
body.marketplace-page.watchlist-page .watch-main > strong {
  color: #fff;
  font-size: var(--type-list-title);
  line-height: 1.25;
}

body.marketplace-page.watchlist-page .watch-card-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.marketplace-page.watchlist-page .watch-card-prices span,
body.marketplace-page.watchlist-page .watch-main span,
body.marketplace-page.watchlist-page .watch-main small {
  color: #a8b0bd;
  font-size: var(--type-list-meta);
  font-weight: 700;
}

body.marketplace-page.watchlist-page .watch-card-prices strong {
  color: #fff;
}

body.marketplace-page.watchlist-page .watch-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  align-self: center;
  margin-left: 4px;
}

body.marketplace-page.watchlist-page .watchlist-open,
body.marketplace-page.watchlist-page .watchlist-open:link,
body.marketplace-page.watchlist-page .watchlist-open:visited,
body.marketplace-page.watchlist-page .watchlist-portfolio,
body.marketplace-page.watchlist-page .watchlist-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.15s ease, transform 0.18s ease;
}

body.marketplace-page.watchlist-page .watchlist-open::before,
body.marketplace-page.watchlist-page .watchlist-portfolio::before,
body.marketplace-page.watchlist-page .watchlist-remove::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--renaiss-hover-rainbow);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.18s ease;
}

body.marketplace-page.watchlist-page .watchlist-open::after,
body.marketplace-page.watchlist-page .watchlist-portfolio::after,
body.marketplace-page.watchlist-page .watchlist-remove::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 22px rgba(255, 233, 110, 0.14),
    0 0 30px rgba(255, 87, 154, 0.16),
    0 0 38px rgba(64, 93, 255, 0.18);
  transition: opacity 0.18s ease;
}

body.marketplace-page.watchlist-page .watchlist-open,
body.marketplace-page.watchlist-page .watchlist-open:link,
body.marketplace-page.watchlist-page .watchlist-open:visited {
  color: rgba(238, 242, 247, 0.92);
  text-decoration: none;
}

body.marketplace-page.watchlist-page .watchlist-portfolio {
  color: rgba(238, 242, 247, 0.92);
}

body.marketplace-page.watchlist-page .watchlist-remove {
  color: rgba(238, 242, 247, 0.92);
}

body.marketplace-page.watchlist-page .watchlist-open:hover,
body.marketplace-page.watchlist-page .watchlist-open:focus-visible,
body.marketplace-page.watchlist-page .watchlist-portfolio:hover,
body.marketplace-page.watchlist-page .watchlist-portfolio:focus-visible,
body.marketplace-page.watchlist-page .watchlist-remove:hover,
body.marketplace-page.watchlist-page .watchlist-remove:focus-visible {
  border-color: transparent;
  background: rgba(14, 14, 14, 0.98);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

body.marketplace-page.watchlist-page .watchlist-open:hover::before,
body.marketplace-page.watchlist-page .watchlist-open:focus-visible::before,
body.marketplace-page.watchlist-page .watchlist-portfolio:hover::before,
body.marketplace-page.watchlist-page .watchlist-portfolio:focus-visible::before,
body.marketplace-page.watchlist-page .watchlist-remove:hover::before,
body.marketplace-page.watchlist-page .watchlist-remove:focus-visible::before,
body.marketplace-page.watchlist-page .watchlist-open:hover::after,
body.marketplace-page.watchlist-page .watchlist-open:focus-visible::after,
body.marketplace-page.watchlist-page .watchlist-portfolio:hover::after,
body.marketplace-page.watchlist-page .watchlist-portfolio:focus-visible::after,
body.marketplace-page.watchlist-page .watchlist-remove:hover::after,
body.marketplace-page.watchlist-page .watchlist-remove:focus-visible::after {
  opacity: 1;
}

body.marketplace-page.watchlist-page .watchlist-portfolio:disabled,
body.marketplace-page.watchlist-page .watchlist-remove:disabled {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(148, 163, 184, 0.72);
  cursor: wait;
  transform: none;
  box-shadow: none;
}

body.marketplace-page.watchlist-page .watchlist-portfolio:disabled::before,
body.marketplace-page.watchlist-page .watchlist-portfolio:disabled::after,
body.marketplace-page.watchlist-page .watchlist-remove:disabled::before,
body.marketplace-page.watchlist-page .watchlist-remove:disabled::after {
  opacity: 0;
}

body.marketplace-page.watchlist-page .watchlist-open,
body.marketplace-page.watchlist-page .watchlist-open:link,
body.marketplace-page.watchlist-page .watchlist-open:visited,
body.marketplace-page.watchlist-page .watchlist-portfolio,
body.marketplace-page.watchlist-page .watchlist-remove {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transform: none;
  box-shadow: none;
}

body.marketplace-page.watchlist-page .watchlist-open,
body.marketplace-page.watchlist-page .watchlist-open:link,
body.marketplace-page.watchlist-page .watchlist-open:visited {
  background: rgba(96, 165, 250, 0.08);
  color: #bfdbfe;
}

body.marketplace-page.watchlist-page .watchlist-portfolio {
  background: rgba(255, 255, 255, 0.04);
  color: #e4ebf7;
}

body.marketplace-page.watchlist-page .watchlist-remove {
  background: transparent;
  color: #ffb4b4;
}

body.marketplace-page.watchlist-page .watchlist-open::before,
body.marketplace-page.watchlist-page .watchlist-open::after,
body.marketplace-page.watchlist-page .watchlist-portfolio::before,
body.marketplace-page.watchlist-page .watchlist-portfolio::after,
body.marketplace-page.watchlist-page .watchlist-remove::before,
body.marketplace-page.watchlist-page .watchlist-remove::after {
  content: none;
}

body.marketplace-page.watchlist-page .watchlist-open:hover,
body.marketplace-page.watchlist-page .watchlist-open:focus-visible,
body.marketplace-page.watchlist-page .watchlist-portfolio:hover,
body.marketplace-page.watchlist-page .watchlist-portfolio:focus-visible,
body.marketplace-page.watchlist-page .watchlist-remove:hover,
body.marketplace-page.watchlist-page .watchlist-remove:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  outline: none;
  transform: none;
  box-shadow: none;
}

body.marketplace-page.watchlist-page .watchlist-open:hover,
body.marketplace-page.watchlist-page .watchlist-open:focus-visible {
  color: #dbeafe;
}

body.marketplace-page.watchlist-page .watchlist-portfolio:hover,
body.marketplace-page.watchlist-page .watchlist-portfolio:focus-visible {
  color: #f8fafc;
}

body.marketplace-page.watchlist-page .watchlist-remove:hover,
body.marketplace-page.watchlist-page .watchlist-remove:focus-visible {
  color: #fecaca;
}

body.marketplace-page.watchlist-page .watch-toast {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    var(--collectibles-gradient) border-box;
}

@media (max-width: 1050px) {
  body.marketplace-page.watchlist-page .watchlist-summary,
  body.marketplace-page.watchlist-page .watchlist-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.marketplace-page.watchlist-page .watch-card,
  body.marketplace-page.watchlist-page .watch-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  body.marketplace-page.watchlist-page .watch-card img,
  body.marketplace-page.watchlist-page .watch-row img,
  body.marketplace-page.watchlist-page .watch-card-fallback,
  body.marketplace-page.watchlist-page .token-image-fallback {
    width: 60px;
  }

  body.marketplace-page.watchlist-page .watch-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

body.marketplace-page.sequential-page .sequential-filter-panel {
  margin: 10px 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.marketplace-page.sequential-page .filter-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(330px, 1.1fr) minmax(300px, 0.95fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
}

body.marketplace-page.sequential-page .sequential-filter-panel .filter-panel {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body.marketplace-page.sequential-page .sequential-filter-panel .series-filter {
  min-width: 0;
}

body.marketplace-page.sequential-page .sequential-filter-panel .set-size-filter {
  min-width: 0;
}

body.marketplace-page.sequential-page .sequential-filter-panel .card-match-filter {
  min-width: 0;
}

body.marketplace-page.sequential-page .sequential-filter-panel .filter-label {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  transform: none;
  color: #a8b0bd;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

body.marketplace-page.sequential-page .sequential-filter-panel .set-size-filter {
  align-items: center;
}

body.marketplace-page.sequential-page .sequential-filter-panel .filter-buttons {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: auto;
  min-width: 0;
  margin: 0;
  transform: none;
  white-space: nowrap;
  border: 0;
  padding: 0;
  background: transparent;
}

body.marketplace-page.sequential-page .sequential-filter-panel {
  --filter-button-border: rgba(255, 255, 255, 0.16);
  --filter-button-border-active: rgba(255, 255, 255, 0.68);
  --filter-button-fill-active: rgba(255, 255, 255, 0.11);
}

body.marketplace-page.sequential-page .sequential-filter-panel .tab-btn,
body.marketplace-page.sequential-page .sequential-filter-panel .set-size-filter .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--filter-button-border);
  border-radius: 8px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.68);
  opacity: 1;
  box-shadow: none;
}

body.marketplace-page.sequential-page .sequential-filter-panel .tab-btn:hover,
body.marketplace-page.sequential-page .sequential-filter-panel .set-size-filter .tab-btn:hover {
  border-color: var(--filter-button-border-active);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.marketplace-page.sequential-page .sequential-filter-panel .tab-btn.is-active,
body.marketplace-page.sequential-page .sequential-filter-panel .set-size-filter .tab-btn.is-active {
  border-color: var(--filter-button-border-active);
  background: linear-gradient(180deg, var(--filter-button-fill-active), rgba(255, 255, 255, 0.065));
  color: #ffffff;
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.18);
}

body.marketplace-page.sequential-page .series-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

body.marketplace-page.sequential-page .one-piece-dot {
  background: rgba(248, 88, 88, 0.82);
}

body.marketplace-page.sequential-page .pokemon-dot {
  background: rgba(245, 196, 81, 0.88);
}

@media (max-width: 1100px) {
  body.marketplace-page.sequential-page .filter-toolbar {
    grid-template-columns: 1fr;
  }

  body.marketplace-page.sequential-page .sequential-filter-panel .filter-panel {
    column-gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  body.marketplace-page.sequential-page .sequential-filter-panel .filter-buttons {
    gap: 5px;
  }
}

@media (max-width: 760px) {
  body.marketplace-page.sequential-page .summary {
    white-space: normal;
  }

  body.marketplace-page.sequential-page .filter-toolbar {
    grid-template-columns: 1fr;
  }

  body.marketplace-page.sequential-page .sequential-filter-panel .filter-panel {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  body.marketplace-page.sequential-page .sequential-filter-panel .filter-buttons {
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
  }

  body.marketplace-page.sequential-page .sequential-filter-panel .tab-btn {
    flex: 1 1 auto;
  }
}

body.marketplace-page.gacha-browser-page .marketplace-subtitle {
  max-width: none;
  margin: 0;
  color: #d9e1ec;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.55;
}

body.marketplace-page.gacha-browser-page .status-strip {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-section {
  margin-top: 18px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-section .panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.marketplace-page.gacha-browser-page .gacha-warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 196, 81, 0.25);
  border-radius: 8px;
  background: rgba(245, 196, 81, 0.08);
  color: rgba(255, 238, 190, 0.94);
  font-size: 15px;
  line-height: 1.5;
}

body.marketplace-page.gacha-browser-page .gacha-summary-grid .stat-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  padding: 12px;
  overflow: hidden;
}

body.marketplace-page.gacha-browser-page .gacha-summary-grid .stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(21, 200, 255, 0.62) 0%,
    rgba(34, 191, 255, 0.62) 16%,
    rgba(47, 214, 210, 0.62) 32%,
    rgba(110, 232, 117, 0.62) 48%,
    rgba(216, 239, 84, 0.62) 64%,
    rgba(255, 228, 92, 0.62) 80%,
    rgba(255, 138, 107, 0.62) 100%
  );
}

body.marketplace-page.gacha-browser-page .gacha-summary-grid .stat-card span,
body.marketplace-page.gacha-browser-page .gacha-summary-grid .stat-card small {
  color: #a8b0bd;
}

body.marketplace-page.gacha-browser-page .gacha-summary-grid .stat-card strong {
  color: #fff;
}

body.marketplace-page.gacha-browser-page .gacha-pack-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(12, 12, 12, 0.96);
  color: #f4f7fb;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.16s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: var(--renaiss-hover-rainbow);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.18s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 22px rgba(255, 233, 110, 0.14),
    0 0 30px rgba(255, 87, 154, 0.16),
    0 0 38px rgba(64, 93, 255, 0.18);
  transition: opacity 0.18s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-visible {
  z-index: 2;
  border-color: transparent;
  background: rgba(14, 14, 14, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-visible::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within::before {
  opacity: 1;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-visible::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within::after {
  opacity: 1;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:hover),
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:hover),
body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:focus-within),
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:focus-within) {
  z-index: auto;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 12, 0.96);
  transform: none;
  box-shadow: none;
  cursor: default;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted:hover:has(.gacha-pack-media:hover),
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted:focus-within:has(.gacha-pack-media:hover),
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted:hover:has(.gacha-pack-media:focus-within),
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted:focus-within:has(.gacha-pack-media:focus-within) {
  background: rgba(7, 9, 11, 0.88);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:hover)::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:hover)::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:focus-within)::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:focus-within)::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:hover)::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:hover)::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card:hover:has(.gacha-pack-media:focus-within)::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within:has(.gacha-pack-media:focus-within)::after {
  opacity: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within {
  z-index: 2;
  border-color: transparent;
  background: rgba(14, 14, 14, 0.98);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted {
  background: rgba(7, 9, 11, 0.88);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-muted .gacha-pack-media {
  filter: brightness(0.68) saturate(0.82);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled {
  cursor: default;
  pointer-events: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:hover,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-visible,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-within {
  transform: none;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.08);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:hover::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-visible::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-within::before,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:hover::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-visible::after,
body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled:focus-within::after {
  opacity: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card.is-disabled .gacha-pack-media {
  cursor: default;
}

body.marketplace-page.gacha-browser-page .gacha-pack-media {
  position: relative;
  z-index: 2;
  flex: 0 0 292px;
  width: 292px;
  min-width: 292px;
  align-self: stretch;
  min-height: 220px;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
  background: rgba(255, 255, 255, 0.02);
}

body.marketplace-page.gacha-browser-page .gacha-pack-media-rip-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-media:hover .gacha-pack-media-rip-overlay,
body.marketplace-page.gacha-browser-page .gacha-pack-media:focus-within .gacha-pack-media-rip-overlay {
  opacity: 1;
}

body.marketplace-page.gacha-browser-page .gacha-pack-media-rip-btn {
  width: min(100%, 210px);
  min-height: 42px;
  margin: 0;
  pointer-events: auto;
  border: 1px solid transparent;
  background:
    linear-gradient(#101010, #101010) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-media-rip-btn:hover {
  background:
    linear-gradient(#161616, #161616) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
  transform: translateY(-1px);
}

body.marketplace-page.gacha-browser-page .gacha-pack-media img,
body.marketplace-page.gacha-browser-page .gacha-pack-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

body.marketplace-page.gacha-browser-page .gacha-pack-media.is-static-media img {
  animation: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(45, 212, 191, 0.08), rgba(5, 5, 5, 0.98) 62%);
}

body.marketplace-page.gacha-browser-page .gacha-pack-fallback img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.7;
}

body.marketplace-page.gacha-browser-page .gacha-pack-badge {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 20px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(174, 192, 210, 0.18);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  color: rgba(238, 245, 252, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  box-shadow: none;
  pointer-events: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

body.marketplace-page.gacha-browser-page .pack-status-live {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(5, 5, 5, 0.9);
  color: #ffffff;
}

body.marketplace-page.gacha-browser-page .pack-status-live::before {
  background: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}

body.marketplace-page.gacha-browser-page .pack-status-sold-out,
body.marketplace-page.gacha-browser-page .pack-status-ended {
  border-color: rgba(174, 192, 210, 0.18);
  background: rgba(15, 18, 22, 0.78);
  color: rgba(215, 222, 230, 0.82);
}

body.marketplace-page.gacha-browser-page .pack-status-sold-out::before,
body.marketplace-page.gacha-browser-page .pack-status-ended::before {
  background: #fb7185;
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.82);
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 22px 20px 0;
  background: transparent;
  overflow: hidden;
  border: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-below {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  align-content: stretch;
  padding-top: 4px;
  cursor: default;
}

body.marketplace-page.gacha-browser-page .gacha-pack-below-label {
  margin: 0 0 10px;
  color: #eef2f7;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-panel,
body.marketplace-page.gacha-browser-page .gacha-pack-alert-panel {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-panel > .gacha-pack-tier-list {
  width: 100%;
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-title-block {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 10px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-name {
  flex: 0 1 auto;
  min-width: 0;
  color: #f4f7fb;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-title-block .gacha-pack-price {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

body.marketplace-page.gacha-browser-page .gacha-pack-history-link {
  color: rgba(196, 208, 222, 0.78);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-history-link:hover,
body.marketplace-page.gacha-browser-page .gacha-pack-history-link:focus-visible {
  color: rgba(196, 208, 222, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-copy {
  margin: 0;
  flex: 1;
  color: rgba(196, 208, 222, 0.82);
  font-size: 13px;
  line-height: 1.55;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-copy.is-fired {
  display: grid;
  gap: 5px;
  margin-top: 2px;
  padding: 11px 12px;
  border: 1px solid var(--alert-border, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  background: transparent;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-fired-label {
  display: block;
  color: var(--alert-accent, #f8fbff);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-fired-line {
  display: block;
  color: rgba(232, 236, 242, 0.88);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.alert-theme-ev-premium {
  --alert-accent: rgba(255, 160, 90, 0.9);
  --alert-border: rgba(255, 111, 0, 0.26);
  --alert-bg: rgba(255, 111, 0, 0.1);
}

.alert-theme-top-pull {
  --alert-accent: rgba(255, 216, 90, 0.88);
  --alert-border: rgba(255, 200, 0, 0.26);
  --alert-bg: rgba(255, 200, 0, 0.1);
}

.alert-theme-market-profit {
  --alert-accent: rgba(255, 150, 180, 0.9);
  --alert-border: rgba(255, 94, 134, 0.26);
  --alert-bg: rgba(255, 94, 134, 0.1);
}

.alert-theme-base-tier-streak {
  --alert-accent: rgba(178, 158, 255, 0.9);
  --alert-border: rgba(130, 96, 255, 0.26);
  --alert-bg: rgba(130, 96, 255, 0.1);
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-header .gacha-pack-below-label {
  margin: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-set-btn {
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(196, 208, 222, 0.88);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-set-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(238, 242, 247, 0.96);
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-active-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-active-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--alert-border, rgba(255, 255, 255, 0.2));
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--alert-bg, rgba(255, 255, 255, 0.05));
  color: var(--alert-accent, #f8fbff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-footer {
  margin-top: 10px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-detail-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 242, 247, 0.96);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.marketplace-page.gacha-browser-page .gacha-pack-alert-detail-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.gacha-alert-history-modal {
  z-index: 186;
}

.gacha-alert-history-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 420px);
  overflow: auto;
}

.gacha-alert-history-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gacha-alert-history-delete {
  min-height: 34px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gacha-alert-history-delete:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.52);
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

.gacha-alert-history-delete:disabled {
  opacity: 0.65;
  cursor: wait;
}

.gacha-alert-history-loading,
.gacha-alert-history-empty {
  margin: 0;
  color: #aeb6c4;
  font-size: 12px;
  line-height: 1.5;
}

.gacha-alert-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gacha-alert-history-card {
  border: 1px solid var(--alert-border, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--alert-bg, rgba(255, 255, 255, 0.03));
}

.gacha-alert-history-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.gacha-alert-history-rule {
  color: var(--alert-accent, #fff);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.gacha-alert-history-when {
  color: #9299a5;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.gacha-alert-history-detail {
  margin: 0;
  color: rgba(232, 236, 242, 0.86);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.gacha-alert-history-line {
  margin: 0;
  color: color-mix(in srgb, var(--alert-accent, #aeb6c4) 62%, rgba(232, 236, 242, 0.82));
  font-size: 12px;
  line-height: 1.55;
}

.gacha-alert-toast {
  z-index: 220;
  display: grid;
  gap: 4px;
  max-width: min(92vw, 480px);
  border: 1px solid var(--alert-border, rgba(255, 255, 255, 0.2));
  border-radius: 12px;
  padding: 12px 14px;
  background:
    linear-gradient(0deg, var(--alert-bg, rgba(255, 255, 255, 0.04)), var(--alert-bg, rgba(255, 255, 255, 0.04))),
    rgba(8, 8, 8, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color: #f8fbff;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.gacha-alert-toast-pack {
  display: block;
  color: #f8fbff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.gacha-alert-toast-line {
  display: block;
  color: #c4cedd;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.gacha-alert-modal[hidden] {
  display: none;
}

.gacha-alert-modal {
  z-index: 185;
}

.gacha-alert-modal .auth-modal-panel {
  width: min(92vw, 460px);
  max-height: min(88vh, 760px);
  overflow: auto;
}

.gacha-alert-form {
  margin-top: 0;
}

.gacha-alert-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 4px 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.gacha-alert-rule:first-child {
  border-top: 0;
  padding-top: 0;
}

.gacha-alert-rule-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gacha-alert-switch {
  grid-row: 1 / span 3;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.gacha-alert-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}

.gacha-alert-rule-check:checked + .gacha-alert-switch {
  border-color: transparent;
  background: var(--renaiss-hover-rainbow);
  box-shadow: none;
}

.gacha-alert-rule-check:checked + .gacha-alert-switch .gacha-alert-switch-thumb {
  transform: translateX(18px);
  background: #fff;
}

.gacha-alert-rule-check:focus-visible + .gacha-alert-switch {
  outline: 2px solid rgba(255, 255, 255, 0.42);
  outline-offset: 2px;
}

.gacha-alert-rule:has(.gacha-alert-rule-check:not(:checked)) .gacha-alert-rule-controls {
  opacity: 0.42;
  pointer-events: none;
}

.gacha-alert-rule-heading {
  color: #d8e3ee;
  font-size: 12px;
  font-weight: 900;
}

.gacha-alert-rule-desc {
  grid-column: 2;
  color: #aeb6c4;
  font-size: 12px;
  line-height: 1.45;
}

.gacha-alert-rule-controls {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gacha-alert-threshold-input {
  width: 88px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font: inherit;
  outline: none;
}

.gacha-alert-threshold-input:focus {
  border-color: rgba(255, 255, 255, 0.32);
}

.gacha-alert-input-suffix {
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 900;
}

.gacha-alert-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #050505;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.gacha-alert-save:disabled {
  opacity: 0.65;
  cursor: wait;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-row {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) minmax(48px, auto);
  gap: 10px;
  align-items: center;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name {
  color: rgba(217, 225, 236, 0.92);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.18);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-crown,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-crown {
  color: rgba(255, 233, 110, 0.88);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-crown {
  background: linear-gradient(90deg, rgba(255, 233, 110, 0.38), rgba(255, 104, 153, 0.22));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-s,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-s {
  color: rgba(255, 216, 90, 0.88);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-s {
  background: linear-gradient(90deg, rgba(255, 200, 0, 0.36), rgba(255, 216, 90, 0.22));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-a,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-a {
  color: rgba(255, 160, 90, 0.9);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-a {
  background: linear-gradient(90deg, rgba(255, 111, 0, 0.34), rgba(255, 145, 59, 0.2));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-b,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-b {
  color: rgba(255, 150, 180, 0.9);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-b {
  background: linear-gradient(90deg, rgba(255, 94, 134, 0.34), rgba(255, 130, 160, 0.2));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-c,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-c {
  color: rgba(178, 158, 255, 0.9);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-c {
  background: linear-gradient(90deg, rgba(130, 96, 255, 0.34), rgba(168, 85, 247, 0.2));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-name.is-tier-neutral,
body.marketplace-page.gacha-browser-page .gacha-pack-tier-chance.is-tier-neutral {
  color: rgba(196, 208, 222, 0.82);
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-bar-fill.is-tier-neutral {
  background: linear-gradient(90deg, rgba(196, 208, 222, 0.28), rgba(148, 163, 184, 0.18));
}

body.marketplace-page.gacha-browser-page .gacha-pack-tier-empty {
  margin: 0;
  color: rgba(196, 208, 222, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-header .gacha-pack-rip-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-header .rip-fun-button-inline {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card-header .rip-fun-button-inline:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

body.marketplace-page.gacha-browser-page .gacha-pack-price {
  color: rgba(255, 238, 190, 0.9);
  font-weight: 700;
  white-space: nowrap;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metrics {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric:last-child {
  border-right: 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-label {
  color: rgba(196, 208, 222, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value {
  color: #eef2f7;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-positive {
  color: #86efac;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-negative {
  color: #fca5a5;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-neutral {
  color: #d9e1ec;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-volatility-low {
  color: #86efac;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-risk-low {
  color: #86efac;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-volatility-med {
  color: #f6d28b;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-risk-medium {
  color: #f6d28b;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-volatility-high {
  color: #fca5a5;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-value.is-risk-high {
  color: #fca5a5;
  text-transform: lowercase;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card .gacha-pack-metric-label {
  display: block;
  font-size: 12px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card .gacha-pack-metric {
  align-items: center;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 5px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card .gacha-pack-metric-value {
  font-size: 15px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric.is-pack-price-back {
  align-items: center;
  text-align: center;
  gap: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-header {
  display: block;
  width: 100%;
  color: rgba(196, 208, 222, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric.is-pack-price-back .gacha-pack-metric-value {
  color: #f4f7fb;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

body.marketplace-page.gacha-browser-page .gacha-pack-metric-sublabel {
  display: block;
  width: 100%;
  color: rgba(196, 208, 222, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
}

body.marketplace-page.gacha-browser-page .gacha-pack-card:hover .gacha-pack-price,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-visible .gacha-pack-price,
body.marketplace-page.gacha-browser-page .gacha-pack-card:focus-within .gacha-pack-price {
  color: rgba(255, 238, 190, 1);
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(12, 12, 12, 0.96);
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-media {
  flex: 0 0 292px;
  width: 292px;
  min-height: 220px;
  background: linear-gradient(110deg, rgba(11, 14, 17, 0.96), rgba(22, 27, 32, 0.92), rgba(11, 14, 17, 0.96));
  background-size: 200% 100%;
  animation: gachaSkeleton 1.2s ease-in-out infinite;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 20px 18px 0;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-below {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-content: start;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-below > span {
  min-height: 72px;
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(11, 14, 17, 0.96), rgba(22, 27, 32, 0.92), rgba(11, 14, 17, 0.96));
  background-size: 200% 100%;
  animation: gachaSkeleton 1.2s ease-in-out infinite;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body > span,
body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body > strong {
  display: block;
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(11, 14, 17, 0.96), rgba(22, 27, 32, 0.92), rgba(11, 14, 17, 0.96));
  background-size: 200% 100%;
  animation: gachaSkeleton 1.2s ease-in-out infinite;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body > span {
  width: 100%;
  height: 52px;
  border-radius: 10px;
}

body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body > strong {
  width: 45%;
  height: 18px;
}

body.marketplace-page.gacha-browser-page .gacha-empty {
  padding: 28px 20px;
}

@keyframes gachaPackDrift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.035);
  }
}

@keyframes gachaSkeleton {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@media (max-width: 899px) {
  body.marketplace-page.gacha-browser-page .gacha-pack-card,
  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton {
    flex-direction: column;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card-below,
  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-below {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-media {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 240px;
    border-radius: 12px 12px 0 0;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card-body {
    padding: 12px 16px 16px;
    min-height: 0;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body {
    padding: 12px 16px 16px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card-header {
    gap: 6px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card-name {
    font-size: 19px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card-header .gacha-pack-rip-btn {
    padding: 4px 10px;
    font-size: 12px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-price {
    font-size: 16px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card .gacha-pack-metric-label {
    display: block;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card .gacha-pack-metric {
    align-items: center;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-metrics {
    flex-wrap: wrap;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-metric {
    flex: 1 1 calc(50% - 1px);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-metric:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-metric:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-media {
    flex: none;
    width: 100%;
    min-height: 220px;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton-body {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.marketplace-page.gacha-browser-page .gacha-pack-card,
  body.marketplace-page.gacha-browser-page .gacha-pack-media.is-static-media img,
  body.marketplace-page.gacha-browser-page .gacha-pack-skeleton {
    animation: none;
    transition: none;
  }

  body.marketplace-page.gacha-browser-page .gacha-pack-card:hover {
    transform: none;
  }
}

.action-button-secondary {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body.marketplace-page .action-button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #eef2f7;
}

.gacha-analysis-modal[hidden] {
  display: none;
}

.gacha-analysis-modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 20px;
}

.gacha-analysis-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.gacha-analysis-panel {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 20px;
  background: rgba(8, 10, 16, 0.98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.gacha-analysis-btn {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #eef2f7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.gacha-analysis-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.gacha-analysis-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.gacha-analysis-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gacha-analysis-refresh {
  flex-shrink: 0;
}

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

.gacha-analysis-header h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
}

.gacha-analysis-subtitle {
  margin: 0;
  color: #aeb6c4;
  font-size: 13px;
  line-height: 1.5;
  max-width: 62ch;
}

.gacha-analysis-status {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(110, 231, 242, 0.24);
  border-radius: 10px;
  background: rgba(110, 231, 242, 0.08);
  color: #d8f8ff;
  font-size: 13px;
}

.gacha-analysis-status.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
}

.gacha-analysis-table-wrap {
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.gacha-analysis-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.gacha-analysis-table th,
.gacha-analysis-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.35;
}

.gacha-analysis-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: visible;
  background: rgba(12, 15, 22, 0.98);
  color: #9aa6b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

.gacha-analysis-table col.col-rank {
  width: 36px;
}

.gacha-analysis-table .col-rank,
.gacha-analysis-table td.gacha-analysis-rank {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: 10px;
  padding-right: 0;
  text-align: left;
  overflow: visible;
}

.gacha-analysis-rank {
  color: #8fdcff;
  font-weight: 900;
}

.gacha-analysis-table col.col-pack {
  width: 16%;
}

.gacha-analysis-table .col-pack {
  padding-left: 8px;
}

.gacha-analysis-table .col-num {
  width: 8%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gacha-analysis-table .col-buyback {
  width: 14%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gacha-analysis-table .col-top {
  width: 9%;
  min-width: 64px;
  text-align: right;
}

.gacha-analysis-table col.col-volatility {
  width: 10%;
}

.gacha-analysis-table .col-volatility {
  width: 10%;
  min-width: 76px;
  text-align: right;
  overflow: visible;
  white-space: nowrap;
}

.gacha-analysis-table th.col-num,
.gacha-analysis-table th.col-buyback,
.gacha-analysis-table th.col-top,
.gacha-analysis-table th.col-volatility {
  text-align: right;
}

.gacha-analysis-table tbody tr:last-child td {
  border-bottom: 0;
}

.gacha-analysis-table tbody tr.is-clickable {
  cursor: pointer;
}

.gacha-analysis-table tbody tr.is-clickable:hover {
  background: rgba(110, 231, 242, 0.06);
}

.gacha-analysis-pack {
  color: #fff;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gacha-analysis-table td.col-num,
.gacha-analysis-table td.col-buyback,
.gacha-analysis-table td.col-top,
.gacha-analysis-table td.col-volatility {
  text-align: right;
}

.gacha-analysis-metric.is-positive {
  color: #86efac;
  font-weight: 800;
}

.gacha-analysis-metric.is-negative {
  color: #fca5a5;
  font-weight: 800;
}

.gacha-analysis-metric.is-neutral {
  color: #d9e1ec;
}

.gacha-analysis-table th.gacha-analysis-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.gacha-analysis-table th.has-header-tip {
  text-decoration: underline dotted rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
}

.gacha-analysis-table th.gacha-analysis-sortable.has-header-tip {
  cursor: pointer;
}

.gacha-analysis-header-tip {
  position: fixed;
  z-index: 220;
  max-width: min(248px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(10, 13, 20, 0.98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
  color: #c5ced9;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  pointer-events: none;
}

.gacha-analysis-header-tip[hidden] {
  display: none;
}

.gacha-analysis-col-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

.gacha-analysis-col-title {
  color: rgba(174, 192, 210, 0.72);
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
}

.gacha-analysis-col-sub {
  color: rgba(174, 192, 210, 0.55);
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
}

.gacha-analysis-table th.gacha-analysis-sortable:hover {
  color: #eef2f7;
  background: rgba(110, 231, 242, 0.06);
}

.gacha-analysis-table th.gacha-analysis-sortable.is-sorted {
  color: #8fdcff;
}

.gacha-analysis-table th.gacha-analysis-sortable.is-sorted::after {
  content: " ??;
  font-size: 9px;
  opacity: 0.85;
}

.gacha-analysis-table th.gacha-analysis-sortable.is-sorted[aria-sort="ascending"]::after {
  content: " ??;
}

.gacha-analysis-rank.is-rank-first {
  color: #ffe08a;
}

.gacha-analysis-top-pull {
  color: #f6d28b;
  font-weight: 800;
  white-space: nowrap;
}

.gacha-analysis-buyback {
  color: #d9e1ec;
  white-space: nowrap;
}

.gacha-analysis-odds {
  min-width: 220px;
  color: #c4cedd;
  line-height: 1.45;
}

.gacha-analysis-profit-pull {
  color: #b8f5c7;
  font-weight: 800;
}

.gacha-analysis-volatility {
  color: #d6deea;
  font-weight: 800;
  text-transform: lowercase;
}

.gacha-analysis-volatility.is-volatility-low {
  color: #86efac;
}

.gacha-analysis-volatility.is-risk-low {
  color: #86efac;
}

.gacha-analysis-risk.is-risk-low {
  color: #86efac;
}

.gacha-analysis-volatility.is-volatility-med {
  color: #f6d28b;
}

.gacha-analysis-volatility.is-risk-medium {
  color: #f6d28b;
}

.gacha-analysis-risk.is-risk-medium {
  color: #f6d28b;
}

.gacha-analysis-volatility.is-volatility-high {
  color: #fca5a5;
}

.gacha-analysis-volatility.is-risk-high {
  color: #fca5a5;
}

.gacha-analysis-risk.is-risk-high {
  color: #fca5a5;
}

.gacha-analysis-empty {
  text-align: center;
  color: #9aa6b8;
  padding: 28px 16px !important;
}

.gacha-analysis-footnote {
  margin-top: 14px;
  color: #8f9aad;
  font-size: 12px;
  line-height: 1.5;
}

.gacha-analysis-footnote p {
  margin: 0 0 6px;
}

@media (max-width: 900px) {
  .gacha-analysis-header {
    flex-direction: column;
  }

  .gacha-analysis-actions {
    align-self: flex-end;
  }
}

.gacha-analysis-loading-row td span {
  display: block;
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  animation: gacha-analysis-pulse 1.2s ease-in-out infinite;
}

@keyframes gacha-analysis-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

body.marketplace-page.gacha-detail-page .main {
  min-width: 0;
}

body.marketplace-page.gacha-detail-page [hidden] {
  display: none !important;
}

.gacha-detail-header {
  min-width: 0;
  margin-bottom: 18px;
}

.gacha-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: #9faab8;
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.gacha-detail-back:hover,
.gacha-detail-back:focus-visible {
  color: #fff;
}

.gacha-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.marketplace-page.gacha-detail-page .gacha-detail-title-row .marketplace-title {
  line-height: 1.08;
  padding-bottom: 0.08em;
}

.gacha-detail-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(174, 192, 210, 0.22);
  border-radius: 999px;
  background: rgba(15, 18, 22, 0.82);
  color: #e8edf3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gacha-detail-page .gacha-detail-status.pack-status-live {
  border-color: rgba(245, 196, 81, 0.68);
  background: rgba(245, 196, 81, 0.2);
  color: #fff;
}

.gacha-detail-description {
  width: 100%;
  max-width: 850px;
  margin: 12px 0 0;
  color: #a8b0bd;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.gacha-detail-warning {
  margin: 12px 0 0;
  color: #e7c979;
  font-size: 12px;
}

.gacha-detail-state {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 20px;
}

.gacha-detail-skeleton {
  min-height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(110deg, #090909 20%, #151515 45%, #090909 70%);
  background-size: 220% 100%;
  animation: gachaSkeleton 1.2s ease-in-out infinite;
}

.gacha-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 20px;
  align-items: start;
}

.gacha-detail-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.gacha-detail-section,
.pack-purchase-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.gacha-detail-section {
  min-width: 0;
  padding: 16px;
}

.pack-purchase-panel {
  position: sticky;
  top: 20px;
  overflow: hidden;
  padding: 14px;
}

.detail-gacha-media-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #050505;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.detail-gacha-media-wrap:hover,
.detail-gacha-media-wrap:focus-visible {
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.01);
  outline: none;
}

.detail-gacha-media-wrap.is-disabled {
  cursor: default;
  opacity: 0.72;
}

.detail-gacha-media {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #050505;
}

.detail-media-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(5, 5, 5, 0.72);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.detail-gacha-media-wrap:hover .detail-media-hint,
.detail-gacha-media-wrap:focus-visible .detail-media-hint,
.detail-gacha-media-wrap.is-disabled .detail-media-hint {
  opacity: 1;
}

.detail-media-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.detail-media-fallback img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  opacity: 0.65;
}

.purchase-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px 10px;
}

.purchase-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.purchase-heading strong {
  flex: 0 0 auto;
  color: #2dd4bf;
  font-size: 15px;
}

.expected-value-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-bottom: 13px;
  padding: 0 10px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 6px;
  background: rgba(45, 212, 191, 0.1);
  color: #d9fff9;
  font-size: 12px;
  font-weight: 700;
}

.purchase-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.purchase-info-item span,
.loaded-summary-item span {
  display: block;
  color: #8f99a7;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.purchase-info-item strong,
.loaded-summary-item strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 15px;
}

.pack-quantity-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.quantity-button {
  width: 38px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  background: #101010;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.quantity-button:disabled {
  color: #555;
  cursor: default;
}

.quantity-value {
  color: #fff;
  text-align: center;
}

.rip-pack-button,
.gacha-load-more {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(45, 212, 191, 0.46);
  border-radius: 7px;
  background: rgba(45, 212, 191, 0.18);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.rip-pack-button {
  margin-top: 10px;
}

.rip-pack-button:hover,
.gacha-load-more:hover {
  background: rgba(45, 212, 191, 0.25);
}

.rip-pack-button:disabled {
  border-color: rgba(255, 255, 255, 0.09);
  background: #111;
  color: #707070;
  cursor: default;
}

.loaded-pool-section .section-heading {
  margin-bottom: 12px;
}

.loaded-card-count {
  color: #8f99a7;
  font-size: 12px;
}

.gacha-variant-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.gacha-variant-button {
  --variant-accent: #2dd4bf;
  --variant-gradient: linear-gradient(135deg, var(--variant-accent), var(--variant-accent));
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 13px;
  background:
    linear-gradient(#101010, #101010) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) border-box;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.gacha-variant-button:hover,
.gacha-variant-button.is-active {
  background:
    linear-gradient(rgba(16, 16, 16, 0.72), rgba(16, 16, 16, 0.72)) padding-box,
    var(--variant-gradient) border-box;
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-accent) 28%, transparent), 0 10px 24px color-mix(in srgb, var(--variant-accent) 16%, transparent);
}

.gacha-variant-button.is-active {
  background: var(--variant-gradient);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.gacha-variant-button:hover {
  transform: translateY(-1px);
}

.gacha-variant-button.rarity-s {
  --variant-accent: #ffc800;
  --variant-gradient: linear-gradient(135deg, #ffd700, #ffc400 28%, #ffd700);
}

.gacha-variant-button.rarity-a {
  --variant-accent: #ff6f00;
  --variant-gradient: linear-gradient(135deg, #ff6f00, #ff6f00 28%, #ff913b);
}

.gacha-variant-button.rarity-crown,
.gacha-variant-button.rarity-legendary {
  --variant-accent: #ffe96e;
  --variant-gradient: linear-gradient(90deg, #ffe96e 0%, #ff6863 22.12%, #ff579a 49.52%, #6e68ff 79.81%, #405dff 100%);
}

.gacha-variant-button.rarity-crown:hover,
.gacha-variant-button.rarity-crown.is-active,
.gacha-variant-button.rarity-legendary:hover,
.gacha-variant-button.rarity-legendary.is-active {
  background:
    linear-gradient(rgba(16, 16, 16, 0.66), rgba(16, 16, 16, 0.66)) padding-box,
    var(--variant-gradient) border-box;
}

.gacha-variant-button.rarity-crown.is-active,
.gacha-variant-button.rarity-legendary.is-active {
  background: var(--variant-gradient);
}

.gacha-variant-button.rarity-epic {
  --variant-accent: #ffd700;
  --variant-gradient: linear-gradient(to bottom right, #ffd700, #ffc400 25%, #ffd700);
}

.gacha-variant-button.rarity-rare,
.gacha-variant-button.rarity-bloom {
  --variant-accent: #ff6f00;
  --variant-gradient: linear-gradient(135deg, #ff6f00, #ff6f00 28%, #ff913b);
}

.gacha-variant-button.rarity-uncommon,
.gacha-variant-button.rarity-b {
  --variant-accent: #ec4899;
  --variant-gradient: linear-gradient(135deg, #ec4899, #ec4899 28%, #f472b6);
}

.gacha-variant-button.rarity-common,
.gacha-variant-button.rarity-thorn,
.gacha-variant-button.rarity-c {
  --variant-accent: #a855f7;
  --variant-gradient: linear-gradient(135deg, #a855f7, #a855f7 28%, #c084fc);
}

.loaded-pool-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.loaded-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.loaded-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #0d0d0d;
}

.loaded-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #050505;
}

.loaded-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.loaded-card-body {
  padding: 10px;
}

.loaded-card-body > strong {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.loaded-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.loaded-card-meta span {
  color: #2dd4bf;
  font-size: 11px;
  font-weight: 800;
}

.loaded-card-meta small {
  color: #9da7b4;
  font-size: 10px;
}

.gacha-load-more {
  margin-top: 14px;
}

.gacha-detail-empty,
.gacha-detail-error {
  padding: 36px 18px;
  color: #9ca5b2;
  text-align: center;
}

.gacha-detail-empty {
  grid-column: 1 / -1;
}

.gacha-detail-error {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 9, 9, 0.98);
}

.gacha-detail-error h2,
.gacha-detail-error-message {
  margin: 0 0 8px;
  color: #fff;
}

.gacha-detail-loading-text {
  color: #9ca5b2;
}

.pack-stats-loading {
  grid-column: 1 / -1;
  padding: 18px 0;
  text-align: center;
}

.purchase-expected-value--loading strong {
  color: #9ca5b2;
  font-size: 14px;
  font-weight: 500;
}

.gacha-detail-error .action-button {
  margin-top: 12px;
  text-decoration: none;
}

@media (max-width: 1199px) {
  .gacha-detail-state,
  .gacha-detail-layout {
    grid-template-columns: 1fr;
  }

  .pack-purchase-panel {
    position: static;
    order: -1;
    width: 100%;
    max-width: 620px;
  }

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

@media (max-width: 699px) {
  body.marketplace-page.gacha-detail-page {
    overflow-x: hidden;
  }

  body.marketplace-page.gacha-detail-page .side-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marketplace-page.gacha-detail-page .side-nav a {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .gacha-detail-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .gacha-detail-section,
  .pack-purchase-panel {
    padding: 12px;
  }

  .loaded-card-grid {
    grid-template-columns: 1fr;
  }

  .loaded-card {
    max-width: 420px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .gacha-detail-skeleton {
    animation: none;
  }

  .detail-gacha-media-wrap {
    transition: none;
  }

  .detail-gacha-media-wrap:hover,
  .detail-gacha-media-wrap:focus-visible {
    transform: none;
  }
}

body.marketplace-page.gacha-detail-page .gacha-detail-header {
  margin-bottom: 18px;
}

body.marketplace-page.gacha-pulls-only-page .gacha-detail-header {
  margin-bottom: 8px;
}

body.marketplace-page.gacha-pulls-only-page .gacha-detail-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

body.marketplace-page.gacha-pulls-only-page .gacha-pull-history-count {
  flex: 0 0 auto;
  color: rgba(174, 192, 210, 0.72);
  font-size: var(--type-body-sm);
  font-weight: 600;
  white-space: nowrap;
}

body.marketplace-page.gacha-pulls-only-page .gacha-pull-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 8px;
}

body.marketplace-page.gacha-pulls-only-page .gacha-pull-history-panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(8, 8, 8, 0.92);
}

body.marketplace-page.gacha-pulls-only-page .gacha-pull-history-panel .transaction-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.marketplace-page.gacha-pulls-only-page .gacha-pull-history-panel .transaction-see-more {
  width: 100%;
  margin-top: 14px;
}

.gacha-observed-performance-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.gacha-observed-performance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.gacha-observed-performance-copy {
  min-width: 0;
}

.gacha-observed-performance-title {
  margin: 0;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 800;
}

.gacha-observed-performance-subtitle {
  margin: 4px 0 0;
  color: #8fa3b8;
  font-size: 12px;
  line-height: 1.45;
}

.gacha-observed-performance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gacha-observed-performance-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(8, 8, 8, 0.58);
}

.gacha-observed-performance-item.is-wide {
  grid-column: span 2;
}

.gacha-observed-performance-label {
  color: #90a0b5;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.gacha-observed-performance-value {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.gacha-observed-performance-meta {
  color: #7f8ea3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

body.marketplace-page.gacha-detail-page .gacha-detail-description {
  display: -webkit-box;
  max-width: 760px;
  overflow: hidden;
  color: #a8b0bd;
  line-height: 1.55;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pack-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.pack-stat-card {
  --stat-accent: #9aa3af;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 13px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.pack-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: auto;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(21, 200, 255, 0.62) 0%,
    rgba(34, 191, 255, 0.62) 16%,
    rgba(47, 214, 210, 0.62) 32%,
    rgba(110, 232, 117, 0.62) 48%,
    rgba(216, 239, 84, 0.62) 64%,
    rgba(255, 228, 92, 0.62) 80%,
    rgba(255, 138, 107, 0.62) 100%
  );
}

.pack-stat-card.grade-s,
.pack-stat-card.rarity-s,
.loaded-card.rarity-s {
  --stat-accent: #ffc800;
  --card-accent: #ffc800;
}

.pack-stat-card.grade-a,
.pack-stat-card.rarity-a,
.loaded-card.rarity-a {
  --stat-accent: #ff6f00;
  --card-accent: #ff6f00;
}

.pack-stat-card.grade-b,
.pack-stat-card.rarity-b,
.loaded-card.rarity-b {
  --stat-accent: #ff5e86;
  --card-accent: #ff5e86;
}

.pack-stat-card.grade-c,
.pack-stat-card.rarity-c,
.loaded-card.rarity-c {
  --stat-accent: #8260ff;
  --card-accent: #8260ff;
}

.pack-stat-card.s-pull-streak {
  --stat-accent: #ff7966;
}

.pack-stat-card.rarity-crown,
.pack-stat-card.rarity-legendary,
.loaded-card.rarity-crown,
.loaded-card.rarity-legendary {
  --stat-accent: #ffe96e;
  --card-accent: #ffe96e;
}

.pack-stat-card.rarity-bloom,
.pack-stat-card.rarity-rare,
.loaded-card.rarity-bloom,
.loaded-card.rarity-rare {
  --stat-accent: #ff6f00;
  --card-accent: #ff6f00;
}

.pack-stat-card.rarity-thorn,
.pack-stat-card.rarity-common,
.loaded-card.rarity-thorn,
.loaded-card.rarity-common {
  --stat-accent: #a855f7;
  --card-accent: #a855f7;
}

.pack-stat-card.rarity-uncommon,
.loaded-card.rarity-uncommon {
  --stat-accent: #ec4899;
  --card-accent: #ec4899;
}

.pack-stat-card.rarity-epic,
.loaded-card.rarity-epic {
  --stat-accent: #ffd700;
  --card-accent: #ffd700;
}

.pack-grade-icon {
  display: none;
}

.pack-stat-card .pack-stat-label {
  display: block;
  min-width: 0;
  color: var(--stat-accent, #a8b0bd);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pack-stat-card.s-pull-streak .pack-stat-label {
  color: #f2f5f9;
}

.pack-stat-card > strong {
  display: block;
  margin: 8px 0 6px;
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  line-height: 0.95;
}

.pack-stat-card.is-positive > strong {
  color: #4ade80;
}

.pack-stat-card.is-negative > strong {
  color: #fb7185;
}

.pack-stat-card.is-risk-low > strong {
  color: #86efac;
}

.pack-stat-card > strong.is-risk-low {
  color: #86efac;
}

.pack-stat-card.is-risk-medium > strong {
  color: #f6d28b;
}

.pack-stat-card > strong.is-risk-medium {
  color: #f6d28b;
}

.pack-stat-card.is-risk-high > strong {
  color: #fca5a5;
}

.pack-stat-card > strong.is-risk-high {
  color: #fca5a5;
}

.pack-stat-card > small {
  display: block;
  color: #a8b0bd;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.pack-detail-content {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(380px, 2fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.pack-side-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  height: auto;
  max-height: none;
  overflow: visible;
}

.current-pool-section {
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.current-pack-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.current-pack-pool-grid .loaded-card {
  position: relative;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 9px;
}

.pack-detail-content .pack-purchase-panel {
  position: static;
  top: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  background: rgba(8, 8, 8, 0.94);
}

.pack-transaction-panel {
  position: static;
  z-index: auto;
  min-width: 0;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  background: rgba(8, 8, 8, 0.92);
}

.transaction-panel-header {
  margin-bottom: 12px;
}

.transaction-panel-header h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 16px;
}

.transaction-list {
  display: flex;
  width: 100%;
  height: auto;
  max-height: none;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.transaction-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-decoration: none;
}

a.transaction-item {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

a.transaction-item:hover,
a.transaction-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

.transaction-thumbnail {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: #050505;
}

.transaction-body {
  min-width: 0;
}

.transaction-body > strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: var(--type-list-title);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-meta,
.transaction-detail-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.transaction-meta span,
.transaction-detail-line span {
  color: #8c96a3;
  font-size: var(--type-list-meta);
}

.transaction-tier,
.transaction-variant {
  font-weight: 700;
  background: none;
}

.transaction-tier.tier-top {
  color: var(--renaiss-grade-top);
}

.transaction-tier.tier-s {
  color: var(--renaiss-grade-s);
}

.transaction-tier.tier-a {
  color: var(--renaiss-grade-a);
}

.transaction-tier.tier-b {
  color: var(--renaiss-grade-b);
}

.transaction-tier.tier-c {
  color: var(--renaiss-grade-c);
}

.transaction-variant.variant-bloom,
.transaction-variant.variant-rare {
  color: var(--renaiss-variant-rare);
}

.transaction-variant.variant-thorn,
.transaction-variant.variant-common {
  color: var(--renaiss-variant-common);
}

.transaction-variant.variant-uncommon {
  color: var(--renaiss-variant-uncommon);
}

.transaction-variant.variant-epic {
  color: var(--renaiss-variant-epic);
}

.transaction-variant.variant-legendary,
.transaction-variant.variant-crown {
  background: var(--renaiss-hover-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.transaction-meta-separator {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.transaction-fmv {
  color: #9299a5 !important;
  font-weight: 600;
}

.transaction-card-name {
  display: -webkit-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pack-activity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pack-activity-page-link {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #f2f4f7;
  font-size: 20px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.pack-activity-page-link:hover,
.pack-activity-page-link:focus-visible {
  border-color: rgba(57, 214, 189, 0.5);
  background: rgba(57, 214, 189, 0.08);
  transform: translateX(2px);
  outline: none;
}

.transaction-empty {
  padding: 24px 12px;
  color: #818b98;
  font-size: var(--type-body);
  line-height: 1.5;
  text-align: center;
}

.transaction-skeleton {
  min-height: 78px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  background: linear-gradient(110deg, #0d0d0d 20%, #171717 45%, #0d0d0d 70%);
  background-size: 220% 100%;
  animation: gachaSkeleton 1.2s ease-in-out infinite;
}

.transaction-see-more {
  width: 100%;
  min-height: 36px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(238, 242, 247, 0.92);
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.transaction-see-more:hover,
.transaction-see-more:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  outline: none;
}

.transaction-see-more:disabled {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(148, 163, 184, 0.72);
  cursor: wait;
}

.transaction-see-more.gacha-load-more {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(238, 242, 247, 0.92);
}

.transaction-see-more.gacha-load-more:hover:not(:disabled),
.transaction-see-more.gacha-load-more:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.purchase-panel-title {
  margin: 1px 0 13px;
  color: #fff;
  font-size: 18px;
}

.purchase-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.purchase-panel-header .purchase-panel-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.purchase-panel-analysis {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.gacha-analysis-table tbody tr.is-highlighted-pack {
  background: rgba(110, 231, 242, 0.1);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 242, 0.22);
}

.purchase-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 14px 2px 10px;
}

.purchase-price-row strong {
  color: #fff;
  font-size: 25px;
}

.purchase-price-row span {
  color: #8f99a7;
  font-size: 13px;
}

.purchase-expected-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.purchase-expected-value span {
  color: #8f99a7;
  font-size: 12px;
}

.purchase-expected-value strong {
  color: #fff;
  font-size: 16px;
}

.pack-detail-content .rip-pack-button {
  border: 1px solid transparent;
  background:
    linear-gradient(#101010, #101010) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
  color: #fff;
}

.pack-detail-content .rip-pack-button:hover {
  background:
    linear-gradient(#161616, #161616) padding-box,
    linear-gradient(90deg, #23bfe9, #39d6bd, #a8e34b, #f4d84a, #ff7966) border-box;
}

.rip-fun-button,
.rip-fun-button-inline {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.rip-fun-button:hover,
.rip-fun-button-inline:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.rip-fun-button:disabled,
.rip-fun-button-inline:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.fun-rip-note {
  margin-top: 6px;
  color: #8f99a7;
  font-size: 11px;
  line-height: 1.45;
}

.fun-rip-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.fun-rip-overlay[hidden] {
  display: none !important;
}

.fun-rip-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
}

.fun-rip-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.fun-rip-stage.is-playing {
  width: min(92vw, 420px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fun-rip-overlay.is-playing .fun-rip-close,
.fun-rip-overlay.is-playing .fun-rip-eyebrow,
.fun-rip-overlay.is-playing .fun-rip-title,
.fun-rip-overlay.is-playing .fun-rip-card-shell,
.fun-rip-overlay.is-playing .fun-rip-meta,
.fun-rip-overlay.is-playing .fun-rip-actions {
  display: none !important;
}

.fun-rip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.fun-rip-eyebrow {
  margin: 0 0 4px;
  color: #8f99a7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fun-rip-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.fun-rip-video-stage {
  width: min(82vw, 380px);
  aspect-ratio: 3 / 4.2;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
}

.fun-rip-video-stage[hidden] {
  display: none !important;
}

.fun-rip-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.fun-rip-card-shell {
  position: relative;
  width: min(100%, 250px);
  margin: 0 auto 14px;
  aspect-ratio: 3 / 4.2;
  perspective: 1000px;
}

.fun-rip-card-shell.is-spinning .fun-rip-card-back {
  animation: fun-rip-spin 0.9s ease-in-out infinite;
}

.fun-rip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 8px,
      rgba(255, 255, 255, 0.01) 8px,
      rgba(255, 255, 255, 0.01) 16px
    );
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.fun-rip-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #0d0d0d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: rotateY(90deg) scale(0.92);
  opacity: 0;
}

.fun-rip-overlay.is-revealed .fun-rip-card {
  animation: fun-rip-reveal 0.55s ease forwards;
}

.fun-rip-overlay.is-ripping .fun-rip-card-back {
  display: block;
}

.fun-rip-overlay.is-revealed .fun-rip-card-back,
.fun-rip-overlay.is-error .fun-rip-card-back {
  opacity: 0;
  visibility: hidden;
}

.fun-rip-card-image-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050505;
}

.fun-rip-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fun-rip-card-body {
  padding: 10px 12px 12px;
  text-align: left;
}

.fun-rip-tier {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fun-rip-name {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.fun-rip-fmv {
  display: block;
  margin-top: 6px;
  color: #f4c84a;
  font-size: 12px;
  font-weight: 800;
}

.fun-rip-meta {
  margin: 0 0 14px;
  color: #8f99a7;
  font-size: 12px;
  line-height: 1.45;
}

.fun-rip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fun-rip-actions .rip-fun-button-inline,
.fun-rip-actions .fun-rip-dismiss {
  width: 100%;
  min-height: 42px;
  margin-top: 0;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.fun-rip-actions .rip-fun-button-inline {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.fun-rip-actions .rip-fun-button-inline:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.fun-rip-dismiss {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: transparent;
  color: #d6dbe3;
  font-weight: 700;
  cursor: pointer;
}

.fun-rip-card.rarity-legendary,
.fun-rip-card.rarity-crown { border-color: #ffe96e; }
.fun-rip-card.rarity-legendary .fun-rip-tier,
.fun-rip-card.rarity-crown .fun-rip-tier {
  background: linear-gradient(90deg, #ffe96e, #ff6863, #6e68ff, #405dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fun-rip-card.rarity-epic,
.fun-rip-card.rarity-s { border-color: #ffd700; }
.fun-rip-card.rarity-epic .fun-rip-tier,
.fun-rip-card.rarity-s .fun-rip-tier { color: #ffd700; }

.fun-rip-card.rarity-rare,
.fun-rip-card.rarity-bloom,
.fun-rip-card.rarity-a { border-color: #ff6f00; }
.fun-rip-card.rarity-rare .fun-rip-tier,
.fun-rip-card.rarity-bloom .fun-rip-tier,
.fun-rip-card.rarity-a .fun-rip-tier { color: #ff6f00; }

.fun-rip-card.rarity-uncommon,
.fun-rip-card.rarity-b { border-color: #ff5e86; }
.fun-rip-card.rarity-uncommon .fun-rip-tier,
.fun-rip-card.rarity-b .fun-rip-tier { color: #ff5e86; }

.fun-rip-card.rarity-common,
.fun-rip-card.rarity-thorn,
.fun-rip-card.rarity-c { border-color: #8260ff; }
.fun-rip-card.rarity-common .fun-rip-tier,
.fun-rip-card.rarity-thorn .fun-rip-tier,
.fun-rip-card.rarity-c .fun-rip-tier { color: #8260ff; }

@keyframes fun-rip-spin {
  0%, 100% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.03); }
}

@keyframes fun-rip-reveal {
  0% { transform: rotateY(90deg) scale(0.92); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.purchase-note {
  margin: 9px 0 0;
  color: #737d8a;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 1199px) {
  .pack-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pack-detail-content {
    grid-template-columns: 1fr;
  }

  .pack-side-column {
    order: -1;
  }

  .pack-detail-content .pack-purchase-panel {
    position: static;
    top: auto;
    max-width: 620px;
  }

  .current-pack-pool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .current-pack-pool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 799px) {
  .pack-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack-stat-card.s-pull-streak {
    grid-column: 1 / -1;
  }

  .current-pack-pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 520px) {
  .pack-stat-grid,
  .current-pack-pool-grid {
    grid-template-columns: 1fr;
  }

  .pack-stat-card.s-pull-streak {
    grid-column: auto;
  }

  .pack-stat-card {
    min-height: 132px;
  }

  .transaction-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }

  .transaction-thumbnail {
    width: 48px;
    height: 48px;
  }
}

.transaction-page-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 0 64px;
}

.transaction-page-header {
  margin-bottom: 18px;
}

.transaction-page-header h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: var(--type-section-title);
  font-weight: var(--type-section-title-weight);
  line-height: 1.25;
}

.transaction-shown-count {
  margin: 8px 0 0;
  color: #9299a5;
  font-size: var(--type-body-sm);
}

.transaction-page-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px;
  background: rgba(8, 8, 8, 0.94);
}

.transaction-page-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}

.transaction-page-list .transaction-item {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 92px;
  padding: 12px;
}

.transaction-page-list .transaction-thumbnail {
  width: 64px;
  height: 64px;
}

.transaction-page-list .transaction-body > strong {
  font-size: var(--type-list-title);
}

.transaction-page-list .transaction-meta span,
.transaction-page-list .transaction-detail-line span {
  font-size: var(--type-list-meta);
}

.transaction-page-error {
  margin: 0 0 12px;
  color: #e7c979;
  font-size: 12px;
}

@media (max-width: 799px) {
  .pack-activity-page-link {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .transaction-page-panel {
    padding: 12px;
  }
}

@media (max-width: 520px) {
  .transaction-page-list .transaction-item {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 70px;
    gap: 9px;
    padding: 8px;
  }

  .transaction-page-list .transaction-thumbnail {
    width: 50px;
    height: 50px;
  }
}

body.marketplace-page.portfolio-page .portfolio-summary { margin-bottom: 18px; }
body.marketplace-page.portfolio-page .portfolio-price-source-tabs { display: grid; gap: 6px; margin: 0; }
body.marketplace-page.portfolio-page .portfolio-price-source-tabs[hidden] { display: none !important; }
body.marketplace-page.portfolio-page .portfolio-price-source-tabs > span { color: #d8e3ee; font-size: 12px; font-weight: 900; }
body.marketplace-page.portfolio-page .portfolio-price-source-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
body.marketplace-page.portfolio-page .portfolio-price-source-buttons button { min-height: 30px; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: #aeb6c4; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-price-source-buttons button.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; }
body.marketplace-page.portfolio-page .portfolio-layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
body.marketplace-page.portfolio-page .portfolio-form, body.marketplace-page.portfolio-page .portfolio-items { display: grid; gap: 12px; }
body.marketplace-page.portfolio-page .portfolio-form label { display: grid; gap: 6px; color: #d8e3ee; font-size: 12px; font-weight: 900; }
body.marketplace-page.portfolio-page .portfolio-form input, body.marketplace-page.portfolio-page .portfolio-form select, body.marketplace-page.portfolio-page .portfolio-form textarea { min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: rgba(255, 255, 255, 0.045); color: #fff; font: inherit; }
body.marketplace-page.portfolio-page .portfolio-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c5d0dc' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: rgba(255, 255, 255, 0.045);
}
body.marketplace-page.portfolio-page .portfolio-form select option { background: #111; color: #fff; }
body.marketplace-page.portfolio-page .portfolio-form textarea { padding-top: 9px; resize: vertical; }
body.marketplace-page.portfolio-page .portfolio-file-field { display: grid; gap: 6px; color: #d8e3ee; font-size: 12px; font-weight: 900; }
body.marketplace-page.portfolio-page .portfolio-file-field[hidden],
body.marketplace-page.portfolio-page #portfolioImageUploadField[hidden],
body.marketplace-page.portfolio-page .portfolio-pricing-notice[hidden] { display: none !important; }
body.marketplace-page.portfolio-page .portfolio-file-control { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: rgba(255, 255, 255, 0.045); color: #fff; cursor: pointer; overflow: hidden; }
body.marketplace-page.portfolio-page .portfolio-file-control input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none; }
body.marketplace-page.portfolio-page .portfolio-file-name { position: relative; min-width: 0; color: #b8c2d0; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
body.marketplace-page.portfolio-page .portfolio-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.marketplace-page.portfolio-page .portfolio-form-grid-single { grid-template-columns: 1fr; }
body.marketplace-page.portfolio-page .portfolio-form button[type="submit"] { min-height: 42px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, var(--collectibles-gradient) border-box; color: #fff; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-status { min-height: 18px; margin: 0; color: #aeb6c4; font-size: 12px; font-weight: 800; }
body.marketplace-page.portfolio-page .portfolio-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 12px; background: rgba(255, 255, 255, 0.035); }
body.marketplace-page.portfolio-page .portfolio-item-renaiss { position: relative; isolation: isolate; overflow: visible; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-item-renaiss::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; background: var(--renaiss-hover-rainbow); opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-item-renaiss::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; box-shadow: 0 0 22px rgba(255, 233, 110, 0.14), 0 0 30px rgba(255, 87, 154, 0.16), 0 0 38px rgba(64, 93, 255, 0.18); transition: opacity 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-item-renaiss:hover,
body.marketplace-page.portfolio-page .portfolio-item-renaiss:focus-within { border-color: rgba(255, 255, 255, 0.18); background: rgba(9, 9, 9, 0.98); transform: translateY(-2px); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42); }
body.marketplace-page.portfolio-page .portfolio-item-renaiss:hover::before,
body.marketplace-page.portfolio-page .portfolio-item-renaiss:focus-within::before { opacity: 1; }
body.marketplace-page.portfolio-page .portfolio-item-renaiss:hover::after,
body.marketplace-page.portfolio-page .portfolio-item-renaiss:focus-within::after { opacity: 1; }
body.marketplace-page.portfolio-page .portfolio-item-renaiss > * { position: relative; z-index: 1; }
body.marketplace-page.portfolio-page .portfolio-item-clickable { cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-item-clickable .portfolio-actions,
body.marketplace-page.portfolio-page .portfolio-item-clickable .portfolio-actions button { cursor: default; }
body.marketplace-page.portfolio-page .portfolio-item-thumb, body.marketplace-page.portfolio-page .portfolio-image-fallback { width: 72px; aspect-ratio: 3 / 4; border-radius: 7px; object-fit: cover; background: rgba(255, 255, 255, 0.07); align-self: center; }
body.marketplace-page.portfolio-page .portfolio-item-content { display: grid; grid-template-columns: minmax(0, 1fr) 228px; gap: 0 20px; align-items: start; align-self: center; min-width: 0; margin: 0; padding: 0; }
body.marketplace-page.portfolio-page .portfolio-item-main, body.marketplace-page.portfolio-page .portfolio-values { min-width: 0; margin: 0; padding: 0; align-self: start; justify-self: stretch; }
body.marketplace-page.portfolio-page .portfolio-item-main { padding-right: 10px; }
body.marketplace-page.portfolio-page .portfolio-item-copy { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.marketplace-page.portfolio-page .portfolio-item-title { color: #fff; font-size: var(--type-list-title); line-height: 1.3; margin: 0; }
body.marketplace-page.portfolio-page .portfolio-item-source, body.marketplace-page.portfolio-page .portfolio-item-purchase { color: #9aa3af; font-size: var(--type-list-meta); font-weight: 800; line-height: 1.3; margin: 0; }
body.marketplace-page.portfolio-page .portfolio-values { display: grid; gap: 5px; width: 228px; align-content: start; justify-items: stretch; }
body.marketplace-page.portfolio-page .portfolio-values span { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; line-height: 1.3; color: #9aa3af; font-size: var(--type-list-meta); font-weight: 800; margin: 0; }
body.marketplace-page.portfolio-page .portfolio-values strong { color: #fff; font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto; min-width: 5.5rem; }
body.marketplace-page.portfolio-page .portfolio-value-source { display: block; margin-top: 2px; color: #8fa3b8; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.marketplace-page.portfolio-page .portfolio-actions { align-self: center; margin-left: 4px; }
body.marketplace-page.portfolio-page .portfolio-price-note { color: #fbbf24 !important; line-height: 1.35; }
body.marketplace-page.portfolio-page .portfolio-pl-positive,
body.marketplace-page.portfolio-page .portfolio-pl-positive strong { color: #67CD86 !important; }
body.marketplace-page.portfolio-page .portfolio-pl-negative,
body.marketplace-page.portfolio-page .portfolio-pl-negative strong { color: #CD677D !important; }
body.marketplace-page.portfolio-page .gain-positive strong, body.marketplace-page.portfolio-page .is-positive { color: #4ade80 !important; }
body.marketplace-page.portfolio-page .gain-negative strong, body.marketplace-page.portfolio-page .is-negative { color: #fb7185 !important; }
body.marketplace-page.portfolio-page .portfolio-edit { min-height: 34px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: rgba(255, 255, 255, 0.04); color: #e4ebf7; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-remove { min-height: 34px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: transparent; color: #ffb4b4; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-actions { display: grid; gap: 8px; justify-items: stretch; }
body.marketplace-page.portfolio-page .portfolio-edit-panel { width: min(560px, calc(100vw - 32px)); }
body.marketplace-page.portfolio-page .portfolio-edit-form { display: grid; gap: 12px; }
body.marketplace-page.portfolio-page .portfolio-pricing-notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.08);
  color: #f3d08a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
body.marketplace-page.portfolio-page .portfolio-method { margin-top: 18px; }
body.marketplace-page.portfolio-page .portfolio-chart-panel { margin-top: 18px; }
body.marketplace-page.portfolio-page .portfolio-chart-panel .portfolio-chart-legend {
  margin-top: 10px;
}
body.marketplace-page.portfolio-page .portfolio-chart-panel .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
body.marketplace-page.portfolio-page .portfolio-chart-note { margin: 4px 0 0; color: #8fa3b8; font-size: 12px; font-weight: 700; max-width: 420px; }
body.marketplace-page.portfolio-page .portfolio-chart-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.marketplace-page.portfolio-page .portfolio-modal-chart-controls { margin: 0 0 12px; }
body.marketplace-page.portfolio-page .portfolio-period-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
body.marketplace-page.portfolio-page .portfolio-period-tabs button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #aeb6c4; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-period-tabs button.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; }
body.marketplace-page.portfolio-page .portfolio-refresh-valuation { min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-chart-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
body.marketplace-page.portfolio-page .portfolio-stat { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
body.marketplace-page.portfolio-page .portfolio-stat span { color: #8fa3b8; font-size: 11px; font-weight: 800; }
body.marketplace-page.portfolio-page .portfolio-stat strong { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
body.marketplace-page.portfolio-page .portfolio-chart-wrap { position: relative; display: grid; gap: 12px; }
body.marketplace-page.portfolio-page .portfolio-chart-tooltip { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; gap: 4px; min-width: 180px; padding: 10px 12px; border-radius: 10px; background: rgba(8, 10, 14, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); color: #d8e3ee; font-size: 11px; font-weight: 700; pointer-events: none; }
body.marketplace-page.portfolio-page .portfolio-chart-tooltip strong { color: #fff; font-size: 12px; }
body.marketplace-page.portfolio-page .portfolio-history { min-height: 34px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0 10px; background: rgba(96, 165, 250, 0.08); color: #bfdbfe; font-size: 12px; font-weight: 900; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-performance-panel { width: min(760px, calc(100vw - 32px)); }
body.marketplace-page.portfolio-page .portfolio-performance-heading { display: grid; gap: 6px; margin-bottom: 12px; }
body.marketplace-page.portfolio-page .portfolio-performance-subtitle { margin: 0; color: #8fa3b8; font-size: 12px; font-weight: 700; }
body.marketplace-page.portfolio-page .portfolio-price-history-wrap { margin-top: 4px; }
body.marketplace-page.portfolio-page .renaiss-price-history-block {
  margin-top: 4px;
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
body.marketplace-page.portfolio-page .renaiss-price-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
body.marketplace-page.portfolio-page .renaiss-price-history-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}
body.marketplace-page.portfolio-page .renaiss-price-history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
body.marketplace-page.portfolio-page .renaiss-price-history-unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
body.marketplace-page.portfolio-page .renaiss-price-history-sub {
  color: #7f8ea3;
  font-size: 11px;
  font-weight: 700;
}
body.marketplace-page.portfolio-page .portfolio-holding-history-block .renaiss-price-history-header {
  display: block;
  margin-bottom: 8px;
}
body.marketplace-page.portfolio-page .portfolio-holding-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
body.marketplace-page.portfolio-page .portfolio-holding-history-block .renaiss-price-history-sub {
  display: block;
  max-width: 100%;
  text-align: left;
  line-height: 1.45;
}
body.marketplace-page.portfolio-page .portfolio-holding-history-unit {
  width: max-content;
  margin-bottom: 8px;
}
body.marketplace-page.portfolio-page .renaiss-price-history-chart-shell {
  margin-top: 0;
  padding: 18px 14px 10px;
}
body.marketplace-page.portfolio-page .renaiss-price-history-chart {
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.marketplace-page.portfolio-page .renaiss-price-history-plot {
  fill: transparent;
  stroke: none;
}
body.marketplace-page.portfolio-page .renaiss-price-history-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
body.marketplace-page.portfolio-page .renaiss-price-history-axis-y {
  fill: #6b7c93;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.marketplace-page.portfolio-page .renaiss-price-history-axis-x {
  fill: #6b7c93;
  font-size: 11px;
  font-weight: 700;
}
body.marketplace-page.portfolio-page .renaiss-price-history-line {
  stroke-width: 2.25;
}
body.marketplace-page.portfolio-page .renaiss-price-history-line-invested {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.marketplace-page.portfolio-page .renaiss-price-history-legend {
  margin-top: 8px;
  padding-top: 2px;
}
body.marketplace-page.portfolio-page .price-history-chart { width: 100%; height: auto; display: block; background: #050608; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; }
body.marketplace-page.portfolio-page .price-history-plot { fill: #050608; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
body.marketplace-page.portfolio-page .price-history-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
body.marketplace-page.portfolio-page .price-history-axis-y,
body.marketplace-page.portfolio-page .price-history-axis-x { fill: #8fa3b8; font-size: 11px; font-weight: 700; }
body.marketplace-page.portfolio-page .price-history-axis-x { text-anchor: middle; }
body.marketplace-page.portfolio-page .price-history-y-label { fill: #94a3b8; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
body.marketplace-page.portfolio-page .price-history-line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.marketplace-page.portfolio-page .price-history-dot { cursor: pointer; }
body.marketplace-page.portfolio-page .price-history-dot-purchase { stroke: rgba(250, 204, 21, 0.55); stroke-width: 2; }
body.marketplace-page.portfolio-page .portfolio-chart-tooltip-floating { top: 18px; right: 18px; left: auto; z-index: 2; }
body.marketplace-page.portfolio-page .portfolio-chart-tooltip-point {
  top: 0;
  left: 0;
  right: auto;
  z-index: 4;
  min-width: 168px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}
body.marketplace-page.portfolio-page .renaiss-price-history-dot,
body.marketplace-page.portfolio-page .portfolio-dual-dot,
body.marketplace-page.portfolio-page .price-history-dot {
  pointer-events: none;
}
body.marketplace-page.portfolio-page .portfolio-chart-dot-active {
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}
body.marketplace-page.portfolio-page .portfolio-dual-hit,
body.marketplace-page.portfolio-page .price-history-hit {
  cursor: pointer;
}
body.marketplace-page.portfolio-page .portfolio-chart-hit { cursor: pointer; fill-opacity: 0.95; }
body.marketplace-page.portfolio-page .portfolio-chart { width: 100%; height: auto; display: block; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); }
body.marketplace-page.portfolio-page .portfolio-chart-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
body.marketplace-page.portfolio-page .portfolio-chart-axis-y,
body.marketplace-page.portfolio-page .portfolio-chart-axis-x { fill: #8fa3b8; font-size: 11px; font-weight: 700; }
body.marketplace-page.portfolio-page .portfolio-chart-axis-x { text-anchor: middle; }
body.marketplace-page.portfolio-page .portfolio-chart-area { fill: rgba(74, 222, 128, 0.12); }
body.marketplace-page.portfolio-page .portfolio-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
body.marketplace-page.portfolio-page .portfolio-chart-line-value { stroke: #4ade80; }
body.marketplace-page.portfolio-page .portfolio-chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 800;
}
body.marketplace-page.portfolio-page .portfolio-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.marketplace-page.portfolio-page .portfolio-chart-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
}
body.marketplace-page.portfolio-page .portfolio-chart-legend-invested {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
body.marketplace-page.portfolio-page .portfolio-chart-legend-current {
  background: linear-gradient(90deg, #facc15, #fb923c, #f472b6, #a78bfa, #60a5fa);
}
body.marketplace-page.portfolio-page .portfolio-chart-legend-breakeven {
  background: transparent;
  border-top: 2px dashed #94a3b8;
  height: 0;
  margin-top: 1px;
}
body.marketplace-page.portfolio-page .portfolio-chart-line-invested { stroke: #60a5fa; stroke-dasharray: 6 5; stroke-width: 2; fill: none; }
body.marketplace-page.portfolio-page .portfolio-chart-dot-value { fill: #4ade80; }
body.marketplace-page.portfolio-page .portfolio-chart-dot-invested { fill: #60a5fa; }
body.marketplace-page.portfolio-page .portfolio-chart-legend { display: flex; gap: 18px; flex-wrap: wrap; color: #aeb6c4; font-size: 12px; font-weight: 800; }
body.marketplace-page.portfolio-page .portfolio-legend-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid currentColor; margin-right: 8px; vertical-align: middle; }
body.marketplace-page.portfolio-page .portfolio-legend-value { color: #4ade80; }
body.marketplace-page.portfolio-page .portfolio-legend-invested { color: #60a5fa; border-top-style: dashed; }
body.marketplace-page.portfolio-page .portfolio-legend-breakeven { color: #94a3b8; border-top-style: dashed; }
body.marketplace-page.portfolio-page .portfolio-roi-line { stroke-width: 1.75; }
body.marketplace-page.portfolio-page .portfolio-roi-chart { background: #050608; }
body.marketplace-page.portfolio-page .portfolio-chart-line-breakeven { stroke: #94a3b8; stroke-dasharray: 6 5; opacity: 0.85; }
body.marketplace-page.portfolio-page .portfolio-chart-baseline { stroke-dasharray: 6 5; opacity: 0.9; }
body.marketplace-page.portfolio-page .portfolio-ref-share-panel {
  margin-top: 18px;
  padding: 18px;
}
body.marketplace-page.portfolio-page .portfolio-ref-share-heading {
  margin-bottom: 0;
}
body.marketplace-page.portfolio-page .portfolio-ref-share-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.marketplace-page.portfolio-page .portfolio-chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
body.marketplace-page.portfolio-page .portfolio-ref-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
body.marketplace-page.portfolio-page .portfolio-ref-compact-copy {
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
}
body.marketplace-page.portfolio-page .portfolio-ref-compact-label {
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
body.marketplace-page.portfolio-page .portfolio-ref-compact-hint {
  color: #7f8ea3;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
body.marketplace-page.portfolio-page .portfolio-ref-field-compact {
  flex: 1 1 220px;
  min-width: 0;
}
body.marketplace-page.portfolio-page .portfolio-ref-panel {
  margin-top: 18px;
}
body.marketplace-page.portfolio-page .portfolio-ref-heading .portfolio-ref-note {
  margin: 4px 0 0;
  color: #8fa3b8;
  font-size: 12px;
  font-weight: 700;
}
body.marketplace-page.portfolio-page .portfolio-ref-panel .portfolio-ref-field {
  margin-top: 4px;
}
body.marketplace-page.portfolio-page .portfolio-ref-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.marketplace-page.portfolio-page .portfolio-ref-input {
  flex: 1 1 120px;
  min-width: 96px;
  max-width: 200px;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-sizing: border-box;
}
body.marketplace-page.portfolio-page .portfolio-ref-save[hidden],
body.marketplace-page.portfolio-page .portfolio-ref-edit[hidden] {
  display: none;
}
body.marketplace-page.portfolio-page .portfolio-ref-input:read-only {
  color: #d8e3ee;
  background: rgba(255, 255, 255, 0.025);
  cursor: default;
}
body.marketplace-page.portfolio-page .portfolio-ref-input:focus {
  outline: none;
  border-color: rgba(147, 197, 253, 0.55);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
body.marketplace-page.portfolio-page .portfolio-ref-save,
body.marketplace-page.portfolio-page .portfolio-ref-edit {
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-sizing: border-box;
}
body.marketplace-page.portfolio-page .portfolio-ref-save {
  background: rgba(96, 165, 250, 0.08);
  color: #bfdbfe;
}
body.marketplace-page.portfolio-page .portfolio-ref-edit {
  background: rgba(255, 255, 255, 0.04);
  color: #e4ebf7;
}
body.marketplace-page.portfolio-page .portfolio-ref-save:disabled,
body.marketplace-page.portfolio-page .portfolio-ref-edit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}
body.marketplace-page.portfolio-page .portfolio-ref-status {
  flex: 0 1 auto;
  min-width: 0;
  color: #8fa3b8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
body.marketplace-page.portfolio-page .portfolio-share-wrap {
  flex: 0 0 auto;
  margin-left: auto;
}
body.marketplace-page.portfolio-page .portfolio-share-x { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; min-height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: #0f0f0f; color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; box-sizing: border-box; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-share-x svg { width: 18px; height: 18px; }
body.marketplace-page.portfolio-page .portfolio-share-x:hover,
body.marketplace-page.portfolio-page .portfolio-share-x:focus-visible { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
body.marketplace-page.portfolio-page .portfolio-share-panel { width: min(720px, calc(100vw - 32px)); max-height: min(94vh, 940px); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 20px; }
body.marketplace-page.portfolio-page .portfolio-share-heading { flex-shrink: 0; margin-bottom: 12px; }
body.marketplace-page.portfolio-page .portfolio-share-body { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
body.marketplace-page.portfolio-page .portfolio-share-preview-wrap { display: flex; justify-content: center; margin: 0 0 14px; padding: 2px 0; overflow: visible; background: transparent; }
body.marketplace-page.portfolio-page .portfolio-share-preview { display: block; width: min(100%, 620px); height: auto; max-width: 620px; max-height: none; margin: 0 auto; object-fit: contain; background: #050505; border: 0; border-radius: 14px; box-shadow: none; }
body.marketplace-page.portfolio-page .portfolio-share-preview-wrap img,
body.marketplace-page.portfolio-page .portfolio-share-preview-wrap canvas { display: block; width: 100%; height: auto; object-fit: contain; }
body.marketplace-page.portfolio-page .portfolio-share-card-picker { margin: 0 0 16px; }
body.marketplace-page.portfolio-page .portfolio-share-card-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #c7d4e2; font-size: 12px; font-weight: 800; }
body.marketplace-page.portfolio-page .portfolio-share-card-picker-head p { margin: 3px 0 0; color: #8fa3b8; font-size: 11px; line-height: 1.35; font-weight: 700; }
body.marketplace-page.portfolio-page .portfolio-share-card-picker-head small { color: #8fa3b8; font-size: 11px; font-weight: 700; }
body.marketplace-page.portfolio-page .portfolio-share-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 160px; overflow: auto; padding-right: 2px; }
body.marketplace-page.portfolio-page .portfolio-share-card-option { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: #e2e8f0; text-align: left; cursor: pointer; box-sizing: border-box; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-share-card-option.is-selected { border-color: rgba(96, 165, 250, 0.65); background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25); }
body.marketplace-page.portfolio-page .portfolio-share-card-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
body.marketplace-page.portfolio-page .portfolio-share-card-option-thumb { width: 44px; height: 60px; object-fit: contain; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
body.marketplace-page.portfolio-page .portfolio-share-card-option-fallback { width: 44px; height: 60px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
body.marketplace-page.portfolio-page .portfolio-share-card-option-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; font-weight: 800; line-height: 1.35; }
body.marketplace-page.portfolio-page .portfolio-share-toggle { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 14px; color: #cbd5e1; font-size: 12px; font-weight: 850; cursor: pointer; user-select: none; }
body.marketplace-page.portfolio-page .portfolio-share-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #ff579a; cursor: pointer; }
body.marketplace-page.portfolio-page .portfolio-share-caption-label { display: grid; gap: 8px; margin-bottom: 0; color: #c7d4e2; font-size: 12px; font-weight: 800; }
body.marketplace-page.portfolio-page .portfolio-share-caption { width: 100%; min-height: 96px; max-height: 140px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(8, 12, 18, 0.85); color: #fff; font: inherit; resize: vertical; box-sizing: border-box; }
body.marketplace-page.portfolio-page .portfolio-share-caption:focus { outline: none; border-color: rgba(96, 165, 250, 0.55); }
body.marketplace-page.portfolio-page .portfolio-share-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
body.marketplace-page.portfolio-page .portfolio-share-copy { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 140px; min-height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; box-sizing: border-box; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
body.marketplace-page.portfolio-page .portfolio-share-copy:hover,
body.marketplace-page.portfolio-page .portfolio-share-copy:focus-visible { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
body.marketplace-page.portfolio-page .portfolio-share-copy:disabled { opacity: 0.6; cursor: wait; }
body.marketplace-page.portfolio-page .portfolio-share-toast { z-index: 1200; }
@media (max-width: 980px) {
  body.marketplace-page.portfolio-page .portfolio-layout { grid-template-columns: 1fr; }
  body.marketplace-page.portfolio-page .portfolio-item { grid-template-columns: 64px minmax(0, 1fr); }
  body.marketplace-page.portfolio-page .portfolio-item-thumb, body.marketplace-page.portfolio-page .portfolio-image-fallback { width: 64px; }
  body.marketplace-page.portfolio-page .portfolio-item-content, body.marketplace-page.portfolio-page .portfolio-actions { grid-column: 2; }
  body.marketplace-page.portfolio-page .portfolio-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.marketplace-page.portfolio-page .portfolio-ref-share-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.marketplace-page.portfolio-page .portfolio-chart-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.marketplace-page.portfolio-page .portfolio-ref-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.marketplace-page.portfolio-page .portfolio-ref-field-compact {
    width: 100%;
  }
  body.marketplace-page.portfolio-page .portfolio-share-wrap {
    margin-left: 0;
    width: 100%;
  }
  body.marketplace-page.portfolio-page .portfolio-share-x { width: 100%; }
  body.marketplace-page.portfolio-page .portfolio-ref-input { max-width: none; }
}

body.marketplace-page.portfolio-page .portfolio-form-panel,
body.marketplace-page.portfolio-page .portfolio-form { overflow: visible; }
body.marketplace-page.portfolio-page .portfolio-card-name-label { display: grid; gap: 6px; color: #d8e3ee; font-size: 12px; font-weight: 900; }
body.marketplace-page.portfolio-page .portfolio-marketplace-combobox { position: relative; width: 100%; overflow: hidden; }
body.marketplace-page.portfolio-page .portfolio-marketplace-search-row { position: relative; width: 100%; }
body.marketplace-page.portfolio-page .portfolio-marketplace-combobox.is-selected .portfolio-marketplace-results { display: none !important; }
body.marketplace-page.portfolio-page .portfolio-marketplace-combobox input[name="cardName"] {
  width: 100%;
  box-sizing: border-box;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-combobox.is-selected .portfolio-marketplace-search-row { display: none; }
body.marketplace-page.portfolio-page .portfolio-marketplace-selected { display: block; width: 100%; }
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-text {
  min-width: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-row .portfolio-marketplace-result-thumb,
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-row .portfolio-marketplace-result-fallback,
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-row .portfolio-marketplace-result-main {
  display: none !important;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-change {
  align-self: center;
  min-height: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #e4ebf7;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-selected-change:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}
body.marketplace-page.portfolio-page .portfolio-marketplace-hint { margin: 0; color: #c5d0dc; font-size: 11px; font-weight: 700; line-height: 1.45; }
body.marketplace-page.portfolio-page .portfolio-marketplace-combobox.is-selected + .portfolio-marketplace-hint,
body.marketplace-page.portfolio-page .portfolio-card-name-label:has(.portfolio-marketplace-combobox.is-selected) .portfolio-marketplace-hint { display: none; }
body.marketplace-page.portfolio-page .portfolio-marketplace-results {
  position: fixed;
  display: none;
  gap: 4px;
  max-height: min(360px, 50vh);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 8px;
  background: #0f141c;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  z-index: 1200;
  pointer-events: none;
  visibility: hidden;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-results.is-open {
  display: grid;
  pointer-events: auto;
  visibility: visible;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-results[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result:hover,
body.marketplace-page.portfolio-page .portfolio-marketplace-result:focus-visible {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.08);
  outline: none;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result-thumb {
  width: 52px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result-fallback {
  width: 52px;
  height: 72px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result-main { display: grid; gap: 2px; min-width: 0; }
body.marketplace-page.portfolio-page .portfolio-marketplace-result-main strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  word-break: break-word;
  display: block;
}
body.marketplace-page.portfolio-page .portfolio-marketplace-result-main small { color: #9aa8b8; font-size: 11px; font-weight: 700; }
body.marketplace-page.portfolio-page .portfolio-marketplace-empty { padding: 10px 8px; color: #9aa8b8; font-size: 12px; font-weight: 700; }

body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem,
body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem:not(.is-active) {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem:hover,
body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem.is-active,
body.marketplace-page .side-nav-section:has(.side-nav-parent[data-side-nav-toggle]) .side-subitem[aria-current] {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  box-shadow: none;
}


body.marketplace-page.games-page .games-section,
body.marketplace-page.games-play-page .games-play-panel {
  padding: 0 0 32px;
}

body.marketplace-page.games-page .games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body.marketplace-page.games-page .game-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 8px;
  overflow: visible;
  background: rgba(9, 9, 9, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.marketplace-page.games-page .game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: var(--renaiss-hover-rainbow);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.18s ease;
}

body.marketplace-page.games-page .game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 22px rgba(255, 233, 110, 0.14),
    0 0 30px rgba(255, 87, 154, 0.16),
    0 0 38px rgba(64, 93, 255, 0.18);
  transition: opacity 0.18s ease;
}

body.marketplace-page.games-page .game-card:hover,
body.marketplace-page.games-page .game-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
}

body.marketplace-page.games-page .game-card:hover::before,
body.marketplace-page.games-page .game-card:focus-visible::before,
body.marketplace-page.games-page .game-card:hover::after,
body.marketplace-page.games-page .game-card:focus-visible::after {
  opacity: 1;
}

body.marketplace-page.games-page .game-card-preview {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.07);
}

body.marketplace-page.games-page .game-card-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.98);
  transition: transform 0.18s ease, filter 0.18s ease;
}

body.marketplace-page.games-page .game-card:hover .game-card-preview img,
body.marketplace-page.games-page .game-card:focus-visible .game-card-preview img {
  filter: brightness(1.12) saturate(1.05);
  transform: scale(1.025);
}

@media (max-width: 1080px) {
  body.marketplace-page.games-page .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.marketplace-page.games-page .games-grid {
    grid-template-columns: 1fr;
  }
}

body.marketplace-page.games-page .game-card-body {
  display: grid;
  gap: 6px;
  padding: 16px;
}

body.marketplace-page.games-page .game-card-title {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

body.marketplace-page.games-page .game-card-desc {
  margin: 0;
  color: #9aa3af;
  font-size: 0.88rem;
  line-height: 1.45;
}

body.marketplace-page.games-play-page {
  height: 100vh;
  overflow: hidden;
}

body.marketplace-page.games-play-page .app-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body.marketplace-page.games-play-page .sidebar {
  height: 100vh;
  overflow: hidden;
}

body.marketplace-page.games-play-page .main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 32px clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

body.marketplace-page.games-play-page .games-play-header {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-bottom: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.marketplace-page.games-play-page .games-play-header .gacha-detail-back {
  margin-bottom: 10px;
}

body.marketplace-page.games-play-page .games-play-header .eyebrow {
  margin-bottom: 4px;
}

body.marketplace-page.games-play-page .gacha-detail-title-row .marketplace-title {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: var(--type-page-title);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
  letter-spacing: 0;
}

body.marketplace-page.games-play-page .games-play-section {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.marketplace-page.games-play-page .games-play-cabinet {
  position: relative;
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
}

body.marketplace-page.games-play-page .games-play-cabinet-plain {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

body.marketplace-page.games-play-page .games-play-cabinet-frame {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

body.marketplace-page.games-play-page .games-play-viewport {
  position: absolute;
  top: 4.85%;
  right: 3.71%;
  bottom: 17.33%;
  left: 3.37%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

body.marketplace-page.games-play-page .games-play-cabinet-plain .games-play-viewport {
  inset: 0;
}

body.marketplace-page.games-play-page.card-survivor-play-page .games-play-section {
  align-items: stretch;
  justify-content: center;
}

body.marketplace-page.games-play-page.card-survivor-play-page .card-survivor-cabinet {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: auto;
}

body.marketplace-page.games-play-page .games-play-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  overflow: hidden;
}

body.marketplace-page.games-play-page.monster-dash-play-page .games-play-section,
body.marketplace-page.games-play-page.card-survivor-play-page .games-play-section,
body.marketplace-page.games-play-page.fruit-peel-play-page .games-play-section {
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

body.marketplace-page.games-play-page .game-frameless-cabinet {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.marketplace-page.games-play-page .game-frameless-cabinet .games-play-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.marketplace-page.games-play-page .game-frameless-cabinet .games-play-frame {
  width: 100%;
  height: 100%;
  background: transparent;
}

body.marketplace-page.games-play-page.monster-dash-play-page .monster-dash-cabinet {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

body.marketplace-page.games-play-page.card-survivor-play-page .card-survivor-cabinet {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

body.marketplace-page.games-play-page.fruit-peel-play-page .fruit-peel-cabinet {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

body.marketplace-page.games-play-page.monster-merge-play-page .games-play-section {
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

body.marketplace-page.games-play-page.monster-merge-play-page .monster-merge-cabinet {
  position: relative;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.marketplace-page.games-play-page.monster-merge-play-page .monster-merge-cabinet .games-play-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.marketplace-page.games-play-page.monster-merge-play-page .monster-merge-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #000;
  pointer-events: auto;
}

body.marketplace-page.games-play-page.card-sort-race-external-scroll-page {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
}

body.marketplace-page.games-play-page.card-sort-race-external-scroll-page .app-shell {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

body.marketplace-page.games-play-page.card-sort-race-external-scroll-page .main {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

body.marketplace-page.games-play-page.card-sort-race-external-scroll-page .games-play-section {
  display: block;
  overflow: visible;
  width: 100%;
  margin-top: 20px;
}

body.marketplace-page.games-play-page.card-sort-race-external-scroll-page .card-sort-race-frame {
  display: block;
  width: 100%;
  height: 920px;
  min-height: 720px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

@media (max-width: 720px) {
  body.marketplace-page.games-play-page .main {
    padding: 20px 16px;
  }

  body.marketplace-page.games-play-page .games-play-header {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  body.marketplace-page.games-play-page .gacha-detail-title-row .marketplace-title {
    font-size: var(--type-page-title);
  }
}
body.marketplace-page.games-page .game-card:hover {
  background: rgba(18, 18, 18, 0.98) !important;
}

  display: flex;
  align-items: center;
  gap: 10px;
}

  border: 1px solid var(--border-soft);
  background: var(--surface-low);
  color: var(--text);
  border-radius: 999px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.1);
  color: var(--accent);
  outline: none;
}

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

  min-width: 0;
  border: 1px solid var(--border-soft);
  background: rgba(17, 17, 18, 0.96);
  border-radius: 8px;
  padding: 14px;
}

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.15;
}

  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

  color: var(--text);
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

  color: #22c55e;
}

  color: #ef4444;
}

  color: var(--text-muted);
}

  border: 1px solid var(--border-soft);
  background: rgba(10, 12, 16, 0.9);
  border-radius: 8px;
  overflow: hidden;
}

  padding: 12px;
  margin-bottom: 12px;
}

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

  padding: 12px;
}

  width: 100%;
  height: 240px;
  display: block;
}

  display: grid;
  gap: 8px;
  max-height: 860px;
  overflow: auto;
  padding-right: 2px;
}

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.015);
  border-radius: 8px;
  padding: 10px 12px;
  color: inherit;
}

  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.08);
  outline: none;
}

  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}

  min-width: 0;
}

  display: block;
  min-width: 0;
}

  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

  padding: 18px 14px;
  color: var(--text-muted);
  font-size: 13px;
}

  margin: 0 0 16px;
}

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

  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(110, 231, 242, 0.24);
  border-radius: 10px;
  background: rgba(110, 231, 242, 0.08);
  color: #d8f8ff;
  font-size: 13px;
}

  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
}

  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 16, 0.98);
  border-radius: 16px;
  padding: 20px;
}

  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
}

  padding: 12px;
  margin-bottom: 12px;
}

  padding: 12px;
}

  color: #9aa6b8;
}

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  margin-left: auto;
}

  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

  border-color: rgba(110, 231, 242, 0.24);
  background: rgba(110, 231, 242, 0.08);
}

  color: #9aa6b8;
}

  color: #eef2f7;
}

  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9aa6b8;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

  text-transform: uppercase;
}

  color: #eef2f7;
  background: rgba(255, 255, 255, 0.06);
}

  color: #eef2f7;
  background: rgba(110, 231, 242, 0.14);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 242, 0.28);
}