:root {
  color-scheme: light;
  --bg: #f5f1e8;
  --surface: #fffaf0;
  --surface-strong: #f0e6d2;
  --text: #172033;
  --muted: #697386;
  --line: rgba(23, 32, 51, 0.14);
  --accent: #d4a23a;
  --accent-dark: #90640d;
  --blue: #1f4e8c;
  --red: #be3d2c;
  --green: #167a52;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  --radius: 20px;
}

body.dark {
  color-scheme: dark;
  --bg: #0b1020;
  --surface: #111827;
  --surface-strong: #172033;
  --text: #f8fafc;
  --muted: #a6adbb;
  --line: rgba(248, 250, 252, 0.14);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, rgba(212, 162, 58, 0.22), transparent 32rem),
    radial-gradient(circle at top right, rgba(31, 78, 140, 0.18), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.brand strong { display: block; font-size: 20px; line-height: 1; }
.brand span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-actions a, .ghost-button, .panel-title button, .language-select {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
}

.nav-actions a[data-view-target="premium"] {
  border-color: color-mix(in srgb, var(--accent) 82%, var(--line));
  background: linear-gradient(145deg, #f8d66d, var(--accent));
  color: #111827;
  box-shadow: 0 10px 28px rgba(212, 162, 58, 0.26);
}

.nav-actions a[data-view-target="premium"]:hover,
.nav-actions a[data-view-target="premium"]:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(212, 162, 58, 0.34);
  outline: none;
}

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.mobile-menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

main { width: min(1480px, 100%); margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 56px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 380px;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 22px;
}
.hero-copy, .hero-card, .filters, .panel-section, .listing, .summary > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}
.hero-copy { padding: clamp(24px, 5vw, 54px); }
.eyebrow { color: var(--accent-dark); font-weight: 950; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
body.dark .eyebrow { color: var(--accent); }
.hero h1 { max-width: 820px; font-size: clamp(34px, 7vw, 78px); line-height: .95; letter-spacing: -0.06em; margin: 10px 0 18px; }
.hero-text { max-width: 720px; color: var(--muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-market-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  max-width: 760px;
  margin-top: clamp(26px, 5vw, 58px);
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 10rem),
    color-mix(in srgb, var(--surface-strong) 58%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-card-stack {
  position: relative;
  width: 94px;
  height: 74px;
}

.hero-mini-card {
  position: absolute;
  bottom: 6px;
  left: 34px;
  width: 38px;
  aspect-ratio: .714;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 7px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .24);
  animation: heroCardFloat 5.8s ease-in-out infinite;
}

.hero-mini-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 999px;
}

.hero-mini-card.red {
  transform: rotate(-13deg) translate(-24px, 4px);
  background: linear-gradient(135deg, #b63737, #f2ce76);
  animation-delay: -.4s;
}

.hero-mini-card.gold {
  z-index: 2;
  transform: translateY(-6px);
  background: linear-gradient(135deg, #d4a23a, #7c4a20);
}

.hero-mini-card.blue {
  transform: rotate(13deg) translate(24px, 4px);
  background: linear-gradient(135deg, #315c9f, #111827);
  animation-delay: .45s;
}

.hero-market-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hero-market-copy strong {
  font-size: 16px;
}

.hero-market-copy span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
  font-weight: 750;
}

.hero-price-pulse {
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.hero-price-pulse span,
.hero-price-pulse small,
.hero-trust-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-price-pulse strong {
  color: var(--green);
  font-size: 22px;
}

.hero-trust-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hero-trust-row span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.hero-deal-radar-teaser {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--green) 9%, var(--surface))),
    var(--surface);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
}

.hero-deal-radar-teaser span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-deal-radar-teaser strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

.hero-deal-radar-teaser small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.hero-deal-meter {
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 62px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--green) 14%, var(--surface-strong));
  color: var(--green);
}

.hero-deal-meter b {
  font-size: 26px;
  line-height: .9;
}

.hero-deal-meter span {
  color: var(--green);
  font-size: 10px;
}

.hero-deal-radar-teaser button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  padding: 0 12px;
  font-weight: 950;
  cursor: pointer;
}

@keyframes heroCardFloat {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 7px; }
}
.primary-button, .secondary-button, .load-more {
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  padding: 0 18px;
  cursor: pointer;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.primary-button { background: var(--accent); color: #111827; }
.secondary-button, .load-more { background: transparent; color: var(--text); }
.hero-card { padding: 22px; display: grid; align-content: center; gap: 14px; }
.live-dot { width: fit-content; border-radius: 999px; background: rgba(22, 122, 82, .14); color: var(--green); padding: 7px 10px; font-weight: 900; font-size: 12px; }
.hero-card h2 { font-size: 28px; }
.roadmap-item { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; }
.roadmap-item span { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); opacity: .45; }
.roadmap-item.done { color: var(--text); }
.roadmap-item.done span { opacity: 1; background: var(--green); }

.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.summary > div { display: grid; gap: 8px; min-height: 96px; align-content: center; padding: 18px; }
.metric-label { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 900; }
.summary strong { font-size: clamp(28px, 4vw, 42px); line-height: 1; }

.app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.filters, .side-panel { position: sticky; top: 92px; display: grid; gap: 14px; }
.filters {
  padding: 16px;
  align-content: start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-strong) 54%, var(--surface))),
    var(--surface);
}
.filter-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}
.filter-header h2 {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.filter-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.dark .filter-kicker { color: var(--accent); }
.filter-header button,
#resetButton {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}
.filter-header button:hover,
#resetButton:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.filter-group,
.active-filter-box {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.filter-search-group {
  padding: 11px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-strong) 58%, var(--surface));
}
.filter-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.filter-group-title strong {
  font-size: 13px;
  font-weight: 950;
}
.filter-group-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}
.quick-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.smart-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.quick-filter-row button,
.smart-search-row button,
.active-filter-chips button,
.empty-filter-chip {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}
.quick-filter-row button {
  cursor: pointer;
}
.quick-filter-row button:hover,
.quick-filter-row button.active,
.smart-search-row button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-dark);
}
.smart-search-row button {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255, 238, 172, .34));
}
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.active-filter-chips button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.active-filter-chips button::after {
  content: "×";
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.active-filter-chips button:hover {
  border-color: var(--red);
  color: var(--red);
}
.empty-filter-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: var(--muted);
  background: transparent;
}
.panel-title { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.panel-title h2, .section-heading h2 { font-size: 22px; }
.panel-title button { padding: 7px 10px; font-size: 12px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
input, select {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--text); padding: 0 12px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(212, 162, 58, 0.28); outline-offset: 2px; }
.hint-box { border: 1px dashed var(--line); border-radius: 16px; padding: 12px; color: var(--muted); line-height: 1.45; font-size: 14px; }
.hint-box strong { color: var(--text); }

.catalog-area { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 14px; }
#activeFilters { color: var(--muted); text-align: right; }
.results { display: grid; gap: 14px; }
.listing {
  cursor: pointer; display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 16px; padding: 14px; box-shadow: none; }
.card-art { position: relative; width: 154px; aspect-ratio: 0.714; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, var(--art-a, #116a5b), var(--art-b, #315c9f)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-image,
.detail-card-art img,
.home-card-thumb img {
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.card-image.is-japanese-card,
.detail-card-art img.is-japanese-card,
.home-card-thumb img.is-japanese-card {
  filter: saturate(1.05) contrast(1.03);
}
.market-updated {
  animation: marketImageSwap .26s ease both;
}
@keyframes marketImageSwap {
  from { opacity: .72; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-image[src=""], .card-image:not([src]) { display: none; }
.card-fallback { display: grid; height: 100%; grid-template-rows: auto 1fr auto; padding: 12px; color: white; }
.card-game, .card-set { font-size: 11px; font-weight: 950; opacity: .86; }
.card-initials { display: grid; place-items: center; font-size: 34px; }
.market-switch {
  position: static;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-strong) 76%, transparent));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
.market-switch button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.market-switch button:hover,
.market-switch button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.market-switch button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #15120a;
  border-color: color-mix(in srgb, var(--accent) 80%, #fff);
  box-shadow: 0 10px 22px rgba(212, 162, 58, .24);
}
.market-switch span {
  position: static;
  inset: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
}
.card-market-switch { flex: 0 0 auto; margin-left: auto; }
.display-card-market-switch,
.home-market-switch,
.detail-market-switch { margin-top: 10px; }
.home-market-switch button { width: 38px; height: 34px; }
.home-market-switch span { font-size: 22px; }
.listing-main { display: grid; gap: 13px; min-width: 0; }
.listing-title-row { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; }
.listing h3 { overflow-wrap: anywhere; font-size: 22px; line-height: 1.15; }
.meta { color: var(--muted); margin-top: 4px; }
.watch-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 20px; }
.watch-button:hover, .watch-button.active { border-color: var(--accent); color: var(--accent); }
.binder-add-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  color: var(--text);
  padding: 0 12px;
  font-weight: 950;
  cursor: pointer;
}
.binder-add-button:hover,
.binder-add-button.active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--gold-soft);
}
body.dark .binder-add-button.active { color: var(--accent); }
.card-details { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); color: var(--muted); font-size: 13px; font-weight: 900; }
.offers { display: grid; gap: 8px; }
.offer { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; gap: 12px; align-items: center; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-strong) 52%, transparent); }
.seller { min-width: 0; font-weight: 950; overflow-wrap: anywhere; }
.condition { color: var(--muted); font-size: 13px; }
.price { min-width: 76px; text-align: right; font-weight: 950; }
.best-price { color: var(--green); }

.panel-section { padding: 16px; box-shadow: none; }
.watchlist-empty { margin-top: 12px; color: var(--muted); }
.watch-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.watch-item:last-child { border-bottom: 0; }
.watch-item span { overflow-wrap: anywhere; }
.watch-item strong { color: var(--accent-dark); }
body.dark .watch-item strong { color: var(--accent); }
.source-list { display: grid; gap: 10px; padding: 0; margin: 12px 0 0; list-style: none; }
.source-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-strong); }
.source-list strong { color: var(--red); font-size: 12px; text-transform: uppercase; }
.source-list strong.active { color: var(--green); }
.data-status { margin-top: 12px; color: var(--muted); line-height: 1.5; }
.empty-state { padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.load-more { display: block; width: min(280px, 100%); margin: 18px auto 0; }

@media (max-width: 1120px) {
  .hero, .app-shell { grid-template-columns: 1fr; }
  .filters, .side-panel { position: static; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-header,
  .filter-search-group,
  .active-filter-box,
  .hint-box {
    grid-column: 1 / -1;
  }
  .panel-title { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .brand-logo { width: 46px; height: 46px; }
  .mobile-menu-button { display: inline-flex; flex-direction: column; }
  .nav-actions a { display: none; }
  main { padding-top: 18px; }
  .hero-copy { padding: 24px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1fr; }
  .filter-header,
  .filter-search-group,
  .active-filter-box,
  .hint-box {
    grid-column: auto;
  }
  .listing {
  cursor: pointer; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .card-art { width: 104px; border-radius: 12px; }
  .card-initials { font-size: 24px; }
  .offer { grid-template-columns: 1fr auto; }
  .condition { grid-column: 1 / -1; }
  .section-heading { display: block; }
  #activeFilters { text-align: left; margin-top: 6px; }
}

.newsletter-section,
.profile-section {
  margin: 22px 0;
}

.newsletter-section {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
}

.newsletter-copy h2,
.profile-heading h2 {
  margin-top: 6px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.newsletter-copy p {
  margin-top: 12px;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.6;
}

.newsletter-form,
.profile-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.newsletter-form label,
.profile-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
}

.newsletter-form input,
.newsletter-form select,
.profile-card input,
.profile-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 13px;
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
}

.form-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

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

.profile-auth-shell {
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.profile-auth-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
}

.auth-mode-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 950;
}

.auth-mode-tabs button.active {
  background: linear-gradient(135deg, var(--accent), #f4d37a);
  color: #172033;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.profile-auth-card,
.profile-login-preview,
.profile-member-area {
  min-width: 0;
}

.profile-auth-card {
  padding: clamp(18px, 3vw, 26px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: var(--shadow);
}

.register-success-card {
  align-content: center;
  min-height: 320px;
  text-align: center;
}

.register-success-card .membership-badge {
  justify-self: center;
}

.profile-login-preview {
  display: grid;
  align-content: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 34px);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 16rem),
    linear-gradient(140deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--blue) 10%, var(--surface)));
  box-shadow: var(--shadow);
}

.profile-login-preview h3 {
  max-width: 620px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

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

.profile-preview-grid div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.profile-preview-grid strong {
  font-size: 16px;
}

.profile-preview-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.profile-member-area {
  display: grid;
}

.profile-card h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.dashboard-card {
  align-content: start;
  text-align: center;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: white;
  font-weight: 950;
  font-size: 24px;
  box-shadow: var(--shadow);
}

.profile-avatar.avatar-gold {
  background: linear-gradient(135deg, #d4a23a, #7c4a20);
}

.profile-avatar.avatar-blue {
  background: linear-gradient(135deg, #315c9f, #111827);
}

.profile-avatar.avatar-red {
  background: linear-gradient(135deg, #b63737, #f2ce76);
}

.profile-avatar.avatar-dark {
  background: linear-gradient(135deg, #111827, #05070d);
}

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

.avatar-customizer {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
}

.avatar-preview {
  justify-self: start;
}

#dashboardEmail,
#profileStatus {
  color: var(--muted);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.profile-stats div {
  display: grid;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 16px;
  background: var(--surface-strong);
}

.profile-stats strong {
  font-size: 22px;
}

.profile-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.mini-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.mini-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--text);
}

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

.alert-form-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#alertLimitBadge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

#alertLimitBadge.premium-active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-dark);
}

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

.alert-quick-actions button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.alert-quick-actions button:hover,
.alert-quick-actions button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.alert-quick-actions span,
.alert-item-main span {
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.alert-quick-actions strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.alert-quick-actions small {
  color: var(--muted);
  font-size: 11px;
}

.alert-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  padding: 12px;
  color: var(--text);
}

.alert-item.hit {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
}

.alert-item.near {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.alert-item-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.alert-item-main strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.alert-item-main small {
  color: var(--muted);
  line-height: 1.35;
}

.alert-progress {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.alert-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--green));
}

.alert-item-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.alert-item-actions strong {
  color: var(--accent-dark);
  white-space: nowrap;
}

.alert-item-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.alert-item-actions button:hover,
.alert-item-actions button:focus-visible {
  border-color: var(--red);
  color: var(--red);
  outline: none;
}

.full-width { width: 100%; }

@media (max-width: 1120px) {
  .newsletter-section,
  .profile-auth-shell,
  .profile-grid { grid-template-columns: 1fr; }

  .hero-market-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hero-deal-radar-teaser {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero-deal-radar-teaser button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .hero-price-pulse {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .newsletter-section { padding: 18px; }
  .profile-stats { grid-template-columns: 1fr; }
  .profile-preview-grid,
  .avatar-customizer { grid-template-columns: 1fr; }

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

  .hero-deal-radar-teaser {
    grid-template-columns: 1fr;
  }

  .hero-deal-meter {
    justify-self: start;
  }

  .hero-card-stack {
    width: 86px;
  }
}

.ebay-button {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ebay-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(49, 92, 159, 0.35);
}

.ebay-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ebay-offers {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.clickable-offer {
  cursor: pointer;
}

.clickable-offer:hover {
  border-color: rgba(49, 92, 159, 0.45);
}

body.dark .ebay-button {
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.25);
}

/* v6 Premium detail page + dashboard polish */
:root {
  --premium-dark: #0d1324;
  --gold-soft: rgba(212, 162, 58, 0.18);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.topbar {
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.08);
}

.brand {
  padding: 6px 10px 6px 6px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  padding: 4px;
}

body.dark .brand-logo { background: rgba(255,255,255,.06); }

.hero-copy {
  position: relative;
  overflow: hidden;
}

.hero-copy::after {
  content: "ORC";
  position: absolute;
  right: -24px;
  bottom: -42px;
  font-size: clamp(90px, 18vw, 210px);
  font-weight: 1000;
  letter-spacing: -0.12em;
  color: rgba(212, 162, 58, 0.08);
  pointer-events: none;
}

.market-preview {
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--premium-dark) 14%, var(--surface)));
}

.binder-preview {
  overflow: hidden;
  align-content: stretch;
  background:
    radial-gradient(circle at 72% 18%, rgba(212, 162, 58, .2), transparent 9rem),
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--premium-dark) 22%, var(--surface)));
}

.binder-copy {
  display: grid;
  gap: 9px;
  align-content: start;
}

.binder-copy p {
  color: var(--muted);
  line-height: 1.45;
  font-weight: 800;
}

.mini-binder {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 236px;
  padding: 18px 18px 18px 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 11%, transparent 89%, rgba(0,0,0,.18)),
    linear-gradient(135deg, #111827, #263449 54%, #111827);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 22px 52px rgba(15, 23, 42, .2);
  perspective: 720px;
  transform-style: preserve-3d;
}

.binder-spine {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(212,162,58,.38), rgba(0,0,0,.28));
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(0,0,0,.32);
}

.binder-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.binder-page.left { transform: rotateY(8deg); transform-origin: right center; }
.binder-page.right { transform: rotateY(-8deg); transform-origin: left center; }
.binder-page.turning {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: calc(50% + 6px);
  width: calc(50% - 24px);
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 4;
  animation: binderPageTurn 10s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.binder-page.turning::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.03));
  opacity: 0;
  pointer-events: none;
  animation: binderPageGlint 10s ease-in-out infinite;
}

.binder-page span {
  width: 100%;
  aspect-ratio: .714;
  min-height: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    rgba(255,255,255,.05);
}

.binder-page .filled {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.26);
}

.binder-page .filled::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 42%);
}

.binder-page .red { background: linear-gradient(135deg, #b63737, #f2ce76); }
.binder-page .blue { background: linear-gradient(135deg, #315c9f, #111827); }
.binder-page .gold { background: linear-gradient(135deg, #d4a23a, #7c4a20); }
.binder-page .green { background: linear-gradient(135deg, #167a52, #d4a23a); }

@keyframes binderPageTurn {
  0%, 18% {
    transform: rotateY(-8deg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 rgba(0,0,0,0);
  }
  42%, 56% {
    transform: rotateY(-154deg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), -18px 18px 32px rgba(0,0,0,.28);
  }
  78%, 100% {
    transform: rotateY(-8deg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 rgba(0,0,0,0);
  }
}

@keyframes binderPageGlint {
  0%, 22%, 74%, 100% { opacity: 0; }
  38%, 54% { opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .binder-page.turning,
  .binder-page.turning::before {
    animation: none;
  }
}

.binder-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.binder-stats div {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.binder-stats span,
.binder-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.binder-stats strong {
  font-size: 24px;
}

.binder-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.binder-feature-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
}

.card-detail-section {
  margin: 24px 0;
}

.detail-heading h2 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin-top: 6px;
}

.card-detail-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-strong) 64%, transparent));
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 26px);
}

.detail-art-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.detail-card-art {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: .714;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--art-a, #116a5b), var(--art-b, #315c9f));
  box-shadow: 0 26px 70px rgba(15, 23, 42, .25), inset 0 0 0 1px rgba(255,255,255,.25);
}

.detail-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-card-art img[hidden] { display: none; }

.display-detail-shell {
  grid-template-columns: 340px minmax(0, 1fr);
}

.display-detail-art {
  aspect-ratio: .72;
  max-width: 340px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(150deg, #0f172a, #172033);
}

.display-detail-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.42));
}

.display-detail-art.official-pack img,
.display-detail-art.concept img {
  object-fit: contain;
  transform: scale(1.02);
}

.detail-fallback {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px;
  color: white;
}

.detail-fallback[hidden] {
  display: none;
}

.detail-fallback strong {
  display: grid;
  place-items: center;
  font-size: 64px;
  letter-spacing: -0.08em;
}

.detail-fallback span,
.detail-fallback small { font-weight: 950; opacity: .9; }

.detail-market-panel { display: grid; gap: 16px; min-width: 0; }

.detail-title-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.market-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--accent-dark);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.dark .market-badge { color: var(--accent); }

.detail-title-row h3 {
  margin-top: 10px;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

#detailMeta { margin-top: 8px; color: var(--muted); }

.detail-price-box {
  min-width: 210px;
  display: grid;
  gap: 4px;
  text-align: right;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.detail-price-box span,
.detail-price-box small { color: var(--muted); font-size: 12px; font-weight: 900; }
.detail-price-box strong { font-size: 34px; line-height: 1; color: var(--green); }
#detailTrend.negative { color: var(--red); }

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

.detail-kpis div,
.chart-card,
.market-table-card,
.portfolio-summary div {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.detail-kpis div {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.detail-kpis span,
.chart-header span,
.market-table-header span,
.portfolio-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.detail-kpis strong { font-size: 22px; }

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

.intelligence-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--green) 8%, transparent)),
    var(--surface);
  padding: 18px;
}

.intelligence-hero-card div:first-child {
  display: grid;
  gap: 6px;
}

.intelligence-hero-card span,
.intelligence-grid span,
.intelligence-card-header span,
.language-pair-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.intelligence-hero-card strong {
  font-size: 28px;
  line-height: 1.05;
}

.intelligence-hero-card p {
  color: var(--muted);
  line-height: 1.45;
}

.intelligence-score-ring {
  --score: 0%;
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--green) var(--score), color-mix(in srgb, var(--line) 76%, transparent) 0);
}

.intelligence-score-ring.hot {
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--red) var(--score), color-mix(in srgb, var(--line) 76%, transparent) 0);
}

.intelligence-score-ring b {
  font-size: 28px;
  line-height: 1;
}

.intelligence-score-ring small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

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

.intelligence-grid div,
.intelligence-card,
.language-link-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.intelligence-grid div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.intelligence-grid strong {
  overflow-wrap: anywhere;
  font-size: 20px;
}

.intelligence-grid small {
  color: var(--muted);
  line-height: 1.35;
}

.intelligence-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.intelligence-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.intelligence-card-header,
.language-link-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.intelligence-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.intelligence-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.intelligence-tag.collector,
.intelligence-tag.market {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent-dark);
}

.print-variant-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.print-variant-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 10px;
}

.print-variant-row span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 950;
}

.print-variant-row strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.print-variant-row small {
  color: var(--muted);
  font-size: 11px;
}

.language-link-card {
  align-items: center;
  padding: 14px;
}

.language-link-card div:first-child {
  display: grid;
  gap: 5px;
}

.language-link-card span {
  color: var(--muted);
  line-height: 1.45;
}

.language-pair-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px;
}

.language-pair-stats div {
  display: grid;
  gap: 2px;
  min-width: 78px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 9px;
  text-align: right;
}

.chart-card { padding: 16px; overflow: hidden; }
.chart-header, .market-table-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.chart-header div:first-child { display: grid; gap: 4px; }
.range-pills { display: flex; gap: 6px; }
.range-pills span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.range-pills .active { background: var(--accent); color: #111827; border-color: var(--accent); }

.price-chart {
  width: 100%;
  min-height: 240px;
  color: var(--green);
  overflow: visible;
}

.chart-grid { stroke: currentColor; stroke-opacity: .12; stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; font-weight: 800; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--surface); stroke: currentColor; stroke-width: 4; }

.market-table-card { padding: 16px; }
.detail-offers { display: grid; gap: 8px; }
.detail-offer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
}
.detail-offer div { display: grid; gap: 3px; }
.detail-offer span { color: var(--muted); font-size: 13px; }
.detail-offer em {
  font-style: normal;
  border-radius: 999px;
  background: rgba(31, 78, 140, 0.12);
  color: var(--blue);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
}
.detail-offer b { font-size: 18px; }
.detail-offer.best { border-color: rgba(22,122,82,.35); }
.detail-offer.best b { color: var(--green); }

.detail-button {
  min-width: 82px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}
.detail-button:hover { border-color: var(--accent); }

.listing:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 4px;
}

.listing:hover .detail-button {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.listing .watch-button,
.listing .detail-button,
.listing .ebay-button {
  cursor: pointer;
}


.pro-dashboard-card {
  background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--accent) 9%, var(--surface)));
}

.portfolio-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.portfolio-summary div { display: grid; gap: 4px; padding: 12px; }
.portfolio-summary strong { font-size: 18px; }

.dashboard-page-grid {
  align-items: stretch;
}

.portfolio-dashboard-card {
  align-content: start;
  gap: 14px;
}

.portfolio-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.portfolio-card-header div {
  display: grid;
  gap: 4px;
}

.portfolio-card-header span,
.portfolio-kpi-grid span,
.portfolio-chart-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.portfolio-card-header > strong {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--green) 11%, transparent);
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

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

.portfolio-kpi-grid div,
.portfolio-chart-card,
.watchlist-signal-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.portfolio-kpi-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
}

.portfolio-kpi-grid strong {
  overflow-wrap: anywhere;
  font-size: 19px;
  line-height: 1.12;
}

.portfolio-kpi-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.portfolio-chart-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}

.portfolio-chart-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portfolio-chart {
  width: 100%;
  min-height: 170px;
  color: var(--green);
}

.portfolio-chart.negative {
  color: var(--red);
}

.portfolio-movers-list {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
}

.portfolio-movers-list.compact {
  margin-top: 10px;
}

.portfolio-mover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  padding: 12px;
}

.portfolio-mover.positive {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
}

.portfolio-mover.negative {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line));
}

.portfolio-mover div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portfolio-mover strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
}

.portfolio-mover span {
  color: var(--muted);
  font-size: 12px;
}

.portfolio-mover b {
  font-size: 16px;
  white-space: nowrap;
}

.watchlist-signal-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.watchlist-signal-card strong {
  font-size: 22px;
  color: var(--green);
}

.watchlist-signal-card strong.negative {
  color: var(--red);
}

.watchlist-signal-card span,
.portfolio-actions-card p {
  color: var(--muted);
  line-height: 1.45;
}

.premium-list li::marker { color: var(--accent); }

@media (max-width: 1120px) {
  .card-detail-shell { grid-template-columns: 1fr; }
  .detail-card-art { max-width: 240px; justify-self: center; }
  .detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intelligence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intelligence-subgrid { grid-template-columns: 1fr; }
  .portfolio-kpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .brand div { display: none; }
  .brand-logo { width: 48px; height: 48px; }
  .detail-title-row, .chart-header, .market-table-header { display: grid; }
  .detail-price-box { min-width: 0; text-align: left; }
  .detail-kpis, .portfolio-summary, .intelligence-grid, .intelligence-hero-card, .language-pair-stats { grid-template-columns: 1fr; }
  .intelligence-score-ring { justify-self: start; }
  .language-link-card { display: grid; }
  .detail-offer { grid-template-columns: 1fr; }
  .listing-title-row { align-items: start; }
}

.language-select { width: auto; min-height: 39px; padding: 0 12px; border-radius: 999px; font-weight: 900; }
.menu-control .language-select {
  min-width: 128px;
  text-transform: none;
}

/* v11 Mobile UX: logo opens clean off-canvas menu, no extra header button */
.mobile-menu-close {
  display: none;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(7, 10, 18, 0.42);
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .topbar {
    align-items: center;
    padding: 10px 14px;
  }

  .brand {
    padding: 5px;
  }

  .brand-logo,
  .topbar .brand-logo {
    width: 66px;
    height: 66px;
  }

  .brand {
    cursor: pointer;
  }

  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .nav-actions {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: min(84vw, 340px);
    height: 100dvh;
    padding: 18px;
    display: grid;
    align-content: start;
    justify-content: stretch;
    gap: 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 28px 0 70px rgba(15, 23, 42, 0.28);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    overflow-y: auto;
  }

  .nav-actions.mobile-open {
    transform: translateX(0);
  }

  .nav-actions a,
  .nav-actions .ghost-button,
  .nav-actions .language-select {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 15px;
  }

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

  .primary-button,
  .secondary-button,
  .load-more {
    width: 100%;
  }
}

/* v12 Navigation and page system */
.view-section {
  display: none;
  scroll-margin-top: 104px;
}
.view-section.active { display: block; }
.summary.view-section.active { display: grid; }
.hero.view-section.active { display: grid; }
.app-shell.view-section.active { display: grid; }

.header-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  width: min(360px, 32vw);
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.header-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 6px 12px 16px;
  font-weight: 800;
}
.header-search button {
  width: 42px;
  height: 42px;
  margin: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #111827;
  font-weight: 950;
  cursor: pointer;
}
.menu-brand { display: none; }
.menu-control { display: flex; align-items: center; gap: 8px; }
.menu-control span { color: var(--muted); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.watchlist-page {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 34px);
}
.watchlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.watchlist-grid .watch-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  padding: 14px;
}

@media (max-width: 760px) {
  .topbar { align-items: center; padding: 10px 14px; gap: 10px; }
  .brand-logo, .topbar .brand-logo { width: 62px; height: 62px; }
  .header-search { width: min(58vw, 250px); min-width: 0; }
  .header-search input { padding: 10px 4px 10px 12px; font-size: 13px; }
  .header-search button { width: 36px; height: 36px; }
  .mobile-menu-button { display: inline-flex; flex-direction: column; }

  .nav-actions {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 20px 16px 24px;
    display: grid;
    align-content: start;
    justify-content: stretch;
    gap: 12px;
    background:
      radial-gradient(circle at top left, rgba(212, 162, 58, 0.18), transparent 16rem),
      var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.28);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }
  .nav-actions.mobile-open { transform: translateX(0); }
  .menu-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .menu-brand img { width: 54px; height: 54px; object-fit: contain; }
  .menu-brand strong { display: block; font-size: 19px; }
  .menu-brand span { color: var(--muted); font-size: 13px; }
  .mobile-menu-close {
    position: absolute;
    top: 17px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: 26px;
  }
  .nav-actions a,
  .nav-actions .ghost-button {
    display: flex !important;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 18px;
    padding: 0 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    font-size: 16px;
    font-weight: 950;
  }
  .nav-actions a::after { content: "›"; margin-left: auto; color: var(--accent-dark); font-size: 24px; }
  body.dark .nav-actions a::after { color: var(--accent); }
  .menu-control {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  }
  .nav-actions .language-select {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 14px;
  }
  .mobile-menu-backdrop { background: rgba(7, 10, 18, 0.52); }
}

/* v12 Catalog is now a dedicated page: filters + cards only */
.app-shell.view-section.active { grid-template-columns: 300px minmax(0, 1fr); }
.app-shell.view-section.active .side-panel { display: none; }
@media (max-width: 1120px) { .app-shell.view-section.active { grid-template-columns: 1fr; } }


/* Stable professional watchlist without image dependency */
.stable-watchlist {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.watch-card-simple,
.watch-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--surface-strong), var(--surface));
  color: var(--text);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.watch-card-simple:hover,
.watch-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.13);
}

.watch-card-simple strong,
.watch-item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.watch-card-simple small,
.watch-item small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.watch-card-simple span,
.watch-item span {
  white-space: nowrap;
  font-weight: 800;
  color: var(--accent);
}

.compact-watchlist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 560px) {
  .stable-watchlist {
    grid-template-columns: 1fr;
  }

  .watch-card-simple,
  .watch-item {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Session-only Watchlist */
.session-watchlist {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.session-watch-card,
.watch-item {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--surface-strong), var(--surface));
  color: var(--text);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.session-watch-card:hover,
.watch-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.13);
}

.session-watch-main {
  min-width: 0;
}

.session-watch-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.session-watch-main strong {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}

.session-watch-main small,
.session-watch-price small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.session-watch-price {
  text-align: right;
  white-space: nowrap;
}

.session-watch-price span {
  display: block;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 5px;
}

.watch-remove {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.watch-remove:hover,
.watch-remove:focus-visible {
  border-color: var(--red);
  color: var(--red);
  outline: none;
}

.compact-watchlist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 560px) {
  .session-watchlist {
    grid-template-columns: 1fr;
  }

  .session-watch-card,
  .watch-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-watch-price {
    text-align: left;
  }
}


/* Homepage sealed display carousel */
.display-showcase {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 22px 18px;
}

.display-heading {
  margin-bottom: 18px;
}

.display-carousel-wrap {
  position: relative;
}

.display-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 260px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
}

.display-carousel::-webkit-scrollbar {
  height: 8px;
}

.display-carousel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
}

.display-card {
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface-strong), var(--surface));
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.display-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.15);
}

.display-image-shell {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(160deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82)),
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 50%);
}

.display-image-shell img {
  width: min(100%, 226px);
  max-height: 238px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .34));
  position: relative;
  z-index: 2;
  border-radius: 18px;
}

.display-placeholder {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: white;
  padding: 18px;
}

.display-placeholder span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  color: color-mix(in srgb, var(--accent) 76%, white);
}

.display-placeholder strong {
  font-size: 22px;
  line-height: 1.1;
  max-width: 180px;
}

.display-placeholder small {
  font-weight: 800;
  color: rgba(255,255,255,.68);
}

.display-image-shell:not(.missing-image) .display-placeholder {
  opacity: 0;
}

.display-card-info {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.display-card-info span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.display-card-info strong {
  font-size: 15px;
}

.display-card-info small {
  color: var(--muted);
}

.display-market-section {
  display: grid;
  gap: 18px;
}

.display-market-heading p:last-child {
  color: var(--muted);
}

.display-market-toolbar,
.display-market-summary {
  display: grid;
  gap: 12px;
}

.display-market-toolbar {
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .5fr) minmax(160px, .5fr);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

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

.display-market-summary > div {
  display: grid;
  gap: 7px;
  min-height: 88px;
  align-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 58%, var(--surface));
}

.display-market-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.display-market-summary strong {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

.display-featured {
  min-height: 300px;
}

.display-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 19rem),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 20rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow);
}

.display-featured-copy {
  display: grid;
  align-content: center;
  gap: 16px;
}

.display-featured-copy h3 {
  max-width: 760px;
  font-size: clamp(32px, 5vw, 58px);
  line-height: .98;
}

.display-featured-copy p {
  max-width: 690px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
}

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

.display-featured-kpis div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
  padding: 12px;
}

.display-featured-kpis span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.display-featured-kpis strong {
  font-size: 18px;
}

.display-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.display-featured-actions button,
.display-market-tabs button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  padding: 0 14px;
  font-weight: 950;
  cursor: pointer;
}

.display-featured-actions button + button {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-dark);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.display-featured-art {
  position: relative;
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(150deg, #0f172a, #172033);
}

.display-featured-art::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    radial-gradient(circle at 50% 8%, rgba(212,162,58,.24), transparent 52%);
}

.display-featured-art::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 20%;
  bottom: 24px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  filter: blur(10px);
}

.display-featured-art img {
  position: relative;
  z-index: 1;
  width: min(72%, 280px);
  height: min(82%, 330px);
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.42));
}

.display-featured-art span {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
}

.display-market-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.display-market-tabs button {
  background: var(--surface);
  color: var(--text);
}

.display-market-tabs button:hover,
.display-market-tabs button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-dark);
}

.display-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.display-market-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 16rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.display-market-card:hover,
.display-market-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
  outline: none;
}

.display-market-art {
  position: relative;
  display: grid;
  height: 280px;
  align-self: start;
  place-items: center;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(150deg, #0f172a, #172033);
  isolation: isolate;
}

.display-market-art::before,
.home-display-art::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    radial-gradient(circle at 50% 8%, rgba(212,162,58,.22), transparent 52%);
  transform: perspective(480px) rotateX(2deg) rotateY(-7deg);
  z-index: -1;
}

.display-market-art::after,
.home-display-art::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 18%;
  bottom: 14px;
  height: 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  filter: blur(9px);
  z-index: 0;
}

.display-market-art img {
  position: relative;
  z-index: 1;
  width: 124px;
  height: 124px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .36));
}

.display-market-art.official-pack img {
  width: min(74%, 190px);
  height: 250px;
  object-fit: contain;
  border-radius: 10px;
  transform: none;
}

.display-market-art.official-wide img {
  width: 142px;
  height: 132px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  transform: perspective(480px) rotateY(-8deg) rotateX(2deg);
}

.display-market-art.official-character img {
  width: 144px;
  height: 170px;
  object-fit: contain;
  border-radius: 0;
  transform: perspective(480px) rotateY(-8deg) rotateX(2deg);
}

.display-status {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.display-status.preorder { background: rgba(212, 162, 58, .28); }
.display-status.preview { background: rgba(31, 78, 140, .36); }

.display-market-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.display-market-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.display-market-title span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
}

body.dark .display-market-title span { color: var(--accent); }

.display-market-title h3 {
  margin-top: 3px;
  font-size: 21px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.display-market-title .market-switch span,
.detail-title-row .market-switch span,
.home-display-body .market-switch span,
.home-card-body .market-switch span,
.listing-title-row .market-switch span {
  color: inherit;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
}

.display-alert-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
}

.display-alert-button:hover,
.display-alert-button.active {
  border-color: var(--accent);
  color: var(--accent);
}

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

.display-market-kpis div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 46%, transparent);
}

.display-market-kpis span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.display-market-kpis strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.positive { color: var(--green); }
.negative { color: var(--red); }

.display-mini-chart {
  width: 100%;
  height: 72px;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    color-mix(in srgb, var(--surface-strong) 38%, transparent);
  background-size: 100% 18px;
  padding: 6px;
}

.display-load-more {
  justify-self: center;
  min-width: min(100%, 280px);
}

.display-offers {
  display: grid;
  gap: 8px;
}

.display-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 42%, transparent);
}

.display-offer div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.display-offer strong {
  font-size: 13px;
}

.display-offer span {
  color: var(--muted);
  font-size: 12px;
}

.display-offer > span {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.display-offer.best {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
}

.home-preview-section {
  display: grid;
  gap: 18px;
}

.home-preview-heading p:last-child {
  color: var(--muted);
}

.home-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.home-preview-block {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
}

.home-preview-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.home-preview-title span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

body.dark .home-preview-title span {
  color: var(--accent);
}

.home-preview-title h3 {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.1;
}

.home-preview-title a {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

.home-preview-title a:hover,
.home-preview-title a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  outline: none;
}

.home-display-preview,
.home-card-preview {
  display: grid;
  gap: 12px;
}

.home-display-card,
.home-card-compare {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 58%, var(--surface));
}

.home-display-card {
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 12px;
}

.home-display-art {
  position: relative;
  display: grid;
  height: 172px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(150deg, #0f172a, #172033);
  isolation: isolate;
}

.home-display-art img {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .34));
}

.home-display-art.official-pack img {
  width: 126px;
  height: 162px;
  object-fit: contain;
  border-radius: 8px;
  transform: none;
}

.home-display-art.official-wide img {
  width: 108px;
  height: 104px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  transform: perspective(420px) rotateY(-8deg) rotateX(2deg);
}

.home-display-art.official-character img {
  width: 112px;
  height: 136px;
  object-fit: contain;
  border-radius: 0;
  transform: perspective(420px) rotateY(-8deg) rotateX(2deg);
}

.home-display-art > span {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 2;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

.home-display-body,
.home-card-body {
  display: grid;
  gap: 9px;
  align-content: center;
  min-width: 0;
}

.home-display-body small,
.home-card-body small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-display-body h4,
.home-card-body h4 {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.home-price-row,
.home-trend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 54%, transparent);
}

.home-price-row span,
.home-trend-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-price-row strong,
.home-trend-row strong {
  font-size: 15px;
  white-space: nowrap;
}

.home-offer-mini {
  display: grid;
  gap: 6px;
}

.home-offer-mini span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.home-offer-mini b {
  color: var(--text);
  font-size: 12px;
}

.home-card-compare {
  grid-template-columns: 82px minmax(0, 1fr);
  padding: 10px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}

.home-card-compare:hover,
.home-card-compare:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.home-card-thumb {
  position: relative;
  display: grid;
  width: 82px;
  min-height: 116px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(150deg, #19201d, #315c9f);
  color: white;
}

.home-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card-thumb strong {
  font-size: 18px;
  font-weight: 950;
}

.market-pulse-section {
  gap: 20px;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-strong) 76%, transparent)),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 22rem);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .11);
}

.market-pulse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr);
  gap: 16px;
}

.market-pulse-feature,
.market-pulse-strip,
.market-pulse-preview,
.market-signal-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--surface));
}

.market-pulse-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(260px, .75fr);
  gap: clamp(16px, 2.4vw, 24px);
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(18px, 2.8vw, 28px);
}

.market-pulse-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 220, 98, .15), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .22), transparent 14rem);
}

.market-pulse-feature-copy,
.market-pulse-feature-art {
  position: relative;
  z-index: 1;
}

.market-pulse-badge,
.market-pulse-strip-head span {
  display: inline-flex;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

body.dark .market-pulse-badge,
body.dark .market-pulse-strip-head span {
  color: var(--accent);
}

.market-pulse-feature-copy {
  display: grid;
  gap: 15px;
  align-content: center;
}

.market-pulse-feature-copy h3 {
  max-width: 13ch;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .92;
  letter-spacing: 0;
}

.market-pulse-feature-copy p {
  max-width: 56ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

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

.market-pulse-kpis div,
.market-pulse-feature-actions button,
.market-pulse-actions button {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
}

.market-pulse-kpis div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.market-pulse-kpis span,
.market-signal-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.market-pulse-kpis strong {
  font-size: 18px;
}

.market-pulse-feature-actions,
.market-pulse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.market-pulse-feature-actions button,
.market-pulse-actions button {
  padding: 11px 14px;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.market-pulse-feature-actions button:first-child,
.market-pulse-actions button:first-child {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: linear-gradient(135deg, var(--accent), #f6c849);
  color: #16130a;
}

.market-pulse-feature-actions button:hover,
.market-pulse-feature-actions button:focus-visible,
.market-pulse-actions button:hover,
.market-pulse-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  outline: none;
}

.market-pulse-feature-art {
  display: grid;
  min-height: 340px;
  place-items: center;
}

.market-pulse-display-shot {
  position: absolute;
  inset: 18px 18px auto auto;
  display: grid;
  width: min(210px, 48%);
  aspect-ratio: 1 / 1.28;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: linear-gradient(150deg, #0d1117, #202838);
  box-shadow: 0 26px 52px rgba(0, 0, 0, .25);
}

.market-pulse-display-shot img {
  width: 76%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4));
}

.market-pulse-card-shot {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  width: min(156px, 40%);
  aspect-ratio: 5 / 7;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: linear-gradient(150deg, #162033, #315c9f);
  box-shadow: 0 28px 55px rgba(0, 0, 0, .3);
  transform: rotate(-6deg);
}

.market-pulse-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-pulse-card-shot strong {
  color: white;
  font-size: 24px;
  font-weight: 950;
}

.market-pulse-card-shot span {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, .55);
  color: white;
  font-size: 10px;
  font-weight: 950;
}

.market-pulse-score {
  position: absolute;
  right: 30px;
  bottom: 26px;
  display: grid;
  width: 132px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 221, 103, .64);
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle, rgba(255, 221, 103, .28), rgba(14, 17, 23, .92));
  color: white;
  box-shadow: 0 24px 46px rgba(0, 0, 0, .28);
}

.market-pulse-score span {
  align-self: end;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.market-pulse-score strong {
  align-self: start;
  font-size: 26px;
}

.market-pulse-signals {
  display: grid;
  gap: 12px;
}

.market-signal-card {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 112px;
  border-radius: 20px;
  padding: 16px;
}

.market-signal-card strong {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.market-signal-card small {
  color: var(--muted);
  line-height: 1.35;
}

.market-signal-card.positive {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
}

.market-signal-card.gold {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.market-signal-card.dark {
  background: linear-gradient(145deg, #101722, #1d2433);
  color: white;
}

.market-signal-card.dark span,
.market-signal-card.dark small {
  color: rgba(255, 255, 255, .72);
}

.market-pulse-strip {
  display: grid;
  gap: 14px;
  border-radius: 24px;
  padding: clamp(14px, 2vw, 18px);
}

.market-pulse-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.market-pulse-strip-head h3 {
  margin-top: 8px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

.market-pulse-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 14px;
}

.market-pulse-preview {
  display: grid;
  gap: 12px;
  border-radius: 20px;
  padding: 14px;
}

.market-pulse-preview .home-display-preview,
.market-pulse-preview .home-card-preview {
  gap: 10px;
}

.market-pulse-preview .home-display-card,
.market-pulse-preview .home-card-compare {
  border-radius: 16px;
  box-shadow: none;
}

.market-pulse-preview .home-display-art {
  height: 154px;
}

.market-pulse-preview .home-display-art.official-pack img {
  width: 112px;
  height: 146px;
}

.binder-section {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}

.binder-heading p:last-child {
  color: var(--muted);
}

.binder-app-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
}

.binder-control-panel,
.binder-workspace {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
}

.binder-control-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
}

.binder-workspace {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(14px, 2vw, 20px);
}

.binder-profile-card {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(212,162,58,.26), transparent 44%),
    linear-gradient(150deg, #111827, #263449);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.binder-profile-card span,
.binder-profile-card small {
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.binder-profile-card strong {
  font-size: 26px;
}

.binder-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.binder-stat-grid div,
.binder-limit-card,
.binder-missing-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 52%, transparent);
}

.binder-stat-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.binder-stat-grid span,
.binder-limit-card span,
.binder-limit-card small,
.binder-field span,
.binder-missing-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.binder-stat-grid strong {
  font-size: 20px;
}

.binder-limit-card {
  display: grid;
  gap: 5px;
  padding: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.binder-limit-card strong {
  font-size: 16px;
}

.binder-limit-card small {
  line-height: 1.45;
  text-transform: none;
}

.binder-field {
  display: grid;
  gap: 7px;
}

.binder-actions {
  display: grid;
  gap: 9px;
}

.binder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.binder-toolbar strong {
  font-size: 18px;
}

.collector-binder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
  width: min(100%, 680px);
  margin-inline: auto;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 10%, rgba(212, 162, 58, .18), transparent 18rem),
    linear-gradient(135deg, #0f172a, #223149 54%, #101827);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 20px 42px rgba(255,255,255,.05),
    0 24px 60px rgba(15, 23, 42, .2);
}

.collector-binder::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 16%, transparent 84%, rgba(0,0,0,.12));
}

.collector-binder::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 12px;
  width: 7px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(212,162,58,.9) 0 34%, transparent 36%) center 0 / 7px 33.33% repeat-y;
  opacity: .72;
}

.binder-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: .714;
  min-width: 0;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 13px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 48%, rgba(0,0,0,.08)),
    rgba(255,255,255,.055);
  color: rgba(255,255,255,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.binder-slot.empty span {
  font-weight: 950;
  font-size: 13px;
}

.binder-slot.filled {
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,.28);
}

.binder-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0,0,0,.2);
}

.binder-slot.filled > span {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 999px;
  padding: 3px 5px;
  color: #fff;
  background: rgba(0,0,0,.58);
  font-size: 9px;
  font-weight: 950;
  text-align: center;
}

.binder-slot [data-remove-binder-id] {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, .76);
  color: #fff;
  cursor: pointer;
  font-weight: 950;
}

.binder-missing-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.binder-missing-panel div {
  display: grid;
  gap: 4px;
}

.binder-missing-panel strong {
  font-size: 26px;
}

.binder-missing-panel p {
  color: var(--muted);
  text-align: right;
  max-width: 420px;
}

.carousel-arrow {
  position: absolute;
  top: 43%;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}

.carousel-arrow.left {
  left: -8px;
}

.carousel-arrow.right {
  right: -8px;
}

@media (max-width: 760px) {
  .home-preview-layout,
  .market-pulse-layout,
  .market-pulse-feature,
  .market-pulse-mini-grid,
  .display-featured-card,
  .display-featured-kpis,
  .display-market-toolbar,
  .display-market-summary,
  .display-market-card {
    grid-template-columns: 1fr;
  }

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

  .display-featured-art {
    min-height: 300px;
  }

  .display-market-art {
    min-height: 230px;
  }

  .display-market-art img {
    width: 170px;
    height: 170px;
  }

  .home-preview-title {
    align-items: stretch;
    flex-direction: column;
  }

  .home-preview-title a {
    width: fit-content;
  }

  .market-pulse-section {
    padding: 14px;
    border-radius: 22px;
  }

  .market-pulse-strip-head {
    align-items: stretch;
    flex-direction: column;
  }

  .market-pulse-feature-copy h3 {
    max-width: none;
    font-size: clamp(32px, 12vw, 46px);
  }

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

  .market-pulse-feature-art {
    min-height: 300px;
  }

  .market-pulse-display-shot {
    width: 56%;
  }

  .market-pulse-card-shot {
    width: 42%;
  }

  .market-pulse-score {
    right: 18px;
    bottom: 18px;
    width: 108px;
  }

  .market-pulse-score strong {
    font-size: 22px;
  }

  .home-display-card {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .display-showcase {
    padding-inline: 16px;
  }

  .display-carousel {
    grid-auto-columns: minmax(190px, 76vw);
  }

  .carousel-arrow {
    display: none;
  }

  .display-image-shell {
    min-height: 238px;
  }

  .binder-app-shell {
    grid-template-columns: 1fr;
  }

  .binder-toolbar {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

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

@media (max-width: 480px) {
  .home-display-card,
  .home-card-compare {
    grid-template-columns: 1fr;
  }

  .home-display-art,
  .home-card-thumb {
    width: 100%;
  }

  .home-card-thumb {
    min-height: 220px;
  }

  .binder-missing-panel {
    display: grid;
  }

  .binder-missing-panel p {
    text-align: left;
  }
}

.view-section:not(.active) {
  display: none;
}

.display-market-section.view-section.active,
.deal-radar-section.view-section.active,
.admin-section.view-section.active,
.home-preview-section.view-section.active,
.binder-section.view-section.active,
.premium-section.view-section.active,
.newsletter-section.view-section.active {
  display: grid;
}

.admin-section {
  gap: 18px;
}

[data-admin-nav][hidden] {
  display: none !important;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 40px);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 18rem),
    radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 16rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.admin-hero h2 {
  max-width: 840px;
  margin-top: 8px;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1;
}

.admin-hero p {
  max-width: 760px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.admin-security-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(150deg, #111827, #23405f);
  color: #fff;
  text-align: center;
}

.admin-security-card span {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-security-card span.premium-active {
  border-color: rgba(255, 224, 138, .62);
  color: #ffe08a;
}

.admin-security-card strong {
  font-size: clamp(54px, 7vw, 86px);
  line-height: .9;
}

.admin-security-card small {
  color: rgba(255,255,255,.76);
  font-weight: 850;
}

.admin-warning {
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--muted);
  padding: 16px 18px;
  line-height: 1.55;
}

.admin-warning strong {
  color: var(--red);
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi-grid div,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.admin-kpi-grid div {
  display: grid;
  gap: 5px;
  padding: 16px;
}

.admin-kpi-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-kpi-grid strong {
  font-size: 24px;
}

.admin-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-panel {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2vw, 22px);
}

.admin-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.admin-panel-header span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-panel-header h3 {
  margin-top: 4px;
  font-size: 22px;
}

.admin-panel-header button,
.admin-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-weight: 950;
  cursor: pointer;
}

.admin-list {
  display: grid;
  gap: 9px;
}

.admin-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  padding: 12px;
}

.admin-list-row strong,
.admin-list-row b {
  font-size: 14px;
}

.admin-list-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-list-row.ok b { color: var(--green); }
.admin-list-row.warning b { color: var(--accent-dark); }
.admin-list-row.danger b { color: var(--red); }

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

.admin-actions button.active,
.admin-actions button:hover,
.admin-panel-header button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-dark);
}

.admin-action-status {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1040px) {
  .admin-hero,
  .admin-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 620px) {
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-list-row,
  .admin-panel-header {
    flex-direction: column;
  }
}

.deal-radar-section {
  gap: 18px;
}

.deal-radar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 40px);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--green) 20%, transparent), transparent 18rem),
    radial-gradient(circle at 96% 16%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.deal-radar-hero h2 {
  max-width: 900px;
  margin-top: 8px;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1;
}

.deal-radar-hero p {
  max-width: 760px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.deal-radar-status-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 230px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 24px;
  background:
    linear-gradient(150deg, #111827, #0f766e),
    var(--surface-strong);
  color: #fff;
  text-align: center;
}

.deal-radar-status-card span,
.deal-radar-lock span {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.deal-radar-status-card span.premium-active {
  border-color: rgba(255, 224, 138, .62);
  color: #ffe08a;
}

.deal-radar-status-card strong {
  font-size: clamp(54px, 7vw, 86px);
  line-height: .9;
}

.deal-radar-status-card small {
  color: rgba(255,255,255,.76);
  font-weight: 850;
}

.deal-radar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

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

.deal-filter-tabs button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0 14px;
  font-weight: 950;
  cursor: pointer;
}

.deal-filter-tabs button.active,
.deal-filter-tabs button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-dark);
}

.deal-radar-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.deal-radar-kpis div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 16px;
}

.deal-radar-kpis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.deal-radar-kpis strong {
  font-size: 24px;
}

.deal-radar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.deal-card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--green) 8%, var(--surface)));
  padding: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.deal-card-art {
  position: relative;
  min-height: 184px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #101827, #28364f);
}

.deal-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}

.display-deal .deal-card-art img {
  object-fit: contain;
  padding: 12px;
}

.deal-card-art span {
  position: absolute;
  left: 9px;
  top: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  color: #fff;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
}

.deal-card-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-weight: 950;
}

.deal-card-body {
  position: relative;
  display: grid;
  gap: 12px;
}

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

.deal-card-title small {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.deal-card-title h3 {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.1;
}

.deal-card-title p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.deal-card-title > strong {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--green) 16%, var(--surface));
  color: var(--green);
  font-size: 24px;
}

.deal-card-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deal-card-kpis div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  padding: 10px;
}

.deal-card-kpis span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.deal-card-kpis b {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

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

.deal-card-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  padding: 0 12px;
  font-weight: 950;
  cursor: pointer;
}

.deal-card-actions button + button {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--accent-dark);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.deal-lock-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  border-radius: 18px;
  background: rgba(10, 14, 24, .72);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(3px);
}

.deal-lock-overlay span {
  color: #ffe08a;
  font-weight: 950;
}

.deal-empty,
.deal-radar-lock {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 22px;
}

.deal-empty {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.deal-radar-lock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background:
    radial-gradient(circle at left top, color-mix(in srgb, var(--accent) 18%, transparent), transparent 14rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
}

.deal-radar-lock[hidden] {
  display: none;
}

.deal-radar-lock span {
  display: inline-block;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent-dark);
}

.deal-radar-lock h3 {
  margin-top: 8px;
  font-size: 26px;
}

.deal-radar-lock p {
  max-width: 780px;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .deal-radar-hero,
  .deal-radar-grid,
  .deal-radar-kpis {
    grid-template-columns: 1fr;
  }

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

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

  .deal-card-art {
    min-height: 220px;
  }

  .deal-card-kpis {
    grid-template-columns: 1fr;
  }

  .deal-radar-lock {
    align-items: stretch;
    flex-direction: column;
  }
}

.membership-badge,
#premiumStatusPill {
  justify-self: center;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.membership-badge.premium-active,
#premiumStatusPill.premium-active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-dark);
}

body.dark .membership-badge.premium-active,
body.dark #premiumStatusPill.premium-active {
  color: var(--accent);
}

.plan-copy {
  color: var(--muted);
  line-height: 1.55;
}

.premium-profile-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 22%, transparent), transparent 13rem),
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--blue) 10%, var(--surface)));
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.plan-card-header span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body.dark .plan-card-header span {
  color: var(--accent);
}

.plan-card-header strong {
  font-size: 16px;
}

.premium-section {
  gap: 18px;
}

.premium-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 42px);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 20rem),
    radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 17rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.premium-hero h2 {
  max-width: 880px;
  margin-top: 8px;
  font-size: clamp(32px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -0.04em;
}

.premium-hero p {
  max-width: 760px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.premium-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.premium-price-card {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(150deg, #111827, #1f4e8c),
    var(--surface-strong);
  color: #fff;
  text-align: center;
}

.premium-price-card strong {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
}

.premium-price-card small {
  max-width: 240px;
  color: rgba(255,255,255,.76);
  font-weight: 800;
}

.premium-comparison,
.premium-feature-grid {
  display: grid;
  gap: 16px;
}

.premium-comparison {
  grid-template-columns: .85fr 1.15fr;
}

.premium-deal-radar-showcase {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  padding: clamp(18px, 3vw, 28px);
}

.premium-radar-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.premium-radar-copy span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.premium-radar-copy h3 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.premium-radar-copy p {
  color: var(--muted);
  line-height: 1.58;
}

.premium-radar-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(150deg, #101827, #163f3a);
  color: #fff;
}

.premium-radar-board div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  padding: 14px;
}

.premium-radar-board span {
  font-weight: 950;
}

.premium-radar-board strong {
  grid-row: span 2;
  color: #ffe08a;
  font-size: 32px;
}

.premium-radar-board small {
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.premium-display-alerts {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 26px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-strong) 72%, transparent));
}

.premium-display-alerts-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.premium-display-alerts-copy span,
.premium-display-watch-badge {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body.dark .premium-display-alerts-copy span,
body.dark .premium-display-watch-badge {
  color: var(--accent);
}

.premium-display-alerts-copy h3 {
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1;
}

.premium-display-alerts-copy p {
  color: var(--muted);
  line-height: 1.58;
}

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

.premium-display-watch-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.premium-display-watch-card.watched {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.premium-display-watch-art {
  position: relative;
  display: grid;
  min-height: 160px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(150deg, #0f172a, #172033);
}

.premium-display-watch-art img {
  width: 112px;
  height: 142px;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .35));
}

.premium-display-watch-art span {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.14);
  color: white;
  font-size: 11px;
  font-weight: 950;
}

.premium-display-watch-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.premium-display-watch-body h4 {
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.12;
}

.premium-display-watch-body small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.premium-display-watch-metrics div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.premium-display-watch-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.premium-display-watch-metrics strong {
  font-size: 14px;
  white-space: nowrap;
}

.premium-display-watch-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.premium-display-watch-actions button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 8px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.premium-display-watch-actions button:last-child {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: linear-gradient(135deg, var(--accent), #f6c849);
  color: #171307;
}

.premium-display-watch-actions button:hover,
.premium-display-watch-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  outline: none;
}

.plan-column,
.premium-feature-grid article {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: clamp(16px, 2.4vw, 24px);
}

.plan-column > span,
.premium-feature-grid span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body.dark .plan-column > span,
body.dark .premium-feature-grid span {
  color: var(--accent);
}

.plan-column h3,
.premium-feature-grid h3 {
  font-size: 24px;
  line-height: 1.1;
}

.plan-column > strong {
  font-size: 30px;
}

.plan-column ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.premium-plan-column {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 14rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

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

.premium-feature-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.primary-button.premium-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

@media (max-width: 920px) {
  .premium-hero,
  .premium-comparison,
  .premium-deal-radar-showcase,
  .premium-display-alerts,
  .premium-feature-grid {
    grid-template-columns: 1fr;
  }

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

.legal-footer {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto 32px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 20rem),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.legal-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.legal-footer-top > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.legal-footer-top img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.legal-footer-top strong {
  display: block;
  font-size: 18px;
}

.legal-footer-top span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.legal-footer nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.legal-footer nav a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.legal-notice {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
}

.trust-center {
  display: grid;
  gap: 16px;
  margin: 16px 0;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--green) 14%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 54%, transparent);
}

.trust-center-heading {
  display: grid;
  gap: 8px;
  max-width: 860px;
}

.trust-center-heading span,
.trust-grid span,
.rights-matrix span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

body.dark .trust-center-heading span,
body.dark .trust-grid span,
body.dark .rights-matrix span {
  color: var(--accent);
}

.trust-center-heading h2 {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
}

.trust-center-heading p,
.trust-grid p,
.rights-matrix p {
  color: var(--muted);
  line-height: 1.58;
}

.trust-grid,
.rights-matrix {
  display: grid;
  gap: 12px;
}

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

.rights-matrix {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 16px;
}

.trust-grid article,
.rights-matrix div {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  padding: 14px;
}

.trust-grid strong,
.rights-matrix strong {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.legal-panels {
  display: grid;
  gap: 10px;
}

.legal-panels details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 46%, transparent);
  overflow: hidden;
}

.legal-panels summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 950;
}

.legal-panels details[open] summary {
  border-bottom: 1px solid var(--line);
}

.legal-panels p {
  padding: 0 16px 14px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.legal-panels p:first-of-type {
  padding-top: 14px;
}

.legal-panels a {
  color: var(--accent-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.imprint-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 14px;
}

.imprint-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.imprint-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.imprint-card strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

body.dark .legal-panels a,
body.dark .legal-footer nav a:hover {
  color: var(--accent);
}

@media (max-width: 760px) {
  .legal-footer {
    width: calc(100% - 24px);
    margin-bottom: 20px;
  }

  .legal-footer-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-footer nav {
    justify-content: flex-start;
  }

  .trust-grid,
  .rights-matrix {
    grid-template-columns: 1fr;
  }

  .imprint-card {
    grid-template-columns: 1fr;
  }
}