/* Public, member and admin UI palette. Change colors here, not in page styles.
   After changing the brand colors, run: node apps/web/scripts/generate-brand-assets.mjs
   Geometry, typography and component states remain in the existing stylesheets. */
:root {
  --ui-canvas: #f6f6f6;
  --ui-surface: #ffffff;
  --ui-surface-raised: #fafafa;
  --ui-surface-muted: #f0f0f0;
  --ui-text: #181818;
  --ui-text-muted: #686868;
  --ui-border: #dedede;
  --ui-border-strong: #c4c4c4;
  --ui-brand: #e60012;
  --ui-brand-hover: #b8000e;
  --ui-brand-soft: #fff0f1;
  --ui-brand-solid: #e60012;
  --ui-on-brand: #ffffff;
  --ui-positive: #e60012;
  --ui-negative: #747474;
  --ui-danger: #c90015;
  --ui-danger-soft: #fff0f1;
  --ui-warning: #9b5a08;
  --ui-warning-soft: #fff5e6;
  --ui-focus: #ff6b77;
  --ui-header: #ffffff;
  --ui-header-text: #181818;
  --ui-inverse: #181818;
  --ui-on-inverse: #ffffff;
  --ui-shadow-color: #000000;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ui-canvas: #090909;
  --ui-surface: #151515;
  --ui-surface-raised: #1b1b1b;
  --ui-surface-muted: #222222;
  --ui-text: #f5f5f5;
  --ui-text-muted: #a6a6a6;
  --ui-border: #303030;
  --ui-border-strong: #4a4a4a;
  --ui-brand: #ff2638;
  --ui-brand-hover: #ff6874;
  --ui-brand-soft: #301115;
  --ui-brand-solid: #e60012;
  --ui-on-brand: #ffffff;
  --ui-positive: #ff4150;
  --ui-negative: #aaaaaa;
  --ui-danger: #ff6874;
  --ui-danger-soft: #301115;
  --ui-warning: #f4bd71;
  --ui-warning-soft: #302417;
  --ui-focus: #ff7c87;
  --ui-header: #151515;
  --ui-header-text: #f5f5f5;
  --ui-inverse: #101010;
  --ui-on-inverse: #ffffff;
  color-scheme: dark;
}

:root {
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --paper: var(--ui-canvas);
  --panel: var(--ui-surface-muted);
  --line: var(--ui-border);
  --accent: var(--ui-brand);
  --accent-dark: var(--ui-brand-hover);
  --white: var(--ui-surface);
  color-scheme: light;
}

/* Member actions and native operations dashboard */
.memberCardActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.memberCardActions a {
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 5px;
  color: var(--ui-text);
  font-weight: 700;
  font-size: 13px;
}
.memberCardActions small {
  color: var(--ui-text-muted);
}
.adminPage {
  min-height: 100vh;
  background: var(--ui-surface);
  color: var(--ui-text);
  padding-bottom: 50px;
}
.adminHeading,
.adminTabs,
.adminFilters,
.adminStatus,
.adminMetrics,
.adminSection,
.adminFootnote {
  width: min(1200px, calc(100% - 36px));
  margin: 20px auto;
}
.adminHeading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  gap: 16px;
}
.adminHeading h1 {
  margin: 8px 0;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.04em;
}
.adminHeading p,
.adminFootnote,
.adminMetrics p {
  color: var(--ui-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.adminTabs,
.adminFilters,
.adminStatus {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.adminTabs {
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 12px;
}
.adminTabs a {
  padding: 10px 15px;
  font-weight: 700;
  border-radius: 5px;
}
.adminTabs a[aria-current="page"] {
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
}
.adminPage button,
.adminPage select,
.adminPage input,
.analyticsConsent button,
.analyticsPreference {
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  padding: 9px 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
}
.adminPage button,
.analyticsConsent button,
.analyticsPreference {
  cursor: pointer;
}
.adminFilters {
  font-size: 13px;
}
.adminFilters label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adminStatus {
  font-size: 12px;
}
.adminStatus span {
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}
.adminMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.adminMetrics article {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  padding: 20px;
  border-radius: 7px;
}
.adminMetrics h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px;
}
.adminMetrics strong {
  font-size: 34px;
  letter-spacing: -0.04em;
}
.adminSection {
  padding: 24px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
}
.adminSection h2 {
  font-size: 20px;
}
.adminSection p {
  line-height: 1.7;
  color: var(--ui-text-muted);
  font-size: 13px;
}
.adminSection h2 small {
  font-size: 12px;
  font-weight: 400;
}
.adminSection .adminFilters,
.adminSection .adminStatus {
  width: 100%;
}
.adminTable {
  overflow-x: auto;
  margin: 20px 0;
}
.adminTable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.adminTable th,
.adminTable td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap;
}
.adminTable th {
  background: var(--ui-surface);
}
.adminTable caption {
  text-align: left;
  font-weight: 700;
  padding: 10px 0;
}
.analyticsConsent {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(650px, calc(100% - 32px));
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 6px 25px color-mix(in srgb, var(--ui-shadow-color) 12.55%, transparent);
  z-index: 90;
  font-size: 13px;
  line-height: 1.6;
}
.analyticsConsent p {
  margin: 0 0 12px;
}
.analyticsConsent div {
  display: flex;
  gap: 12px;
}
.analyticsConsent a {
  text-decoration: underline;
}
.analyticsPreference {
  display: block;
  margin: 18px auto;
  font-size: 11px;
}
/* Account sign-up and passwordless email entry */
.accountPage {
  min-height: 100vh;
  background: var(--exchange-page);
}

.accountPanel {
  width: min(620px, calc(100% - 32px));
  margin: 0 auto;
  padding: 64px 0 88px;
}

.accountPanel h1 {
  margin: 12px 0 0;
  color: var(--exchange-navy);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.accountLead {
  margin: 18px 0 28px;
  color: var(--exchange-muted);
  line-height: 1.7;
}

.accountNotice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-brand-soft);
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.6;
}

.accountNoticeSuccess {
  border-color: var(--ui-border);
  background: var(--ui-brand-soft);
  color: var(--ui-positive);
}

.accountForm {
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.accountEmailField,
.accountEmailField > span,
.accountConsents {
  display: grid;
}

.accountEmailField {
  gap: 8px;
}

.accountEmailField > span,
.accountConsents legend {
  color: var(--exchange-navy);
  font-size: 13px;
  font-weight: 700;
}

.accountEmailField input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
}

.accountEmailField input:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 1px;
  border-color: var(--exchange-blue);
}

.accountConsents {
  gap: 13px;
  margin: 24px 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--exchange-line);
}

.accountConsents label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--exchange-muted);
  font-size: 13px;
  line-height: 1.55;
}

.accountConsents input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--exchange-blue);
}

.accountConsents a {
  color: var(--exchange-blue);
  font-weight: 700;
}

.accountForm button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 3px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.accountForm button:hover {
  background: var(--ui-brand-solid);
}

.accountPrivacyNote {
  margin: 14px 0 0;
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.accountProfileCard {
  margin-top: 28px;
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.accountProfileState {
  margin: 0 0 20px;
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 800;
}

.accountProfileCard dl {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
}

.accountProfileCard dl div {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--exchange-line);
}

.accountProfileCard dt {
  color: var(--exchange-muted);
  font-size: 11px;
}

.accountProfileCard dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--exchange-navy);
  font-weight: 700;
}

.accountSecondaryButton,
.accountInlineAction {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.accountNotice p {
  margin: 0 0 12px;
}

.accountSectionLinks,
.accountCollectionList,
.accountRuleForm {
  display: grid;
  gap: 12px;
}

.accountSectionLinks {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 24px;
}

.accountDangerZone {
  margin-top: 28px;
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
}

.accountDangerZone h2 {
  margin: 0;
  color: var(--ui-danger);
  font-size: 22px;
}

.accountDangerZone > p {
  margin: 12px 0 22px;
  color: var(--exchange-muted);
  font-size: 13px;
  line-height: 1.7;
}

.accountDangerZone form,
.accountDangerZone label {
  display: grid;
  gap: 14px;
}

.accountDangerZone label {
  grid-template-columns: auto 1fr;
  align-items: start;
  color: var(--exchange-navy);
  font-size: 13px;
  line-height: 1.55;
}

.accountDangerZone input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--ui-danger);
}

.accountDangerZone button {
  min-height: 44px;
  border: 0;
  border-radius: 3px;
  background: var(--ui-danger);
  color: var(--ui-on-brand);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.accountSectionLinks a,
.accountCollectionList article,
.accountConfirmCard {
  padding: 16px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.accountSectionLinks a,
.accountCollectionList article > a,
.accountUnavailableItem {
  display: grid;
  gap: 6px;
}

.accountSectionLinks span,
.accountCollectionList span,
.accountCollectionList small {
  color: var(--exchange-muted);
  font-size: 12px;
}

.accountCollectionHeading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.accountCollectionHeading strong {
  color: var(--exchange-blue);
  font-size: 14px;
}

.accountCollectionSummary,
.accountConfirmActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accountPrimaryAction,
.accountConfirmActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font-size: 13px;
  font-weight: 750;
}

.accountConfirmCard p {
  margin: 0 0 14px;
}

.accountConfirmActions a {
  border: 1px solid var(--exchange-line-strong);
  background: var(--ui-surface);
  color: var(--exchange-navy);
}

.accountCollectionToolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px 160px auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.accountCollectionToolbar label {
  display: grid;
  gap: 6px;
}

.accountCollectionToolbar label > span,
.accountCollectionCount {
  color: var(--exchange-muted);
  font-size: 12px;
}

.accountCollectionToolbar input,
.accountCollectionToolbar select,
.accountCollectionToolbar button,
.accountCollectionToolbar > a {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
  font-size: 13px;
}

.accountCollectionToolbar button {
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font-weight: 750;
  cursor: pointer;
}

.accountCollectionToolbar > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.accountCollectionCount {
  margin: 0 0 10px;
  text-align: right;
}

.accountCollectionList article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accountCollectionList article > a {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  flex: 1;
}

.accountCollectionThumb {
  display: block;
  width: 72px;
  height: 101px;
  overflow: hidden;
  border-radius: 4px;
  object-fit: cover;
}

.accountCollectionMeta {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.accountCollectionMeta strong {
  overflow-wrap: anywhere;
  color: var(--exchange-navy);
}

.accountUnavailableItem {
  flex: 1;
}

.accountUnavailableItem strong {
  color: var(--ui-brand);
}

.accountCollectionList button,
.accountConfirmCard button,
.accountRuleForm button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.accountRemoveConfirm {
  position: relative;
  flex: 0 0 auto;
}

.accountRemoveConfirm summary {
  padding: 9px 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  color: var(--ui-brand);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

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

.accountRemoveConfirm > div {
  position: absolute;
  z-index: 5;
  right: 0;
  top: calc(100% + 6px);
  width: 190px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-shadow-color) 16%, transparent);
}

.accountRemoveConfirm p {
  margin: 0 0 10px;
  color: var(--ui-brand);
  font-size: 12px;
}

.accountRemoveConfirm button {
  width: 100%;
  border-color: var(--ui-brand);
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}

.accountConfirmCard {
  margin-bottom: 18px;
}

.accountConfirmCard p {
  margin: 0 0 12px;
}

.accountRuleForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--exchange-line-strong);
  background: var(--exchange-surface);
}

.accountRuleForm label {
  display: grid;
  gap: 6px;
  color: var(--exchange-navy);
  font-size: 12px;
  font-weight: 700;
}

.accountRuleForm input,
.accountRuleForm select {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--exchange-line-strong);
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
}

.accountRuleForm button {
  grid-column: 1 / -1;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
}

.accountBackLink,
.accountEntryLink {
  display: inline-flex;
  margin-top: 22px;
  color: var(--exchange-blue);
  font-size: 12px;
  font-weight: 750;
}

.accountEntryLink {
  margin: 12px 0 0;
}

@media (max-width: 620px) {
  .accountSectionLinks,
  .accountRuleForm {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

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

.brandPendingIndicator {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}

.brandPendingIndicator.isVisible::after {
  position: absolute;
  inset: 0;
  width: 38%;
  background: var(--exchange-blue, var(--ui-brand-solid));
  content: "";
  animation: brandNavigationProgress 0.85s ease-in-out infinite;
}

.navigationLoading {
  position: fixed;
  z-index: 2000;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    visibility 0s linear 120ms;
}
.navigationLoading.isVisible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.navigationProgress {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  background: var(--ui-brand-soft);
}
.navigationProgress::after {
  position: absolute;
  inset: 0;
  width: 42%;
  background: var(--ui-brand-solid);
  content: "";
  animation: navigationProgress 0.9s ease-in-out infinite;
}
.navigationLoadingBackdrop {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: color-mix(in srgb, var(--ui-surface) 50.2%, transparent);
  backdrop-filter: grayscale(0.25) blur(1px);
}
.navigationLoadingPanel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, 100%);
  padding: 15px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 12px 38px color-mix(in srgb, var(--ui-shadow-color) 14.9%, transparent);
  color: var(--ui-text);
  background: var(--ui-surface);
  font-size: 14px;
}
.navigationLoadingPanel strong {
  line-height: 1.5;
}
.navigationLoadingPanel button {
  flex: none;
  min-height: 36px;
  margin-inline-start: 4px;
  padding: 0 12px;
  border: 1px solid var(--ui-brand);
  border-radius: 5px;
  color: var(--ui-on-brand);
  background: var(--ui-brand-solid);
  cursor: pointer;
}
.navigationSpinner {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-brand);
  border-radius: 50%;
  animation: navigationSpin 0.75s linear infinite;
}
[data-navigation-pending="true"] {
  cursor: wait !important;
  filter: saturate(0.65);
}
@keyframes navigationProgress {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(260%);
  }
}
@keyframes navigationSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes brandNavigationProgress {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(300%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brandPendingIndicator.isVisible::after {
    width: 100%;
    animation: none;
  }
  .navigationProgress::after,
  .navigationSpinner,
  .marketLoadingHeading span,
  .marketLoadingLine,
  .marketLoadingImage {
    animation: none;
  }
}

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

main {
  min-height: 100vh;
}

.nav {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: 24px 28px;
}

.brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.brandLogo {
  display: block;
  width: 132px;
  height: auto;
}

.navLinks {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 24px;
}

.navLinks > a {
  color: var(--muted);
}

.navLinks > a:hover,
.navLinks > a:focus-visible {
  color: var(--ink);
}

.buildBadge {
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 8px 12px;
}

.hero {
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: clamp(72px, 11vw, 144px) 28px 96px;
}

.eyebrow,
.sectionKicker,
.sectionHeading > p {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.16em;
  margin: 0 0 20px;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 9vw, 116px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
  margin: 0;
  max-width: var(--desktop-page-width, 970px);
}

h1 span {
  color: var(--accent);
}

.heroCopy {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.75;
  margin: 44px 0 0 auto;
  max-width: 690px;
}

.heroActions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
}

.primaryAction,
.secondaryAction {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  font-weight: 720;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
}

.primaryAction {
  background: var(--ink);
  color: var(--ui-on-brand);
}

.secondaryAction {
  border: 1px solid var(--line);
}

.trustLine {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 62px;
  margin-bottom: 0;
  list-style: none;
  padding-left: 0;
  padding-top: 18px;
}

.trustLine li:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
}

.foundation {
  background: var(--ink);
  color: var(--ui-on-brand);
  padding: 88px max(28px, calc((100vw - 1184px) / 2));
}

.sectionHeading {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 2fr;
}

.sectionHeading h2,
.method h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0;
}

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

.capability {
  border-top: 1px solid var(--ui-border-strong);
  min-height: 260px;
  padding: 24px 28px 24px 0;
}

.capability + .capability {
  border-left: 1px solid var(--ui-border-strong);
  padding-left: 28px;
}

.capabilityNumber {
  color: var(--ui-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.capability h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
  margin: 76px 0 14px;
}

.capability p {
  color: var(--ui-text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 320px;
}

.method {
  display: grid;
  gap: 60px;
  grid-template-columns: 1.3fr 1fr;
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: 100px 28px;
}

.method > p {
  align-self: end;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
  margin: 0;
}

footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: 28px;
}

.searchHero,
.detailHero {
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: 72px 28px 56px;
}

.searchHero {
  align-items: end;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
}

.searchHero h1,
.detailSummary h1 {
  font-size: clamp(46px, 7vw, 88px);
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.searchHero > p,
.priceLocked > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.searchPanel {
  background: var(--ink);
  color: var(--ui-on-brand);
  padding: 32px max(28px, calc((100vw - 1184px) / 2));
}

.searchForm {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(140px, 0.65fr)) auto;
}

.searchField {
  display: grid;
  gap: 8px;
}

.searchField > span {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.searchField input,
.searchField select,
.searchForm button {
  border: 1px solid var(--ui-border-strong);
  border-radius: 0;
  font: inherit;
  min-height: 50px;
}

.searchField input,
.searchField select {
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
  padding: 0 14px;
  width: 100%;
}

.searchField input::placeholder {
  color: var(--ui-text-muted);
}

.searchForm button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ui-on-brand);
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
  padding: 0 22px;
}

.searchField input:focus-visible,
.searchField select:focus-visible,
.searchForm button:focus-visible,
.primaryAction:focus-visible,
.secondaryAction:focus-visible,
.cardArt:focus-visible,
.textLink:focus-visible,
.backLink:focus-visible,
.siblingList a:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}

.searchHint {
  color: var(--ui-text-muted);
  font-size: 12px;
  margin: 12px 0 0;
}

.searchResults {
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  min-height: 540px;
  padding: 72px 28px 100px;
}

.resultsHeading {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
}

.resultsHeading h2,
.identitySection h2,
.priceLocked h2,
.siblingSection h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0;
}

.resultsHeading > span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.demoNotice {
  align-items: center;
  background: var(--ui-brand-soft);
  border-left: 4px solid var(--ui-brand);
  color: var(--ui-text);
  display: flex;
  font-size: 13px;
  gap: 16px;
  margin: 24px 0;
  padding: 15px 18px;
}

.demoNotice span {
  line-height: 1.55;
}

.catalogNotice {
  align-items: center;
  background: var(--ui-surface-raised);
  border-left: 4px solid var(--ui-border-strong);
  color: var(--ui-text);
  display: flex;
  font-size: 13px;
  gap: 16px;
  margin: 24px 0;
  padding: 15px 18px;
}

.catalogNotice span {
  line-height: 1.55;
}

.serviceError {
  border-color: var(--ui-danger);
  background: var(--ui-surface);
}

.variantGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
}

.variantCard {
  background: var(--ui-surface);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 286px;
}

.cardArt {
  color: var(--ui-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 20px;
}

.cardArt span,
.cardArt strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cardArt span {
  font-size: 11px;
  letter-spacing: 0.14em;
}

.cardArt strong {
  font-size: 20px;
}

.cardArt-red {
  background: var(--ui-brand-solid);
}

.cardArt-blue {
  background: var(--ui-surface-muted);
}

.cardArt-yellow {
  background: var(--ui-brand-solid);
}

.cardArt-violet {
  background: var(--ui-surface-muted);
}

.variantBody {
  padding: 22px;
}

.variantMeta {
  color: var(--muted);
  display: flex;
  font-size: 11px;
  gap: 8px;
  justify-content: space-between;
}

.variantBody h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 28px 0 3px;
}

.variantOriginal {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 22px;
}

.variantFacts {
  border-top: 1px solid var(--line);
  margin: 0;
  padding-top: 12px;
}

.variantFacts > div {
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 42px 1fr;
  margin-top: 8px;
}

.variantFacts dt {
  color: var(--muted);
}

.variantFacts dd {
  margin: 0;
}

.textLink,
.backLink {
  color: var(--accent-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 720;
  margin-top: 22px;
}

.emptyState {
  border: 1px dashed var(--line);
  margin-top: 28px;
  padding: 52px 28px;
  text-align: center;
}

.emptyState strong {
  font-size: 20px;
}

.emptyState p {
  color: var(--muted);
  line-height: 1.7;
  margin: 10px auto 0;
  max-width: 520px;
}

.backLink {
  margin: 0 0 36px;
}

.detailLayout {
  align-items: stretch;
  display: grid;
  gap: clamp(36px, 7vw, 92px);
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.4fr);
}

.detailArt {
  aspect-ratio: 0.72;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 430px;
  padding: 30px;
}

.detailArt > span,
.detailArt > small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.detailArt > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 500;
}

.detailSummary {
  align-self: center;
}

.detailOriginal {
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  margin: 14px 0 36px;
}

.identityCode {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 18px 0;
}

.identityCode span {
  color: var(--muted);
  font-size: 11px;
}

.identityCode code {
  overflow-wrap: anywhere;
}

.detailSummary .demoNotice {
  margin-top: 24px;
}

.identitySection {
  background: var(--ink);
  color: var(--ui-on-brand);
  padding: 80px max(28px, calc((100vw - 1184px) / 2));
}

.compactHeading {
  align-items: end;
}

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

.identityGrid > div {
  border-top: 1px solid var(--ui-border-strong);
  min-height: 124px;
  padding: 18px 24px 18px 0;
}

.identityGrid dt {
  color: var(--ui-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}

.identityGrid dd {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.priceLocked {
  display: grid;
  gap: 64px;
  grid-template-columns: 1.25fr 0.75fr;
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1240px);
  padding: 92px 28px;
}

.priceLocked > p {
  align-self: end;
}

.siblingSection {
  border-top: 1px solid var(--line);
  margin: 0 auto;
  max-width: var(--desktop-page-width, 1184px);
  padding: 68px 0 96px;
}

.siblingList {
  display: grid;
  gap: 1px;
  margin-top: 32px;
}

.siblingList a {
  align-items: center;
  background: var(--panel);
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.siblingList span {
  color: var(--muted);
}

@media (max-width: 760px) {
  .buildBadge {
    display: none;
  }

  .navLinks {
    gap: 14px;
  }

  .navLinks > a:nth-child(2) {
    display: none;
  }

  .hero {
    padding-bottom: 64px;
  }

  .heroCopy {
    margin-left: 0;
  }

  .heroActions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .trustLine {
    justify-content: flex-start;
  }

  .sectionHeading,
  .method,
  .searchHero,
  .detailLayout,
  .priceLocked {
    grid-template-columns: 1fr;
  }

  .searchHero {
    gap: 28px;
    padding-top: 52px;
  }

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

  .searchFieldWide,
  .searchForm button {
    grid-column: 1 / -1;
  }

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

  .variantCard {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .variantBody h2 {
    margin-top: 20px;
  }

  .demoNotice {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .detailArt {
    max-width: 330px;
  }

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

  .identityGrid > div {
    min-height: auto;
    padding-bottom: 24px;
  }

  .identityGrid dt {
    margin-bottom: 12px;
  }

  .siblingSection {
    margin: 0 28px;
  }

  .siblingList a {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .capabilityGrid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .capability {
    min-height: auto;
    padding: 24px 0 34px;
  }

  .capability + .capability {
    border-left: 0;
    padding-left: 0;
  }

  .capability h3 {
    margin-top: 38px;
  }

  footer {
    flex-direction: column;
    gap: 8px;
  }
}

/* Unified member journey */
.accountPage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--ui-brand) 9%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--ui-surface) 0, var(--ui-surface) 52%, var(--ui-surface-raised) 100%);
}

.accountWorkspace {
  display: grid;
  grid-template-columns: 248px minmax(0, 720px);
  gap: 22px;
  width: min(var(--desktop-page-width, 1010px), calc(100% - 40px));
  margin: 0 auto;
  padding: 38px 0 72px;
  align-items: start;
}

.accountWorkspace.isWide {
  grid-template-columns: 248px minmax(0, 1fr);
  width: min(var(--desktop-page-width, 1260px), calc(100% - 40px));
}

@media (min-width: 1024px) {
  .accountWorkspace[data-account-section="account"],
  .accountWorkspace[data-account-section="settings"] {
    grid-template-columns: 248px minmax(0, 1fr);
    width: calc(100% - 64px);
  }
}

.accountJourney {
  position: sticky;
  top: 102px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ui-shadow-color) 7%, transparent);
  backdrop-filter: blur(12px);
}

.accountJourneyHeading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px;
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(135deg, var(--ui-brand-solid), var(--ui-brand-solid));
  color: var(--ui-on-brand);
}

.accountJourneyHeading > div,
.accountJourneyHeading strong,
.accountJourneyHeading small {
  display: block;
}

.accountJourneyHeading small {
  margin-top: 2px;
  color: color-mix(in srgb, var(--ui-on-brand) 72%, transparent);
  font-size: 11px;
}

.accountJourneyMark {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 45%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ui-surface) 15%, transparent);
  font: 800 18px/1 Georgia, serif;
  place-items: center;
}

.accountSteps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 14px 12px;
  list-style: none;
}

.accountSteps li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border-radius: 9px;
  color: var(--ui-text-muted);
}

.accountSteps li::after {
  position: absolute;
  top: 50px;
  bottom: -12px;
  left: 24px;
  width: 1px;
  background: var(--ui-surface-raised);
  content: "";
}

.accountSteps li:last-child::after {
  display: none;
}

.accountSteps li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-surface);
  font-size: 12px;
  font-weight: 800;
  place-items: center;
}

.accountSteps li strong,
.accountSteps li small {
  display: block;
}

.accountSteps li strong {
  color: var(--ui-text-muted);
  font-size: 13px;
}

.accountSteps li small {
  margin-top: 3px;
  font-size: 10px;
}

.accountSteps li.isCurrent {
  background: var(--ui-surface);
  color: var(--exchange-blue);
}

.accountSteps li.isCurrent strong {
  color: var(--ui-brand);
}

.accountSteps li.isCurrent > span,
.accountSteps li.isComplete > span {
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
}

.accountMenu {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.accountMenu a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ui-text-muted);
  transition: background 140ms ease, color 140ms ease;
}

.accountMenu a > span {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ui-surface-raised);
  font-size: 15px;
  place-items: center;
}

.accountMenu a strong,
.accountMenu a small {
  display: block;
}

.accountMenu a strong {
  color: var(--ui-text);
  font-size: 13px;
}

.accountMenu a small {
  margin-top: 2px;
  color: var(--ui-text-muted);
  font-size: 10px;
}

.accountMenu a:hover,
.accountMenu a.isCurrent {
  background: var(--ui-surface);
  color: var(--exchange-blue);
}

.accountMenu a.isCurrent > span {
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
}

.accountMenu a.isCurrent strong {
  color: var(--ui-brand);
}

.accountSecurityNote {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 15px 17px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.accountWorkspace .accountPanel {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.accountSurface {
  overflow: visible;
  min-height: 560px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
}

.accountPageHeading {
  padding: clamp(25px, 5vw, 38px) clamp(22px, 5vw, 42px) 27px;
  border-bottom: 1px solid var(--ui-border);
}

.accountPageHeading .exchangeEyebrow {
  margin: 0 0 10px;
  color: var(--exchange-blue);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.accountPageHeading h1,
.accountWorkspace .accountPanel h1 {
  margin: 0;
  color: var(--ui-text);
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.accountPageHeading > p:last-child:not(.exchangeEyebrow) {
  margin: 12px 0 0;
  color: var(--ui-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.accountPageBody {
  padding: clamp(22px, 5vw, 42px);
}

.accountPageBody > :first-child {
  margin-top: 0;
}

.accountPageBody .accountForm {
  padding: clamp(20px, 4vw, 28px);
  border-color: var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}

.accountPageBody .accountEmailField > span,
.accountPageBody .accountConsents legend {
  color: var(--ui-text);
  font-size: 12px;
}

.accountPageBody .accountEmailField input,
.accountPageBody .accountRuleForm input,
.accountPageBody .accountRuleForm select {
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
}

.accountPageBody .accountForm button,
.accountPrimaryButton {
  min-height: 50px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ui-brand-solid), var(--ui-brand-solid));
  color: var(--ui-on-brand);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-shadow-color) 18%, transparent);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  cursor: pointer;
}

.accountPrimaryButton {
  width: 100%;
  padding: 0 20px;
}

.accountPageBody .accountConsents {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
}

.accountPageBody .accountPrivacyNote {
  margin-top: 16px;
  color: var(--ui-text-muted);
  font-size: 11px;
  text-align: left;
}

.accountStatusCard {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px;
  border-radius: 9px;
}

.accountStatusIcon {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-brand) 10%, transparent);
  font-weight: 850;
  place-items: center;
}

.accountNoticeSuccess .accountStatusIcon {
  background: color-mix(in srgb, var(--ui-brand) 11%, transparent);
}

.accountStatusCard strong {
  display: block;
  margin-top: 1px;
  font-size: 14px;
}

.accountStatusCard p {
  margin: 5px 0 0;
  color: inherit;
  opacity: 0.82;
}

.accountIdentityCard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}

.accountIdentityCard > span {
  display: grid;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
  font-size: 19px;
  font-weight: 820;
  place-items: center;
}

.accountIdentityCard small,
.accountIdentityCard strong {
  display: block;
}

.accountIdentityCard small {
  margin-bottom: 4px;
  color: var(--ui-text-muted);
  font-size: 10px;
}

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

.accountProfileCard {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.accountProfileHeader {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface);
}

.accountProfileHeader strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ui-text);
  font-size: 14px;
}

.accountAvatar {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--ui-brand-solid), var(--ui-brand-solid));
  color: var(--ui-on-brand);
  font-size: 20px;
  font-weight: 820;
  place-items: center;
}

.accountProfileHeader .accountProfileState {
  margin: 0 0 3px;
}

.accountProfileCard dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

.accountProfileCard dl div {
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
}

.accountSectionTitle {
  margin: 0 0 12px;
  color: var(--ui-text);
  font-size: 14px;
}

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

.accountSectionLinks a {
  min-height: 96px;
  padding: 18px;
  border-color: var(--ui-border);
  border-radius: 10px;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.accountSectionLinks a:hover {
  border-color: var(--ui-border);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-shadow-color) 9%, transparent);
  transform: translateY(-1px);
}

.accountSectionLinks strong {
  color: var(--ui-text);
  font-size: 14px;
}

.accountSectionLinks span {
  color: var(--ui-text-muted);
}

.accountSecondaryButton {
  min-height: 40px;
  border-radius: 7px;
}

.accountCollectionTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding: 17px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}

.accountCollectionTopbar > div:first-child small,
.accountCollectionTopbar > div:first-child strong {
  display: block;
}

.accountCollectionTopbar > div:first-child small {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.accountCollectionTopbar > div:first-child strong {
  margin-top: 3px;
  color: var(--ui-text);
  font-size: 20px;
}

.accountPrimaryAction {
  min-height: 42px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ui-brand-solid), var(--ui-brand-solid));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-shadow-color) 15%, transparent);
}

.accountFeatureNote {
  margin: -6px 0 20px;
  padding: 13px 15px;
  border-left: 3px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.65;
}

.accountPageBody .accountRuleForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  border-color: var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface);
}

.accountRuleHeader {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.accountRuleHeader > span {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
  font-size: 19px;
  place-items: center;
}

.accountRuleHeader small,
.accountRuleHeader h2,
.accountRuleHeader p {
  display: block;
  margin: 0;
}

.accountRuleHeader small {
  color: var(--ui-brand);
  font-size: 10px;
  font-weight: 780;
}

.accountRuleHeader h2 {
  margin-top: 3px;
  color: var(--ui-text);
  font-size: 17px;
}

.accountRuleHeader p {
  margin-top: 5px;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.accountRuleCurrent {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
}

.accountRuleCurrent span,
.accountRuleCurrent small {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.accountRuleCurrent strong {
  color: var(--ui-brand);
  font-size: 17px;
}

.accountRuleForm > small {
  grid-column: 1 / -1;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.accountCollectionToolbar {
  border-color: var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}

.accountCollectionToolbar input,
.accountCollectionToolbar select,
.accountCollectionToolbar button,
.accountCollectionToolbar > a {
  border-radius: 7px;
}

.accountCollectionList article,
.accountConfirmCard {
  border-color: var(--ui-border);
  border-radius: 10px;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ui-shadow-color) 4%, transparent);
}

[data-account-section="cards"] .accountCollectionList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accountCollectionThumb {
  border: 1px solid var(--ui-border);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-shadow-color) 9%, transparent);
}

.accountConfirmCard {
  padding: 20px;
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.accountEmptyState {
  display: grid;
  justify-items: center;
  padding: 40px 20px;
  border: 1px dashed var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface);
  text-align: center;
}

.accountEmptyState > span {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  border-radius: 14px;
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
  font-size: 22px;
  place-items: center;
}

.accountEmptyState strong {
  color: var(--ui-text);
  font-size: 15px;
}

.accountEmptyState p {
  max-width: 390px;
  margin: 8px 0 17px;
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.accountEmptyState a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 7px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font-size: 12px;
  font-weight: 760;
}

.accountAlertActions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
}

.accountAlertEdit {
  position: relative;
}

.accountAlertEdit > summary {
  padding: 9px 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  color: var(--exchange-navy);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.accountAlertEdit > summary::-webkit-details-marker {
  display: none;
}

.accountAlertEdit > form {
  position: absolute;
  z-index: 6;
  top: calc(100% + 7px);
  right: 0;
  width: 270px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ui-shadow-color) 16%, transparent);
}

.accountAlertEdit > form label {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.accountAlertEdit > form input,
.accountAlertEdit > form select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  font: inherit;
}

.accountBackLink {
  margin-top: 26px;
  color: var(--ui-text-muted);
}

.accountDangerZone {
  margin-top: 0;
  border-radius: 11px;
}

@media (max-width: 960px) {
  .accountWorkspace,
  .accountWorkspace.isWide {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 28px));
    padding-top: 20px;
  }

  .accountJourney {
    position: static;
  }

  .accountJourneyHeading,
  .accountSecurityNote {
    display: none;
  }

  .accountMenu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 7px;
  }

  .accountMenu a {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 60px;
    padding: 7px 4px;
    text-align: center;
  }

  .accountMenu a > span {
    width: 28px;
    height: 28px;
    margin: 0 auto;
  }

  .accountMenu a small {
    display: none;
  }

  .accountSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 7px;
  }

  .accountSteps li {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 54px;
    padding: 6px;
  }

  .accountSteps li::after {
    top: 27px;
    right: -9px;
    bottom: auto;
    left: 34px;
    width: auto;
    height: 1px;
  }

  .accountSteps li small {
    display: none;
  }
}

@media (max-width: 680px) {
  .accountWorkspace,
  .accountWorkspace.isWide {
    width: calc(100% - 20px);
    gap: 12px;
    padding-top: 12px;
  }

  .accountSurface {
    border-radius: 10px;
  }

  .accountPageHeading {
    padding: 23px 20px 20px;
  }

  .accountPageBody {
    padding: 20px;
  }

  .accountCollectionTopbar {
    align-items: stretch;
    flex-direction: column;
  }

  .accountPrimaryAction {
    width: 100%;
  }

  .accountProfileCard dl,
  .accountSectionLinks,
  [data-account-section="cards"] .accountCollectionList {
    grid-template-columns: 1fr;
  }

  .accountSteps li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .accountSteps li::after {
    top: 20px;
    right: -50%;
    left: 50%;
  }

  .accountSteps li > span {
    width: 28px;
  }

  .accountCollectionList article > a {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .accountCollectionThumb {
    width: 64px;
    height: 90px;
  }
}

/* Category-first navigation */
.exchangeShell .desktopNav,
.exchangeShell .gameNav,
.exchangeShell .utilityNav {
  display: flex;
  align-items: center;
}

.exchangeShell .desktopNav {
  gap: 18px;
}

.exchangeShell .gameNav {
  gap: 2px;
}

.exchangeShell .gameNav > a,
.exchangeShell .gameNavMore > summary,
.exchangeShell .utilityNav > a {
  padding: 21px 10px 19px;
  color: var(--ui-text-muted);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.exchangeShell .gameNav > a:hover,
.exchangeShell .gameNav > a:focus-visible,
.exchangeShell .gameNav > a.isActive,
.exchangeShell .gameNavMore > summary:hover,
.exchangeShell .utilityNav > a:hover,
.exchangeShell .utilityNav > a:focus-visible {
  color: var(--ui-on-brand);
  border-bottom-color: var(--ui-focus);
}

.exchangeShell .gameNavMore {
  position: relative;
}

.exchangeShell .gameNavMore > summary {
  list-style: none;
}

.exchangeShell .gameNavMore > summary::-webkit-details-marker {
  display: none;
}

.exchangeShell .gameNavMore > div {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  display: grid;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 4px;
  background: var(--ui-inverse);
  box-shadow: 0 14px 35px color-mix(in srgb, var(--ui-shadow-color) 24%, transparent);
}

.exchangeShell .gameNavMore > div a {
  padding: 10px 12px;
  color: var(--ui-on-brand);
  border-radius: 3px;
  font-size: 13px;
}

.exchangeShell .gameNavMore > div a:hover,
.exchangeShell .gameNavMore > div a:focus-visible,
.exchangeShell .gameNavMore > div a.isActive {
  color: var(--ui-on-inverse);
  background: var(--ui-inverse);
}

.exchangeShell .utilityNav {
  gap: 2px;
}

.exchangeShell .utilityNav .buildBadge {
  margin-left: 8px;
}

.mobileMenuButton,
.mobileMenuBackdrop,
.mobileMenuPanel {
  display: none;
}

.hallOfFameSection {
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-brand-soft));
}

.hallOfFameGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hallOfFameGrid > li {
  position: relative;
  min-width: 0;
}

.hallOfFameRank {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  color: var(--ui-on-brand);
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-brand-solid);
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-shadow-color) 25%, transparent);
}

.salesMarketTabs > span.isDisabled {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 110px;
  justify-content: center;
  padding: 14px 20px 15px;
  color: var(--ui-text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
}

.marketFilterFormExpanded {
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 180px)) minmax(180px, 220px) 88px;
}

@media (max-width: 1100px) {
  .exchangeShell .desktopNav {
    gap: 6px;
  }

  .exchangeShell .utilityNav .buildBadge {
    display: none;
  }
}

@media (max-width: 900px) {
  .exchangeShell .desktopNav {
    display: none;
  }

  .mobileMenuButton {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background: var(--ui-inverse);
    place-content: center;
    gap: 4px;
    cursor: pointer;
  }

  .mobileMenuButton span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--ui-surface);
  }

  .mobileMenuBackdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: block;
    border: 0;
    background: color-mix(in srgb, var(--ui-brand) 58%, transparent);
  }

  .mobileMenuPanel {
    position: fixed;
    z-index: 61;
    inset: 0 auto 0 0;
    display: flex;
    width: min(86vw, 360px);
    padding: 22px;
    overflow-y: auto;
    flex-direction: column;
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: 12px 0 40px color-mix(in srgb, var(--ui-shadow-color) 22%, transparent);
  }

  .mobileMenuPanel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ui-border);
    font-size: 19px;
  }

  .mobileMenuPanel > header button {
    width: 38px;
    height: 38px;
    border: 0;
    color: var(--ui-text);
    background: transparent;
    font-size: 28px;
    cursor: pointer;
  }

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

  .mobileGameLinks a,
  .mobileUtilityLinks a {
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    font-size: 14px;
    font-weight: 700;
  }

  .mobileGameLinks a.isActive {
    color: var(--ui-on-brand);
    border-color: var(--ui-brand);
    background: var(--ui-brand-solid);
  }

  .mobileUtilityLinks {
    display: grid;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--ui-border);
  }

  .exchangeShell .mobileMenuPanel .buildBadge {
    display: inline-flex;
    align-self: flex-start;
    margin: 22px 0 0;
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
    background: var(--ui-surface);
  }

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

@media (max-width: 560px) {
  .hallOfFameSection {
    width: calc(100% - 32px);
    padding: 18px;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.reviewHero h1 {
  max-width: 17ch;
  margin: 0.55rem 0 0;
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.queueHeading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.queueItem span,
.queueItem small {
  color: var(--muted);
  font-size: 0.76rem;
}

.evidenceTags span {
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.7rem;
}

.reviewHistory li > span {
  padding: 0.25rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
}
/* Desktop page containers expand with the viewport; mobile keeps its existing widths. */
@media (min-width: 1024px) {
  :root { --desktop-page-width: 100%; }
}
/* Exchange Trust — approved public product system. */
.exchangeShell {
  --exchange-navy: var(--ui-text);
  --exchange-blue: var(--ui-brand);
  --exchange-logo-blue: var(--ui-brand);
  --exchange-blue-soft: var(--ui-brand-soft);
  --exchange-canvas: var(--ui-canvas);
  --exchange-surface: var(--ui-surface);
  --exchange-ink: var(--ui-text);
  --exchange-muted: var(--ui-text-muted);
  --exchange-line: var(--ui-border);
  --exchange-line-strong: var(--ui-border-strong);
  --exchange-positive: var(--ui-positive);
  --exchange-negative: var(--ui-negative);
  min-height: 100vh;
  color: var(--exchange-ink);
  background: var(--exchange-canvas);
  font-family: "Noto Sans KR", "Noto Sans", "Apple SD Gothic Neo", sans-serif;
}

.exchangeShell .nav {
  position: sticky;
  z-index: 20;
  top: 0;
  max-width: none;
  min-height: 64px;
  padding: 0 32px;
  color: var(--ui-on-brand);
  border-bottom: 1px solid var(--exchange-logo-blue);
  background: var(--exchange-logo-blue);
}

.exchangeShell .brand {
  color: var(--ui-on-brand);
}

.exchangeShell .navLinks {
  gap: 4px;
}

.exchangeShell .navLinks > a {
  padding: 21px 16px 19px;
  color: var(--ui-text-muted);
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
}

.exchangeShell .navLinks > a:hover,
.exchangeShell .navLinks > a:focus-visible {
  color: var(--ui-on-brand);
  border-color: var(--ui-focus);
}

.exchangeShell .buildBadge {
  margin-left: 14px;
  padding: 7px 10px;
  color: var(--ui-on-inverse);
  border: 1px solid var(--ui-border-strong);
  border-radius: 4px;
  background: var(--ui-inverse);
  font:
    500 11px "Google Sans Mono",
    Consolas,
    monospace;
}

.exchangePage {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto;
  padding: 38px 0 64px;
}

.marketHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
}

.exchangeEyebrow {
  margin: 0 0 8px;
  color: var(--exchange-blue);
  font:
    700 11px "Google Sans Mono",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

.exchangeShell h1,
.exchangeShell h2,
.exchangeShell h3 {
  margin-top: 0;
  font-family: inherit;
  letter-spacing: -0.035em;
}

.marketHeading h1 {
  margin-bottom: 8px;
  color: var(--exchange-navy);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
}

.marketHeading > div > p:last-child {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 15px;
}

.marketStatus {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  min-width: 286px;
  padding: 14px 16px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exchange-positive);
}

.marketStatus strong {
  font-size: 13px;
}

.marketStatus small {
  grid-column: 2;
  margin-top: 3px;
  color: var(--exchange-muted);
  font:
    11px "Google Sans Mono",
    Consolas,
    monospace;
}

.exchangeDashboard {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.marketPanel,
.selectedMarketCard,
.moversPanel,
.dataHealth,
.exchangeShell .searchPanel,
.exchangeShell .variantCard,
.detailExchangeHero,
.exchangeShell .identitySection,
.exchangeShell .priceLocked,
.exchangeShell .siblingSection {
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--exchange-surface);
  box-shadow: none;
}

.panelToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--exchange-line);
}

.marketTabs {
  display: flex;
  align-self: stretch;
  gap: 24px;
}

.marketTabs button {
  padding: 0;
  color: var(--exchange-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: 600 13px inherit;
  cursor: pointer;
}

.marketTabs button.isActive {
  color: var(--exchange-blue);
  border-color: var(--exchange-blue);
}

.tableSearch {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 180px;
  padding: 8px 10px;
  color: var(--exchange-muted);
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  font-size: 12px;
}

.tableSearch span {
  margin-left: auto;
  color: var(--exchange-blue);
  font-size: 18px;
}

.previewNotice {
  padding: 9px 18px;
  color: var(--ui-text-muted);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 11px;
}

.previewNotice strong {
  margin-right: 7px;
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.realDataNotice {
  padding: 9px 18px;
  color: var(--ui-text);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  font-size: 11px;
}

.realDataNotice strong {
  margin-right: 7px;
  color: var(--ui-text);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.indexPanelTitle {
  display: grid;
  gap: 3px;
}

.indexPanelTitle small {
  color: var(--exchange-blue);
  font:
    700 9px "Google Sans Mono",
    Consolas,
    monospace;
}

.indexPanelTitle strong {
  color: var(--exchange-navy);
  font-size: 16px;
}

.marketIndexTableHead,
.marketIndexTableRow {
  display: grid;
  grid-template-columns: minmax(250px, 1.8fr) minmax(90px, 0.65fr) 100px minmax(145px, 0.9fr);
  align-items: center;
}

.marketIndexTableHead {
  min-height: 39px;
  padding: 0 18px;
  color: var(--exchange-muted);
  border-bottom: 1px solid var(--exchange-line);
  background: var(--ui-surface);
  font-size: 11px;
}

.marketIndexTableHead span:not(:first-child) {
  text-align: right;
}

.marketIndexTableRow {
  min-height: 78px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ui-border);
}

.marketIndexTableRow:last-child {
  border-bottom: 0;
}

.marketIndexIdentity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.marketIndexIdentity > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.marketIndexThumb,
.cardmarketResultThumb {
  flex: 0 0 auto;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
  object-fit: cover;
  object-position: center;
}

.marketIndexThumb {
  width: 48px;
  height: 68px;
}

.marketIndexIdentity strong,
.marketIndexIdentity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketIndexIdentity strong {
  font-size: 13px;
}

.marketIndexIdentity small,
.indexPublished {
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.indexNumeric,
.indexPublished {
  justify-self: end;
  text-align: right;
}

.indexNumeric {
  font:
    600 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.currentIndexCard .selectedPrice {
  border-bottom: 1px solid var(--exchange-line);
}

.marketTableHead,
.marketTableRow {
  display: grid;
  grid-template-columns: minmax(270px, 2.2fr) repeat(4, minmax(68px, 0.72fr)) 70px;
  align-items: center;
}

.marketTableHead {
  min-height: 39px;
  padding: 0 18px;
  color: var(--exchange-muted);
  border-bottom: 1px solid var(--exchange-line);
  background: var(--ui-surface);
  font-size: 11px;
}

.marketTableHead span:not(:first-child) {
  text-align: right;
}

.marketTableRow {
  min-height: 78px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ui-border);
}

.marketTableRow:last-child {
  border-bottom: 0;
}

.marketIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.marketThumb,
.selectedThumb,
.detailThumb,
.exchangeShell .cardArt {
  flex: 0 0 auto;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  background-color: var(--ui-surface-raised);
  background-position: center;
  background-size: cover;
}

.marketThumb {
  width: 42px;
  height: 56px;
}

.marketIdentity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.marketIdentity strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketIdentity small {
  overflow: hidden;
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numeric {
  justify-self: end;
  text-align: right;
  font:
    600 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.numeric small {
  display: block;
  margin-top: 4px;
  color: var(--ui-text-muted);
  font-size: 8px;
}

.delta.up,
.moverGrid .up {
  color: var(--exchange-positive);
}

.delta.down,
.moverGrid .down {
  color: var(--exchange-negative);
}

.confidence {
  justify-self: end;
  min-width: 48px;
  padding: 4px 7px;
  text-align: center;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.confidence.high {
  color: var(--ui-text);
  background: var(--ui-surface-raised);
}

.confidence.medium {
  color: var(--ui-text);
  background: var(--ui-brand-soft);
}

.selectedMarketCard {
  padding: 20px;
}

.selectedCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--exchange-line);
}

.selectedCardHeader p {
  margin: 0 0 7px;
  color: var(--exchange-muted);
  font-size: 11px;
}

.selectedCardHeader h2 {
  margin-bottom: 2px;
  color: var(--exchange-navy);
  font-size: 24px;
}

.selectedCardHeader div > span {
  color: var(--exchange-muted);
  font-size: 12px;
}

.verifiedBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 7px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-surface-raised);
  font:
    700 9px "Google Sans Mono",
    Consolas,
    monospace;
}

.selectedIdentity {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--exchange-line);
}

.selectedThumb {
  width: 70px;
  height: 92px;
}

.selectedIdentity dl {
  display: grid;
  gap: 13px;
  margin: 0;
}

.selectedIdentity dt,
.provenanceList dt,
.detailExchangeHero dt {
  margin-bottom: 3px;
  color: var(--exchange-muted);
  font:
    9px "Google Sans Mono",
    Consolas,
    monospace;
}

.selectedIdentity dd,
.provenanceList dd {
  margin: 0;
  font:
    600 11px "Google Sans Mono",
    Consolas,
    monospace;
}

.selectedPrice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 18px 0;
}

.selectedPrice > span {
  color: var(--exchange-muted);
  font-size: 11px;
}

.selectedPrice small {
  margin-left: 5px;
  color: var(--exchange-blue);
  font:
    700 8px "Google Sans Mono",
    Consolas,
    monospace;
}

.selectedPrice strong {
  grid-column: 1;
  margin-top: 5px;
  color: var(--exchange-navy);
  font:
    700 28px "Google Sans Mono",
    Consolas,
    monospace;
}

.selectedPrice em {
  grid-column: 2;
  grid-row: 2;
  color: var(--exchange-positive);
  font:
    normal 600 11px "Google Sans Mono",
    Consolas,
    monospace;
}

.chartHeader {
  display: flex;
  justify-content: space-between;
  color: var(--exchange-muted);
  font-size: 11px;
}

.chartHeader div {
  display: flex;
  gap: 14px;
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.chartHeader b {
  color: var(--exchange-blue);
}

.marketChart {
  width: 100%;
  margin: 8px 0 10px;
}

.chartGrid {
  fill: none;
  stroke: var(--ui-on-brand);
  stroke-width: 1;
}

.chartArea {
  fill: var(--ui-on-brand);
}

.chartLine {
  fill: none;
  stroke: var(--exchange-blue);
  stroke-width: 2;
}

.provenanceList {
  margin: 0 0 18px;
  border-top: 1px solid var(--exchange-line);
}

.provenanceList div {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--ui-border);
}

.exchangePrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--ui-on-brand);
  border: 1px solid var(--ui-brand);
  border-radius: 4px;
  background: var(--exchange-blue);
  font-size: 13px;
  font-weight: 700;
}

.selectedMarketCard .exchangePrimary {
  width: 100%;
}

.exchangePrimary:hover,
.exchangePrimary:focus-visible {
  background: var(--ui-brand-solid);
}

.marketLower {
  display: grid;
  grid-template-columns: 2fr 0.82fr;
  gap: 16px;
  margin-top: 16px;
}

.moversPanel,
.dataHealth {
  padding: 20px;
}

.panelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panelTitle p,
.dataHealth > p {
  margin: 0 0 4px;
  color: var(--exchange-blue);
  font:
    700 9px "Google Sans Mono",
    Consolas,
    monospace;
}

.panelTitle h2,
.dataHealth h2 {
  margin: 0;
  font-size: 19px;
}

.panelTitle > span {
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.moverGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--exchange-line);
}

.moverGrid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-right: 1px solid var(--exchange-line);
}

.moverGrid article:last-child {
  border-right: 0;
}

.moverGrid span {
  color: var(--exchange-muted);
  font-size: 11px;
}

.moverGrid strong {
  font-size: 13px;
}

.moverGrid em {
  font:
    normal 700 19px "Google Sans Mono",
    Consolas,
    monospace;
}

.dataHealth ul {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dataHealth li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ui-border);
}

.dataHealth li > span {
  display: grid;
  width: 25px;
  height: 25px;
  color: var(--exchange-blue);
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.dataHealth li div {
  display: grid;
  gap: 2px;
}

.dataHealth li strong {
  font-size: 12px;
}

.dataHealth li small {
  color: var(--exchange-muted);
  font-size: 10px;
}

.exchangeShell footer {
  display: flex;
  justify-content: space-between;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  margin: 0 auto;
  padding: 24px 0 32px;
  color: var(--exchange-muted);
  border-top: 1px solid var(--exchange-line);
  font-size: 11px;
}

/* Search */
.exchangeShell .searchHero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  min-height: 0;
  margin: 0 auto;
  padding: 38px 0 24px;
  color: var(--exchange-ink);
  background: none;
}

.exchangeShell .searchHero h1 {
  margin: 0;
  color: var(--exchange-navy);
  font-size: 36px;
  line-height: 1.25;
}

.exchangeShell .searchHero > p {
  max-width: 520px;
  margin: 0 0 2px;
  color: var(--exchange-muted);
  font-size: 14px;
}

.exchangeShell .searchPanel,
.exchangeShell .searchResults {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  margin-right: auto;
  margin-left: auto;
}

.exchangeShell .searchPanel {
  padding: 18px;
}

.exchangeShell .searchForm {
  grid-template-columns: minmax(300px, 1fr) 180px 180px 120px;
  gap: 10px;
}

.exchangeShell .searchAdvanced {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--exchange-line);
}

.exchangeShell .searchAdvanced summary {
  width: fit-content;
  color: var(--exchange-blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.exchangeShell .searchAdvancedFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.exchangeShell .searchField > span {
  color: var(--exchange-muted);
  font-size: 11px;
  font-weight: 600;
}

.exchangeShell .searchField input,
.exchangeShell .searchField select {
  min-height: 44px;
  color: var(--exchange-ink);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
}

.exchangeShell .searchField input:focus,
.exchangeShell .searchField select:focus {
  border-color: var(--exchange-blue);
  outline: 2px solid var(--ui-focus);
}

.exchangeShell .searchForm button {
  min-height: 44px;
  color: var(--ui-on-brand);
  border: 1px solid var(--ui-brand);
  border-radius: 4px;
  background: var(--exchange-blue);
  box-shadow: none;
}

.exchangeShell .searchHint {
  color: var(--exchange-muted);
}

.exchangeShell .searchPagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.exchangeShell .searchPagination a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  color: var(--ui-on-brand);
  border: 1px solid var(--ui-brand);
  border-radius: 4px;
  background: var(--exchange-blue);
  font-size: 13px;
  font-weight: 700;
}

.exchangeShell .searchResults {
  padding: 38px 0 72px;
}

.exchangeShell .resultsHeading {
  padding-bottom: 14px;
  border-color: var(--exchange-line-strong);
}

.exchangeShell .resultsHeading h2 {
  margin: 0;
  color: var(--exchange-navy);
  font-size: 22px;
}

.exchangeShell .resultsHeading > span {
  color: var(--exchange-muted);
  font:
    11px "Google Sans Mono",
    Consolas,
    monospace;
}

/* Cardmarket official public snapshot */
.cardmarketDisclosure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 16px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
}

.connectedTcgSection {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
}

.connectedTcgHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(90deg, var(--ui-surface), var(--ui-surface));
}

.connectedTcgHeading > div > span,
.connectedTcgCard > header > span {
  color: var(--exchange-blue);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
  letter-spacing: 0.05em;
}

.connectedTcgHeading h2 {
  margin: 5px 0 3px;
  color: var(--exchange-navy);
  font-size: 20px;
}

.connectedTcgHeading p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.6;
}

.connectedTcgHeading > a {
  flex: 0 0 auto;
  padding: 10px 14px;
  color: var(--ui-on-brand);
  border-radius: 4px;
  background: var(--exchange-blue);
  font-size: 12px;
  font-weight: 700;
}

.connectedTcgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--exchange-line);
}

.connectedTcgCard {
  min-width: 0;
  padding: 20px;
  background: var(--ui-surface);
}

.connectedTcgCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.connectedTcgCard > header > strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-brand);
  font-size: 11px;
}

.connectedTcgCard > header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-brand-solid);
  box-shadow: 0 0 0 3px var(--ui-shadow-color);
}

.connectedTcgIdentity {
  margin: 22px 0 18px;
}

.connectedTcgIdentity h3 {
  margin: 0 0 5px;
  color: var(--exchange-navy);
  font-size: 22px;
}

.connectedTcgIdentity p {
  margin: 0;
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

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

.connectedTcgCard dl > div {
  padding: 12px 14px;
  border: 1px solid var(--exchange-line);
  border-radius: 3px;
  background: var(--ui-surface);
}

.connectedTcgCard dt {
  margin-bottom: 5px;
  color: var(--exchange-muted);
  font-size: 10px;
}

.connectedTcgCard dd {
  margin: 0;
  color: var(--exchange-navy);
  font-size: 18px;
  font-weight: 700;
}

.connectedTcgCardFooter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--exchange-line);
}

.connectedTcgCardFooter > span {
  color: var(--exchange-muted);
  font-size: 10px;
  line-height: 1.5;
}

.connectedTcgCardFooter > a {
  flex: 0 0 auto;
  color: var(--exchange-blue);
  font-size: 11px;
  font-weight: 700;
}

.cardmarketDisclosure > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 18px;
  border-right: 1px solid var(--exchange-line);
}

.cardmarketDisclosure > div:last-child {
  border-right: 0;
}

.cardmarketDisclosure span,
.cardmarketResultCard header span,
.cardmarketResultCard footer {
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.cardmarketDisclosure strong {
  color: var(--exchange-navy);
  font-size: 13px;
}

.cardmarketFxNotice {
  display: grid;
  grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 16px;
  padding: 16px 18px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
}

.cardmarketFxNotice > div {
  display: grid;
  gap: 4px;
}

.cardmarketFxNotice > div > span {
  color: var(--ui-brand);
  font-size: 10px;
  font-weight: 700;
}

.cardmarketFxNotice > div > strong {
  color: var(--exchange-navy);
  font-size: 16px;
}

.cardmarketFxNotice p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.cardmarketFxNotice a {
  color: var(--exchange-blue);
  font-weight: 700;
}

.cardmarketFxNoticeUnavailable {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.exchangeShell .cardmarketSearchForm {
  grid-template-columns: minmax(320px, 1fr) 190px 150px;
}

.cardmarketNotice {
  margin: 18px 0;
  padding: 16px 18px;
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--exchange-blue);
  border-radius: 4px;
  background: var(--ui-surface);
}

.cardmarketNotice strong {
  color: var(--exchange-navy);
  font-size: 13px;
}

.cardmarketNotice p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.cardmarketList {
  display: grid;
  gap: 12px;
}

.cardmarketResultCard {
  padding: 20px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.cardmarketResultCard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--exchange-line);
}

.cardmarketResultIdentity {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 16px;
}

.cardmarketResultIdentity > div {
  min-width: 0;
}

.cardmarketResultThumb {
  width: 78px;
  height: 110px;
}

.cardmarketResultCard h2 {
  margin: 5px 0 3px;
  color: var(--exchange-navy);
  font-size: 20px;
}

.cardmarketResultCard header p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 11px;
}

.cardmarketResultCard header a {
  flex: 0 0 auto;
  padding: 9px 12px;
  color: var(--exchange-blue);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--ui-surface);
}

.cardmarketResultActions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cardmarketPriceGroup {
  margin-top: 16px;
}

.cardmarketPriceGroupHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cardmarketPriceGroupHeading strong {
  color: var(--exchange-ink);
  font-size: 12px;
}

.cardmarketPriceGroupHeading span {
  color: var(--ui-text);
  font-size: 10px;
}

.cardmarketPriceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.cardmarketPriceGrid > div {
  padding: 12px 14px;
  border-right: 1px solid var(--exchange-line);
}

.cardmarketPriceGrid > div:last-child {
  border-right: 0;
}

.cardmarketPriceGrid dt {
  color: var(--exchange-muted);
  font-size: 10px;
}

.cardmarketPriceGrid dd {
  margin: 5px 0 0;
  color: var(--exchange-navy);
  font:
    700 16px "Google Sans Mono",
    Consolas,
    monospace;
}

.cardmarketKrwValue {
  display: block;
  margin-top: 5px;
  color: var(--ui-brand);
  font-size: 12px;
  line-height: 1.3;
}

.cardmarketResultCard footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--exchange-line);
}

.cardmarketMethodLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.cardmarketMethodLink p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 12px;
}

.cardmarketMethodLink a {
  flex: 0 0 auto;
  color: var(--exchange-blue);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .cardmarketDisclosure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 32px, var(--desktop-page-width, 1280px));
  }

  .cardmarketFxNotice {
    grid-template-columns: 1fr;
    width: min(100% - 32px, var(--desktop-page-width, 1280px));
  }

  .cardmarketDisclosure > div:nth-child(2) {
    border-right: 0;
  }

  .cardmarketDisclosure > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--exchange-line);
  }

  .exchangeShell .cardmarketSearchForm {
    grid-template-columns: 1fr;
  }

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

  .cardmarketPriceGrid > div:nth-child(2) {
    border-right: 0;
  }

  .cardmarketPriceGrid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--exchange-line);
  }
}

@media (max-width: 560px) {
  .cardmarketLaunchBanner {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .cardmarketDisclosure > div {
    border-right: 0;
    border-bottom: 1px solid var(--exchange-line);
  }

  .cardmarketDisclosure > div:nth-child(3) {
    border-bottom: 1px solid var(--exchange-line);
  }

  .cardmarketDisclosure > div:last-child {
    border-bottom: 0;
  }

  .cardmarketResultCard > header,
  .cardmarketResultCard footer,
  .cardmarketMethodLink {
    align-items: flex-start;
    flex-direction: column;
  }

  .cardmarketResultIdentity {
    width: 100%;
  }

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

  .cardmarketPriceGrid > div,
  .cardmarketPriceGrid > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--exchange-line);
  }

  .cardmarketPriceGrid > div:last-child {
    border-bottom: 0;
  }
}

.exchangeShell .demoNotice,
.exchangeShell .catalogNotice,
.exchangeShell .serviceError {
  color: var(--ui-danger);
  border-color: var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
}

.exchangeShell .variantGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.exchangeShell .variantCard {
  display: grid;
  grid-template-columns: 118px 1fr;
  min-height: 210px;
  overflow: hidden;
}

.exchangeShell .cardArt {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  border: 0;
  border-right: 1px solid var(--exchange-line);
  border-radius: 0;
}

.exchangeShell .cardArt-red,
.marketThumb.cardArt-red,
.selectedThumb.cardArt-red,
.detailThumb.cardArt-red {
  background-image: url("/art/card-golem.jpg");
}

.exchangeShell .cardArt-blue,
.marketThumb.cardArt-blue,
.selectedThumb.cardArt-blue,
.detailThumb.cardArt-blue {
  background-image: url("/art/card-dragon.jpg");
}

.exchangeShell .cardArt-yellow,
.marketThumb.cardArt-yellow,
.selectedThumb.cardArt-yellow,
.detailThumb.cardArt-yellow {
  background-image: url("/art/card-phoenix.jpg");
}

.exchangeShell .cardArt-violet,
.marketThumb.cardArt-violet,
.selectedThumb.cardArt-violet,
.detailThumb.cardArt-violet {
  background-image: url("/art/card-sorceress.jpg");
}

.exchangeShell .variantBody {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--ui-surface);
}

.exchangeShell .variantMeta {
  align-items: center;
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.exchangeShell .variantBody h2 {
  margin: 14px 0 1px;
  color: var(--exchange-navy);
  font-size: 21px;
}

.exchangeShell .variantOriginal {
  color: var(--exchange-muted);
}

.exchangeShell .variantFacts {
  margin: 14px 0;
  padding: 10px 0;
  border-top: 1px solid var(--exchange-line);
  border-bottom: 1px solid var(--exchange-line);
}

.exchangeShell .variantFacts div {
  display: flex;
  justify-content: space-between;
}

.exchangeShell .variantFacts dt {
  color: var(--exchange-muted);
  font-size: 10px;
}

.exchangeShell .variantFacts dd {
  text-align: right;
  font-size: 11px;
}

.variantMarketState {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--exchange-muted);
  font-size: 10px;
}

.variantMarketState strong {
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.exchangeShell .textLink,
.exchangeShell .backLink {
  color: var(--exchange-blue);
  font-weight: 700;
}

.exchangeShell .emptyState {
  color: var(--exchange-ink);
  border-color: var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.exchangeShell .emptyState p {
  color: var(--exchange-muted);
}

/* Detail */
.detailExchangeHero {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 240px;
  gap: 28px;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  min-height: 420px;
  margin: 34px auto 16px;
  padding: 56px 28px 28px;
  position: relative;
}

.detailExchangeHero .backLink {
  position: absolute;
  top: 22px;
  left: 28px;
  font-size: 12px;
}

.detailThumb {
  width: 100%;
  min-height: 306px;
}

.detailExchangeHero .detailSummary {
  align-self: stretch;
  padding: 10px 0;
}

.detailExchangeHero .verifiedLine {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.detailExchangeHero .verifiedLine span {
  color: var(--ui-text);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.detailExchangeHero .verifiedLine small {
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.detailExchangeHero .detailSummary h1 {
  margin-bottom: 4px;
  color: var(--exchange-navy);
  font-size: 38px;
}

.exchangeShell .detailOriginal {
  margin: 0 0 24px;
  color: var(--exchange-muted);
  font-size: 15px;
}

.detailExchangeHero .heroIdentityGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 26px;
  border-top: 1px solid var(--exchange-line);
  border-left: 1px solid var(--exchange-line);
}

.detailExchangeHero .heroIdentityGrid div {
  padding: 13px;
  border-right: 1px solid var(--exchange-line);
  border-bottom: 1px solid var(--exchange-line);
}

.detailExchangeHero dd {
  margin: 0;
  font:
    600 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.detailExchangeHero .detailMetricRail {
  align-self: stretch;
  border-left: 1px solid var(--exchange-line);
}

.detailExchangeHero .detailMetricRail div {
  display: grid;
  gap: 7px;
  padding: 20px;
  border-bottom: 1px solid var(--exchange-line);
}

.detailExchangeHero .detailMetricRail span {
  color: var(--exchange-muted);
  font:
    9px "Google Sans Mono",
    Consolas,
    monospace;
}

.detailExchangeHero .detailMetricRail strong {
  color: var(--exchange-blue);
  font:
    700 14px "Google Sans Mono",
    Consolas,
    monospace;
}

.exchangeShell .identitySection,
.exchangeShell .priceLocked,
.exchangeShell .siblingSection {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  margin-right: auto;
  margin-left: auto;
  padding: 28px;
}

.exchangeShell .identitySection::before {
  display: none;
}

.exchangeShell .identitySection > * {
  position: static;
}

.exchangeShell .sectionHeading {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--exchange-line);
}

.exchangeShell .sectionHeading > p {
  color: var(--exchange-blue);
}

.exchangeShell .sectionHeading h2,
.exchangeShell .priceLocked h2,
.exchangeShell .siblingSection h2 {
  color: var(--exchange-navy);
  font-size: 22px;
}

.exchangeShell .identityGrid {
  grid-template-columns: repeat(3, 1fr);
}

.exchangeShell .identityGrid > div {
  border-color: var(--exchange-line);
}

.exchangeShell .identityGrid dt {
  color: var(--exchange-muted);
}

.exchangeShell .priceLocked {
  margin-top: 16px;
  color: var(--exchange-ink);
  background: var(--ui-surface);
}

.exchangeShell .priceLocked > p {
  color: var(--exchange-muted);
}

.marketPriceDescription {
  max-width: 680px;
  margin: 16px 0 0;
  color: var(--exchange-muted);
  line-height: 1.7;
}

.marketPriceGrid {
  display: grid;
  gap: 10px;
}

.marketPriceCard {
  padding: 16px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.marketPriceCardHead {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--exchange-muted);
  font:
    600 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.marketPriceCardHead b {
  padding: 3px 6px;
  color: var(--exchange-blue);
  border-radius: 3px;
  background: var(--ui-brand-soft);
  font-size: 9px;
}

.marketPriceCard > strong {
  display: block;
  margin: 12px 0 16px;
  color: var(--exchange-navy);
  font-size: 25px;
}

.marketPriceCard dl {
  display: grid;
  grid-template-columns: 0.75fr 0.65fr 1.6fr;
  gap: 10px;
  margin: 0;
}

.marketPriceCard dl div {
  min-width: 0;
}

.marketPriceCard dt {
  margin-bottom: 4px;
  color: var(--exchange-muted);
  font-size: 9px;
}

.marketPriceCard dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.priceHistorySection {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  max-width: var(--desktop-page-width, 1280px);
  margin: 16px auto 0;
  padding: 24px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.priceHistoryHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 20px;
  align-items: start;
}

.priceHistoryHeader h2 {
  margin: 0;
  color: var(--exchange-navy);
  font-size: 22px;
}

.historyOrigin {
  padding: 4px 7px;
  color: var(--ui-text);
  border-radius: 3px;
  background: var(--ui-surface-raised);
  font:
    700 9px "Google Sans Mono",
    Consolas,
    monospace;
}

.historyOrigin.preview {
  color: var(--exchange-blue);
  background: var(--ui-surface);
}

.historyOrigin.waiting {
  color: var(--exchange-muted);
  background: var(--ui-surface-raised);
}

.historyRanges {
  display: flex;
  grid-column: 1 / -1;
  gap: 6px;
}

.historyRanges a {
  padding: 6px 10px;
  color: var(--exchange-muted);
  border: 1px solid var(--exchange-line);
  border-radius: 3px;
  font-size: 11px;
}

.historyRanges a[aria-current="page"] {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
}

.priceHistoryBody {
  margin-top: 18px;
}

.historyPreviewNotice {
  margin: 0 0 12px;
  padding: 9px 12px;
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 11px;
}

.historyPreviewNotice strong {
  margin-right: 7px;
  color: var(--exchange-blue);
}

.priceHistoryChart {
  display: block;
  width: 100%;
  height: 180px;
}

.historyChartGrid {
  fill: none;
  stroke: var(--ui-on-brand);
  stroke-width: 1;
}

.historyChartLine {
  fill: none;
  stroke: var(--exchange-blue);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.priceHistoryChart circle {
  fill: var(--ui-on-brand);
  stroke: var(--exchange-blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.historySummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.historySummary div {
  padding: 12px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.historySummary dt {
  margin-bottom: 5px;
  color: var(--exchange-muted);
  font-size: 9px;
}

.historySummary dd {
  margin: 0;
  color: var(--exchange-navy);
  font:
    700 13px "Google Sans Mono",
    Consolas,
    monospace;
}

.historyWaiting {
  margin-top: 18px;
  padding: 20px;
  color: var(--exchange-muted);
  border: 1px dashed var(--exchange-line-strong);
  background: var(--ui-surface);
}

.historyWaiting strong {
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
}

.historyWaiting p {
  margin: 7px 0 0;
  font-size: 12px;
}

.exchangeShell .siblingSection {
  margin-top: 16px;
  margin-bottom: 64px;
}

.exchangeShell .siblingList {
  gap: 8px;
}

.exchangeShell .siblingList a {
  color: var(--exchange-ink);
  border-color: var(--exchange-line);
  border-radius: 4px;
  background: var(--ui-surface);
}

.exchangeShell .siblingList span {
  color: var(--exchange-blue);
}

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

  .selectedMarketCard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }

  .selectedCardHeader,
  .selectedIdentity,
  .selectedPrice {
    grid-column: 1;
  }

  .chartHeader,
  .marketChart,
  .provenanceList,
  .selectedMarketCard .exchangePrimary {
    grid-column: 2;
  }

  .marketTable,
  .marketIndexTable {
    overflow-x: auto;
  }

  .marketTableHead,
  .marketTableRow,
  .marketIndexTableHead,
  .marketIndexTableRow {
    min-width: 780px;
  }
}

@media (max-width: 760px) {
  .exchangeShell .nav {
    min-height: 58px;
    padding: 0 18px;
  }

  .brandLogo {
    width: 116px;
  }

  .exchangeShell .navLinks > a:not(:first-child),
  .exchangeShell .buildBadge {
    display: none;
  }

  .exchangeShell .navLinks > a {
    padding-right: 0;
    padding-left: 0;
  }

  .exchangePage {
    width: calc(100% - 32px);
    padding-top: 26px;
  }

  .marketHeading,
  .exchangeShell .searchHero {
    display: grid;
    gap: 18px;
  }

  .marketStatus {
    min-width: 0;
  }

  .connectedTcgHeading,
  .connectedTcgCardFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .connectedTcgHeading > a {
    text-align: center;
  }

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

  .panelToolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .marketTabs {
    gap: 18px;
    min-height: 38px;
    overflow-x: auto;
  }

  .marketTabs button {
    flex: 0 0 auto;
  }

  .tableSearch {
    min-width: 0;
  }

  .selectedMarketCard {
    display: block;
  }

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

  .moverGrid article {
    border-right: 0;
    border-bottom: 1px solid var(--exchange-line);
  }

  .moverGrid article:last-child {
    border-bottom: 0;
  }

  .exchangeShell footer {
    display: grid;
    gap: 8px;
    margin: 0 16px;
  }

  .exchangeShell .searchHero,
  .exchangeShell .searchPanel,
  .exchangeShell .searchResults {
    width: calc(100% - 32px);
  }

  .exchangeShell .searchHero h1 {
    font-size: 30px;
  }

  .exchangeShell .searchForm {
    grid-template-columns: 1fr;
  }

  .exchangeShell .variantGrid {
    grid-template-columns: 1fr;
  }

  .exchangeShell .variantCard {
    grid-template-columns: 92px 1fr;
  }

  .detailExchangeHero {
    grid-template-columns: 110px 1fr;
    gap: 18px;
    width: calc(100% - 32px);
    min-height: 0;
    margin-top: 20px;
    padding: 56px 18px 18px;
  }

  .detailThumb {
    min-height: 154px;
  }

  .detailExchangeHero .detailSummary h1 {
    font-size: 29px;
  }

  .detailExchangeHero .heroIdentityGrid {
    grid-template-columns: 1fr;
  }

  .detailExchangeHero .detailMetricRail {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--exchange-line);
    border-left: 0;
  }

  .detailExchangeHero .detailMetricRail div {
    padding: 12px 8px;
    border-right: 1px solid var(--exchange-line);
    border-bottom: 0;
  }

  .exchangeShell .identitySection,
  .exchangeShell .priceLocked,
  .exchangeShell .siblingSection,
  .priceHistorySection {
    width: calc(100% - 32px);
    padding: 20px;
  }

  .exchangeShell .identityGrid {
    grid-template-columns: 1fr;
  }

  .marketPriceCard dl {
    grid-template-columns: 1fr 1fr;
  }

  .marketPriceCard dl div:last-child {
    grid-column: 1 / -1;
  }
}

.reviewHero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 3rem;
  align-items: end;
  padding: 4.5rem clamp(1.25rem, 5vw, 5rem) 2rem;
}

.reviewHero > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.reviewDemoNotice {
  margin: 0 clamp(1.25rem, 5vw, 5rem) 1rem;
}

.reviewWorkbench {
  display: grid;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
  gap: 1px;
  margin: 0 clamp(1.25rem, 5vw, 5rem) 5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--line);
}

.reviewQueue,
.reviewCase {
  background: var(--ui-surface);
}

.reviewQueue {
  padding: 1rem;
}

.queueHeading,
.reviewCaseHeader,
.candidateTitle,
.reviewActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.queueHeading {
  padding: 0.4rem 0.35rem 1rem;
}

.queueItem {
  display: grid;
  width: 100%;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.queueItem + .queueItem {
  margin-top: 0.4rem;
}

.queueItem:hover,
.queueItem:focus-visible,
.queueItemActive {
  border-color: var(--line);
  background: var(--panel);
}

.reviewCase {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.reviewCaseHeader h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  letter-spacing: -0.04em;
}

.reviewStatus {
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.reviewStatusOPEN {
  color: var(--ui-text);
  background: var(--ui-brand-soft);
}

.reviewStatusRESOLVED {
  color: var(--ui-text);
  background: var(--ui-brand-soft);
}

.sourceSnapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--line);
}

.sourceSnapshot div {
  min-width: 0;
  padding: 0.9rem;
  background: var(--panel);
}

.sourceSnapshot dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.sourceSnapshot dd {
  overflow: hidden;
  margin: 0.25rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
  text-overflow: ellipsis;
}

.candidateFieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.candidateFieldset legend,
.reviewHistory h3 {
  margin-bottom: 0.8rem;
  font-weight: 800;
}

.candidateOption {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  cursor: pointer;
}

.candidateOption:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.candidateOption input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  accent-color: var(--ink);
}

.candidateBody {
  display: grid;
  flex: 1;
  gap: 0.35rem;
}

.candidateBody > span:not(.candidateTitle, .evidenceTags),
.candidateBody > small {
  color: var(--muted);
}

.candidateTitle em {
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-style: normal;
}

.evidenceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.reviewActions {
  justify-content: flex-start;
  margin-top: 1rem;
}

.reviewActions button {
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0.65rem;
  background: var(--ink);
  color: var(--ui-on-brand);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.reviewActions .rejectAction {
  background: transparent;
  color: var(--ink);
}

.reviewActions button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.reviewMessage {
  min-height: 1.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.reviewHistory {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.reviewHistory ol {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviewHistory li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem 0.8rem;
  align-items: center;
}

.reviewHistory time {
  color: var(--muted);
  font-size: 0.72rem;
}

.reviewHistory p {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 800px) {
  .reviewHero,
  .reviewWorkbench {
    grid-template-columns: 1fr;
  }

  .reviewHero {
    gap: 1.25rem;
  }

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

  .reviewHistory li {
    grid-template-columns: auto 1fr;
  }

  .reviewHistory time {
    grid-column: 2;
  }
}

/* Public methodology and glossary */
.methodologyContent {
  width: min(var(--desktop-page-width, 1120px), calc(100% - 64px));
  margin: 0 auto;
  padding: 56px 0 88px;
}

.methodologyHero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 72px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--exchange-line-strong);
}

.methodologyHero h1 {
  max-width: 720px;
  color: var(--exchange-navy);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.04;
}

.methodologyHero > p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 16px;
  line-height: 1.85;
}

.methodologyCurrentState {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--exchange-blue-soft);
}

.methodologyCurrentState strong {
  color: var(--exchange-blue);
  font-size: 13px;
}

.methodologyCurrentState p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.methodologySection {
  padding: 72px 0;
  border-bottom: 1px solid var(--exchange-line);
}

.methodologySectionHeading {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.methodologySectionHeading > p {
  margin: 5px 0 0;
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

.methodologySectionHeading h2 {
  margin: 0;
  color: var(--exchange-navy);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
}

.methodologyTwoColumn,
.methodologyCardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-left: 244px;
}

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

.methodologyDefinition,
.methodologyCard {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--exchange-line);
  border-radius: 4px;
  background: var(--exchange-surface);
}

.methodologyTerm,
.methodologyCard code,
.methodologyStateList code {
  display: inline-flex;
  color: var(--exchange-blue);
  font:
    700 10px "Google Sans Mono",
    Consolas,
    monospace;
  letter-spacing: 0.04em;
}

.methodologyDefinition h3,
.methodologyCard h3,
.methodologyStateList h3 {
  margin: 14px 0 10px;
  color: var(--exchange-navy);
  font-size: 18px;
  line-height: 1.45;
}

.methodologyDefinition p,
.methodologyCard p,
.methodologyStateList p,
.methodologyRights > div > p,
.methodologyDisclaimer p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 14px;
  line-height: 1.8;
}

.methodologySupportingTerms {
  margin-top: 16px;
}

.methodologyStateList {
  display: grid;
  gap: 1px;
  margin: 16px 0 0 244px;
  border: 1px solid var(--exchange-line);
  background: var(--exchange-line);
}

.methodologyStateList article {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
  padding: 20px 24px;
  background: var(--exchange-surface);
}

.methodologyStateList h3 {
  margin-top: 0;
}

.methodologyStatusCard code {
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-surface);
}

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

.methodologyRights > div:last-child {
  display: grid;
  gap: 16px;
  margin-left: 244px;
}

.methodologyDisclaimer {
  margin-top: 24px;
  padding: 28px;
  color: var(--ui-on-brand);
  border-radius: 4px;
  background: var(--exchange-navy);
}

.methodologyDisclaimer strong {
  font-size: 18px;
}

.methodologyDisclaimer p {
  max-width: 820px;
  margin-top: 10px;
  color: var(--ui-text-muted);
}

.methodologyDisclaimer a {
  display: inline-flex;
  margin-top: 20px;
  color: var(--ui-brand);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .methodologyContent {
    width: calc(100% - 32px);
    padding: 36px 0 56px;
  }

  .methodologyHero,
  .methodologyCurrentState,
  .methodologySectionHeading,
  .methodologyTwoColumn,
  .methodologyCardGrid,
  .methodologyStateList article {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .methodologyHero {
    align-items: start;
  }

  .methodologyHero h1 {
    font-size: 40px;
  }

  .methodologySection {
    padding: 48px 0;
  }

  .methodologyTwoColumn,
  .methodologyCardGrid,
  .methodologyStateList,
  .methodologyRights > div:last-child {
    margin-left: 0;
  }

  .methodologyStateList article {
    gap: 8px;
  }
}

/* Sales-market home and KREAM Korea market */
.cardFamilyInfo {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
}

.cardFamilyInfo summary {
  cursor: pointer;
  color: var(--exchange-blue);
}

.cardFamilyInfo nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.marketHome > section:first-of-type {
  margin-top: 24px;
}

.marketConceptGuide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 34px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}

.marketConceptGuide > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.marketConceptGuide > div:first-child {
  border-right: 1px solid var(--ui-border);
}

.marketConceptGuide > div > span {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--ui-on-brand);
  border-radius: 50%;
  background: var(--exchange-blue);
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.marketConceptGuide p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.marketSourceSection,
.kreamPreviewSection,
.marketOverviewList,
.marketProductsSection {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 42px;
}

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

.marketSectionHeading h2 {
  margin: 0;
  color: var(--exchange-navy);
  font-size: 26px;
}

.marketSectionHeading p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.6;
}

.marketSectionHeading > a,
.marketSectionHeading > span {
  flex: 0 0 auto;
  color: var(--exchange-blue);
  font-size: 12px;
  font-weight: 750;
}

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

.marketSourceCard {
  padding: 22px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 5px;
  background: var(--ui-surface);
}

.marketSourceCard > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
}

.marketFlag {
  display: grid;
  width: 46px;
  height: 46px;
  color: var(--ui-on-brand);
  border-radius: 4px;
  background: var(--ui-brand-solid);
  place-items: center;
  font:
    800 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.marketFlagEu {
  background: var(--ui-brand-solid);
}

.marketSourceCard header small,
.marketOverviewIdentity small {
  color: var(--exchange-muted);
  font-size: 10px;
}

.marketSourceCard h3,
.marketOverviewRow h3 {
  margin: 3px 0 0;
  color: var(--exchange-navy);
  font-size: 20px;
}

.marketDataReady,
.marketDataWaiting {
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 750;
}

.marketDataReady {
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
}

.marketDataWaiting {
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.marketSourceCard > p {
  min-height: 48px;
  margin: 22px 0;
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.65;
}

.marketSourceCard dl,
.marketOverviewRow dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.marketSourceCard dl > div,
.marketOverviewRow dl > div {
  padding: 12px;
  border-right: 1px solid var(--exchange-line);
}

.marketSourceCard dl > div:last-child,
.marketOverviewRow dl > div:last-child {
  border-right: 0;
}

.marketSourceCard dt,
.marketOverviewRow dt {
  color: var(--exchange-muted);
  font-size: 10px;
}

.marketSourceCard dd,
.marketOverviewRow dd {
  margin: 5px 0 0;
  color: var(--exchange-navy);
  font-size: 16px;
  font-weight: 750;
}

.marketSourceCard > footer {
  display: flex;
  justify-content: space-between;
  width: auto;
  max-width: none;
  margin: 18px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--exchange-line);
  color: var(--exchange-muted);
  font-size: 10px;
}

.marketSourceCard > footer a {
  color: var(--exchange-blue);
  font-weight: 750;
}

.salesMarketTabs {
  display: flex;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 18px;
  border-bottom: 1px solid var(--exchange-line-strong);
}

.salesMarketTabs a {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 110px;
  justify-content: center;
  padding: 14px 20px 12px;
  color: var(--exchange-muted);
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 700;
}

.salesMarketTabs a.isActive,
.salesMarketTabs a:hover {
  color: var(--exchange-blue);
  border-bottom-color: var(--exchange-blue);
}

.salesMarketTabs small {
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
}

.trendingMarketTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 28px;
  padding: 8px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 7px;
  background: var(--ui-surface);
}

.trendingMarketTabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 10px clamp(4px, 1vw, 16px);
  color: var(--exchange-muted);
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 750;
  text-align: center;
}

.trendingMarketTabs a:hover {
  color: var(--exchange-blue);
  border-color: var(--exchange-line-strong);
}

.trendingMarketTabs a[aria-current="page"] {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
}

.intlContent > .trendingMarketTabs {
  width: 100%;
  margin: 0 0 28px;
}

.priceLandingGameNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 18px;
}

.priceLandingGameNav a {
  padding: 9px 12px;
  color: var(--exchange-muted);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
  font-size: 12px;
  font-weight: 700;
}

.priceLandingGameNav a:hover,
.priceLandingGameNav a:focus-visible,
.priceLandingGameNav a.isActive {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
}

.priceLandingSetNav {
  padding-top: 2px;
}

.priceLandingSetNav a {
  font-size: 11px;
}

.marketAccuracyNotice,
.marketFilterPanel {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 16px;
  border-radius: 4px;
}

.marketAccuracyNotice {
  padding: 16px 18px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--exchange-blue);
  background: var(--ui-surface);
}

.marketAccuracyNotice strong {
  color: var(--exchange-navy);
  font-size: 13px;
}

.marketAccuracyNotice p,
.marketFilterPanel > p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.priceSearchGuide {
  padding-top: 8px;
}

.priceGuideSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.priceGuideSteps li {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  background: var(--ui-surface);
}

.priceGuideSteps strong {
  color: var(--exchange-navy);
  font-size: 13px;
}

.priceGuideSteps span {
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.6;
}

.marketFilterPanel {
  padding: 18px;
  border: 1px solid var(--exchange-line-strong);
  background: var(--ui-surface);
}

.marketFilterForm {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px minmax(210px, 250px) 100px;
  gap: 12px;
  align-items: end;
}

.marketFilterFormExpanded {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, 170px)) minmax(180px, 220px) 88px;
}

.marketFilterForm label {
  display: grid;
  gap: 7px;
  color: var(--exchange-navy);
  font-size: 11px;
  font-weight: 700;
}

.marketFilterForm input,
.marketFilterForm select,
.marketFilterForm button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 3px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
}

.marketFilterForm button {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
  font-weight: 750;
  cursor: pointer;
}

.marketFilterPanel > p {
  color: var(--exchange-muted);
}

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

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

.kreamProductGridPreview > div {
  min-width: 0;
}
.kreamProductGridPreview > div > p {
  margin: 0 0 8px;
  color: var(--exchange-blue);
  font-size: 13px;
  font-weight: 650;
}

.homeDashboardLayout {
  display: grid;
  grid-template-areas: "ranking" "body";
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 42px;
}

.homeDashboardBody {
  grid-area: body;
  min-width: 0;
}

.homeIntro {
  margin: 0 0 24px;
}

.homeIntro h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.homeIntro p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}

.languageLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
  padding: 8px 0;
  font-size: 13px;
}
.languageLinks a {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 65%, transparent);
  border-radius: 4px;
  color: var(--ui-on-brand);
  white-space: nowrap;
}
.languageLinks a[aria-current="true"] {
  color: var(--ui-brand);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  font-weight: 700;
}
.intlContent {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 48px));
  margin: 28px auto 48px;
}
.intlHero {
  margin-bottom: 28px;
}
.intlHero h1 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.intlContent p {
  line-height: 1.7;
  color: var(--exchange-muted);
}
.intlContent > section {
  margin-block: 32px;
}
.intlContent h2 {
  margin: 0 0 12px;
  font-size: 24px;
}
.intlContent h3 {
  line-height: 1.45;
}
.pokemonPricePrimer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: linear-gradient(120deg, var(--ui-surface), var(--ui-surface) 75%);
}
.pokemonPriceIntro, .pokemonPriceSteps { min-width: 0; }
.pokemonPriceIntro > p { max-width: 56ch; }
.pokemonPriceSearch { margin-top: 24px; }
.pokemonPriceSearch label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.pokemonPriceSearch > div { display: flex; gap: 8px; }
.pokemonPriceSearch input[type="search"] {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px;
  border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface); font: inherit;
}
.pokemonPriceSearch button {
  min-height: 48px; padding: 12px 18px; border: 0; border-radius: 8px;
  background: var(--ui-brand-solid); color: var(--ui-on-brand); font: inherit; font-weight: 700; cursor: pointer;
}
.pokemonPriceSearch input:focus-visible, .pokemonPriceSearch button:focus-visible,
.pokemonPriceQuestions summary:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.intlContent .pokemonPriceHelp { font-size: 13px; line-height: 1.65; }
.pokemonPriceExamples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 13px; }
.pokemonPriceExamples span { color: var(--exchange-muted); margin-right: 4px; }
.pokemonPriceExamples a { padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); text-decoration: none; }
.pokemonPriceSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pokemonPriceSteps li { display: flex; align-items: flex-start; gap: 14px; }
.pokemonPriceSteps li > span { flex: 0 0 34px; padding: 8px 0; border-radius: 9px; background: var(--ui-brand-soft); color: var(--ui-brand); text-align: center; font-size: 12px; font-weight: 800; }
.pokemonPriceSteps h3 { margin: 3px 0 6px; font-size: 17px; }
.pokemonPriceSteps p { margin: 0; font-size: 14px; }
.pokemonPriceQuestions { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--ui-border); border-radius: 18px; }
.pokemonPriceQuestions details { padding: 18px 0; border-bottom: 1px solid var(--ui-border); }
.pokemonPriceQuestions summary { cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.5; }
.pokemonPriceQuestions details p { max-width: 85ch; margin: 12px 0; }
@media (max-width: 800px) {
  .pokemonPricePrimer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .pokemonPriceSearch > div { flex-direction: column; }
  .pokemonPriceSteps li { gap: 10px; }
}
.intlContent .kreamProductGrid {
  width: 100%;
}
.intlContent .kreamProductBody h3 {
  overflow-wrap: anywhere;
}
.intlNotice {
  padding: 16px 20px;
  margin-block: 20px;
  border: 1px solid var(--exchange-line-strong);
  background: var(--ui-surface);
  border-radius: 6px;
}
.intlGameLinks,
.intlPagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 18px;
}
.intlGameLinks a,
.intlPagination a {
  padding: 10px 14px;
  background: var(--ui-surface);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 5px;
}
.intlPagination [aria-current="page"] {
  border-color: var(--exchange-blue);
  color: var(--exchange-blue);
}
.intlFilters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--exchange-line-strong);
  background: var(--ui-surface);
  border-radius: 6px;
  margin-block: 20px;
}
.intlFilters label {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  min-width: 0;
}
.intlFilters .intlQuery {
  flex-grow: 2;
}
.intlFilters input,
.intlFilters select {
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
  color: inherit;
  font: inherit;
}
.intlFilters button {
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  border-radius: 4px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font-weight: 700;
  cursor: pointer;
}
.intlDetail {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  margin-block: 28px;
}
.intlDetailImage {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  max-height: 360px;
  object-fit: cover;
  object-position: center;
}
.intlPurchaseLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 24px 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
}
.intlPurchaseLink strong { color: var(--ui-text); }
.intlPurchaseLink p { margin: 6px 0 0; color: var(--ui-text-muted); }
.intlPurchaseLink a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
  font-weight: 700;
  text-decoration: none;
}
.cardDetailPurchase {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 22px;
}
.cardDetailPurchase a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
  font-weight: 700;
  text-decoration: none;
}
.cardDetailPurchase small { color: var(--ui-text-muted); line-height: 1.5; }
.intlFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--exchange-line-strong);
  border: 1px solid var(--exchange-line-strong);
}
.intlFacts > div {
  background: var(--ui-surface);
  padding: 16px;
  min-width: 0;
}
.intlFacts dt {
  color: var(--exchange-muted);
  font-size: 13px;
  line-height: 1.5;
}
.intlFacts dd {
  margin: 8px 0 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.intlTableScroll {
  overflow-x: auto;
}
.intlTable {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  background: var(--ui-surface);
}
.intlTable th,
.intlTable td {
  padding: 14px;
  border-bottom: 1px solid var(--exchange-line-strong);
  font-size: 14px;
}
@media (max-width: 700px) {
  .intlContent {
    width: calc(100% - 28px);
    margin-top: 20px;
  }
  .intlDetail {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .intlDetailImage {
    max-width: 230px;
    margin-inline: auto;
  }
  .intlContent .kreamProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .intlFilters {
    padding: 12px;
  }
  .languageLinks {
    margin-inline-start: 8px;
  }
}

/* Shared Korean/English navigation: three primary links and one language control. */
.nav.siteHeader {
  gap: 32px;
  min-height: 72px;
  padding-block: 8px;
}
.siteHeader .brand {
  flex: 0 0 auto;
}
.siteHeader .brandLogo {
  width: 156px;
}
.sitePrimaryLinks,
.siteHeaderActions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sitePrimaryLinks a,
.siteAccountLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.sitePrimaryLinks a {
  color: var(--ui-on-brand);
}
.sitePrimaryLinks a:hover,
.sitePrimaryLinks a[aria-current="page"] {
  color: var(--ui-on-brand);
  text-decoration: underline;
  text-underline-offset: 8px;
}
.siteHeaderActions {
  gap: 16px;
  margin-inline-start: auto;
}
.siteAccountLink {
  color: var(--ui-on-brand);
}
.siteLanguage {
  position: relative;
  flex-shrink: 0;
  font-size: 14px;
}
.siteLanguage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  color: var(--ui-on-brand);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.siteLanguage summary::-webkit-details-marker {
  display: none;
}
.siteLanguageOptions {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 25;
  min-width: 152px;
  padding: 6px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-shadow-color) 14.9%, transparent);
  background: var(--ui-surface);
}
.siteLanguageOptions a {
  display: block;
  padding: 12px;
  border-radius: 4px;
  color: var(--exchange-navy);
  white-space: nowrap;
}
.siteLanguageOptions a:hover,
.siteLanguageOptions a[aria-current="true"] {
  color: var(--exchange-blue);
  background: var(--ui-surface);
}
.siteMenuButton {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  color: var(--ui-on-brand);
  background: transparent;
  cursor: pointer;
}
.siteMenuButton span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.siteHeader :is(a, button, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.siteMobileMenu:not([open]) {
  display: none;
}
.siteMobileMenu[open] {
  position: fixed;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(360px, 90vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  color: var(--exchange-navy);
  background: var(--ui-surface);
}
.siteMobileMenu::backdrop {
  background: color-mix(in srgb, var(--ui-brand) 65.1%, transparent);
}
.siteMobileMenu > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.siteMobileMenu > header button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  font-size: 28px;
  color: inherit;
  background: var(--ui-surface);
  cursor: pointer;
}
.siteMobileLinks {
  display: grid;
  gap: 4px;
}
.siteMobileLinks a {
  min-height: 48px;
  padding: 14px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 650;
  color: inherit;
}
.siteMobileLinks a[aria-current="page"],
.siteMobileLinks a:hover {
  background: var(--ui-surface);
  color: var(--exchange-blue);
}
.siteMobileLinks a:last-child {
  margin-top: 16px;
  border-top: 1px solid var(--exchange-line);
  border-radius: 0;
}
.siteFooterLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.homeDashboardLayout {
  margin-top: 24px;
}
/* One game-first explorer for both UI languages and sales markets. */
.explorerContent {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 48px));
  margin: 28px auto 48px;
}
.explorerIntro {
  margin-bottom: 24px;
}
.explorerIntro h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 34px);
}
.explorerIntro p,
.explorerHint {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 14px;
  line-height: 1.7;
}
.explorerControls {
  padding: 20px;
  background: var(--ui-surface);
  border: 1px solid var(--exchange-line-strong);
  border-radius: 10px;
}
.explorerGameChooser {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--exchange-line);
}
.explorerGameChooser h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  min-height: 32px;
}
.explorerGames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}
.explorerGames a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.explorerGames strong {
  font-size: 14px;
}
.explorerGames small {
  color: var(--exchange-muted);
  font-size: 11px;
  line-height: 1.5;
}
.explorerGames a:hover,
.explorerGames a[aria-current="page"] {
  background: var(--ui-surface);
  border-color: var(--exchange-blue);
  color: var(--exchange-blue);
}
.explorerGames .explorerAllGames {
  border-width: 2px;
}
.explorerMarkets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 540px);
  gap: 8px;
  padding: 0;
  margin-top: 0;
}
.explorerMarkets a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  font-size: 14px;
  touch-action: manipulation;
}
.explorerMarkets small {
  font-size: 11px;
}
.explorerMarkets a[aria-current="page"] {
  color: var(--ui-on-brand);
  background: var(--exchange-blue);
  border-color: var(--exchange-blue);
}
.explorerSearch {
  margin-top: 20px;
}
.explorerSearch label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.explorerSearch input,
.explorerSearch select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 5px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
}
.explorerSearch button {
  min-height: 44px;
  border: 0;
  border-radius: 5px;
  padding: 10px 18px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.explorerSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.explorerToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
}
.explorerSearch .explorerSort {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.explorerSort span {
  white-space: nowrap;
}
.explorerToolbar a,
.explorerResultsHeading a,
.explorerEmpty a {
  color: var(--exchange-blue);
}
.explorerFilters {
  margin-top: 14px;
  border-top: 1px solid var(--exchange-line);
}
.explorerFilters summary,
.explorerPriceNote summary {
  min-height: 44px;
  padding-block: 13px;
  font-size: 13px;
  cursor: pointer;
}
.explorerFilters > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 8px;
}
.explorerSearchHelp {
  font-size: 12px;
  line-height: 1.6;
  color: var(--exchange-muted);
  margin: 12px 0 0;
}
.explorerResultsHeading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.explorerResultsHeading h2 {
  font-size: 19px;
  margin: 0;
}
.explorerResultsHeading a {
  font-size: 13px;
}
.explorerPriceNote {
  margin: 8px 0 16px;
  color: var(--exchange-muted);
}
.explorerPriceNote p {
  font-size: 13px;
  line-height: 1.7;
}
.marketExplorer .explorerResults {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 16px;
}
.marketExplorer .explorerResults > .kreamProductCard {
  flex: 0 0 calc((100% - 64px) / 5);
}
.marketLoadingShell {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 56px));
  margin: 28px auto 60px;
}
.marketLoadingHeading {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}
.marketLoadingHeading span,
.marketLoadingLine,
.marketLoadingImage {
  display: block;
  border-radius: 5px;
  background: linear-gradient(100deg, var(--ui-surface-raised) 20%, var(--ui-surface) 42%, var(--ui-surface-raised) 64%);
  background-size: 220% 100%;
  animation: marketLoadingShimmer 1.25s ease-in-out infinite;
}
.marketLoadingHeading span:first-child {
  width: min(280px, 70%);
  height: 30px;
}
.marketLoadingHeading span:last-child {
  width: min(520px, 90%);
  height: 16px;
}
.marketLoadingGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.marketLoadingCard {
  padding: 12px;
  border: 1px solid var(--exchange-line);
  border-radius: 6px;
  background: var(--ui-surface);
}
.marketLoadingImage {
  width: 100%;
  aspect-ratio: 5 / 7;
  margin-bottom: 14px;
}
.marketLoadingLine {
  height: 13px;
  margin-top: 9px;
}
.marketLoadingLine.isShort {
  width: 45%;
}
.marketLoadingLine.isPrice {
  width: 58%;
  height: 20px;
  margin-top: 20px;
}
@keyframes marketLoadingShimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -120% 0;
  }
}
/* One shared grid lets the next game fill a short preview row at every breakpoint. */
.explorerPreviewGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 16px;
}
.explorerPreviewItem {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.explorerPreviewItem > .kreamProductCard { flex: 1; }
.explorerPreviewGame {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  color: var(--exchange-blue);
  font-size: 12px;
}
.explorerPreviewGame strong { font-size: 14px; }
.explorerPreviewGame:hover { text-decoration: underline; }
.explorerPreviewGame:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.marketExplorer .marketProductCardLink {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.marketExplorer .kreamProductVisual {
  flex: none;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 5 / 7;
}
.marketExplorer .kreamProductImage {
  object-fit: cover;
  object-position: center;
}
.marketExplorer .kreamProductBody {
  flex: 1;
  min-width: 0;
  padding: 14px;
}
.marketExplorer .kreamProductBody h3 {
  min-height: 3em;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.marketExplorer .kreamProductBody > p {
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.marketExplorer .kreamPriceSummary {
  margin-top: auto;
}
.marketExplorer .kreamPriceSummary strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.marketExplorer .kreamPriceSummary small {
  overflow-wrap: anywhere;
}
.explorerPagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 14px;
}
.explorerPagination a {
  padding: 12px 16px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 5px;
  background: var(--ui-surface);
}
.explorerHint {
  margin-top: 18px;
}
.explorerEmpty {
  padding: 24px 0;
  line-height: 1.7;
}
.explorerEmpty h2 {
  font-size: 20px;
}
.marketExplorer :is(a, button, summary, input, select):focus-visible {
  outline: 2px solid var(--exchange-blue);
  outline-offset: 3px;
}
@media (max-width: 1024px) {
  .marketLoadingGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .explorerGames {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .marketExplorer .explorerResults {
    gap: 16px;
  }
  .marketExplorer .explorerResults > .kreamProductCard {
    flex-basis: calc((100% - 32px) / 3);
  }
  .explorerPreviewGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .marketLoadingShell {
    width: calc(100% - 28px);
    margin-top: 20px;
  }
  .marketLoadingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .marketLoadingCard:nth-child(n + 7) {
    display: none;
  }
  .explorerContent {
    width: calc(100% - 28px);
    margin-top: 20px;
  }
  .explorerControls {
    padding: 14px;
  }
  .explorerGames {
    gap: 6px;
  }
  .explorerGames a {
    padding: 6px 8px;
  }
  .explorerGames strong {
    font-size: 12px;
  }
  .explorerGames small {
    display: none;
  }
  .explorerMarkets a {
    flex: 1;
    padding: 10px 8px;
    font-size: 13px;
  }
  .explorerFilters > div {
    grid-template-columns: 1fr;
  }
  .marketExplorer .explorerResults {
    gap: 10px;
  }
  .marketExplorer .explorerResults > .kreamProductCard {
    flex-basis: calc((100% - 10px) / 2);
  }
  .explorerPreviewGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .marketExplorer .kreamProductBody {
    padding: 10px;
  }
  .marketExplorer .kreamPriceSummary strong {
    font-size: 16px;
  }
  .marketExplorer .kreamListingPreview {
    display: none;
  }
}
.homeBrowse {
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  background: var(--ui-surface);
}
.homeMarketTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.homeMarketTabs a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  color: var(--exchange-muted);
  font-size: 14px;
  font-weight: 650;
}
.homeMarketTabs a[aria-current="page"] {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
}
.homeSearch {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
}
.homeSearch label {
  min-width: 0;
}
.homeSearch input,
.homeSearch select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font: inherit;
  font-size: 14px;
}
.homeSearch button {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 4px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.homeBrowseLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--exchange-blue);
}
.homeSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.homeHero {
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 28px auto 0;
}
.homeHero .homeBrowse { margin-bottom: 0; padding: 26px 32px; }
.homeHero .homeSearch { grid-template-columns: 190px minmax(0, 1fr) 120px; }
.homeHero .homeSearch input,
.homeHero .homeSearch select,
.homeHero .homeSearch button { min-height: 56px; }
.homeDashboardBody > .dailyMarketQuiz { margin-top: 32px; }
.dailyMarketQuiz { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 22px 26px; border: 1px solid var(--ui-border); border-radius: 18px; background: linear-gradient(120deg, var(--ui-surface), var(--ui-surface)); }
.dailyMarketQuizCopy { min-width: 0; }
.dailyMarketQuizCopy h2 { margin: 5px 0 8px; font-size: clamp(20px, 2vw, 26px); color: var(--ui-text); }
.dailyMarketQuizCopy > p:not(.exchangeEyebrow) { margin: 0 0 16px; color: var(--ui-text-muted); line-height: 1.55; }
.dailyMarketQuizChoices { display: flex; flex-wrap: wrap; gap: 9px; }
.dailyMarketQuizChoices button { min-height: 42px; padding: 9px 17px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); font-weight: 800; cursor: pointer; }
.dailyMarketQuizChoices button:hover, .dailyMarketQuizChoices button:focus-visible { border-color: var(--ui-focus); background: var(--ui-brand-soft); }
.dailyMarketQuizResult { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 13px; }
.dailyMarketQuizResult strong { color: var(--ui-text); }
.dailyMarketQuizResult span { font-size: 24px; font-weight: 900; }
.dailyMarketQuizResult .isUp { color: var(--ui-positive); }
.dailyMarketQuizResult .isDown { color: var(--ui-negative); }
.dailyMarketQuizResult small { flex-basis: 100%; color: var(--ui-text-muted); }
.dailyMarketQuizResult a { color: var(--ui-brand); font-weight: 800; }
.dailyMarketQuizCard { display: flex; flex: 0 0 160px; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dailyMarketQuizArtwork { width: 100%; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 7px; background: var(--ui-surface-raised); box-shadow: 0 7px 15px color-mix(in srgb, var(--ui-shadow-color) 18.04%, transparent); }
.dailyMarketQuizArtwork img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dailyMarketQuizCard[data-market="KR"] .dailyMarketQuizArtwork img { scale: 1.2; }
.dailyMarketQuizCard strong { display: -webkit-box; overflow: hidden; max-width: 20ch; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.35; }
@media (max-width: 560px) { .homeDashboardBody > .dailyMarketQuiz { margin-top: 24px; } .dailyMarketQuiz { gap: 14px; padding: 18px; } .dailyMarketQuizCard { flex-basis: 112px; } .dailyMarketQuizCard strong { font-size: 11px; } }
.dailyDraw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 370px;
  padding: 26px 48px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 12px;
  background: linear-gradient(115deg, var(--ui-surface) 54%, var(--ui-surface));
  overflow: hidden;
}
.dailyDrawCopy { min-width: 0; }
.dailyDrawEyebrow {
  margin: 0 0 7px;
  color: var(--exchange-blue);
  font-size: 13px;
  font-weight: 800;
}
.dailyDraw h2 {
  margin: 0 0 6px;
  color: var(--exchange-navy);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.04em;
}
.dailyDrawCopy > p:not(.dailyDrawEyebrow) {
  margin: 0 0 8px;
  color: var(--exchange-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.dailyDrawCopy small { display: block; color: var(--exchange-muted); font-size: 12px; line-height: 1.5; }
.dailyDrawName { display: block; max-width: 45ch; margin: 6px 0 10px; font-size: 13px; line-height: 1.4; }
.dailyDrawActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 7px; }
.dailyDrawActions a, .dailyDrawActions button, .dailyDrawFallback { font-size: 14px; font-weight: 700; }
.dailyDrawActions a:not(.dailyDrawSave) { color: var(--exchange-blue); }
.dailyDrawSave, .dailyDrawFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 5px;
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
  cursor: pointer;
}
.dailyDrawFallback { margin-top: 10px; }
.dailyDrawFallback:disabled { opacity: .55; cursor: default; }
.dailyDrawStage {
  position: relative;
  display: flex;
  flex: 0 0 292px;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  overflow: hidden;
}
.dailyDrawCardSlot { position: relative; width: 228px; height: 316px; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--ui-shadow-color) 38%, transparent)); }
.dailyDrawFrontFrame { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--ui-surface); }
.dailyDrawFront, .dailyDrawBack { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; }
.dailyDrawFront { display: block; object-fit: cover; object-position: center; background: var(--ui-surface); }
.dailyDrawStage[data-market="KR"] .dailyDrawFront { scale: 1.25; }
.dailyDrawStage.isRevealed .dailyDrawFront { animation: dailyCardReveal .45s ease-out both; }
.dailyDrawBack {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 3px solid var(--ui-border);
  background:
    radial-gradient(circle at 50% 50%, transparent 25%, color-mix(in srgb, var(--ui-brand) 47.84%, transparent) 26%, transparent 27%, transparent 38%, color-mix(in srgb, var(--ui-brand) 36.86%, transparent) 39%, transparent 40%),
    repeating-conic-gradient(from 10deg at 50% 50%, var(--ui-brand-solid) 0deg 15deg, var(--ui-inverse) 15deg 30deg),
    var(--ui-brand-solid);
  box-shadow: inset 0 0 0 2px var(--ui-shadow-color), inset 0 0 0 6px var(--ui-shadow-color), inset 0 0 0 8px var(--ui-shadow-color), 0 6px 16px color-mix(in srgb, var(--ui-shadow-color) 20%, transparent);
  touch-action: none;
  cursor: grab;
  user-select: none;
  transition: transform .25s ease;
}
.dailyDrawBack.isDragging { cursor: grabbing; transition: none; }
.dailyDrawBack.isLeaving { opacity: 0; pointer-events: none; transition: transform .38s ease-out, opacity .3s ease .1s; }
.dailyDrawBack::before {
  position: absolute;
  inset: 13px;
  border: 1px solid var(--ui-border);
  border-radius: 48% 48% 46% 46%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-shadow-color) 32.55%, transparent), inset 0 0 0 2px var(--ui-shadow-color);
  content: "";
}
.dailyDrawBack::after {
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 65.88%, transparent);
  border-radius: 3px;
  content: "";
}
.dailyDrawBack img { position: relative; z-index: 2; width: 80%; height: auto; pointer-events: none; filter: drop-shadow(0 2px 3px var(--ui-shadow-color)); }
.dailyDrawHint { position: absolute; right: 0; bottom: 0; color: var(--exchange-blue); font-size: 12px; font-weight: 700; }
.dailyDrawRibbon {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding: 12px 20px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: linear-gradient(110deg, var(--ui-surface), var(--ui-surface));
  color: var(--exchange-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.dailyDrawRibbon:hover { border-color: var(--exchange-blue); }
.dailyDrawRibbon:focus-visible { outline: 3px solid var(--exchange-blue); outline-offset: 3px; }
.dailyDrawRibbonThumb { position: relative; flex: 0 0 42px; width: 42px; height: 58px; overflow: hidden; border-radius: 4px; background: var(--ui-brand-soft); }
.dailyDrawRibbonThumb img { width: 100%; height: 100%; object-fit: cover; }
.dailyDrawRibbonThumb[data-market="KR"] img { scale: 1.25; }
.dailyDrawRibbonCopy { display: grid; min-width: 0; gap: 2px; }
.dailyDrawRibbonCopy > span { color: var(--exchange-blue); font-size: 11px; font-weight: 800; }
.dailyDrawRibbonCopy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dailyDrawRibbonCopy small { color: var(--exchange-muted); font-size: 12px; }
.dailyDrawRibbonCta { margin-left: auto; color: var(--exchange-blue); font-size: 13px; font-weight: 800; white-space: nowrap; }
@keyframes dailyCardReveal { from { transform: scale(.94); filter: brightness(1.28); } to { transform: scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .dailyDrawBack { transition: none; } .dailyDrawStage.isRevealed .dailyDrawFront { animation: none; } }
@media (max-width: 980px) { .homeHero { width: calc(100% - 32px); } }
@media (max-width: 700px) {
  .dailyDraw { flex-direction: column; align-items: stretch; gap: 12px; padding: 22px 18px; }
  .dailyDrawStage { order: -1; flex-basis: auto; width: 100%; min-height: 344px; }
  .dailyDrawCopy { width: 100%; }
  .dailyDrawHint { right: calc(50% - 126px); bottom: 0; }
}
@media (max-width: 560px) {
  .dailyDraw { padding: 18px 14px; }
  .dailyDrawCardSlot { width: 210px; height: 292px; }
  .dailyDrawStage { min-height: 320px; }
  .dailyDrawHint { right: calc(50% - 118px); font-size: 11px; }
  .dailyDrawCopy > p:not(.dailyDrawEyebrow) { font-size: 12px; }
  .dailyDrawName { font-size: 12px; }
  .dailyDrawRibbon { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px; }
  .dailyDrawRibbonThumb { grid-row: 1 / 3; }
  .dailyDrawRibbonCta { grid-column: 2; margin-left: 0; font-size: 12px; }
}
.homeCardMetric {
  margin: 8px 0;
  color: var(--exchange-blue);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .nav.siteHeader {
    gap: 16px;
  }
  .sitePrimaryLinks,
  .siteAccountLink {
    display: none;
  }
  .siteMenuButton {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media (max-width: 560px) {
  .exchangeShell .nav.siteHeader {
    min-height: 64px;
    padding: 8px 16px;
    gap: 12px;
  }
  .siteHeader .brandLogo {
    width: 124px;
  }
  .siteHeaderActions {
    gap: 8px;
  }
  .siteLanguage summary {
    padding-inline: 10px;
    gap: 8px;
  }
  .homeBrowse {
    padding: 14px;
  }
  .homeMarketTabs a {
    flex: 1;
    justify-content: center;
    padding-inline: 8px;
  }
  .homeSearch {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .homeHero .homeSearch { grid-template-columns: minmax(0, 1fr) auto; }
  .homeSearch > label:first-of-type {
    grid-column: 1 / -1;
  }
}

.homeDashboardBody > .kreamPreviewSection,
.homeDashboardBody > .marketConceptGuide,
.homeDashboardBody > .marketSourceSection {
  width: 100%;
}

.homeRankingSidebar {
  position: static;
  top: 18px;
  display: grid;
  grid-area: ranking;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homeRankingPanel {
  overflow: hidden;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  background: var(--ui-surface);
}

.homeRankingPanel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--exchange-line);
}

.homeRankingPanel > header h2 {
  margin: 2px 0 0;
  color: var(--exchange-navy);
  font-size: 19px;
}

.homeRankingPanel > header a {
  flex: 0 0 auto;
  color: var(--exchange-blue);
  font-size: 11px;
  font-weight: 750;
}

.homeRankingDescription {
  margin: 0;
  padding: 12px 18px;
  color: var(--exchange-muted);
  border-bottom: 1px solid var(--exchange-line);
  background: var(--ui-surface);
  font-size: 10px;
  line-height: 1.55;
}

.homeRankingList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.homeRankingList > li + li {
  border-top: 1px solid var(--exchange-line);
}

.homeRankingItem {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 9px 14px;
  color: inherit;
  background: var(--ui-surface);
  transition: background-color 150ms ease;
}

.homeRankingItem:hover,
.homeRankingItem:focus-visible {
  background: var(--ui-surface);
}

.homeRankingNumber {
  color: var(--exchange-blue);
  font:
    800 16px "Google Sans Mono",
    Consolas,
    monospace;
  text-align: center;
}

.homeRankingThumb {
  display: grid;
  width: 42px;
  height: 56px;
  overflow: hidden;
  color: var(--ui-text-muted);
  border: 1px solid var(--exchange-line);
  border-radius: 3px;
  background: var(--ui-surface-raised);
  place-items: center;
  font-size: 8px;
  font-weight: 800;
}

.homeRankingThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeRankingCopy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.homeRankingCopy > strong {
  overflow: hidden;
  color: var(--exchange-navy);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeRankingCopy > small {
  overflow: hidden;
  color: var(--exchange-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeRankingValue {
  color: var(--exchange-navy);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.homeHallToggle {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.homeHallToggle button {
  padding: 10px 18px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--exchange-navy);
  cursor: pointer;
}
.homeHallToggle button[aria-pressed="true"] {
  background: var(--exchange-blue);
  color: var(--ui-on-brand);
}

.marketPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  color: var(--exchange-navy);
  font-size: 13px;
}

.marketPagination a,
.marketPagination > span {
  min-width: 76px;
  padding: 9px 12px;
  border: 1px solid var(--exchange-line-strong);
  border-radius: 4px;
  text-align: center;
}

.marketPagination a {
  color: var(--exchange-blue);
  background: var(--ui-surface);
  font-weight: 750;
}

.marketPagination > span {
  color: var(--exchange-muted);
  opacity: 0.55;
}

.kreamProductCard {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--exchange-line);
  border-radius: 5px;
  background: var(--ui-surface);
}

.marketProductCard.hasPriceUpdates {
  display: flex;
  flex-direction: column;
}

.marketProductCard.hasPriceUpdates > .marketProductCardLink {
  flex: 1;
  min-height: 0;
  height: auto;
}

.marketProductActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.marketProductActions > .saveToCards {
  width: 100%;
}

.marketProductActions .saveToCardsButton {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.marketProductActions.isSaved {
  border-color: var(--ui-border-strong);
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  color: var(--ui-text);
}

.searchSaveNotice {
  margin: 18px 0 0;
}

.explorerSaveNotice {
  margin: 14px 0 0;
}

.searchPaginationSplit {
  align-items: center;
  justify-content: space-between !important;
}

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

.marketProductCardLink {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 100%;
}

.kreamProductCard.isCompact .marketProductCardLink {
  grid-template-columns: 1fr;
}

.marketProductCard:hover,
.marketProductCard:focus-within {
  border-color: var(--ui-focus);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-shadow-color) 10%, transparent);
}

.marketProductCardLink:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: -3px;
}

.kreamProductVisual {
  display: grid;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: var(--ui-surface);
  place-items: center;
}

.isCompact .kreamProductVisual {
  min-height: 0;
}

.kreamProductImage {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.kreamImagePlaceholder {
  color: var(--exchange-muted);
  font-size: 11px;
}

.cardImageFallback {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  isolation: isolate;
}

.cardImageFallbackArtwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cardImageFallbackOverlay {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 12%;
  left: 0;
  padding: 10px 6px;
  background: color-mix(in srgb, var(--ui-brand) 82%, transparent);
  color: var(--ui-on-brand);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 45%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.cardImageReview {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.cardImageReviewOverlay {
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: 6%;
  left: 7%;
  padding: 8px 4px;
  border: 1px solid var(--ui-brand);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ui-brand) 92%, transparent);
  color: var(--ui-brand);
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  pointer-events: none;
}

.homeRankingThumb .cardImageReview {
  width: 100%;
  height: 100%;
}
.homeRankingThumb .cardImageFallback {
  width: 100%;
  height: 100%;
}
.homeRankingThumb .cardImageFallbackOverlay {
  bottom: 6%;
  padding: 2px 1px;
  font-size: 6px;
}
.homeRankingThumb .cardImageReviewOverlay {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2px 0;
  border-radius: 0;
  font-size: 7px;
}

.kreamProductBody {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 17px;
}

.kreamProductBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kreamProductBadges span {
  padding: 4px 6px;
  color: var(--ui-text);
  border-radius: 3px;
  background: var(--ui-brand-soft);
  font-size: 9px;
  font-weight: 750;
}

.kreamProductBody h3 {
  display: -webkit-box;
  margin: 12px 0 5px;
  overflow: hidden;
  color: var(--exchange-navy);
  font-size: 16px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kreamProductBody > p {
  margin: 0;
  overflow: hidden;
  color: var(--exchange-muted);
  font:
    10px "Google Sans Mono",
    Consolas,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kreamPriceSummary {
  display: grid;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 13px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.kreamPriceSummary span,
.kreamPriceSummary small {
  color: var(--exchange-muted);
  font-size: 10px;
}

.kreamPriceSummary strong {
  color: var(--exchange-navy);
  font:
    750 19px "Google Sans Mono",
    Consolas,
    monospace;
}

.kreamListingPreview {
  display: grid;
  margin-bottom: 12px;
  border-top: 1px solid var(--exchange-line);
}

.kreamListingPreview > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--exchange-line);
  font-size: 10px;
}

.kreamListingPreview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kreamListingPreview small {
  color: var(--exchange-muted);
}

.shopProductHero,
.shopOffersSection,
.shopHistorySection,
.cardEditorialSection {
  width: min(var(--desktop-page-width, 1180px), calc(100% - 64px));
  margin-right: auto;
  margin-left: auto;
}

.shopProductHero {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 42px 0 34px;
}

.shopProductHero .backLink {
  grid-column: 1 / -1;
}

.shopProductVisual {
  display: grid;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  color: var(--exchange-muted);
  border: 1px solid var(--exchange-line);
  border-radius: 6px;
  background: var(--ui-surface);
  place-items: center;
}

.shopProductVisual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.shopProductIdentity h1 {
  margin: 13px 0 8px;
  color: var(--exchange-navy);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.08;
}

.shopProductIdentity > p:not(.exchangeEyebrow),
.shopProductIdentity > small {
  display: block;
  max-width: 720px;
  color: var(--exchange-muted);
  font-size: 12px;
  line-height: 1.65;
}

.shopProductIdentity > small {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--exchange-blue);
  background: var(--ui-surface);
}

.cardDetailIdentityFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.cardDetailIdentityFacts div {
  min-width: 140px;
  padding: 10px 12px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.cardDetailIdentityFacts dt,
.cardDetailPriceFacts dt {
  color: var(--exchange-muted);
  font-size: 10px;
}

.cardDetailIdentityFacts dd,
.cardDetailPriceFacts dd {
  margin: 3px 0 0;
  color: var(--exchange-navy);
  font-size: 12px;
  font-weight: 700;
}

.shopOffersSection,
.shopHistorySection {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--exchange-line);
  border-radius: 5px;
  background: var(--ui-surface);
}

.cardDetailMarket.isSelected {
  border-top: 3px solid var(--exchange-blue);
}

.cardDetailMarketEmpty {
  margin-top: 18px;
  padding: 22px;
  color: var(--exchange-muted);
  border: 1px dashed var(--ui-border);
  background: var(--ui-surface);
}

.cardDetailMarketEmpty strong {
  color: var(--exchange-navy);
  font-size: 14px;
}

.cardDetailMarketEmpty p {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.shopOfferGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.shopOfferGrid article {
  padding: 18px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.shopOfferGrid article.hasImage {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.shopOfferGrid article > .shopOfferContent {
  min-width: 0;
}

.shopOfferHeading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--exchange-navy);
}

.shopOfferGrid article > .shopOfferImage {
  position: relative;
  width: 160px;
  aspect-ratio: 5 / 7;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-surface-raised);
}

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

.shopOfferGrid article span,
.shopOfferGrid article p {
  color: var(--exchange-muted);
  font-size: 10px;
}

.shopOfferGrid article b {
  display: block;
  margin-top: 22px;
  color: var(--exchange-navy);
  font:
    750 22px "Google Sans Mono",
    Consolas,
    monospace;
}

.shopOfferGrid article p {
  margin: 6px 0 18px;
}

.shopOfferGrid article a {
  color: var(--exchange-blue);
  font-size: 11px;
  font-weight: 750;
}

.shopOfferActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.cardDetailPriceFacts {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--exchange-line);
}

.cardDetailPriceFacts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cardDetailPriceFacts dd {
  text-align: right;
}

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

.shopHistoryHeader h2 {
  margin: 3px 0 0;
  color: var(--exchange-navy);
}

.shopHistoryHeader nav {
  display: flex;
  gap: 6px;
}

.shopHistoryHeader nav a {
  padding: 7px 10px;
  color: var(--exchange-muted);
  border: 1px solid var(--exchange-line);
  border-radius: 3px;
  font-size: 11px;
}

.shopHistoryHeader nav a[aria-current="page"] {
  color: var(--ui-on-brand);
  border-color: var(--exchange-blue);
  background: var(--exchange-blue);
}

.shopHistoryNote {
  margin: 15px 0;
  padding: 10px 12px;
  color: var(--exchange-muted);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  font-size: 11px;
  line-height: 1.55;
}

.homeMarketOverview { margin: 28px 0; padding: 26px 20px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--ui-text); }
.overviewHeading { text-align: center; margin-bottom: 22px; }
.overviewEyebrow { display: inline-block; padding: 5px 12px; border-radius: 20px; background: var(--ui-surface); color: var(--ui-brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.overviewHeading h2 { font-size: clamp(20px,2vw,27px); margin: 12px 0 8px; }
.overviewHeading p { font-size: 13px; color: var(--ui-text-muted); }
.overviewHeading nav { justify-content: center; margin-top: 16px; }
.overviewStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.overviewStats article { padding:16px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; min-width:0; }
.overviewStats span,.overviewStats small { display:block; font-size:11px; color:var(--ui-text-muted); }
.overviewStats strong { display:block; font-size:20px; margin:8px 0; font-variant-numeric:tabular-nums; }
.overviewStats .overviewTime { font-size:17px; }
.overviewStats meter { width:100%; height:12px; accent-color:var(--ui-brand); }
.overviewTableScroll { overflow-x:auto; }
.overviewTable { width:100%; min-width:800px; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.overviewTable th,.overviewTable td { padding:16px 10px; text-align:right; border-bottom:1px solid var(--ui-border); white-space:nowrap; }
.overviewTable thead th { color:var(--ui-text-muted); font-size:11px; font-weight:500; }
.overviewTable button { border:0; background:none; color:inherit; font:inherit; cursor:pointer; padding:0; }
.overviewTable th:nth-child(2) { text-align:left; }
.overviewTable tbody tr:hover { background:var(--ui-surface); }
.overviewTable tbody th a { display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; }
.overviewGameIcon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:var(--ui-brand); background:var(--ui-surface); }
.overviewCoverage { width:72px; height:5px; border-radius:5px; background:var(--ui-brand-soft); margin:0 0 5px auto; overflow:hidden; }
.overviewCoverage span { display:block; height:100%; background:var(--ui-brand-solid); }
.overviewUnavailable { color:var(--ui-text-muted); }
.overviewFootnote { font-size:11px; line-height:1.7; color:var(--ui-text-muted); margin:16px 0 0; }
@media(min-width:1500px) { .overviewStats { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:600px) { .homeMarketOverview { padding:20px 12px; } .overviewStats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
[data-home-section="changes"] { margin-top: 40px; }
[data-home-section="changes"] > h3 { margin-top: 32px; margin-bottom: 18px; }
.chartLoading { display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px; color:var(--ui-text-muted); }
.chartLoading i { width:12px; height:12px; border:2px solid var(--ui-border); border-top-color:var(--ui-brand); border-radius:50%; animation:chartSpin .8s linear infinite; }
.sparklineRetry { min-height:32px; padding:5px 9px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); color:var(--ui-text-muted); font:inherit; font-size:12px; cursor:pointer; }
.sparklineRetry:hover { border-color:var(--ui-brand); color:var(--ui-brand); }
.chartDrawLine { stroke-dasharray:1; stroke-dashoffset:0; animation:chartDraw 1.2s ease-out both; }
@keyframes chartDraw { from { stroke-dashoffset:1; opacity:.2; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes chartSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .chartDrawLine,.shopHistoryLine,.chartLoading i { animation:none; } }
.shopHistoryChartWrap {
  margin-top: 12px;
}

.shopHistoryScroll {
  padding: 18px 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface));
}
.shopHistoryScroll .shopHistoryChart {
  height: auto;
  aspect-ratio: 760 / 240;
}
.shopHistoryAxis {
  fill: var(--ui-text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.shopHistoryPoint {
  cursor: pointer;
}
.shopHistoryPoint:focus-visible {
  outline: 2px solid var(--ui-focus);
}
.shopHistoryTooltip {
  position: absolute;
  top: 8px;
  z-index: 2;
  width: min(260px, 70%);
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-surface) 97%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ui-shadow-color) 9.41%, transparent);
  pointer-events: none;
  font-size: 12px;
  color: var(--ui-text-muted);
  overflow-wrap: anywhere;
}
.shopHistoryTooltip div { margin-top: 10px; }
.shopHistoryTooltip strong { display: block; color: var(--ui-text); font-size: 19px; font-variant-numeric: tabular-nums; }
.shopHistoryTooltip time { font-weight: 600; color: var(--ui-text); }
.shopHistoryPriceSummary h3 {
  margin-top: 20px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.shopHistoryChart {
  display: block;
  width: 100%;
  height: 240px;
}

.shopHistoryGrid {
  fill: none;
  stroke: var(--ui-on-brand);
  stroke-width: 1;
}

.shopHistoryLine {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: shopHistoryFade .35s ease-out both;
}

@keyframes shopHistoryFade { from { opacity:.25; } to { opacity:1; } }

.shopHistoryChart circle {
  fill: var(--ui-on-brand);
  stroke: var(--exchange-blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.shopHistoryLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}

.shopHistoryLegend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--exchange-muted);
  font-size: 10px;
}

.shopHistoryLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

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

.shopHistorySummary div {
  padding: 12px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.shopHistorySummary dt {
  color: var(--exchange-muted);
  font-size: 9px;
}

.shopHistorySummary dd {
  margin: 5px 0 0;
  color: var(--exchange-navy);
  font:
    750 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.shopHistoryEmpty {
  padding: 28px;
  color: var(--exchange-muted);
  border: 1px dashed var(--exchange-line-strong);
  background: var(--ui-surface);
}

.shopHistoryEmpty strong {
  color: var(--exchange-navy);
}

.shopHistoryEmpty p {
  margin: 8px 0 0;
  font-size: 11px;
}

.cardEditorialSection {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid var(--exchange-line);
  border-radius: 5px;
  background: var(--ui-surface);
}

.cardEditorialHeading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.cardEditorialHeading h2 {
  margin: 3px 0 0;
  color: var(--exchange-navy);
}

.cardEditorialHeading > span,
.cardEditorialSources > span {
  color: var(--exchange-muted);
  font-size: 10px;
}

.cardEditorialLead {
  max-width: 880px;
  margin: 24px 0;
  color: var(--exchange-muted);
  font-size: 14px;
  line-height: 1.75;
}

.cardEditorialLead strong {
  display: block;
  margin-bottom: 6px;
  color: var(--exchange-navy);
  font-size: 20px;
  line-height: 1.35;
}

.cardEditorialGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 20px;
}

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

.cardEditorialNarrative article,
.cardPrintingSummary {
  padding: 18px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.cardEditorialNarrative h3 {
  margin: 0 0 10px;
  color: var(--exchange-navy);
  font-size: 15px;
}

.cardEditorialNarrative p,
.cardPrintingSummary p {
  margin: 0;
  color: var(--exchange-muted);
  font-size: 11px;
  line-height: 1.7;
}

.cardPrintingSummary > span {
  color: var(--exchange-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.cardPrintingSummary > strong {
  display: block;
  margin: 7px 0 15px;
  color: var(--exchange-navy);
  font-size: 15px;
}

.cardPrintingSummary dl {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.cardPrintingSummary dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--exchange-line);
}

.cardPrintingSummary dt,
.cardPrintingSummary dd {
  margin: 0;
  font-size: 10px;
}

.cardPrintingSummary dt {
  color: var(--exchange-muted);
}

.cardPrintingSummary dd {
  color: var(--exchange-navy);
  font-weight: 750;
  text-align: right;
}

.cardEditorialFacts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.cardEditorialFacts dl {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--exchange-line);
  background: var(--ui-surface);
}

.cardEditorialFacts dt {
  color: var(--exchange-muted);
  font-size: 9px;
}

.cardEditorialFacts dd {
  margin: 5px 0 0;
  color: var(--exchange-navy);
  font:
    750 12px "Google Sans Mono",
    Consolas,
    monospace;
}

.cardEvolutionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--ui-brand);
  background: var(--ui-surface);
  color: var(--exchange-navy);
  font-size: 11px;
}

.cardEvolutionRow i {
  margin-right: 14px;
  color: var(--exchange-muted);
  font-style: normal;
}

.cardEditorialSources {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--exchange-line);
}

.cardEditorialSources div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: flex-end;
}

.cardEditorialSources a {
  color: var(--exchange-blue);
  font-size: 10px;
  font-weight: 700;
}

.marketOverviewRow {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 260px 140px;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--exchange-line-strong);
  border-bottom: 0;
  background: var(--ui-surface);
}

.marketOverviewRow:nth-of-type(2) {
  border-radius: 5px 5px 0 0;
}

.marketOverviewRow:nth-of-type(3) {
  border-bottom: 1px solid var(--exchange-line-strong);
  border-radius: 0 0 5px 5px;
}

.marketOverviewIdentity {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.marketOverviewIdentity p {
  margin: 7px 0 0;
  color: var(--exchange-muted);
  font-size: 11px;
  line-height: 1.55;
}

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

.marketOverviewRow > a {
  color: var(--exchange-blue);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.marketOverviewPreview {
  margin-top: 38px;
}

@media (max-width: 980px) {
  .homeDashboardLayout {
    grid-template-areas:
      "ranking"
      "body";
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
  }

  .homeRankingSidebar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .marketSourceGrid,
  .kreamProductGrid {
    grid-template-columns: 1fr;
  }

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

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

  .marketOverviewRow {
    grid-template-columns: 1fr 260px;
  }

  .marketOverviewRow > a {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .homeHero .homeBrowse { padding: 18px; }
  .homeRankingSidebar {
    grid-template-columns: 1fr;
  }

  .homeRankingItem {
    grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  }

  .marketConceptGuide {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
  }

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

  .marketConceptGuide > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  .marketSourceSection,
  .kreamPreviewSection,
  .marketOverviewList,
  .marketProductsSection,
  .salesMarketTabs,
  .priceLandingGameNav,
  .marketAccuracyNotice,
  .marketFilterPanel {
    width: calc(100% - 32px);
  }

  .shopProductHero,
  .shopOffersSection,
  .shopHistorySection,
  .cardEditorialSection {
    width: calc(100% - 32px);
  }

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

  .shopProductHero .backLink {
    grid-column: auto;
  }

  .shopProductVisual {
    width: min(100%, 360px);
    min-height: 0;
    justify-self: center;
  }

  .shopOfferGrid article.hasImage {
    grid-template-columns: 1fr;
  }

  .shopOfferGrid article > .shopOfferImage {
    width: min(180px, 100%);
    margin: 0 auto;
  }

  .shopHistoryHeader {
    flex-direction: column;
  }

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

  .cardEditorialHeading,
  .cardEditorialSources {
    flex-direction: column;
  }

  .cardEditorialGrid,
  .cardEditorialNarrative {
    grid-template-columns: 1fr;
  }

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

  .cardEditorialSources div {
    justify-content: flex-start;
  }

  .marketSectionHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .salesMarketTabs a {
    min-width: 0;
    flex: 1;
    padding-right: 8px;
    padding-left: 8px;
  }

  .marketFilterForm,
  .marketOverviewRow {
    grid-template-columns: 1fr;
  }

  .marketOverviewRow dl {
    width: 100%;
  }

  .kreamProductCard .marketProductCardLink {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .kreamProductCard.isCompact .marketProductCardLink {
    grid-template-columns: 1fr;
  }

  .kreamProductVisual {
    min-height: 0;
  }

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

@media (max-width: 480px) {
  .homeRankingItem {
    grid-template-columns: 24px 42px minmax(0, 1fr);
  }

  .homeRankingValue {
    grid-column: 3;
    justify-self: start;
  }

  .marketSourceCard > header {
    grid-template-columns: auto 1fr;
  }

  .marketSourceCard > header > span:last-child {
    grid-column: 1 / -1;
  }

  .marketSourceCard dl {
    grid-template-columns: 1fr;
  }

  .marketSourceCard dl > div {
    border-right: 0;
    border-bottom: 1px solid var(--exchange-line);
  }

  .marketSourceCard dl > div:last-child {
    border-bottom: 0;
  }

  .marketSourceCard > footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .kreamProductCard .marketProductCardLink {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .accountCollectionHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .accountCollectionSummary {
    width: 100%;
    justify-content: space-between;
  }

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

  .accountCollectionList article {
    align-items: stretch;
    flex-direction: column;
  }

  .accountRemoveConfirm > div {
    right: auto;
    left: 0;
  }

  .exchangeShell .navLinks > a:nth-child(2) {
    display: block;
  }

  .exchangeShell .navLinks > a:nth-child(n + 3),
  .exchangeShell .buildBadge {
    display: none;
  }
}
.homeChangesHeading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.homeChangesHeading h2 { margin:0; }
.homeChangesToggle { display:flex; gap:4px; flex-shrink:0; }
.homeChangesToggle button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--ui-border); background:transparent; color:inherit; border-radius:8px; cursor:pointer; }
.homeChangesToggle button[aria-pressed="true"] { background:var(--ui-brand-soft); color:var(--ui-brand); border-color:var(--ui-border); }
.homeChangesToggle button:focus-visible { outline:2px solid var(--ui-focus); outline-offset:2px; }
.homeChangesTable { min-width:680px; }
.homeChangesTable .homeChangeCard { display:flex; align-items:center; gap:12px; }
.homeChangesTable .homeChangeCard img { width:42px; height:58px; object-fit:cover; object-position:center; border-radius:4px; }
.homeChangesTable small { display:block; font-weight:400; color:var(--ui-text-muted); margin-top:4px; }
.homeChangesTable td:last-child { width:170px; min-width:130px; }
.homePriceChange.isPriceUp, .homeCardMetric.isPriceUp, .homeCurrentPrice.isPriceUp strong, .priceTrend-up .kreamPriceSummary strong { color:var(--ui-brand); font-weight:700; }
.homePriceChange.isPriceDown, .homeCardMetric.isPriceDown, .homeCurrentPrice.isPriceDown strong, .priceTrend-down .kreamPriceSummary strong { color:var(--ui-negative); font-weight:700; }
.previousPrice { color:var(--ui-text-muted); font-weight:500; white-space:nowrap; }
.homeCurrentPrice .previousPrice { display:inline; margin-right:5px; }
.homeCurrentPrice > div { min-height:0 !important; display:inline; }
.homeCurrentPrice > div svg, .homeCurrentPrice > div .chartLoading { display:none; }
/* Reading guides share the market navigation and keep text comfortable on mobile. */
.cardGuideHeading { margin: 32px 0; max-width: 820px; }
.cardGuideHeading h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.35; word-break: keep-all; }
.cardGuideHeading p, .cardGuideTile p { line-height: 1.8; color: var(--muted, var(--ui-text-muted)); }
.cardGuideGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.cardGuideTile { display: block; padding: 24px; border: 1px solid var(--line, var(--ui-border)); border-radius: 16px; color: inherit; text-decoration: none; }
.cardGuideTile:hover { border-color: var(--ui-brand); }
.cardGuideTile h2, .cardGuideTile strong { font-size: 1.15rem; line-height: 1.6; }
.cardGuideTile span { color: var(--ui-text); font-weight: 700; }
.cardGuideArticle { max-width: 820px; margin: 0 auto 48px; }
.cardGuideArticle section { margin: 32px 0; }
.cardGuideArticle h2 { font-size: 1.3rem; line-height: 1.5; }
.cardGuideArticle p, .cardGuideChecklist li { line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.cardGuideChecklist { padding: 20px 24px; border-radius: 16px; background: var(--ui-surface-raised); color: var(--ui-text); }
.cardGuideChecklist ul { padding-left: 22px; }
.cardGuideChecklist li + li { margin-top: 8px; }
.cardGuideActions { display: flex; flex-wrap: wrap; gap: 12px; }
.cardGuideActions a { padding: 14px 20px; border-radius: 10px; background: var(--ui-inverse); color: var(--ui-on-inverse); text-decoration: none; }
.cardGuideFootnote { font-size: .85rem; color: var(--muted, var(--ui-text-muted)); }
.riftboundQuickSearch { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.riftboundQuickSearch label { display: grid; gap: 6px; flex: 1 1 210px; }
.riftboundQuickSearch input, .riftboundQuickSearch select, .riftboundQuickSearch button { padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; font: inherit; }
.riftboundQuickSearch button { background: var(--ui-inverse); color: var(--ui-on-inverse); cursor: pointer; }
.cardGuideComparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cardGuideComparison figure { margin: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; }
.cardGuideComparison img { display: block; width: 100%; height: 230px; object-fit: contain; }
.cardGuideComparison h3 { line-height: 1.6; font-size: 1rem; }
.cardGuideComparison code { overflow-wrap: anywhere; font-size: .8rem; }
.cardGuideComparison small { display: block; line-height: 1.7; }
@media (max-width: 600px) { .cardGuideComparison { grid-template-columns: 1fr; } }

/* Magazine pages share one content edge from heading through footer. */
.magazinePage { --magazine-width: 1120px; }
.magazineContainer { width: min(var(--magazine-width), calc(100% - 96px)); margin-inline: auto; padding-top: 56px; }
.euPriceExample { min-width: 0; padding: 32px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--ui-text); }
.euPriceExample h3 { margin: 8px 0; font-size: 26px; }
.euPriceExample dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.euPriceExample dl > div { padding: 16px; border-radius: 12px; background: var(--ui-surface); }
.euPriceExample dt { font-size: 13px; color: var(--ui-text-muted); }
.euPriceExample dd { margin: 6px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.euPriceExample small { display: block; font-size: 12px; line-height: 1.7; color: var(--ui-text-muted); }
.euPriceExampleCompact { border: 0; border-radius: 0; align-content: center; }
.englishEditorialHighlights { margin: 30px 0; }
.englishEditorialHighlights h2 { font-size: 24px; margin: 6px 0; }
.englishEditorialGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.englishEditorialTile { min-width: 0; display: block; padding: 24px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); text-decoration: none; color: var(--ui-text); }
.englishEditorialTile h3 { margin: 12px 0; font-size: 22px; line-height: 1.4; }
.englishEditorialTile > p { color: var(--ui-text-muted); line-height: 1.7; }
.englishEditorialTile > strong { display: block; margin-top: 20px; font-size: 14px; color: var(--ui-brand); }
.englishEditorialArt, .englishEditorialNumbers { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 148px; margin: -24px -24px 24px; padding: 20px; background: var(--ui-surface); border-radius: 20px 20px 0 0; }
.englishEditorialArt img { width: 25%; max-width: 90px; height: 126px; object-fit: contain; }
.englishEditorialNumbers > span { font-size: 34px; font-weight: 800; padding: 12px; background: var(--ui-surface); border-radius: 12px; }
.englishEditorialNumbers small { display: block; font-size: 12px; font-weight: 500; margin-top: 6px; }
@media (max-width: 700px) { .englishEditorialGrid { grid-template-columns: minmax(0, 1fr); } .euPriceExample { padding: 20px; } .euPriceExample dl { gap: 10px; } .euPriceExample dl > div { padding: 12px; } }
.magazineArticlePage { --magazine-width: 880px; }
.magazineHeading { margin-bottom: 36px; }
.magazinePage .magazineEyebrow { margin: 0 0 14px; color: var(--ui-brand); font-size: 12px; font-weight: 750; letter-spacing: .1em; line-height: 1.6; }
.magazineHeading h1 { margin: 0 0 18px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.2; }
.magazineHeading > p:last-child { margin: 0; color: var(--ui-text-muted); font-size: 17px; line-height: 1.85; word-break: keep-all; }
.magazineFeature { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 24px; background: var(--ui-brand-soft); color: inherit; text-decoration: none; }
.magazineFeatureCopy { padding: 40px; color: var(--ui-on-brand); background: var(--ui-brand-solid); }
.magazineFeatureCopy .magazineEyebrow { display: block; color: var(--ui-brand); }
.magazineFeature h2 { margin: 0 0 18px; color: var(--ui-on-brand); font-size: clamp(25px, 2.7vw, 34px); line-height: 1.5; letter-spacing: -.035em; word-break: keep-all; }
.magazineFeatureCopy > p { max-width: 34ch; margin: 0; color: var(--ui-on-brand); font-size: 15px; line-height: 1.9; word-break: keep-all; }
.magazineFeatureAction { display: inline-flex; gap: 20px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--ui-border); font-size: 14px; font-weight: 700; }
.magazineFeatureArt { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 300px; padding: 30px 22px 54px; background: radial-gradient(ellipse at center, var(--ui-surface) 0%, var(--ui-brand-soft) 72%); }
.magazineFeatureArt img { width: 29%; max-width: 145px; height: 228px; object-fit: contain; filter: drop-shadow(0 12px 8px color-mix(in srgb, var(--ui-shadow-color) 15%, transparent)); }
.magazineFeatureArt img:first-child { transform: rotate(-8deg) translateY(10px); }
.magazineFeatureArt img:last-of-type { transform: rotate(8deg) translateY(10px); }
.magazineFeatureArt small { position: absolute; bottom: 20px; font-size: 11px; color: var(--ui-text-muted); }
.magazineFeatureStoryArt { position: relative; min-width: 0; min-height: 300px; overflow: hidden; background: var(--ui-inverse); }
.magazineFeatureStoryArt img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.magazineArticleCover { max-width: 580px; margin: 0 auto 44px; }
.magazineArticleCover img { display: block; width: 100%; height: auto; border-radius: 18px; }
.magazineArticleCover figcaption { margin-top: 10px; color: var(--ui-text-muted); font-size: 12px; line-height: 1.6; text-align: center; }
.magazineArticleSources ul { padding-left: 22px; line-height: 2; }
.magazineArticleSources a { color: var(--ui-brand); overflow-wrap: anywhere; }
.magazineFeature:hover .magazineFeatureAction { border-color: var(--ui-border); }
.magazineLibrary { margin: 56px 0 64px; }
.magazineSectionHeading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.magazineSectionHeading .magazineEyebrow { margin-bottom: 8px; }
.magazineSectionHeading h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; line-height: 1.5; word-break: keep-all; }
.magazineSectionHeading > span { flex-shrink: 0; color: var(--ui-text-muted); font-size: 13px; }
.magazinePage .cardGuideGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.magazinePage .cardGuideTile { display: flex; flex-direction: column; min-width: 0; padding: 28px; border-color: var(--ui-border); background: var(--ui-surface); transition: border-color .15s, box-shadow .15s; }
.magazinePage .cardGuideTile:hover { border-color: var(--ui-brand); box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-shadow-color) 6.27%, transparent); }
.magazinePage .cardGuideTile .magazineGameLabel { align-self: start; margin-bottom: 20px; padding: 5px 9px; border-radius: 5px; background: var(--ui-surface); color: var(--ui-brand); font-size: 11px; font-weight: 650; }
.magazinePage .cardGuideTile h3, .magazinePage .cardGuideTile strong { margin: 0 0 12px; font-size: 19px; line-height: 1.6; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.magazinePage .cardGuideTile p { margin: 0 0 24px; color: var(--ui-text-muted); font-size: 14px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.magazinePage .cardGuideTile > span:last-child { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; color: var(--ui-brand); font-size: 13px; }
.magazinePage a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 5px; }
.magazinePage .cardGuideArticle { width: 100%; max-width: none; margin: 0 0 56px; }
.magazinePage .cardGuideHeading { max-width: none; margin: 0 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--ui-border); }
.magazineBackLink { display: inline-block; margin-bottom: 32px; color: var(--ui-text-muted); font-size: 14px; text-decoration: none; }
.magazinePage .cardGuideHeading h1 { margin: 0 0 24px; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.045em; line-height: 1.5; }
.magazinePage .cardGuideHeading > p:not(.magazineEyebrow) { margin: 0 0 20px; color: var(--ui-text-muted); font-size: 17px; }
.magazinePage .cardGuideHeading small { font-size: 12px; color: var(--ui-text-muted); }
.magazinePage .cardGuideArticle section { margin: 36px 0; }
.magazinePage .cardGuideArticle section > h2 { margin: 0 0 16px; font-size: 23px; letter-spacing: -.025em; }
.magazinePage .cardGuideArticle section > p { margin: 0 0 22px; color: var(--ui-text-muted); font-size: 16px; line-height: 2; }
.magazinePage .cardGuideComparison { gap: 16px; }
.magazinePage .cardGuideComparison figure { min-width: 0; padding: 20px; background: var(--ui-surface); }
.magazinePage .cardGuideComparison img { height: 220px; margin: 8px 0 24px; }
.magazinePage .cardGuideComparison h3 { margin: 0 0 12px; }
.magazinePage .cardGuideComparison a { color: var(--ui-brand); }
.magazinePage .cardGuideComparison code { display: block; color: var(--ui-text-muted); }
.magazinePage .cardGuideComparison small { color: var(--ui-text-muted); font-size: 11px; }
.magazinePage .cardGuideChecklist { padding: 28px; background: var(--ui-brand-soft); color: var(--ui-text); }
.magazinePage .cardGuideActions a { background: var(--ui-brand-solid); font-size: 14px; }
.magazinePage .cardGuideFootnote { margin-top: 24px; color: var(--ui-text-muted); }
.magazineContainer > .marketProductsSection { width: 100%; max-width: none; margin: 0 0 48px; padding: 32px 0 0; border-top: 1px solid var(--ui-border); }
.magazinePage .marketSectionHeading { gap: 16px; margin-bottom: 22px; }
.magazinePage .marketSectionHeading h2 { font-size: 22px; }
.magazinePage .marketSectionHeading > a { color: var(--ui-brand); font-size: 13px; }
.magazineArticlePage .cardGuideGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.magazinePage footer { width: 100%; max-width: none; margin: 0; gap: 18px; flex-wrap: wrap; font-size: 12px; }

/* Shared game discovery on the explorer and price landings. */
.gameBrowseIntro { display: flex; gap: 24px; align-items: stretch; margin: 24px 0 32px; padding: 24px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-brand-soft); }
.gameBrowseSuggestions { flex: 1; min-width: 0; }
.gameBrowseSuggestions h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.5; letter-spacing: -.025em; }
.gameBrowseSuggestions p { margin: 0 0 16px; color: var(--ui-text-muted); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.gameBrowseSuggestions nav { display: flex; flex-wrap: wrap; gap: 8px; }
.gameBrowseSuggestions nav a { display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--ui-border); border-radius: 24px; color: var(--ui-brand); background: var(--ui-surface); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.gameBrowseSuggestions nav a:hover { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.gameBrowseStory { display: flex; flex: 0 1 340px; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 24px; border-radius: 10px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.gameBrowseStory > span { color: var(--ui-text-muted); font-size: 11px; }
.gameBrowseStory strong { font-size: 16px; line-height: 1.7; word-break: keep-all; }
.gameBrowseStory .gameBrowseRead { margin-top: auto; color: var(--ui-brand); font-size: 12px; font-weight: 700; }
.gameBrowseStory:hover { border-color: var(--ui-brand); }
.gameBrowseIntro a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.gameBrowseLanding .gameBrowseIntro { margin: 0; }
.marketExplorer > footer { width: min(var(--desktop-page-width, 1280px), calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 760px) { .marketExplorer > footer { width: calc(100% - 28px); } }
@media (max-width: 700px) {
  .gameBrowseIntro { flex-direction: column; gap: 18px; padding: 20px; margin-block: 20px 24px; }
  .gameBrowseStory { flex: auto; padding: 16px 18px; }
  .gameBrowseSuggestions h2 { font-size: 18px; }
}
@media (max-width: 900px) {
  .magazinePage .cardGuideGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .magazineFeatureCopy { padding: 28px; }
  .magazineFeatureArt { padding-inline: 14px; gap: 6px; }
}
@media (max-width: 700px) {
  .magazineContainer { width: calc(100% - 40px); padding-top: 32px; }
  .magazineHeading { margin-bottom: 28px; }
  .magazineHeading > p:last-child { font-size: 15px; }
  .magazineFeature { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .magazineFeatureStoryArt { min-height: 0; aspect-ratio: 16 / 9; }
  .magazineFeatureArt { min-height: 230px; padding: 18px 20px 44px; }
  .magazineFeatureArt img { height: 180px; }
  .magazineLibrary { margin-block: 36px 40px; }
  .magazineSectionHeading { align-items: start; flex-direction: column; gap: 8px; }
  .magazineSectionHeading h2 { font-size: 22px; }
  .magazinePage .cardGuideGrid, .magazinePage .cardGuideComparison { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .magazinePage .cardGuideTile { padding: 24px; }
  .magazinePage .cardGuideTile .magazineGameLabel { margin-bottom: 14px; }
  .magazinePage .cardGuideHeading > p:not(.magazineEyebrow) { font-size: 15px; }
  .magazinePage .cardGuideArticle section > h2 { font-size: 21px; }
  .magazinePage .cardGuideChecklist { padding: 22px; }
  .magazinePage .cardGuideActions { flex-direction: column; }
  .magazinePage .cardGuideActions a { text-align: center; }
  .magazinePage .marketSectionHeading { flex-wrap: wrap; align-items: start; }
}

.homeValueIntro { padding: 2px 2px 16px; }
.homeBrandName { display: block; margin-bottom: 8px; color: var(--ui-brand); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.homeValueIntro h1 { margin: 0; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.04em; }
.homeValueIntro p { margin: 6px 0 0; color: var(--ui-text-muted); font-size: 14px; line-height: 1.65; }
.searchSimilar, .searchRequestCallout, .accountCardRequests { margin-top: 24px; padding: 24px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); }
.searchSimilar h2, .accountCardRequests h2 { margin: 0 0 8px; font-size: 21px; }
.searchSimilar > p, .searchRequestCallout p, .accountCardRequests > p { margin: 0 0 18px; color: var(--ui-text-muted); line-height: 1.7; }
.searchRequestCallout strong { display: block; margin-bottom: 6px; font-size: 19px; }
.searchRequestCallout a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border-radius: 9px; background: var(--ui-brand-solid); color: var(--ui-on-brand); font-weight: 700; }
.accountCardRequestForm { display: grid; grid-template-columns: 110px minmax(140px, 1fr) minmax(180px, 2fr) minmax(150px, 1fr) auto; gap: 10px; align-items: end; }
.accountCardRequestForm label { display: grid; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; }
.accountCardRequestForm input, .accountCardRequestForm select { width: 100%; min-width: 0; height: 42px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface); }
.accountCardRequestForm button { min-height: 42px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--ui-brand-solid); color: var(--ui-on-brand); font-weight: 700; cursor: pointer; }
.accountCardRequestList { display: grid; gap: 8px; margin-top: 18px; }
.accountCardRequestList > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 8px; background: var(--ui-surface); }
.accountCardRequestList span { color: var(--ui-text-muted); font-size: 13px; }
.accountCardRequestList form { margin-left: auto; }
.accountCardRequestList form button { border: 0; background: transparent; color: var(--ui-text-muted); text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) { .accountCardRequestForm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .accountCardRequestForm button { grid-column: 1 / -1; } }
@media (max-width: 560px) { .accountCardRequests, .searchSimilar, .searchRequestCallout { padding: 18px; } .accountCardRequestForm { grid-template-columns: minmax(0, 1fr); } .accountCardRequestForm button { grid-column: auto; } .accountCardRequestList > div { flex-direction: column; } }

/* Shared event-finder form treatment: segmented search, soft white controls, amber action. */
.exchangeShell :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background-color: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
}
.exchangeShell :where(input:not([type="hidden"]), select, textarea)::placeholder {
  color: var(--ui-text-muted);
}
.exchangeShell :where(input:not([type="hidden"]), select, textarea):focus-visible,
.exchangeShell :where(button, summary, a):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.exchangeShell select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%2317313e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px 9px;
}
.exchangeShell :where(.explorerSearch button, .explorerFilters button,
  .intlFilters button, .searchForm button, .accountCardRequestForm button) {
  border-radius: 999px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
  font-weight: 800;
}
.exchangeShell :where(.explorerSearch button, .explorerFilters button,
  .intlFilters button, .searchForm button, .accountCardRequestForm button):hover {
  background: var(--ui-brand-solid);
}

.homeHero .homeSearch {
  grid-template-columns: minmax(150px, .85fr) minmax(0, 2fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ui-shadow-color) 15%, transparent);
}
.homeHero .homeSearch label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 5px 18px;
  color: var(--ui-text);
}
.homeHero .homeSearch label + label {
  border-left: 1px solid var(--ui-border);
}
.homeSearchFieldLabel {
  display: block;
  margin-bottom: 2px;
  color: var(--ui-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.homeHero .homeSearch :is(input, select) {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.5;
}
.homeHero .homeSearch select { padding-right: 25px; background-position: right 3px center; }
.homeHero .homeSearch button {
  align-self: stretch;
  min-width: 96px;
  min-height: 52px;
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ui-shadow-color) 18%, transparent);
}
.explorerControls { border-radius: 18px; }
.explorerSearchRow {
  overflow: hidden;
  align-items: stretch;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-shadow-color) 9%, transparent);
}
.explorerSearchRow label { justify-content: center; padding: 3px 18px; }
.explorerSearchRow label > span { font-size: 11px; font-weight: 800; color: var(--ui-text); }
.explorerSearchRow input { min-height: 28px; padding: 0; border: 0; box-shadow: none; }
.explorerSearchRow button { min-width: 88px; border-radius: 999px; }
.explorerFilters[open] > div { margin-top: 8px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.explorerGameChooser .explorerGames { margin-top: 8px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }

.siteLanguageOptions { border-radius: 12px; box-shadow: 0 10px 26px color-mix(in srgb, var(--ui-shadow-color) 19%, transparent); }

@media (max-width: 760px) {
  .homeHero .homeSearch { grid-template-columns: minmax(0, 1fr) auto; border-radius: 20px; }
  .homeHero .homeSearch > label:first-of-type { grid-column: 1 / -1; border-bottom: 1px solid var(--ui-border); }
  .homeHero .homeSearch label + label { border-left: 0; }
  .homeHero .homeSearch button { min-height: 48px; }
}
.dailyMarketQuizCopy h2 { color: var(--ui-text); }
.dailyMarketQuizChoices button { border-color: var(--ui-brand); color: var(--ui-text); background: var(--ui-surface); }
.dailyMarketQuizChoices button:hover { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.homeChangesToggle button[aria-pressed="true"],
.homeHallToggle button[aria-pressed="true"] { border-color: var(--ui-brand); color: var(--ui-on-brand); background: var(--ui-brand-solid); }
.marketTabs button.isActive { color: var(--ui-brand); border-color: var(--ui-brand); }
.marketPagination a,
.explorerPagination a { color: var(--ui-text); background: var(--ui-surface); }
.shopHistoryScroll { background: linear-gradient(180deg, var(--ui-brand-soft), var(--ui-surface)); }
.chartLoading i { border-top-color: var(--ui-brand); }

.magazineFeatureCopy { background: var(--ui-inverse); }
.magazineFeatureArt { background: radial-gradient(ellipse at center, var(--ui-surface) 0%, var(--ui-brand-soft) 72%); }
.magazinePage .magazineEyebrow,
.magazinePage .cardGuideTile > span:last-child,
.magazinePage .marketSectionHeading > a { color: var(--ui-brand); }
.magazinePage .cardGuideTile .magazineGameLabel { color: var(--ui-text); background: var(--ui-brand-soft); }
.magazinePage .cardGuideActions a,
.searchRequestCallout a,
.accountCardRequestForm button { color: var(--ui-on-brand); background: var(--ui-brand-solid); }
.gameBrowseIntro,
.searchSimilar,
.searchRequestCallout,
.accountCardRequests { border-color: var(--ui-border); background: var(--ui-brand-soft); }
.gameBrowseSuggestions nav a { border-color: var(--ui-border); color: var(--ui-text); background: var(--ui-surface); }
.gameBrowseStory { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }

@media (max-width: 760px) {
  .siteHeader .brandLogo { width: 144px; }
  .homeHero .homeBrowse { padding: 22px 18px; }
  .homeHero .homeBrowse::before { inset: 7px; }
}

/* Search and filter interaction states follow the floating Riftbound controls. */
.homeHero .homeSearch,
.explorerSearchRow,
.exchangeShell :where(input, select, textarea),
.exchangeShell :where(.explorerFilters summary, .siteLanguage summary) {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.homeHero .homeSearch:focus-within,
.explorerSearchRow:focus-within {
  border-color: var(--ui-focus);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent), 0 0 0 3px color-mix(in srgb, var(--ui-shadow-color) 20%, transparent);
}
.homeHero .homeSearch label:focus-within,
.explorerSearchRow label:focus-within {
  border-radius: 999px;
  background: var(--ui-brand-soft);
}
.homeHero .homeSearch label:focus-within .homeSearchFieldLabel,
.explorerSearchRow label:focus-within > span { color: var(--ui-text); }
.homeHero .homeSearch :is(input, select):focus,
.explorerSearchRow input:focus {
  outline: none;
  box-shadow: none;
}
.exchangeShell :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.exchangeShell :where(input, select, textarea):focus:not(.homeSearch input, .homeSearch select, .explorerSearchRow input) {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-shadow-color) 19%, transparent);
}
.exchangeShell :where(.explorerFilters, .siteLanguage)[open] > summary {
  color: var(--ui-text);
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
}
.exchangeShell :where(.explorerFilters, .siteLanguage) > summary:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.explorerFilters[open] > div,
.siteLanguage[open] .siteLanguageOptions {
  border-color: var(--ui-border);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-shadow-color) 16%, transparent);
}

.homeHero .homeSearch .homeGameSelect {
  position: relative;
  min-width: 0;
}
.homeHero .homeBrowse { overflow: visible; z-index: 2; }
.homeHero .homeSearch .homeSearchQuery { border-left: 1px solid var(--ui-border); }
.homeHero .homeSearch .homeGameTrigger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  min-width: 0;
  padding: 5px 30px 5px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
}
.homeHero .homeSearch .homeGameTrigger:hover,
.homeHero .homeSearch .homeGameTrigger[aria-expanded="true"] {
  color: var(--ui-text);
  background: var(--ui-brand-soft);
}
.homeHero .homeSearch .homeGameTrigger:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -3px;
}
.homeGameValue { font-size: 14px; line-height: 1.5; }
.homeGameChevron {
  position: absolute;
  right: 17px;
  bottom: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ui-border-strong);
  border-bottom: 2px solid var(--ui-border-strong);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.homeGameTrigger[aria-expanded="true"] .homeGameChevron { transform: rotate(225deg); }
.homeHero .homeSearch .homeGameMenu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 3px);
  left: 0;
  width: max(100%, 270px);
  max-width: min(90vw, 320px);
  max-height: 330px;
  overflow-y: auto;
  padding: 10px 0;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-shadow-color) 15%, transparent);
}
.homeHero .homeSearch .homeGameOption {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 15px;
  border: 0;
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.homeHero .homeSearch .homeGameOption:hover,
.homeHero .homeSearch .homeGameOption:focus-visible {
  outline: none;
  color: var(--ui-text);
  background: var(--ui-surface-raised);
}
.homeGameCheck {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ui-surface-raised);
}
.homeGameOption[aria-selected="true"] .homeGameCheck {
  background: var(--ui-brand-solid);
  box-shadow: inset 0 0 0 4px var(--ui-shadow-color);
  border: 1px solid var(--ui-brand);
}
@media (max-width: 760px) {
  .homeHero .homeSearch .homeGameSelect { grid-column: 1 / -1; border-bottom: 1px solid var(--ui-border); }
  .homeHero .homeSearch > label:first-of-type { grid-column: auto; border-bottom: 0; }
  .homeHero .homeSearch .homeSearchQuery { border-left: 0; }
  .homeHero .homeSearch .homeGameMenu { top: calc(100% - 1px); }
}
.playPage {
  min-height: 100vh;
  background: var(--ui-surface);
}

.homeBuyPicksBanner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(var(--desktop-page-width, 1280px), calc(100% - 64px)); margin: 28px auto 0; padding: 22px 26px; border: 1px solid var(--ui-border); border-radius: 20px; color: var(--ui-text); background: linear-gradient(110deg, var(--ui-brand-soft), var(--ui-surface)); text-decoration: none; }
.homeBuyPicksBanner span:first-child { display: grid; gap: 5px; }
.homeBuyPicksBanner strong { font-size: 20px; }
.homeBuyPicksBanner small { color: var(--ui-text-muted); line-height: 1.5; }
.homeBuyPicksBanner > span:last-child { flex: none; color: var(--ui-brand); font-weight: 800; }
@media (max-width: 980px) { .homeBuyPicksBanner { width: calc(100% - 32px); } }
.buyPicksPage { min-height: 100vh; background: var(--ui-surface); }
.buyPicksContainer { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 46px 0 100px; color: var(--ui-text); }
.buyPicksHero { padding: clamp(28px, 5vw, 52px); border-radius: 28px; color: var(--ui-on-brand); background: radial-gradient(circle at 92% 12%, var(--ui-brand-solid) 0, transparent 34%), linear-gradient(120deg, var(--ui-inverse), var(--ui-brand-solid)); }
.buyPicksMemberGate { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: center; min-height: 520px; overflow: hidden; padding: clamp(30px, 6vw, 76px); border-radius: 30px; color: var(--ui-on-brand); background: radial-gradient(circle at 80% 24%, var(--ui-brand-solid) 0, transparent 34%), linear-gradient(135deg, var(--ui-inverse), var(--ui-inverse) 65%, var(--ui-inverse)); }
.buyPicksMemberCopy { position: relative; z-index: 1; max-width: 630px; }
.buyPicksMemberCopy .exchangeEyebrow { color: var(--ui-brand); }
.buyPicksMemberCopy h1 { margin: 16px 0; font-size: clamp(35px, 4.5vw, 57px); line-height: 1.16; letter-spacing: -.04em; }
.buyPicksMemberCopy > p:not(.exchangeEyebrow) { max-width: 540px; color: var(--ui-on-brand); font-size: 18px; line-height: 1.7; }
.buyPicksMemberCopy ul { display: grid; gap: 12px; margin: 29px 0; padding: 0; list-style: none; }
.buyPicksMemberCopy li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.buyPicksMemberCopy li::before { content: "✦"; color: var(--ui-brand); }
.buyPicksMemberCopy > a { display: inline-flex; padding: 16px 23px; border-radius: 13px; color: var(--ui-text); background: var(--ui-surface); font-weight: 800; text-decoration: none; box-shadow: 0 12px 26px color-mix(in srgb, var(--ui-shadow-color) 33.33%, transparent); }
.buyPicksMemberCopy small { display: block; max-width: 550px; margin-top: 19px; color: var(--ui-brand); line-height: 1.6; }
.buyPicksMemberArt { position: relative; height: 350px; perspective: 900px; }
.buyPicksMemberCard { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 220px; height: 310px; padding: 24px; border: 9px solid var(--ui-brand); border-radius: 18px; background: linear-gradient(145deg, var(--ui-inverse), var(--ui-brand-solid) 60%, var(--ui-inverse)); box-shadow: 0 26px 35px color-mix(in srgb, var(--ui-shadow-color) 50.2%, transparent), inset 0 0 0 3px var(--ui-shadow-color); font-weight: 900; letter-spacing: .12em; }
.buyPicksMemberCardBack { top: 5px; left: 20px; transform: rotate(-14deg); color: var(--ui-brand); font-size: 30px; }
.buyPicksMemberCardFront { top: 28px; left: 115px; transform: rotate(10deg); color: var(--ui-brand); font-size: 39px; }
.buyPicksMemberCardFront strong { font-size: 34px; line-height: 1.2; }
.buyPicksMemberCardFront em { align-self: flex-end; font-size: 25px; font-style: normal; }
.buyPicksHero h1 { margin: 12px 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; }
.buyPicksHero > p:last-child { max-width: 720px; margin: 0; color: var(--ui-on-brand); line-height: 1.6; }
.buyPicksCriteria, .buyPicksFootnote { margin: 22px 0; color: var(--ui-text-muted); line-height: 1.65; }
.buyPicksGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.buyPickCard { position: relative; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-surface); box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-shadow-color) 4.71%, transparent); }
.buyPickNumber { position: absolute; z-index: 1; top: 15px; left: 15px; padding: 7px 11px; border-radius: 999px; color: var(--ui-on-inverse); background: var(--ui-inverse); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.buyPickImage { height: 390px; overflow: hidden; background: var(--ui-brand-soft); }
.buyPickImage > img, .buyPickImage > .cardImageReview, .buyPickImage > .cardImageFallback { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.38); }
.buyPickImage .cardImageReview img, .buyPickImage .cardImageFallback img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.buyPickBody { padding: 22px; }
.buyPickBody > span { color: var(--ui-brand); font-size: 12px; font-weight: 800; }
.buyPickBody h2 { margin: 9px 0; color: var(--ui-text); font-size: 21px; line-height: 1.3; }
.buyPickBody p { color: var(--ui-text-muted); font-size: 14px; line-height: 1.5; }
.buyPickBody a, .buyPickGate a, .buyPickSource { display: inline-block; margin-top: 10px; padding: 11px 15px; border-radius: 11px; color: var(--ui-on-brand); background: var(--ui-brand-solid); font-weight: 800; text-decoration: none; }
.buyPicksBack { display: inline-block; margin-bottom: 22px; color: var(--ui-brand); font-weight: 750; text-decoration: none; }
.buyPickGate, .buyPickFacts, .buyPickAi { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-surface); }
.buyPickGate { margin-top: 22px; }
.buyPickGate > span { color: var(--ui-brand); font-size: 13px; font-weight: 800; }
.buyPickGate h2, .buyPickFacts h2, .buyPickAi h2 { margin: 10px 0 16px; color: var(--ui-text); font-size: 26px; }
.buyPickGate p, .buyPickAi p { color: var(--ui-text-muted); line-height: 1.7; }
.buyPickAnalysis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; }
.buyPickEvidenceColumn { display: grid; gap: 16px; min-width: 0; }
.buyPickAnalysis .buyPickFacts, .buyPickAnalysis .buyPickAi { min-width: 0; }
.buyPickAnalysis .buyPicksFootnote { grid-column: 1 / -1; margin: 0; }
.buyPickTrend { min-width: 0; padding: 22px; border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-surface); }
.buyPickTrend h2 { margin: 0 0 9px; color: var(--ui-text); font-size: 22px; }
.buyPickTrend p { color: var(--ui-text-muted); }
.buyPickTrend svg { display: block; width: 100%; height: 130px; margin-top: 12px; border-radius: 14px; background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface)); }
.buyPickTrendLabels { display: flex; justify-content: space-between; gap: 12px; color: var(--ui-text-muted); font-size: 12px; }
.buyPickTrendLabels strong { color: var(--ui-brand); }
.buyPickAnalysis .buyPickSource { margin-top: 8px; }
.buyPicksHeroDetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: center; gap: clamp(24px, 5vw, 70px); }
.buyPicksHeroCopy { min-width: 0; }
.buyPicksHeroCopy > p:last-child { max-width: 620px; margin: 0; color: var(--ui-on-brand); line-height: 1.6; }
.buyPickDetailImage { min-width: 0; height: 390px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-border) 18%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--ui-surface) 8%, transparent); }
.buyPickDetailImage > img, .buyPickDetailImage > .cardImageReview, .buyPickDetailImage > .cardImageFallback { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.38); }
.buyPickDetailImage .cardImageReview img, .buyPickDetailImage .cardImageFallback img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.buyPickFacts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.buyPickFacts dl > div { padding: 18px; border-radius: 13px; background: var(--ui-surface); }
.buyPickFacts dt { margin-bottom: 6px; color: var(--ui-text-muted); font-size: 13px; }
.buyPickFacts dd { margin: 0; font-size: 20px; font-weight: 800; }
.buyPickFacts > p, .buyPickAi small { color: var(--ui-text-muted); font-size: 13px; }
.buyPickAiPoint { padding: 17px 0; border-top: 1px solid var(--ui-border); }
.buyPickAi h3 { margin: 0 0 7px; color: var(--ui-text); font-size: 17px; }
.buyPickAiPoint p { margin: 0; }
.buyPickAi small { display: block; padding-top: 15px; border-top: 1px solid var(--ui-border); line-height: 1.5; }
.buyPickSource { margin-top: 22px; }
.buyPicksMarket { margin-top: 32px; }
.buyPicksMarketHead { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.buyPicksMarketHead span { color: var(--ui-brand); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.buyPicksMarketHead h2 { margin: 5px 0 0; color: var(--ui-text); font-size: clamp(25px, 3vw, 32px); }
.buyPicksMarketHead p { max-width: 600px; margin: 0; color: var(--ui-text-muted); font-size: 14px; line-height: 1.6; }
.buyPickBody h3 { margin: 9px 0; color: var(--ui-text); font-size: 21px; line-height: 1.3; }
@media (max-width: 850px) { .buyPicksGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .buyPicksHeroDetail { grid-template-columns: minmax(0, 1fr) 260px; } .buyPickAnalysis { grid-template-columns: 1fr; gap: 16px; } .buyPickEvidenceColumn, .buyPickAnalysis .buyPickAi { grid-column: 1; } }
@media (max-width: 850px) { .buyPicksMemberGate { grid-template-columns: 1fr; } .buyPicksMemberArt { display: none; } }
@media (max-width: 600px) { .buyPicksContainer { width: calc(100% - 28px); padding-top: 22px; } .buyPicksGrid, .buyPickFacts dl, .buyPicksHeroDetail { grid-template-columns: 1fr; } .buyPicksMarketHead { align-items: flex-start; flex-direction: column; gap: 8px; } .buyPicksHeroDetail { gap: 24px; } .buyPickDetailImage { height: 340px; } .homeBuyPicksBanner { align-items: flex-start; flex-direction: column; } }

.playContainer {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0 100px;
  color: var(--ui-text);
}

.playHero {
  padding: clamp(28px, 5vw, 52px);
  border-radius: 28px;
  color: var(--ui-on-brand);
  background: linear-gradient(120deg, var(--ui-brand-solid), var(--ui-inverse) 72%);
}

.playHero h1 { margin: 16px 0 12px; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; }
.playHero > p:last-child { max-width: 650px; margin: 0; color: var(--ui-on-brand); line-height: 1.65; }
.playGameTabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 34px; }
.playGameTabs a { padding: 11px 18px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-text); background: var(--ui-surface); font-weight: 700; text-decoration: none; }
.playGameTabs a[aria-current="page"] { border-color: var(--ui-brand); color: var(--ui-on-brand); background: var(--ui-brand-solid); }
.playFilters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: -12px 0 26px; }
.playFilters label { display: grid; gap: 6px; color: var(--ui-text-muted); font-size: 13px; font-weight: 700; }
.playFilters select { min-width: 160px; max-width: 260px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); font: inherit; }
.playFilters button { padding: 11px 17px; border: 0; border-radius: 10px; background: var(--ui-brand-solid); color: var(--ui-on-brand); font-weight: 700; cursor: pointer; }
.playResultsHeading { margin-bottom: 18px; }
.playResultsHeading h2 { margin: 0 0 5px; color: var(--ui-text); font-size: 26px; }
.playResultsHeading p { margin: 0; color: var(--ui-text-muted); }
.playListingGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.playListing { display: flex; flex-direction: column; min-height: 222px; padding: 22px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); }
.playListingTop { display: flex; justify-content: space-between; gap: 12px; color: var(--ui-text-muted); font-size: 13px; font-weight: 700; }
.playListing h3 { margin: 16px 0 8px; color: var(--ui-text); font-size: 20px; line-height: 1.35; }
.playListing p { margin: 0 0 6px; color: var(--ui-text-muted); }
.playListing .playDate { color: var(--ui-brand); font-weight: 700; }
.playListing a { align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--ui-brand); font-weight: 700; text-decoration: none; }
.playListing a:hover, .playSources a:hover { text-decoration: underline; }
.playEmpty { padding: 42px; border: 1px dashed var(--ui-border); border-radius: 18px; background: var(--ui-surface); }
.playEmpty h3 { margin: 0 0 8px; color: var(--ui-text); }
.playEmpty p { margin: 0; color: var(--ui-text-muted); line-height: 1.6; }
.playSources { margin-top: 42px; padding: 26px; border-radius: 18px; background: var(--ui-brand-soft); }
.playSources h2 { margin: 0 0 8px; color: var(--ui-text); font-size: 21px; }
.playSources p { margin: 0 0 18px; color: var(--ui-text-muted); line-height: 1.6; }
.playSources > div { display: flex; flex-wrap: wrap; gap: 10px; }
.playSources a { padding: 10px 14px; border-radius: 10px; color: var(--ui-brand); background: var(--ui-surface); font-weight: 700; text-decoration: none; }

@media (max-width: 850px) {
  .playListingGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .playContainer { width: min(100% - 28px, 1160px); padding-top: 22px; }
  .playHero { border-radius: 20px; }
  .playGameTabs { gap: 8px; margin: 22px 0 28px; }
  .playGameTabs a { padding: 9px 12px; font-size: 14px; }
  .playListingGrid { grid-template-columns: 1fr; }
  .playListing { min-height: 0; }
}

/* Card detail: one clear header for identity, actions and verified facts. */
.shopProductPage .shopProductHero {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  align-items: start;
  gap: 22px 32px;
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface-raised);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent);
}
.shopProductPage .shopProductHero .backLink {
  justify-self: start;
  color: var(--ui-text);
  font-weight: 700;
}
.shopProductPage .shopProductVisual {
  padding: 12px;
  border-color: var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface-raised);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-shadow-color) 10%, transparent);
}
.shopProductPage .shopProductVisual img { border-radius: 7px; }
.shopProductPage .shopProductIdentity { min-width: 0; }
.shopProductPage .shopProductIdentity .exchangeEyebrow {
  margin: 0 0 9px;
  color: var(--ui-brand);
  font-size: 11px;
  letter-spacing: .12em;
}
.shopProductPage .shopProductIdentity .kreamProductBadges { gap: 7px; }
.shopProductPage .shopProductIdentity .kreamProductBadges span {
  padding: 6px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 99px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font-size: 11px;
}
.shopProductPage .shopProductIdentity h1 {
  margin: 16px 0 20px;
  color: var(--ui-text);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.shopProductPage .cardDetailActionPanel {
  display: grid;
  gap: 0;
  padding: 6px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
}
.shopProductPage .cardDetailActionPanel .memberCardActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
}
.shopProductPage .cardDetailActionPanel .memberCardActions + .memberCardActions {
  border-top: 1px solid var(--ui-border);
}
.shopProductPage .cardDetailActionPanel .memberCardActions small {
  min-width: 98px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.shopProductPage .cardDetailActionPanel .memberCardActions a {
  min-height: 38px;
  padding: 9px 12px;
  border-color: var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 12px;
  text-decoration: none;
}
.shopProductPage .cardDetailActionPanel a:hover { filter: brightness(.95); }
.shopProductPage .cardDetailPurchase {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--ui-border);
}
.shopProductPage .cardDetailPurchase a {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--ui-inverse);
  font-size: 13px;
}
.shopProductPage .cardDetailPurchase small {
  color: var(--ui-text-muted);
  font-size: 11px;
}
.shopProductPage .cardDetailMeta { margin-top: 20px; }
.shopProductPage .cardDetailIdentifier {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 650;
}
.shopProductPage .cardDetailIdentityFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.shopProductPage .cardDetailIdentityFacts div {
  min-width: 0;
  padding: 11px 12px;
  border-color: var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}
.shopProductPage .cardDetailIdentityFacts dt { color: var(--ui-text-muted); font-size: 10px; }
.shopProductPage .cardDetailIdentityFacts dd {
  color: var(--ui-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.shopProductPage .shopProductIdentity .cardDetailComparisonNote {
  max-width: none;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--ui-brand);
  border-radius: 0 8px 8px 0;
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 850px) {
  .shopProductPage .shopProductHero { grid-template-columns: 1fr; padding: 20px; }
  .shopProductPage .shopProductVisual { width: min(100%, 300px); }
}
@media (max-width: 600px) {
  .shopProductPage .shopProductHero { width: calc(100% - 28px); gap: 18px; padding: 16px; border-radius: 18px; }
  .shopProductPage .shopProductVisual { width: min(100%, 250px); }
  .shopProductPage .shopProductIdentity h1 { font-size: clamp(25px, 7vw, 34px); }
  .shopProductPage .cardDetailActionPanel { padding: 6px 12px; }
  .shopProductPage .cardDetailActionPanel .memberCardActions small { width: 100%; }
  .shopProductPage .cardDetailPurchase { align-items: flex-start; }
  .shopProductPage .cardDetailIdentityFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Localized Korean-market card detail */
.intlCardDetailPage .intlContent { max-width: 1200px; margin-top: 24px; }
.intlCardDetailPage .intlCardHero {
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent);
}
.intlCardDetailPage .intlCardHeroGrid {
  display: grid;
  grid-template-columns: minmax(210px, 265px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 38px);
  margin-top: 22px;
}
.intlCardDetailPage .intlCardArtwork {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  background: var(--ui-surface-raised);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ui-shadow-color) 10%, transparent);
}
.intlCardDetailPage .intlDetailImage {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 7px;
}
.intlCardDetailPage .intlCardSummary { min-width: 0; }
.intlCardDetailPage .intlContent .intlCardEyebrow {
  margin: 2px 0 10px;
  color: var(--ui-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.intlCardDetailPage .intlCardSummary h1 {
  margin: 0;
  color: var(--ui-text);
  font-size: clamp(26px, 3vw, 39px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.intlCardDetailPage .intlContent .intlCardCode {
  margin: 10px 0 0;
  color: var(--ui-text-muted);
  font-size: 13px;
  font-weight: 700;
}
.intlCardDetailPage .intlCardActions {
  margin-top: 22px;
  padding: 4px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  background: var(--ui-surface);
}
.intlCardDetailPage .intlCardActions .memberCardActions { margin: 10px 0; }
.intlCardDetailPage .intlCardActions .memberCardActions a { border-radius: 9px; }
.intlCardDetailPage .intlPurchaseLink {
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
}
.intlCardDetailPage .intlPurchaseLink p { margin-top: 2px; font-size: 12px; }
.intlCardDetailPage .intlPurchaseLink a { font-size: 13px; }
.intlCardDetailPage .intlCardFacts { margin-top: 25px; }
.intlCardDetailPage .intlCardFacts h2 { color: var(--ui-text); font-size: 17px; }
.intlCardDetailPage .intlFacts {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
}
.intlCardDetailPage .intlFacts > div {
  padding: 11px 13px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
}
.intlCardDetailPage .intlFacts dt { color: var(--ui-text-muted); font-size: 11px; }
.intlCardDetailPage .intlFacts dd { margin-top: 4px; color: var(--ui-text); font-size: 13px; }
.intlCardDetailPage .intlCardFacts > p { margin: 12px 0 0; font-size: 12px; }
.intlCardDetailPage .intlCardHero .intlNotice {
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 0;
  border-left: 3px solid var(--ui-brand);
  border-radius: 0 8px 8px 0;
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-size: 12px;
}
.intlCardDetailPage .intlContent > section {
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.intlCardDetailPage .intlContent > section h2 { color: var(--ui-text); }
.intlCardDetailPage .intlTable th { background: var(--ui-surface-raised); color: var(--ui-text); }
.intlCardDetailPage .intlTable td { color: var(--ui-text); }
@media (max-width: 760px) {
  .intlCardDetailPage .intlCardHeroGrid { grid-template-columns: 1fr; }
  .intlCardDetailPage .intlCardArtwork { width: min(100%, 265px); margin-inline: auto; }
}
@media (max-width: 500px) {
  .intlCardDetailPage .intlContent { width: calc(100% - 28px); }
  .intlCardDetailPage .intlCardHero { padding: 16px; border-radius: 18px; }
  .intlCardDetailPage .intlCardSummary h1 { font-size: 26px; }
  .intlCardDetailPage .intlCardActions { padding-inline: 12px; }
  .intlCardDetailPage .intlPurchaseLink { align-items: flex-start; }
  .intlCardDetailPage .intlFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep light account and operations surfaces readable within the dark site shell. */
main.exchangeShell.adminPage {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.exchangeShell.adminPage :is(h1, h2, h3),
.exchangeShell.accountPage .accountCardRequests h2 {
  color: var(--ui-text);
}
.exchangeShell.adminPage .adminHeading > div > p:last-child,
.exchangeShell.adminPage .adminFootnote { color: var(--ui-text-muted); }
.exchangeShell.adminPage .adminTabs { margin-top: 12px; }
.exchangeShell.adminPage .adminTabs a { color: var(--ui-text); }
.exchangeShell.adminPage .adminTabs a[aria-current="page"] { color: var(--ui-on-brand); }
.exchangeShell.adminPage .adminFilters { color: var(--ui-text); }
.exchangeShell.adminPage .adminStatus span {
  border-color: var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.exchangeShell.adminPage .adminMetrics article,
.exchangeShell.adminPage .adminSection {
  border-color: var(--ui-border);
  border-radius: 15px;
  color: var(--ui-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
}
.exchangeShell.adminPage .adminMetrics h2 { margin-bottom: 12px; }
.exchangeShell.adminPage .adminMetrics strong { color: var(--ui-text); }
.exchangeShell.adminPage .adminTable { border: 1px solid var(--ui-border); border-radius: 10px; }
.exchangeShell.adminPage .adminTable :is(th, td, caption) { color: var(--ui-text); }
.exchangeShell.adminPage .adminTable th { background: var(--ui-surface-raised); }
.exchangeShell.adminPage .adminTable tbody tr:hover { background: var(--ui-surface); }
.exchangeShell.adminPage .adminSection h3 { padding-top: 8px; }
/* Let the traffic dashboard use the available viewport instead of the 1200px admin cap. */
.exchangeShell.adminTrafficPage > :is(.adminHeading, .adminTabs, .adminFilters, .adminStatus, .adminMetrics, .adminSection, .adminFootnote) {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: none;
}
@media (min-width: 768px) {
  .exchangeShell.adminTrafficPage > :is(.adminHeading, .adminTabs, .adminFilters, .adminStatus, .adminMetrics, .adminSection, .adminFootnote) {
    width: calc(100% - 48px);
  }
}
.exchangeShell.adminTrafficPage .adminSection .adminSection {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}
.exchangeShell.accountPage .accountCardRequests {
  color: var(--ui-text);
}
.exchangeShell.accountPage .accountCardRequests > p { color: var(--ui-text-muted); }

/* Data update status: a readable dashboard with current progress first. */
main.intlRefreshPage { background: var(--ui-surface-raised); color: var(--ui-text); }
.intlRefreshPage .intlContent { max-width: 1080px; margin-block: 36px 72px; }
.intlRefreshPage .intlHero { margin-bottom: 24px; }
.intlRefreshPage .intlHero h1,
.intlRefreshPage .intlContent :is(h2, h3) { color: var(--ui-text); }
.intlRefreshPage .intlContent p { color: var(--ui-text-muted); }
.refreshDashboard { display: grid; gap: 24px; }
.refreshOverview,
.refreshStep,
.refreshCoverage,
.refreshHistory {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
}
.refreshOverview > h2 { margin-top: 24px; }
.refreshOverview form fieldset { margin-bottom: 8px !important; }
.refreshOverview input,
.refreshOverview button {
  min-height: 42px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
}
.refreshOverview button { background: var(--ui-inverse); color: var(--ui-on-inverse); font-weight: 700; cursor: pointer; }
.refreshDashboard > section { margin: 0; }
.refreshDashboard > section:not(.refreshOverview, .refreshStepsIntro) {
  color: var(--ui-text);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
}
.refreshStepsIntro { margin: 4px 0 -8px; }
.refreshStepsIntro h2 { margin-bottom: 8px; }
.refreshStepsIntro p { margin: 0; }
.refreshStepGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.refreshStep h3 { margin-top: 0; }
.refreshStep .intlFacts { border-radius: 10px; overflow: hidden; }
.refreshStep .intlFacts > div { background: var(--ui-surface); }
.refreshCoverage .intlTable { border: 1px solid var(--ui-border); }
.refreshCoverage .intlTable th { background: var(--ui-surface-raised); color: var(--ui-text); }
.refreshCoverage .intlTable td { color: var(--ui-text); }
.refreshCountNote { margin: 0; padding-inline: 4px; }
.refreshHistory summary { color: var(--ui-text); font-weight: 700; cursor: pointer; }
.refreshHistory > section { box-shadow: none; }
.globalPartnerFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(24px, 4vw, 36px) max(24px, calc((100% - 1200px) / 2));
  border: 0;
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
  font-size: 15px;
}
.globalPartnerFooter span { display: block; color: var(--ui-brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.globalPartnerFooter strong { display: block; margin: 8px 0; font-size: clamp(20px, 2vw, 26px); }
.globalPartnerFooter p { margin: 0; color: var(--ui-on-brand); line-height: 1.6; }
.globalPartnerLinks { display: flex; flex-wrap: wrap; gap: 10px; }
.globalPartnerFooter a {
  flex-shrink: 0;
  padding: 13px 18px;
  border-radius: 9px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-weight: 800;
  text-decoration: none;
}
.intlRefreshPage footer { color: var(--ui-text-muted); border-top-color: var(--ui-border); }
.intlRefreshPage footer a { color: var(--ui-text); }
@media (max-width: 700px) {
  .intlRefreshPage .intlContent { width: calc(100% - 28px); margin-top: 24px; }
  .refreshStepGrid { grid-template-columns: 1fr; }
  .globalPartnerFooter { align-items: stretch; flex-direction: column; }
  .globalPartnerFooter a { text-align: center; }
}

/* Methodology guides share a readable editorial surface in both languages. */
main.methodologyPage,
main.intlMethodologyPage { background: var(--ui-surface-raised); color: var(--ui-text); }
.methodologyPage .methodologyContent,
.intlMethodologyPage .intlContent { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
.methodologyPage .methodologyHero { gap: 32px; align-items: center; }
.methodologyPage .methodologyHero h1,
.methodologyPage .methodologySectionHeading h2,
.methodologyPage .methodologyCard h3,
.methodologyPage .methodologyDefinition h3,
.methodologyPage .methodologyStateList h3,
.intlMethodologyPage .intlContent :is(h1, h2) { color: var(--ui-text); }
.methodologyPage .methodologyHero > p,
.methodologyPage .methodologyCurrentState p,
.methodologyPage .methodologyDefinition p,
.methodologyPage .methodologyCard p,
.methodologyPage .methodologyStateList p,
.methodologyPage .methodologyRights > div > p,
.intlMethodologyPage .intlContent p { color: var(--ui-text-muted); }
.methodologyPage .methodologyCurrentState,
.methodologyPage .methodologyCard,
.methodologyPage .methodologyDefinition,
.methodologyPage .methodologyStateList article { border-radius: 14px; }
.methodologyPage .methodologySection { padding-block: 56px; }
.methodologyPage .methodologyDisclaimer { border-radius: 16px; }
.methodologyPage .methodologyDisclaimer p { color: var(--ui-on-brand); }
.intlMethodologyPage .intlContent { margin-block: 42px 72px; }
.intlMethodologyPage .intlHero { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ui-border); }
.intlMethodologyPage .intlHero h1 { font-size: clamp(34px, 4vw, 52px); }
.intlMethodologyPage .intlHero p { max-width: 720px; margin: 0; font-size: 16px; }
.intlMethodologySections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.intlMethodologySection { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; min-width: 0; padding: 28px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: 0 8px 28px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent); }
.intlMethodologyNumber { color: var(--ui-brand); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.intlMethodologySection h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.3; }
.intlMethodologySection p { margin: 0; font-size: 15px; line-height: 1.75; }
@media (max-width: 760px) {
  .methodologyPage .methodologyContent,
  .intlMethodologyPage .intlContent { width: calc(100% - 28px); }
  .methodologyPage .methodologyHero { gap: 16px; }
  .methodologyPage .methodologySection { padding-block: 40px; }
  .intlMethodologySections { grid-template-columns: 1fr; }
  .intlMethodologySection { padding: 22px; }
}

/* Clearly separate affiliate shopping links from individual-card market prices. */
.coupangAffiliate {
  width: min(1200px, calc(100% - 48px));
  box-sizing: border-box;
  margin: 40px auto;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.shopProductPage > .coupangAffiliate { width: min(var(--desktop-page-width, 1180px), calc(100% - 64px)); }
.intlContent > .coupangAffiliate { width: 100%; }
.coupangAffiliateIntro { margin-bottom: 20px; }
.coupangAffiliateEyebrow { color: var(--ui-brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.exchangeShell .coupangAffiliate h2 { margin: 8px 0; color: var(--ui-text); font-size: clamp(23px, 2.6vw, 30px); }
.exchangeShell .coupangAffiliate p { color: var(--ui-text-muted); }
.coupangAffiliateIntro p { margin: 0; line-height: 1.6; }
.coupangAffiliateGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.coupangAffiliateItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.coupangAffiliateItem:hover { border-color: var(--ui-brand); transform: translateY(-2px); }
.coupangAffiliateItem:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.coupangAffiliateKind { margin-bottom: 10px; color: var(--ui-brand); font-size: 12px; font-weight: 800; }
.coupangAffiliateItem strong { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.coupangAffiliateAction { margin-top: auto; padding-top: 18px; color: var(--ui-text); font-size: 14px; font-weight: 800; }
.exchangeShell .coupangAffiliateDisclosure { margin: 20px 0 0; color: var(--ui-text-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 700px) {
  .coupangAffiliate { width: calc(100% - 28px); margin-block: 28px; }
  .coupangAffiliateGrid { grid-template-columns: 1fr; }
}

/* Game price landing pages: clear hierarchy and readable text on each surface. */
.exchangeShell.priceLandingPage { background: var(--ui-surface-raised); color: var(--ui-text); }
.priceLandingPage .marketProductsSection,
.priceLandingPage .priceLandingGameNav,
.priceLandingPage .marketAccuracyNotice,
.priceLandingPage .coupangAffiliate { width: min(1160px, calc(100% - 48px)); box-sizing: border-box; }
.exchangeShell.priceLandingPage .searchHero {
  width: min(1160px, calc(100% - 48px));
  box-sizing: border-box;
  align-items: flex-end;
  gap: 28px;
  margin: 32px auto 28px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 22px;
  background: linear-gradient(125deg, var(--ui-inverse), var(--ui-inverse));
}
.exchangeShell.priceLandingPage .searchHero h1 { color: var(--ui-on-brand); font-size: clamp(30px, 4vw, 48px); line-height: 1.22; word-break: keep-all; }
.exchangeShell.priceLandingPage .searchHero > p { color: var(--ui-on-brand); line-height: 1.7; }
.exchangeShell.priceLandingPage .searchHero .exchangeEyebrow { color: var(--ui-brand); }
.priceLandingPage .gameBrowseLanding { margin-bottom: 22px; }
.exchangeShell.priceLandingPage .gameBrowseSuggestions h2 { color: var(--ui-text); }
.priceLandingPage .priceLandingGameNav { margin-bottom: 14px; }
.priceLandingPage .priceLandingGameNav a { border-radius: 9px; }
.priceLandingPage .priceLandingSetNav {
  gap: 9px;
  margin-bottom: 26px;
  padding: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
}
.priceLandingNavLabel { flex-basis: 100%; margin-bottom: 4px; color: var(--ui-text); font-size: 14px; font-weight: 800; }
.priceLandingPage .priceLandingSetNav a { border-radius: 7px; background: var(--ui-surface); }
.priceLandingPage .marketAccuracyNotice { margin-bottom: 34px; border-radius: 12px; }
.priceLandingPage .marketProductsSection { margin-bottom: 50px; }
.priceLandingPage .marketSectionHeading { align-items: flex-end; margin-bottom: 20px; }
.exchangeShell.priceLandingPage .marketSectionHeading h2,
.exchangeShell.priceLandingPage .marketProductsSection > h2 { color: var(--ui-text); }
.exchangeShell.priceLandingPage .marketSectionHeading p:last-child,
.exchangeShell.priceLandingPage .marketProductsSection > p { color: var(--ui-text-muted); }
.priceLandingPage .marketSectionHeading > a { color: var(--ui-text); }
.priceLandingPage .priceGuideSteps li { border-radius: 12px; background: var(--ui-surface); }
.priceLandingPage .cardGuideGrid { margin-bottom: 32px; }
.exchangeShell.priceLandingPage > footer { color: var(--ui-text-muted); border-top-color: var(--ui-border); }
.exchangeShell.priceLandingPage > footer a { color: var(--ui-text); }
@media (max-width: 700px) {
  .priceLandingPage .marketProductsSection,
  .priceLandingPage .priceLandingGameNav,
  .priceLandingPage .marketAccuracyNotice,
  .priceLandingPage .coupangAffiliate,
  .exchangeShell.priceLandingPage .searchHero { width: calc(100% - 28px); }
  .exchangeShell.priceLandingPage .searchHero { display: block; margin-top: 14px; padding: 26px 22px; }
  .exchangeShell.priceLandingPage .searchHero > p { margin: 16px 0 0; }
  .priceLandingPage .priceLandingSetNav { padding: 16px; }
  .priceLandingPage .marketProductsSection { margin-bottom: 36px; }
}

/* Magazine articles use a calm reading surface with clear source and action areas. */
.exchangeShell.magazineArticlePage { background: var(--ui-surface-raised); color: var(--ui-text); }
.magazineArticlePage .magazineContainer { width: min(920px, calc(100% - 48px)); padding-top: 34px; }
.magazineArticlePage .cardGuideArticle {
  box-sizing: border-box;
  margin-bottom: 42px;
  padding: clamp(24px, 5vw, 58px);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: 0 12px 38px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
}
.magazineArticlePage .cardGuideHeading { margin-bottom: 34px; padding-bottom: 28px; border-bottom-color: var(--ui-border); }
.exchangeShell.magazineArticlePage .cardGuideHeading h1 { max-width: 22ch; margin-bottom: 18px; color: var(--ui-text); font-size: clamp(30px, 4vw, 46px); line-height: 1.3; overflow-wrap: anywhere; }
.exchangeShell.magazineArticlePage .cardGuideHeading > p:not(.magazineEyebrow) { max-width: 68ch; color: var(--ui-text); line-height: 1.8; }
.magazineArticlePage .magazineBackLink { margin-bottom: 26px; color: var(--ui-text); font-weight: 700; }
.magazineArticlePage .cardGuideHeading small { color: var(--ui-text-muted); }
.magazineArticlePage .magazineArticleCover { max-width: 620px; margin-bottom: 42px; }
.magazineArticlePage .magazineArticleCover img { border: 1px solid var(--ui-border); border-radius: 14px; }
.magazineArticlePage .magazineArticleCover figcaption { color: var(--ui-text-muted); }
.magazineArticlePage .cardGuideArticle section { margin: 36px 0; }
.exchangeShell.magazineArticlePage .cardGuideArticle section > h2 { color: var(--ui-text); line-height: 1.4; }
.exchangeShell.magazineArticlePage .cardGuideArticle section > p { max-width: 70ch; color: var(--ui-text); line-height: 1.9; }
.magazineArticlePage .magazineArticleSources { padding: 24px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); }
.magazineArticlePage .magazineArticleSources ul { margin-bottom: 0; }
.magazineArticlePage .magazineArticleSources a { color: var(--ui-text); }
.magazineArticlePage .cardGuideChecklist { border-radius: 14px; background: var(--ui-surface-raised); color: var(--ui-text); }
.magazineArticlePage .cardGuideActions a { border-radius: 9px; font-weight: 750; }
.magazineArticlePage .cardGuideFootnote { color: var(--ui-text-muted); line-height: 1.7; }
.exchangeShell.magazineArticlePage .marketSectionHeading h2 { color: var(--ui-text); }
.exchangeShell.magazineArticlePage > .magazineContainer > footer { color: var(--ui-text-muted); }
.magazineArticlePage .magazineContainer > footer a { color: var(--ui-text); }
@media (max-width: 700px) {
  .magazineArticlePage .magazineContainer { width: calc(100% - 28px); padding-top: 18px; }
  .magazineArticlePage .cardGuideArticle { padding: 24px 20px; border-radius: 16px; }
  .magazineArticlePage .cardGuideHeading { margin-bottom: 26px; }
  .magazineArticlePage .magazineArticleCover { margin-bottom: 30px; }
  .magazineArticlePage .magazineArticleSources { padding: 18px; }
}

/* Clearly labelled Coupang placements for discovery, rankings and magazine pages. */
.coupangGameLinks {
  width: min(1200px, calc(100% - 48px));
  box-sizing: border-box;
  margin: 28px auto 34px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.trendingPage > .coupangGameLinks { width: min(var(--desktop-page-width, 1280px), calc(100% - 64px)); }
.marketExplorer .coupangGameLinks { width: 100%; }
.exchangeShell .coupangGameLinks h2 { margin: 8px 0; color: var(--ui-text); font-size: clamp(21px, 2.5vw, 27px); }
.exchangeShell .coupangGameLinks p { margin: 0; color: var(--ui-text-muted); line-height: 1.6; }
.coupangGameLinksGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.coupangGameLinksGroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); }
.coupangGameLinksGroup > strong { color: var(--ui-text); font-size: 16px; }
.coupangGameLinksGroup a { color: var(--ui-text); font-size: 13px; line-height: 1.55; text-decoration: none; overflow-wrap: anywhere; }
.coupangGameLinksGroup a:hover { text-decoration: underline; }
.coupangAffiliateProductNote { display: block; margin-top: 10px; color: var(--ui-brand); font-size: 12px; line-height: 1.55; }
.coupangGameLinksGroup a:focus-visible,
.coupangCategoryBanner a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.exchangeShell .coupangGameLinks .coupangAffiliateDisclosure { margin-top: 18px; font-size: 12px; }
.marketExplorer .coupangAffiliate { width: 100%; margin: 28px 0 34px; }
.coupangCategoryBanner { display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; margin: 30px auto; padding: 20px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: var(--ui-text); }
.coupangCategoryBanner > a { display: block; width: min(960px, 100%); }
.coupangCategoryBanner img { display: block; width: 100%; height: auto; aspect-ratio: 728 / 90; object-fit: contain; }
.exchangeShell .coupangCategoryBanner .coupangAffiliateDisclosure { margin: 2px 0 0; color: var(--ui-text-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.magazinePage .coupangCategoryBanner { margin: 28px 0 44px; }
.marketHome > .homeSearchBanner { width: min(var(--desktop-page-width, 1280px), calc(100% - 64px)); margin: 20px auto 0; }
@media (max-width: 980px) { .marketHome > .homeSearchBanner { width: calc(100% - 32px); } }
@media (max-width: 1100px) { .coupangGameLinksGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .trendingPage > .coupangGameLinks,
  .shopProductPage > .coupangAffiliate { width: calc(100% - 32px); }
  .coupangGameLinksGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .coupangGameLinks { width: calc(100% - 28px); padding: 20px; }
  .coupangCategoryBanner { padding: 14px; }
  .magazinePage .coupangCategoryBanner { margin-bottom: 30px; }
}
@media (max-width: 520px) { .coupangGameLinksGrid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .shopProductPage > .coupangAffiliate { width: calc(100% - 28px); } }
.magazineArticlePage .cardGuideArticle .coupangAffiliate,
.magazineArticlePage .cardGuideArticle .coupangGameLinks { width: 100%; margin: 30px 0 40px; }
.magazineArticlePage .magazineContainer > .coupangCategoryBanner { margin: 0 0 42px; }
.shopProductPage .cardDetailBanner { width: min(var(--desktop-page-width, 1180px), calc(100% - 64px)); margin: 26px auto 34px; }

.saleProfitCalculator {
  width: min(var(--desktop-page-width, 1180px), calc(100% - 64px));
  margin: 26px auto 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-shadow-color) 6%, transparent);
}
.saleProfitHeading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.saleProfitHeading h2 { margin: 8px 0 6px; color: var(--ui-text); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.2; }
.saleProfitHeading p:last-child { margin: 0; color: var(--ui-text-muted); font-size: 14px; line-height: 1.6; }
.saleProfitReference { display: grid; gap: 3px; flex: none; padding: 9px 14px; border: 1px solid var(--ui-border); border-radius: 12px; color: var(--ui-text-muted); background: var(--ui-surface); font-size: 12px; }
.saleProfitReference strong { color: var(--ui-text); font-size: 17px; }
.saleProfitFields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 25px; }
.saleProfitFields label { display: grid; grid-template-columns: 1fr auto; gap: 9px; min-width: 0; color: var(--ui-text); font-size: 13px; font-weight: 700; }
.saleProfitFields label span { color: var(--ui-text-muted); font-size: 11px; }
.saleProfitFields input { grid-column: 1 / -1; width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--ui-border); border-radius: 10px; color: var(--ui-text); background: var(--ui-surface); font: inherit; font-size: 15px; }
.saleProfitFields input:focus { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.saleProfitResult { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.saleProfitResult div { display: grid; gap: 5px; min-width: 0; padding: 16px 19px; border-radius: 13px; color: var(--ui-text-muted); background: var(--ui-surface-raised); font-size: 12px; }
.saleProfitResult div:last-child { background: var(--ui-brand-soft); }
.saleProfitResult strong { overflow-wrap: anywhere; color: var(--ui-text); font-size: clamp(18px, 2.1vw, 25px); }
.saleProfitResult .isLoss { color: var(--ui-danger); }
.saleProfitNote { margin: 15px 0 0; color: var(--ui-text-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) {
  .saleProfitCalculator { width: calc(100% - 28px); margin-top: 20px; padding: 20px; }
  .saleProfitHeading { align-items: flex-start; flex-direction: column; }
  .saleProfitFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .saleProfitFields { grid-template-columns: 1fr; }
  .saleProfitResult { grid-template-columns: 1fr; }
}
.cardDetailSnapshot { margin: 18px 0 2px; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface-raised); color: var(--ui-text); }
.cardDetailSnapshot > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.cardDetailSnapshot ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cardDetailSnapshot li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; min-width: 210px; padding: 9px 12px; border-radius: 9px; background: var(--ui-surface); }
.cardDetailSnapshot li span { font-size: 12px; font-weight: 700; }
.cardDetailSnapshot li b { font-size: 17px; }
.cardDetailSnapshot li time { color: var(--ui-text-muted); font-size: 11px; }
.cardDetailSnapshot small { display: block; margin-top: 10px; color: var(--ui-text-muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 700px) {
  .shopProductPage .cardDetailBanner { width: calc(100% - 28px); margin-block: 20px 28px; }
}
/* Card identification keeps the search, edition hints and next action together. */
.cardSearchInput{position:relative;display:block;min-width:0;width:100%}
.cardSearchSuggestions{position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;display:grid;gap:4px;padding:12px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:16px;box-shadow:0 12px 32px color-mix(in srgb, var(--ui-shadow-color) 14.9%, transparent);max-height:420px;overflow:auto}
.cardSearchSuggestions>a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:inherit;text-decoration:none}
.cardSearchSuggestions>a:hover,.cardSearchSuggestions>a:focus-visible{background:var(--ui-brand-soft)}
.cardSearchSuggestions img{object-fit:contain;flex:none}
.cardSearchSuggestions strong,.cardSearchSuggestions small{display:block;white-space:normal}
.searchAnswer{margin:24px 0 32px;padding:24px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:20px}
.searchAnswerHeading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.searchAnswer h2{font-size:clamp(20px,3vw,28px);margin:6px 0 10px;color:var(--ui-text)}
.searchAnswer p{color:var(--ui-text-muted);line-height:1.7;margin:12px 0}
.searchAnswer a{color:var(--ui-brand);font-weight:700}
.searchAnswerFacts{display:flex;gap:10px;flex-wrap:wrap}
.searchAnswerFacts>span{padding:7px 12px;background:var(--ui-brand-soft);border-radius:8px;font-size:13px}
.searchCatalog{margin-top:20px;border-top:1px solid var(--ui-border);padding-top:18px}
.searchCatalog summary{cursor:pointer;font-weight:700}
.searchCatalogGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.searchCatalogGrid article{padding:20px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;display:flex;flex-direction:column;gap:8px}
.searchCatalogGrid h3{margin:0;font-size:19px;color:var(--ui-text)}
.searchCatalogGrid strong{font-size:13px;color:var(--ui-text)}
.searchCatalogGrid a{margin-top:auto;padding-top:8px}
@media(max-width:600px){.searchAnswer{padding:18px}.searchCatalogGrid{grid-template-columns:1fr}.cardSearchSuggestions{position:relative;top:auto;margin-top:8px}.searchAnswerHeading{align-items:flex-start}}

/* Card price answers: clear reading width and independent market evidence. */
.cardAnswerBreadcrumb{margin:20px 0;color:var(--ui-text-muted);font-size:.9rem}
.cardAnswerHero{padding:clamp(24px,4vw,48px);border:1px solid var(--ui-border);border-radius:24px;background:linear-gradient(135deg,var(--ui-surface),var(--ui-surface));color:var(--ui-text);margin:24px 0 40px}
.cardAnswerHero h1{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.3;margin:12px 0 20px;letter-spacing:-.035em}
.cardAnswerHero>p{max-width:850px;line-height:1.8;color:var(--ui-text-muted)}
.cardAnswerSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}
.cardAnswerSummary>div{display:flex;flex-direction:column;gap:10px;background:var(--ui-surface);border:1px solid var(--ui-border);padding:20px;border-radius:14px;line-height:1.55}
.cardAnswerSummary span{font-size:.94rem;color:var(--ui-text-muted)}
.cardAnswerHero .cardAnswerCaveat{font-size:.88rem;margin-bottom:0}
.cardAnswerPage>.marketProductsSection{margin:36px 0;padding:clamp(20px,3vw,32px);border-radius:20px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border)}
.riftDailyBrief{box-sizing:border-box;width:min(1160px,calc(100% - 48px));margin:28px auto 36px;padding:clamp(22px,3vw,36px);border:1px solid var(--ui-border);border-radius:24px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 14px 36px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent)}
.intlContent .riftDailyBrief{width:100%;margin:0 0 36px}
.riftDailyHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:24px}.riftDailyHeading h2{margin:8px 0 6px;font-size:clamp(25px,2.5vw,35px);letter-spacing:-.04em;color:var(--ui-text)}.riftDailyHeading p:last-child{margin:0;color:var(--ui-text-muted);line-height:1.6}.riftDailyHeading>a{flex:none;border-radius:12px;background:var(--ui-brand-solid);color:var(--ui-on-brand);padding:12px 17px;font-weight:700;text-decoration:none}.riftDailyGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.riftDailyPanel{min-width:0;display:flex;flex-direction:column;padding:22px;border:1px solid var(--ui-border);border-radius:17px;background:var(--ui-surface)}.riftDailyPanelHead{display:flex;flex-direction:column;gap:5px}.riftDailyPanelHead span{font-size:11px;letter-spacing:.1em;font-weight:800;color:var(--ui-brand)}.riftDailyPanelHead strong{font-size:20px;color:var(--ui-text)}.riftDailyNote{margin:8px 0 14px;font-size:13px;color:var(--ui-text-muted);line-height:1.5}.riftDailyPanel ul{list-style:none;padding:0;margin:0}.riftDailyPanel li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--ui-border);min-width:0}.riftDailyPanel li a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text);font-weight:700;text-decoration:none}.riftDailyPanel li a:hover{text-decoration:underline}.riftDailyPanel li span{flex:none;font-size:13px;font-weight:700;white-space:nowrap}.riftDailyUp{color:var(--ui-brand)}.riftDailyDown{color:var(--ui-negative)}.riftDailyPanel small{display:block;margin-top:auto;padding-top:15px;color:var(--ui-text-muted)}.riftDailyEmpty{padding:12px 0;color:var(--ui-text-muted)}.riftDailyGallery{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;color:var(--ui-text-muted);font-size:13px}.riftDailyGallery a{color:var(--ui-text);font-weight:700;text-decoration:none}
.homeRiftDailyLink{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding:20px 24px;border:1px solid var(--ui-border);border-radius:17px;background:linear-gradient(110deg,var(--ui-surface-raised),var(--ui-surface-raised));color:var(--ui-text);text-decoration:none}.homeRiftDailyLink span{display:flex;flex-direction:column;gap:4px}.homeRiftDailyLink small{color:var(--ui-brand);font-size:11px;font-weight:800;letter-spacing:.12em}.homeRiftDailyLink strong{font-size:clamp(19px,2vw,26px)}.homeRiftDailyLink em{font-size:13px;font-style:normal;color:var(--ui-text-muted)}.homeRiftDailyLink b{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--ui-inverse);color:var(--ui-on-inverse);font-size:21px}
@media(max-width:900px){.riftDailyGrid{grid-template-columns:1fr}.riftDailyPanel{padding:19px}.riftDailyHeading{align-items:flex-start;flex-direction:column}.riftDailyBrief{width:calc(100% - 28px);margin:18px auto 30px;padding:20px}.intlContent .riftDailyBrief{width:100%}}
.cardAnswerPage .marketProductsSection>p{line-height:1.75;color:var(--ui-text-muted);margin-bottom:24px}
.cardAnswerSource{font-size:.82rem;color:var(--ui-text-muted);line-height:1.6;padding:10px 4px;margin:0}
.cardAnswerSource a{text-decoration:underline;text-underline-offset:3px}
.cardAnswerCatalog{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cardAnswerCatalog li{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--ui-surface);border-radius:12px;line-height:1.5}
.cardAnswerCatalog span{color:var(--ui-text-muted);font-size:.9rem}
.cardAnswerHelp{margin:40px 0;padding:32px;border-radius:20px;background:var(--ui-inverse);color:var(--ui-on-inverse)}
.cardAnswerHelp p{color:var(--ui-on-brand);line-height:1.8;max-width:800px}
.cardAnswerHelp a{display:inline-block;background:var(--ui-surface);color:var(--ui-text);border-radius:10px;padding:12px 18px;font-weight:700;margin-top:12px}
.cardAnswerLinks .priceLandingGameNav{justify-content:flex-start;gap:10px;margin-top:20px}
@media(max-width:700px){.cardAnswerSummary,.cardAnswerCatalog{grid-template-columns:1fr}.cardAnswerHero{margin-top:16px}.cardAnswerPage .marketSectionHeading{align-items:flex-start;gap:12px;flex-direction:column}.cardAnswerHelp{padding:24px}.cardAnswerPage>.marketProductsSection{margin:24px 0}}
.exchangeShell.cardAnswerPage .cardAnswerHero h1{color:var(--ui-text)}
.cardAnswerPage>section,.cardAnswerPage>.cardAnswerBreadcrumb{width:calc(100% - 40px);max-width:1200px;margin-left:auto;margin-right:auto;box-sizing:border-box}
@media(max-width:700px){.cardAnswerPage>section,.cardAnswerPage>.cardAnswerBreadcrumb{width:calc(100% - 24px)}}

.coupangCategoryBanner > .shopVisitLink { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; box-sizing: border-box; padding: 12px 20px; border-radius: 10px; background: var(--ui-brand-solid); color: var(--ui-on-brand); font-weight: 700; text-decoration: none; }

/* Home market panels share the warm surface palette and readable price sizing. */
.exchangeShell .hallOfFameSection > h2 { color: var(--ui-text); }
.exchangeShell .hallOfFameSection > p { color: var(--ui-text-muted); }
.homeChangesTable { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--ui-surface); color: var(--ui-text); }
.homeChangesTable thead th { padding: 14px 16px; background: var(--ui-brand-soft); color: var(--ui-text-muted); font-weight: 700; }
.homeChangesTable tbody :is(td, th) { padding: 16px; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.homeChangesTable tbody tr:hover { background: var(--ui-brand-soft); }
.homeChangesTable .homeChangeCard { color: var(--ui-text); text-decoration: none; }
.homeChangesTable .homeChangeCard > span { min-width: 0; max-width: 340px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.homeChangesTable .homeChangeCard img { flex: 0 0 42px; }
.homeChangesTable .homeCurrentPrice { min-width: 145px; }
.homeChangesTable .homeCurrentPrice strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.homeChangesTable .homeCurrentPrice .previousPrice { display: block; margin: 0 0 5px; font-size: 12px; color: var(--ui-text-muted); }
.homeChangesTable .homePriceChange { max-width: 190px; white-space: normal; line-height: 1.5; }
.homeChangesTable small { color: var(--ui-text-muted); }
[data-home-section="changes"] .overviewTableScroll { max-width: 100%; margin-top: 20px; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 14px; }
.marketProductCard, .marketProductCardLink, .kreamProductBody, .kreamPriceSummary { min-width: 0; }
/* Search keeps light cards readable against the blue site background. */
.exchangeShell.searchPage .searchHero h1,
.exchangeShell.searchPage .resultsHeading h2 { color: var(--ui-on-brand); }
.exchangeShell.searchPage .searchHero > p,
.exchangeShell.searchPage .resultsHeading > span { color: var(--ui-text-muted); }
.exchangeShell.searchPage .searchResults { margin-top: 32px; padding-bottom: 40px; }
.exchangeShell.searchPage .resultsHeading { align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-color: var(--ui-border-strong); }
.exchangeShell.searchPage .searchRequestCallout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 24px; padding: 20px 24px; background: var(--ui-brand-soft); border-color: var(--ui-border); border-radius: 12px; }
.exchangeShell.searchPage .searchRequestCallout strong { color: var(--ui-text); font-size: 17px; }
.exchangeShell.searchPage .searchRequestCallout p { margin: 0; color: var(--ui-text-muted); font-size: 14px; }
.exchangeShell.searchPage .searchRequestCallout a { flex-shrink: 0; text-decoration: none; }
.exchangeShell.searchPage .searchKreamGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 24px; align-items: start; }
.exchangeShell.searchPage .searchKreamGrid .marketProductCard { max-width: 760px; width: 100%; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 14px; }
.exchangeShell.searchPage .searchPanel { border-radius: 14px; }
@media (max-width: 600px) {
  .exchangeShell.searchPage .searchRequestCallout { align-items: flex-start; flex-direction: column; padding: 18px; gap: 14px; }
  .exchangeShell.searchPage .resultsHeading { align-items: flex-start; }
  .exchangeShell.searchPage .resultsHeading h2 { font-size: 22px; }
  .exchangeShell.searchPage .resultsHeading > span { font-size: 12px; white-space: nowrap; }
}
.kreamPriceSummary { grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.kreamPriceSummary > *, .kreamPriceSummary .previousPrice { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.exchangeShell .marketProductCard .kreamPriceSummary strong { font-size: clamp(13px, 10cqi, 19px); line-height: 1.35; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .marketProductCard .kreamPriceSummary { padding: 10px 8px; }
  .marketProductCard .previousPrice { font-size: 11px; line-height: 1.5; }
  .homeChangesTable tbody :is(td, th) { padding: 12px; }
  .hallOfFameSection { padding: 16px; }
}

.searchQualityPanel td small { display:block; margin-top:8px; color:var(--ui-text-muted); line-height:1.5; }
.searchQualityPanel td button { display:block; margin-top:10px; }
.searchQualityPanel .adminFilters { gap:16px; flex-wrap:wrap; }

/* Guest searches: a quiet continuation area, shared by KR/EN and account pages. */
.guestSearchHint{margin:16px 0 0;color:var(--ui-text-muted);font-size:.9rem}
.guestSearchShelf{margin:20px 0;padding:22px;border:1px solid var(--ui-border);border-radius:18px;background:var(--ui-surface);color:var(--ui-text);min-width:0;text-align:left}
.guestSearchHeading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.guestSearchHeading small{color:var(--ui-text-muted);font-weight:700;letter-spacing:.06em}
.guestSearchShelf h2{font-size:1.15rem!important;line-height:1.5;margin:5px 0;color:var(--ui-text)!important}
.guestSearchShelf p{font-size:.9rem;line-height:1.6;color:var(--ui-text-muted)!important;margin:10px 0}
.guestSearchShelf ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.guestSearchShelf li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px;min-width:0}
.guestSearchShelf li>div{min-width:0}.guestSearchShelf li a{overflow-wrap:anywhere;color:var(--ui-text);text-decoration:none}
.guestSearchShelf li a span,.guestSearchShelf li small{display:block;font-size:.78rem;margin-top:4px;color:var(--ui-text-muted)}
.guestSearchShelf button,.guestSearchActions>a{border:1px solid var(--ui-border);border-radius:9px;padding:9px 12px;background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:.83rem;cursor:pointer;text-decoration:none}
.guestSearchShelf button[aria-pressed=true]{background:var(--ui-surface-raised);border-color:var(--ui-border-strong)}
.guestSearchActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.guestSearchShelf summary{cursor:pointer;font-weight:600;padding:9px 0}
.guestSearchFootnote{display:block;border-top:1px solid var(--ui-border);padding-top:12px;margin-top:12px;font-size:.75rem;line-height:1.65;color:var(--ui-text-muted)}
@media(max-width:600px){.guestSearchShelf{padding:16px;margin:16px 0}.guestSearchShelf li{align-items:stretch;flex-direction:column}.guestSearchHeading>button{width:100%}.guestSearchActions{gap:6px}}

.photoCardSearch{margin:16px 0;padding:20px;border:1px solid var(--ui-border);border-radius:18px;background:var(--ui-surface);color:var(--ui-text)}.photoCardButtons{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.photoCardSearch button{padding:12px 18px;border-radius:10px;background:var(--ui-brand-solid);color:var(--ui-on-brand);border:0;cursor:pointer}.photoCardSearch button:disabled{opacity:.5}.photoCardSearch small{display:block;margin-top:12px;color:var(--ui-text-muted)}.photoCardReview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;margin-top:16px}.photoCardReview img{width:100%;max-height:230px;object-fit:contain}.photoCardReview label{display:block;margin-bottom:10px}.photoCardReview input,.photoCardReview select{display:block;width:100%;padding:10px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:8px}.photoCardReview button{margin:4px}.guestSearchPhoto{width:60px;height:84px;object-fit:contain;float:left;margin-right:12px}@media(max-width:600px){.photoCardButtons strong{width:100%}.photoCardButtons button{flex:1}.photoCardReview{grid-template-columns:1fr}.photoCardReview img{max-height:200px}.photoCardSearch{padding:14px}}

/* Photo result: readable, responsive card identity page. */
.photoResultPage{width:100%;max-width:1240px;margin:28px auto 64px;padding:0 24px;box-sizing:border-box}.photoResultBack{display:inline-block;color:var(--ui-text-muted);margin-bottom:20px}.photoResultHero{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:44px;padding:36px;border:1px solid var(--ui-border);border-radius:24px;background:var(--ui-surface);color:var(--ui-text)}.photoResultImage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--ui-surface-raised);border-radius:18px;padding:22px;min-width:0}.photoResultImage img{display:block;width:100%;height:520px;object-fit:contain;border-radius:10px}.photoResultImage span{font-size:13px;color:var(--ui-text-muted)}.photoResultInfo{min-width:0;align-self:center}.photoResultBadge{display:inline-block;background:var(--ui-surface-raised);color:var(--ui-text);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.05em}.photoResultHero .photoResultInfo h1{font-size:clamp(26px,3vw,40px);line-height:1.3;color:var(--ui-text);margin:20px 0 16px;overflow-wrap:anywhere}.photoResultIntro{font-size:16px;line-height:1.8;color:var(--ui-text-muted)}.photoResultFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.photoResultFacts div{padding:14px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}.photoResultFacts dt{font-size:12px;color:var(--ui-text-muted);margin-bottom:8px}.photoResultFacts dd{margin:0;font-weight:700;overflow-wrap:anywhere}.photoResultPrice{padding:22px;background:var(--ui-surface-raised);border-radius:14px;margin:24px 0}.photoResultPrice>span{font-size:11px;letter-spacing:.1em;color:var(--ui-text-muted)}.photoResultHero .photoResultPrice h2{font-size:22px;color:var(--ui-text);line-height:1.4;margin:10px 0}.photoResultPrice p{font-size:14px;line-height:1.7;color:var(--ui-text-muted);margin:0}.photoResultActions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.photoResultActions a{padding:13px 16px;border-radius:10px;background:var(--ui-surface);border:1px solid var(--ui-border);color:var(--ui-text);font-weight:700}.photoResultActions a.photoResultPrimary{background:var(--ui-brand-solid);border-color:var(--ui-brand);color:var(--ui-on-brand)}.photoResultSource{display:inline-block;margin-top:24px;font-size:13px;color:var(--ui-text-muted)}.communityPhotoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.communityPhotoGrid figure{margin:0;max-width:360px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;overflow:hidden}.communityPhotoGrid a{display:block;padding:18px;color:var(--ui-text)}.communityPhotoGrid img{width:100%;height:240px;object-fit:contain;background:var(--ui-surface-raised);border-radius:8px}.communityPhotoGrid figcaption{margin-top:14px;line-height:1.6;font-weight:600;overflow-wrap:anywhere}.communityPhotoGrid small{margin-top:6px}
@media(max-width:700px){.photoResultPage{padding:0 16px;margin-top:18px}.photoResultHero{grid-template-columns:1fr;padding:18px;gap:24px}.photoResultImage{padding:16px}.photoResultImage img{height:380px}.photoResultFacts{grid-template-columns:1fr 1fr}.photoResultActions{align-items:stretch;flex-direction:column}.photoResultActions a{text-align:center}.photoResultHero .photoResultInfo h1{font-size:27px}}
.photoCandidateGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.photoCandidateGrid a{display:flex;flex-direction:column;gap:12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px;padding:14px;color:var(--ui-text);min-width:0;font-size:14px;line-height:1.5}.photoCandidateGrid img{height:170px;width:100%;object-fit:contain}.photoCandidateGrid span{overflow-wrap:anywhere}@media(max-width:420px){.photoCandidateGrid{grid-template-columns:1fr}}
.photoResultActions form{width:100%;margin:0}.photoResultHero button.photoResultPrimary{display:block;width:100%;padding:16px 20px;border:0;border-radius:12px;background:var(--ui-brand-solid);color:var(--ui-on-brand);font:inherit;font-weight:700;line-height:1.5;cursor:pointer;white-space:normal}.photoResultHero button.photoResultPrimary:hover{background:var(--ui-inverse)}.photoResultHero details{margin:20px 0;color:var(--ui-text)}.photoResultHero details summary{cursor:pointer;padding:12px 0;font-weight:700}.photoResultHero details p{line-height:1.7}.photoResultImage{align-self:start}.photoResultInfo>p{color:var(--ui-text-muted);font-size:14px;line-height:1.7}
/* Keep the result panel clear of the shared footer without collapsing margins. */
.exchangeShell:has(.photoResultPage){padding-bottom:clamp(64px,7vw,104px)}
.photoResultPage{margin-bottom:0}
@media(max-width:700px){.exchangeShell:has(.photoResultPage){padding-bottom:56px}}
/* Scale price figures to their own panel, including narrow photo-result columns. */
.shopHistoryPriceSummary .shopHistorySummary{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.shopHistoryPriceSummary .shopHistorySummary>div{container-type:inline-size;min-width:0;padding:18px;border-radius:12px}
.shopHistoryPriceSummary .shopHistorySummary dt{font-size:12px;line-height:1.5}
.shopHistoryPriceSummary .shopHistorySummary dd{font-family:inherit;font-size:clamp(20px,13cqi,38px);font-weight:800;line-height:1.25;margin-top:10px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.shopHistoryPriceSummary .shopHistorySummary>div:first-child{background:var(--ui-brand-soft);border-color:var(--ui-border)}
.shopHistoryPriceSummary .shopHistorySummary>div:first-child dd{color:var(--ui-text)}
/* One save flow for card, text and photo results. */
.saveToCards{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;vertical-align:middle}.saveToCardsButton{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid var(--ui-brand);border-radius:10px;background:var(--ui-brand-solid);color:var(--ui-on-brand)!important;font:inherit;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;cursor:pointer}.saveToCardsButton:hover{background:var(--ui-inverse)}.saveToCardsButton:disabled{opacity:.6;cursor:wait}.saveToCards>a{color:var(--ui-text);font-size:13px}.saveCardDialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--ui-border);border-radius:22px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 80px color-mix(in srgb, var(--ui-shadow-color) 43.92%, transparent);overflow:auto}.saveCardDialog::backdrop{background:color-mix(in srgb, var(--ui-shadow-color) 60%, transparent);backdrop-filter:blur(3px)}.saveCardDialog form{padding:28px;display:grid;gap:16px}.saveCardDialog header{display:flex;justify-content:space-between;align-items:center;gap:16px}.saveCardDialog h2{margin:0;color:var(--ui-text)!important;font-size:24px}.saveCardDialog header button{border:0;background:transparent;font-size:28px;color:var(--ui-text-muted);cursor:pointer}.saveCardDialog p{margin:0;color:var(--ui-text-muted);font-size:15px;line-height:1.7}.saveCardDialog small{font-size:12px;color:var(--ui-text-muted);line-height:1.7}.saveCardPreview{display:flex;align-items:center;gap:18px;padding:18px;background:var(--ui-surface-raised);border-radius:12px;overflow-wrap:anywhere}.saveCardPreview img{width:80px;height:108px;object-fit:contain}.saveCardDialog label{display:grid;gap:8px;margin-top:12px;font-size:13px}.saveCardDialog input{min-width:0;padding:12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);color:var(--ui-text)}.saveCardDialog summary{cursor:pointer;font-size:14px;color:var(--ui-text-muted)}.saveCardDialog [role=alert]:empty{display:none}.photoResultActions>.saveToCards{width:100%;margin-top:8px}.photoResultActions>.saveToCards>.saveToCardsButton{width:100%;padding:16px}.memberCardActions .saveToCardsButton{margin:0}.recentSearches{margin:24px 0;padding:18px 20px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface);color:var(--ui-text)}.recentSearches summary{cursor:pointer;font-size:14px;font-weight:600}.recentSearches p{font-size:13px;line-height:1.7;color:var(--ui-text-muted)}.recentSearches ul{padding:0;list-style:none}.recentSearches li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ui-border)}.recentSearches li>a{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}.recentSearches li>button{border:0;background:none;color:var(--ui-text-muted);cursor:pointer}.recentSearches .saveToCardsButton{padding:8px 12px;font-size:12px}
.myCardsHub{margin:0 0 28px;padding:28px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:20px;color:var(--ui-text);min-width:0}.myCardsHub header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.myCardsHub header small{color:var(--ui-text-muted);font-size:12px;letter-spacing:.05em;font-weight:700}.myCardsHub h2{color:var(--ui-text)!important;font-size:clamp(22px,2.3vw,28px);line-height:1.4;margin:8px 0}.myCardsHub header p{font-size:14px;line-height:1.7;color:var(--ui-text-muted);margin:0}.myCardsHub header>a{color:var(--ui-text);font-size:14px;font-weight:700;white-space:nowrap}.myCardsFilters{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0}.myCardsFilters nav{display:flex;gap:8px;flex-wrap:wrap}.myCardsFilters button{padding:9px 14px;border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:999px;color:var(--ui-text);cursor:pointer}.myCardsFilters button[aria-pressed=true]{background:var(--ui-inverse);color:var(--ui-on-inverse);border-color:var(--ui-brand)}.myCardsFilters input{max-width:230px;padding:11px 14px;border-radius:10px;border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text)}.myCardsList{display:grid;gap:14px}.myCardsList article{display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:15px;min-width:0}.myCardsList article>img,.myCardsPlaceholder{width:80px;height:110px;object-fit:contain;background:var(--ui-surface-raised);border-radius:8px}.myCardsPlaceholder{display:grid;place-items:center;color:var(--ui-text-muted);font-size:17px;font-weight:800}.myCardsHub h3{color:var(--ui-text)!important;font-size:16px;line-height:1.5;margin:6px 0;overflow-wrap:anywhere}.myCardsItemInfo p{font-size:13px;color:var(--ui-text-muted);line-height:1.6;margin:4px 0}.myCardsItemInfo>small{font-size:12px;color:var(--ui-text-muted)}.myCardsNew{display:inline-block;color:var(--ui-text);background:var(--ui-surface-raised);border-radius:6px;padding:4px 8px;font-size:12px}.myCardsPrice{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:10px 0}.myCardsPrice>strong{color:var(--ui-text);font-size:24px;letter-spacing:-.04em}.myCardsPrice>span{font-size:15px;color:var(--ui-text-muted)}.myCardsPrice>small{color:var(--ui-text-muted);font-size:11px}.myCardsItemActions{display:grid;gap:12px;justify-items:end}.myCardsItemActions>button:last-child:not(.saveToCardsButton){background:none;border:0;color:var(--ui-text-muted);font-size:12px;cursor:pointer}.myCardsNotice{padding:14px 18px;border-radius:10px;background:var(--ui-surface-raised);color:var(--ui-text)}.myCardsEmpty{padding:26px 0;font-size:15px;color:var(--ui-text-muted);line-height:1.7}.homeValueHero .myCardsHub{margin-top:24px}.homeValueHero .myCardsHub .myCardsList article{grid-template-columns:56px minmax(0,1fr) auto;padding:14px}.homeValueHero .myCardsHub .myCardsList article>img,.homeValueHero .myCardsPlaceholder{width:56px;height:78px}.homeValueHero .myCardsHub .myCardsPrice>strong{font-size:20px}
@media(max-width:700px){.saveCardDialog{position:fixed;inset:auto 0 0;width:100%;max-width:100%;margin:0;border-radius:22px 22px 0 0;max-height:90dvh}.saveCardDialog form{padding:24px 20px calc(24px + env(safe-area-inset-bottom))}.myCardsHub{padding:20px 16px}.myCardsHub header{align-items:flex-start;flex-direction:column;gap:12px}.myCardsFilters{align-items:stretch;flex-direction:column}.myCardsFilters input{max-width:none;width:100%;box-sizing:border-box}.myCardsList article,.homeValueHero .myCardsHub .myCardsList article{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px}.myCardsList article>img,.myCardsPlaceholder{width:64px;height:90px}.myCardsItemActions{grid-column:1/-1;display:flex;justify-content:space-between}.myCardsItemActions .saveToCardsButton{flex:1}.recentSearches li{flex-wrap:wrap}.recentSearches li>a{flex-basis:100%}}
.photoOriginalToggle{padding:9px 14px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:13px;cursor:pointer}.photoOriginalToggle:hover{background:var(--ui-surface-raised)}

.cardResearchPanel{margin:24px 0;padding:24px;border:1px solid var(--ui-border);border-radius:18px;background:linear-gradient(135deg,var(--ui-surface),var(--ui-surface-raised));color:var(--ui-text);min-width:0}.cardResearchEyebrow{font-size:11px;letter-spacing:.12em;color:var(--ui-text-muted);font-weight:800}.photoResultInfo .cardResearchPanel h2{font-size:22px;line-height:1.4;margin:12px 0;color:var(--ui-text)}.cardResearchAmount{display:block;font-size:clamp(32px,4vw,58px);line-height:1.2;letter-spacing:-.045em;color:var(--ui-text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.cardResearchPanel p{font-size:14px;line-height:1.7;color:var(--ui-text-muted)}.cardResearchPanel .cardResearchRange{font-weight:700;color:var(--ui-text)}.cardResearchPanel .cardResearchDisclaimer{font-size:12px;color:var(--ui-text-muted)}.cardResearchPanel button{margin-top:12px;white-space:normal;line-height:1.5}.cardResearchPanel small{display:block;font-size:11px;color:var(--ui-text-muted);margin-top:16px}.cardResearchPanel details{margin-top:16px;font-size:13px}.cardResearchPanel summary{cursor:pointer;font-weight:700}.cardResearchPanel ul{padding-left:20px}.cardResearchPanel li{padding:8px 0}.cardResearchPanel li span{display:block;margin-top:4px}.cardResearchDeadline{display:inline-block;padding:10px 14px;background:var(--ui-surface);border-radius:10px;margin-top:10px}.saveToCardsButton{white-space:normal;line-height:1.5;max-width:100%}@media(max-width:700px){.cardResearchPanel{padding:20px}.cardResearchPanel button{width:100%}.cardResearchAmount{font-size:clamp(32px,9vw,48px)}}

/* Photo engine: real milestones with a shimmer between milestones. */
.photoEngineProgress{margin:20px 0 28px;padding:24px;border:1px solid var(--ui-border);border-radius:20px;background:linear-gradient(120deg,var(--ui-surface),var(--ui-surface));color:var(--ui-text);overflow:hidden}
.photoEngineHeading{display:flex;align-items:center;gap:10px;margin-bottom:18px}.photoEngineHeading strong{font-size:clamp(16px,2vw,21px)}.photoEngineHeading small{margin-left:auto;white-space:nowrap;color:var(--ui-text-muted)}
.photoEngineDot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--ui-brand-solid);box-shadow:0 0 0 5px color-mix(in srgb, var(--ui-shadow-color) 8.63%, transparent)}
.photoEngineProgress.isWaiting{background:var(--ui-brand-soft);border-color:var(--ui-border)}.photoEngineProgress.isWaiting .photoEngineDot{background:var(--ui-brand-solid);box-shadow:0 0 0 5px color-mix(in srgb, var(--ui-shadow-color) 7.84%, transparent)}.photoEngineProgress.isWaiting .photoEngineHeading{margin-bottom:10px}.photoResultRetry{margin-top:22px;padding-top:18px;border-top:1px solid var(--ui-border)}.photoResultRetry>summary{cursor:pointer;color:var(--ui-text-muted);font-size:14px}.photoResultRetry .photoCardSearch{margin-top:16px}
.photoEngineTrack{height:10px;overflow:hidden;border-radius:20px;background:var(--ui-surface-raised)}.photoEngineTrack>span{position:relative;display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ui-inverse),var(--ui-brand-solid));transition:width .7s ease;overflow:hidden}
.photoEngineProgress.isActive .photoEngineTrack>span:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--ui-surface) 56.47%, transparent),transparent);animation:photoEngineShimmer 1.8s linear infinite;transform:translateX(-100%)}
@keyframes photoEngineShimmer{to{transform:translateX(100%)}}
.photoEngineSteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:18px 0;color:var(--ui-text-muted);font-size:13px}.photoEngineSteps li{display:flex;align-items:center;gap:7px}.photoEngineSteps li>span{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:var(--ui-surface-raised);font-size:12px}.photoEngineSteps .isDone,.photoEngineSteps .isCurrent{color:var(--ui-text);font-weight:700}.photoEngineSteps .isDone>span,.photoEngineSteps .isCurrent>span{background:var(--ui-inverse);color:var(--ui-on-inverse)}
.photoEngineProgress p{margin:10px 0 6px;font-weight:600;color:var(--ui-text);line-height:1.6}.photoEngineProgress>small{color:var(--ui-text-muted);line-height:1.6}
@media(max-width:600px){.photoEngineProgress{padding:20px 16px;margin:16px 0 22px}.photoEngineHeading{flex-wrap:wrap}.photoEngineSteps{gap:6px;font-size:11px}.photoEngineSteps li{flex-direction:column;align-items:flex-start;gap:6px}.photoEngineHeading small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.photoEngineProgress.isActive .photoEngineTrack>span:after{animation:none}.photoEngineTrack>span{transition:none}}

/* Shared catalog search: independent of the slow external lookup. */
.catalogSearchResults{margin:24px 0;padding:24px;border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);color:var(--ui-text)}
.unifiedSearchResults{margin:28px 0 56px;min-width:0}.unifiedResultsHeading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.unifiedResultsHeading h2{margin:0;color:var(--ui-on-brand);font-size:1.6rem}.unifiedResultsHeading h2 span{color:var(--ui-brand);margin-left:8px}.unifiedResultsHeading p{color:var(--ui-text-muted);margin:8px 0 0;font-size:.85rem}.unifiedResultCounts{display:flex;flex-wrap:wrap;gap:8px}.unifiedResultCounts span{padding:8px 12px;border:1px solid var(--ui-border-strong);border-radius:30px;color:var(--ui-on-brand);font-size:.85rem}.unifiedSearchStatus{padding:16px 20px;margin:0 0 20px;border-radius:12px;background:var(--ui-surface-raised);color:var(--ui-text)}.unifiedSearchStatus p{margin:0 0 8px}.unifiedResultGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}.unifiedResultGrid>.marketProductCard,.unifiedResultItem{min-width:0;width:100%;margin:0}.unifiedResultItem{display:flex;flex-direction:column}.unifiedResultItem>.marketProductCard{flex:1;margin:0;width:100%}.unifiedEditionLinks{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--ui-surface-raised);border-radius:0 0 12px 12px;color:var(--ui-text);overflow-wrap:anywhere}.unifiedEditionLinks small{font-size:.75rem}.unifiedEditionLinks a{font-size:.8rem;color:var(--ui-text)}.unifiedResultGrid .kreamPriceSummary strong{font-size:clamp(1.1rem,2vw,1.8rem);overflow-wrap:anywhere}.unifiedResultGrid .kreamProductBadges{flex-wrap:wrap}.unifiedResultGrid .kreamProductBody{min-width:0}
@media(max-width:1200px){.unifiedResultGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:780px){.unifiedResultsHeading{align-items:flex-start;flex-direction:column}.unifiedResultGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}@media(max-width:440px){.unifiedResultGrid{grid-template-columns:1fr}}
.catalogSearchResults h3{margin:6px 0 10px;color:var(--ui-text);font-size:1.35rem}.catalogSearchResults p{color:var(--ui-text-muted);line-height:1.65}
.catalogProgress{height:4px;background:var(--ui-surface-muted);overflow:hidden;border-radius:8px;margin:18px 0}.catalogProgress span{display:block;width:35%;height:100%;background:var(--ui-inverse);animation:catalog-scan 1.8s ease-in-out infinite}@keyframes catalog-scan{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
.catalogResultGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}.catalogResultCard{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;padding:16px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;color:var(--ui-text);text-decoration:none;transition:border-color .15s,box-shadow .15s}.catalogResultCard:hover{border-color:var(--ui-brand);box-shadow:0 5px 18px color-mix(in srgb, var(--ui-shadow-color) 7.06%, transparent)}.catalogResultImage{aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;background:var(--ui-surface-raised);border-radius:8px;overflow:hidden;font-size:.75rem;color:var(--ui-text-muted)}.catalogResultImage img{width:100%;height:100%;object-fit:contain}.catalogResultCard>div:last-child{display:flex;flex-direction:column;gap:7px;min-width:0}.catalogResultCard small,.catalogResultCard span{font-size:.78rem;color:var(--ui-text-muted)}.catalogResultCard strong{font-size:1rem;line-height:1.4;overflow-wrap:anywhere}.catalogResultCard em{font-size:.74rem;font-style:normal;color:var(--ui-text-muted)}.catalogResultCard b{font-size:.8rem;color:var(--ui-text);margin-top:auto}
.catalogDetailContent{max-width:1360px;margin:0 auto;padding:28px 24px 100px}.catalogBack{display:inline-block;margin-bottom:24px;color:var(--ui-brand)}.catalogDetailHero{display:grid;grid-template-columns:minmax(220px,330px) minmax(0,1fr);gap:40px;align-items:start;background:var(--ui-surface);border-radius:24px;padding:36px;color:var(--ui-text)}.catalogDetailHero h1{color:var(--ui-text);font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.2;margin:12px 0 24px;overflow-wrap:anywhere}.catalogDetailImage{aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;background:var(--ui-surface-raised);border-radius:14px;overflow:hidden}.catalogDetailImage img{width:100%;height:100%;object-fit:contain}.catalogDetailImage span{padding:25px;text-align:center;color:var(--ui-text-muted)}.catalogDetailHero dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalogDetailHero dl div{padding:14px;border-radius:10px;background:var(--ui-surface-raised)}.catalogDetailHero dt{font-size:.78rem;color:var(--ui-text-muted)}.catalogDetailHero dd{margin:5px 0 0;font-weight:700;overflow-wrap:anywhere}.catalogDetailHero p{line-height:1.7;color:var(--ui-text-muted)}.catalogPricePanel{margin-top:28px;padding:32px;border-radius:22px;background:var(--ui-surface);color:var(--ui-text)}.catalogPricePanel h2{color:var(--ui-text);margin:10px 0}.catalogPricePanel>p{line-height:1.7;color:var(--ui-text-muted)}.catalogPriceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.catalogPriceGrid article{padding:20px;border:1px solid var(--ui-border);border-radius:14px;display:flex;flex-direction:column;gap:9px;min-width:0;background:var(--ui-surface)}.catalogPriceGrid strong{font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.catalogPriceGrid small,.catalogPriceGrid span,.catalogPriceGrid p,.catalogPriceGrid time{font-size:.8rem;line-height:1.5;color:var(--ui-text-muted)}.catalogPriceGrid em{font-size:.75rem;color:var(--ui-brand);font-style:normal}.catalogPriceGrid a{font-size:.8rem}.catalogEmpty{padding:24px;border-radius:12px;background:var(--ui-surface-raised)}
@media(max-width:1000px){.catalogResultGrid,.catalogPriceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.catalogSearchResults{padding:18px}.catalogResultGrid{grid-template-columns:1fr}.catalogDetailContent{padding:18px 14px 72px}.catalogDetailHero{grid-template-columns:1fr;padding:22px;gap:24px}.catalogDetailImage{width:min(100%,280px);margin:auto}.catalogPricePanel{padding:22px}.catalogPriceGrid{grid-template-columns:1fr}.catalogPriceGrid strong{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.catalogProgress span{animation:none;width:100%}}

.photoUnifiedResults{margin:32px 0}.photoUnifiedResults .unifiedResultGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.photoResultPage>.cardResearchPanel,.photoResultPage>.photoResultPrice{margin:24px 0}.photoResultPage>.cardResearchPanel h2,.photoResultPage>.photoResultPrice h2{color:var(--ui-text);font-size:22px;line-height:1.4;margin:10px 0}@media(max-width:700px){.photoUnifiedResults .unifiedResultGrid{grid-template-columns:1fr}}
.photoHeroPrice{display:grid;gap:10px;margin:24px 0;padding:22px 24px;background:linear-gradient(120deg,var(--ui-surface-raised),var(--ui-brand-soft));border:1px solid var(--ui-border);border-radius:16px;min-width:0}.photoHeroPrice>span{font-size:13px;font-weight:700;color:var(--ui-text)}.photoHeroPrice>strong{font-size:clamp(32px,4.5vw,60px);line-height:1.15;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ui-text);overflow-wrap:anywhere}.photoHeroPrice>p{margin:0;font-size:14px;color:var(--ui-text)}.photoHeroPrice>small{font-size:12px;line-height:1.6;color:var(--ui-text-muted)}@media(max-width:700px){.photoHeroPrice{padding:20px}.photoHeroPrice>strong{font-size:clamp(32px,10vw,52px)}}

/* Operations workspace: full-width content, one menu per task. */
.exchangeShell.adminWorkspace { background:var(--ui-surface-raised); color:var(--ui-text); min-height:100vh; padding-bottom:64px; }
.adminWorkspaceGrid { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; padding:28px clamp(16px,2vw,36px); width:100%; box-sizing:border-box; }
.adminSidebar { align-self:start; position:sticky; top:100px; padding:24px 16px; border-radius:18px; background:var(--ui-inverse); color:var(--ui-on-inverse); }
.adminSidebar>p { color:var(--ui-text-muted); font-size:10px; letter-spacing:.12em; margin:0 10px 8px; }
.adminSidebar h2 { color:var(--ui-on-brand)!important; font-size:22px; margin:0 10px 24px; }
.adminSidebar nav { display:grid; gap:5px; margin-bottom:24px; }
.adminSidebar nav a { display:flex; gap:10px; align-items:center; color:var(--ui-text-muted)!important; text-decoration:none; font-size:13px; padding:12px 10px; border-radius:9px; line-height:1.5; }
.adminSidebar nav a span { color:var(--ui-text-muted); font-size:11px; }
.adminSidebar nav a:hover { background:var(--ui-inverse); }
.adminSidebar nav a[aria-current=page] { background:var(--ui-surface); color:var(--ui-text)!important; font-weight:800; }
.adminSidebar>a { color:var(--ui-text-muted)!important; display:block; margin:16px 10px; font-size:13px; }
.adminSidebar button { margin-left:10px; border:1px solid var(--ui-border-strong); background:transparent; color:var(--ui-on-brand); border-radius:8px; padding:8px 14px; cursor:pointer; }
.adminWorkspaceContent { min-width:0; }
.adminWorkspaceHeading { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:6px 0 26px; }
.adminWorkspaceHeading h1 { color:var(--ui-text)!important; font-size:clamp(25px,2.5vw,36px); line-height:1.25; margin:8px 0 12px; }
.adminWorkspaceHeading p { margin:0; color:var(--ui-text-muted); font-size:14px; }
.adminWorkspaceHeading>div>p:first-child { font-size:12px; color:var(--ui-text-muted); }
.adminWorkspaceHeading>a { white-space:nowrap; color:var(--ui-text); background:var(--ui-surface); border:1px solid var(--ui-border); padding:11px 15px; border-radius:9px; font-size:13px; }
.exchangeShell.adminWorkspace .adminWorkspaceContent>:is(.adminFilters,.adminStatus,.adminMetrics,.adminSection,.adminFootnote,.accountNotice) { width:100%; max-width:none; box-sizing:border-box; margin-left:0; margin-right:0; }
.exchangeShell.adminWorkspace .adminSection { margin-top:20px; margin-bottom:24px; padding:24px; border-radius:16px; background:var(--ui-surface); }
.exchangeShell.adminWorkspace .adminSection h3 { margin-top:28px; }
.adminWorkspace .adminTable { max-width:100%; overflow-x:auto; }
.adminWorkspace .adminTable table { min-width:640px; }
.adminWorkspace .adminFilters { margin-top:0; margin-bottom:18px; }
.adminWorkspace .adminStatus { flex-wrap:wrap; margin-bottom:20px; }
.adminQuickLinks { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.adminQuickLinks a { display:block; background:var(--ui-surface); border:1px solid var(--ui-border); padding:12px 16px; border-radius:10px; color:var(--ui-text); font-size:14px; }
.adminWorkspace .adminRefreshDashboard>.intlContent { width:100%; max-width:none; margin:0; padding:0; }
.adminWorkspace .adminRefreshDashboard .refreshDashboard { width:100%; max-width:none; margin:0; padding:0; }
.adminJobGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0; }
.adminJob { border:1px solid var(--ui-border); background:var(--ui-surface); padding:22px; border-radius:14px; min-width:0; }
.adminJobTop { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.adminJobTop strong { font-size:30px; font-variant-numeric:tabular-nums; color:var(--ui-text); }
.adminJobTop span { font-size:12px; border-radius:99px; background:var(--ui-surface-raised); color:var(--ui-text-muted); padding:6px 10px; }
.adminJobTop span[data-status=complete] { background:var(--ui-surface-raised); color:var(--ui-text); }
.adminJobTop span[data-status=running] { background:var(--ui-brand-soft); color:var(--ui-brand); }
.adminJobTop span:is([data-status=failed],[data-status=blocked]) { background:var(--ui-brand-soft); color:var(--ui-danger); }
.adminWorkspace .adminJob h3 { margin:18px 0 10px; padding:0; font-size:19px; }
.adminJob p { color:var(--ui-text-muted); font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.adminJob dl { border-block:1px solid var(--ui-border); padding:12px 0; margin:18px 0; font-size:13px; }
.adminJob dl>div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; padding:6px 0; }
.adminJob dt { color:var(--ui-text-muted); }
.adminJob dd { margin:0; color:var(--ui-text); }
.adminJob>a { display:inline-block; margin:8px 16px 0 0; color:var(--ui-text); font-weight:700; font-size:13px; }
.adminContentGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.adminContentGrid>a { border:1px solid var(--ui-border); border-radius:12px; overflow:hidden; text-decoration:none; min-width:0; }
.adminContentGrid img { width:100%; aspect-ratio:16/10; object-fit:contain; background:var(--ui-surface-raised); display:block; }
.adminContentGrid a>div { padding:16px; }
.adminContentGrid small { color:var(--ui-text-muted); }
.adminWorkspace .adminContentGrid h3 { margin:10px 0 16px; font-size:17px; }
.adminContentGrid span { color:var(--ui-text); font-size:13px; }
@media(max-width:1100px) { .adminWorkspaceGrid { grid-template-columns:200px minmax(0,1fr); gap:18px; } .adminJobGrid,.adminContentGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .adminWorkspaceGrid { display:block; padding:16px 12px; } .adminSidebar { position:static; padding:16px; margin-bottom:24px; } .adminSidebar h2 { margin-bottom:14px; } .adminSidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin-bottom:10px; } .adminSidebar nav a { font-size:12px; padding:10px 6px; } .adminSidebar>a,.adminSidebar>form { display:inline-block; margin:4px 8px; } .adminWorkspaceHeading { align-items:flex-start; } .adminWorkspaceHeading>a { font-size:11px; padding:9px; } .adminWorkspaceHeading p { font-size:12px; } .exchangeShell.adminWorkspace .adminSection { padding:16px; } .adminJobGrid { grid-template-columns:1fr; } .adminContentGrid { gap:12px; } .adminContentGrid a>div { padding:12px; } }
@media(max-width:430px) { .adminContentGrid { grid-template-columns:1fr; } }
.adminPhotoAnalysis { border-bottom:1px solid var(--ui-border); padding-bottom:24px; margin-bottom:28px; }
.adminPhotoIssueGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin:20px 0; }
.adminPhotoIssueGrid>a { display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; color:var(--ui-text); text-decoration:none; }
.adminPhotoIssueGrid>a:hover,.adminPhotoIssueGrid>a[aria-current=page] { border-color:var(--ui-brand); background:var(--ui-surface-raised); }
.adminPhotoIssueGrid>a>span { font-weight:700; font-size:14px; }
.adminPhotoIssueGrid strong { color:var(--ui-text); font-size:30px; }
.adminPhotoIssueGrid strong small { font-size:12px; margin-left:5px; }
.adminPhotoIssueGrid>a>small { color:var(--ui-text-muted); font-size:12px; line-height:1.6; }

/* Unified market movers and interactive price charts. */
[data-trending-market] .marketSectionHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 24px;padding:0;border:0;background:none}
[data-trending-market] .marketSectionHeading h2,[data-trending-market]>h2{font-size:clamp(23px,2vw,29px);line-height:1.35;margin:8px 0 0;padding:0;border:0;background:none;box-shadow:none;color:var(--ui-on-brand)}
[data-trending-market] .marketSectionHeading h2::before,[data-trending-market] .marketSectionHeading h2::after,[data-trending-market] .kreamProductBody h3::before,[data-trending-market] .kreamProductBody h3::after{content:none}
[data-trending-market] .marketSectionHeading a{flex-shrink:0;font-size:13px}
[data-trending-market] .kreamProductGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;align-items:stretch}
[data-trending-market] .marketProductCard{display:flex;flex-direction:column;margin:0;min-width:0;border-radius:18px;overflow:hidden}
[data-trending-market] .marketProductCardLink{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:0;height:auto;flex:1;align-items:start}
[data-trending-market] .kreamProductVisual{width:100%;aspect-ratio:5/7;padding:14px;box-sizing:border-box;background:var(--ui-surface-raised)}
[data-trending-market] .kreamProductImage{width:100%;height:100%;object-fit:contain}
[data-trending-market] .kreamProductBody{min-width:0;padding:20px}
[data-trending-market] .kreamProductBody h3{margin:14px 0 8px;padding:0;border:0;background:none;box-shadow:none;font-size:17px;line-height:1.5;color:var(--ui-text);-webkit-line-clamp:3}
[data-trending-market] .kreamProductBadges{gap:6px;flex-wrap:wrap}
[data-trending-market] .kreamPriceSummary{margin-top:18px}
[data-trending-market] .kreamPriceSummary strong{font-size:clamp(24px,2.3vw,32px);line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
[data-trending-market] .kreamListingPreview{gap:8px}
[data-trending-market] .kreamListingPreview>div{min-width:0}
[data-trending-market] .kreamListingPreview strong{overflow-wrap:anywhere}
.tradingPriceChart{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:18px;margin:24px 0;padding:24px;min-width:0;box-sizing:border-box;overflow:hidden}
.tradingPriceChart *{box-sizing:border-box}
.tradingPriceChart.isExpanded{position:fixed;inset:12px;z-index:10000;margin:0;overflow:auto;box-shadow:0 0 0 100vmax color-mix(in srgb, var(--ui-shadow-color) 70.2%, transparent)}
.tradingChartHeading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.tradingPriceChart .tradingChartHeading h3{font-size:15px;line-height:1.5;color:var(--ui-text);margin:8px 0 0;padding:0;border:0;overflow-wrap:anywhere}
.tradingPriceChart button{border:1px solid var(--ui-border);border-radius:7px;background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:12px;padding:8px 11px;cursor:pointer;white-space:nowrap;min-height:34px;line-height:1.35}
.tradingPriceChart button:hover{background:var(--ui-surface);border-color:var(--ui-border)}
.tradingPriceChart button[aria-pressed=true]{background:var(--ui-brand-soft);border-color:var(--ui-border);color:var(--ui-brand)}
.tradingPriceChart :is(button,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
.tradingChartQuote{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 18px;margin:18px 0 24px;font-variant-numeric:tabular-nums}
.tradingChartQuote>strong{font-size:clamp(30px,4vw,46px);line-height:1.2;color:var(--ui-text);overflow-wrap:anywhere;letter-spacing:-.04em}
.tradingChartQuote>span{font-size:12px;color:var(--ui-text-muted)}
.tradingChartQuote>b{font-size:16px}.tradingChartQuote>b small{font-size:11px;font-weight:400}.tradingChartQuote .isUp{color:var(--ui-positive)}.tradingChartQuote .isDown{color:var(--ui-negative)}
.tradingChartSelectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:20px}
.tradingChartSelectors label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--ui-text-muted);min-width:0}
.tradingChartSelectors select{width:100%;min-width:0;max-width:100%;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:9px;padding:11px 30px 11px 12px;font-size:13px;text-overflow:ellipsis}
.tradingChartToolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-block:1px solid var(--ui-border);padding:12px 0}
.tradingChartToolbar>div{display:flex;gap:5px;flex-wrap:wrap}
.tradingChartReadout{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-height:50px;padding:12px 0;color:var(--ui-text-muted);font-size:12px;font-variant-numeric:tabular-nums}
.tradingChartReadout strong{color:var(--ui-brand);font-size:16px}.tradingChartReadout .comparisonLegend{color:var(--ui-brand)}.tradingChartReadout .averageLegend{color:var(--ui-brand)}
.tradingChartCanvas{height:370px;width:100%;min-width:0;position:relative}
.isExpanded .tradingChartCanvas{height:clamp(280px,55vh,750px)}
.tradingPriceChart .tradingChartStatus{font-size:13px;color:var(--ui-text-muted);padding:10px;margin:0;background:var(--ui-surface)}
.tradingChartNavigation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.tradingChartNavigation>span{font-size:11px;color:var(--ui-text-muted)}.tradingChartNavigation>div{display:flex;gap:5px}
.tradingChartStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0}
.tradingChartStats>div{padding:16px;border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:10px;min-width:0}.tradingChartStats dt{font-size:11px;color:var(--ui-text-muted)}.tradingChartStats dd{font-size:clamp(18px,2.2vw,29px);font-weight:750;color:var(--ui-text);margin:8px 0 0;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.tradingChartStats dd small{font-size:12px;font-weight:400}
.tradingPriceChart .tradingChartNote{font-size:11px;color:var(--ui-text-muted);line-height:1.7;margin:16px 0}
.tradingChartData,.usVariantPrices{border:1px solid var(--ui-border);border-radius:10px;margin:18px 0;overflow:hidden;color:var(--ui-text);background:var(--ui-surface)}
.tradingChartData summary,.usVariantPrices summary{cursor:pointer;padding:15px 18px;font-size:13px;font-weight:650;background:var(--ui-surface);line-height:1.5}
.tradingChartData>div,.usVariantPrices>div{overflow:auto;max-height:360px}
.tradingChartData table,.usVariantPrices table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;font-variant-numeric:tabular-nums}
.tradingChartData th,.usVariantPrices th{position:sticky;top:0;background:var(--ui-surface);color:var(--ui-text-muted);z-index:1}
.tradingChartData :is(th,td),.usVariantPrices :is(th,td){padding:12px 16px;border-bottom:1px solid var(--ui-border);white-space:nowrap}
.tradingChartData td:last-child{text-align:right;font-weight:650}.usVariantPrices td:first-child{white-space:normal;min-width:180px}.usVariantPrices td:last-child{min-width:200px}
.tradingPriceChart .tradingChartAttribution{font-size:10px;line-height:1.7;color:var(--ui-text-muted);margin:16px 0 0}.tradingChartAttribution a{color:var(--ui-text-muted);text-decoration:underline}
@media(max-width:1000px){[data-trending-market] .marketProductCardLink{grid-template-columns:125px minmax(0,1fr)}[data-trending-market] .kreamProductBody{padding:16px}[data-trending-market] .kreamProductGrid{gap:18px}}
@media(max-width:760px){[data-trending-market] .kreamProductGrid{grid-template-columns:1fr;gap:20px}[data-trending-market] .marketProductCardLink{grid-template-columns:140px minmax(0,1fr)}[data-trending-market] .marketSectionHeading{align-items:flex-start;flex-direction:column;gap:12px}[data-trending-market] .kreamProductBody h3{font-size:15px}.tradingPriceChart{padding:16px;margin:20px 0;border-radius:12px}.tradingChartHeading{gap:10px}.tradingPriceChart .tradingChartHeading h3{font-size:13px}.tradingChartCanvas{height:300px}.tradingChartNavigation{flex-wrap:wrap}.tradingChartStats{gap:7px}.tradingChartStats>div{padding:12px 9px}.tradingChartStats dd{font-size:clamp(17px,4.5vw,24px)}.tradingPriceChart.isExpanded{inset:0;border-radius:0}.tradingChartQuote{gap:8px 12px}.tradingChartQuote>strong{font-size:34px}.catalogPricePanel:has(.tradingPriceChart){padding:18px}.tradingChartData :is(th,td){padding:10px 12px}}
@media(max-width:400px){[data-trending-market] .marketProductCardLink{grid-template-columns:108px minmax(0,1fr)}[data-trending-market] .kreamProductBody{padding:13px}[data-trending-market] .kreamProductVisual{padding:9px}[data-trending-market] .kreamPriceSummary strong{font-size:24px}.tradingChartStats{grid-template-columns:1fr 1fr}.tradingChartStats>div:last-child{grid-column:1/-1}.tradingChartQuote>strong{font-size:30px}}

/* Shared exchange palette. Page-specific styles can consume these tokens directly. */
:root {
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --paper: var(--ui-canvas);
  --panel: var(--ui-surface-muted);
  --line: var(--ui-border);
  --accent: var(--ui-brand);
  --accent-dark: var(--ui-brand-hover);
  --white: var(--ui-surface);
  --exchange-page: var(--ui-canvas);
  --exchange-navy: var(--ui-text);
  --exchange-blue: var(--ui-brand);
  --exchange-blue-soft: var(--ui-brand-soft);
  --exchange-canvas: var(--ui-canvas);
  --exchange-surface: var(--ui-surface);
  --exchange-ink: var(--ui-text);
  --exchange-muted: var(--ui-text-muted);
  --exchange-line: var(--ui-border);
  --exchange-line-strong: var(--ui-border-strong);
  --exchange-positive: var(--ui-positive);
  --exchange-negative: var(--ui-negative);
}

/* Keep the search-quality action visible without horizontal table scrolling. */
.adminWorkspace .adminSearchResultsTable {
  overflow-x: visible;
}
.adminWorkspace .adminSearchResultsTable table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.adminWorkspace .adminSearchResultsTable th,
.adminWorkspace .adminSearchResultsTable td {
  padding: 12px 10px;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.adminSearchResultsTable th:nth-child(1) { width: 26%; }
.adminSearchResultsTable th:nth-child(2) { width: 13%; }
.adminSearchResultsTable th:nth-child(3) { width: 20%; }
.adminSearchResultsTable th:nth-child(4) { width: 18%; }
.adminSearchResultsTable th:nth-child(5) { width: 23%; }
.adminSearchResultsTable td:last-child button {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  white-space: normal;
}

@media (max-width: 1100px) {
  .adminWorkspace .adminSearchResultsTable table,
  .adminSearchResultsTable tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .adminSearchResultsTable thead { display: none; }
  .adminSearchResultsTable tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
  }
  .adminSearchResultsTable td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .adminSearchResultsTable td:first-child,
  .adminSearchResultsTable td:last-child { grid-column: 1 / -1; }
  .adminSearchResultsTable td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 700;
  }
}

.adminWorkspace .adminPhotoResultsTable { overflow-x: visible; }
.adminWorkspace .adminPhotoResultsTable table,
.adminPhotoResultsTable tbody {
  display: block;
  width: 100%;
  min-width: 0;
}
.adminPhotoResultsTable thead { display: none; }
.adminPhotoResultsTable tr {
  display: grid;
  grid-template-columns: 64px repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
}
.adminWorkspace .adminPhotoResultsTable td {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.adminPhotoResultsTable td:first-child { grid-column: 1; grid-row: 1 / span 2; }
.adminPhotoResultsTable td:nth-child(2) { grid-column: 2; grid-row: 1; }
.adminPhotoResultsTable td:nth-child(3) { grid-column: 2; grid-row: 2; }
.adminPhotoResultsTable td:nth-child(4) { grid-column: 3; grid-row: 1; }
.adminPhotoResultsTable td:nth-child(5) { grid-column: 3; grid-row: 2; }
.adminPhotoResultsTable td:nth-child(6) { grid-column: 2; grid-row: 3; }
.adminPhotoResultsTable td:nth-child(7) { grid-column: 3; grid-row: 3; }
.adminPhotoResultsTable td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 4px;
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 700;
}
.adminPhotoResultsTable td:last-child a { display: inline-block; padding: 8px 0; }

@media (max-width: 700px) {
  .adminPhotoResultsTable tr { grid-template-columns: 64px minmax(0, 1fr); }
  .adminPhotoResultsTable td:nth-child(n + 4) { grid-column: 1 / -1; grid-row: auto; }
}

/* The old exchange variables were scoped to the page and must follow the theme. */
.exchangeShell {
  --exchange-navy: var(--ui-text);
  --exchange-blue: var(--ui-brand);
  --exchange-logo-blue: var(--ui-brand);
  --exchange-blue-soft: var(--ui-brand-soft);
  --exchange-canvas: var(--ui-canvas);
  --exchange-surface: var(--ui-surface);
  --exchange-ink: var(--ui-text);
  --exchange-muted: var(--ui-text-muted);
  --exchange-line: var(--ui-border);
  --exchange-line-strong: var(--ui-border-strong);
  --exchange-positive: var(--ui-positive);
  --exchange-negative: var(--ui-negative);
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.exchangeShell :is(h1, h2, h3),
.exchangeShell
  :is(
    .explorerIntro,
    .marketHeading,
    .marketSectionHeading,
    .homeValueIntro,
    .magazineHeading,
    .explorerResultsHeading
  )
  :is(h1, h2, h3) {
  color: var(--ui-text);
}
.exchangeShell .magazineFeature h2 {
  color: var(--ui-on-brand);
}

body {
  background: var(--ui-canvas);
  color: var(--ui-text);
}

.exchangeShell .nav.siteHeader {
  background: var(--ui-header);
  border-color: var(--ui-border);
  color: var(--ui-header-text);
}
.exchangeShell.accountPage > .accountPanel {
  margin-top: 32px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
}

.siteHeader .brand {
  gap: 9px;
  color: var(--ui-header-text);
}

.siteHeader .brandLogo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.brandWordmark {
  display: inline-block;
  width: 141px;
  height: 38px;
  flex-shrink: 0;
  background-color: var(--ui-brand);
  color: transparent;
  font-size: 0;
  line-height: 0;
  -webkit-mask: url("/brand/tcgindex-wordmark.svg") center / contain no-repeat;
  mask: url("/brand/tcgindex-wordmark.svg") center / contain no-repeat;
}

.brandWordmark > span { color: transparent; }

.themePicker {
  display: inline-flex;
  align-items: center;
}
.themePicker select {
  max-width: 90px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 5px;
  background: var(--ui-inverse);
  color: var(--ui-on-inverse);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.themePicker select:focus-visible,
.exchangeShell :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Shared surface and table treatment across public, member and operations routes. */
.exchangeShell
:is(
  .marketPanel,
  .marketSourceCard,
  .homeRankingPanel,
  .marketProductsSection,
  .marketSourceSection,
  .homeMarketOverview,
  .accountSurface,
  .accountJourney,
  .adminSection,
  .adminMetrics article,
  .adminSidebar,
  .adminWorkspaceContent,
  .photoCardReview,
  .intlContent > section,
  .methodologyContent > section,
  .tradingPriceChart,
  .cardAnswerSummary > div
) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.exchangeShell
  :is(
    .marketTableHead,
    .marketIndexTableHead,
    .homeChangesTable thead th,
    .intlTable th,
    .adminTable th,
    .tradingChartData th,
    .usVariantPrices th
  ) {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border);
}
.exchangeShell
  :is(
    .marketTableRow,
    .marketIndexTableRow,
    .homeChangesTable,
    .intlTable,
    .adminTable table,
    .tradingChartData,
    .usVariantPrices
  ) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.exchangeShell :is(.marketTableRow, .marketIndexTableRow, .homeChangesTable tbody tr):hover {
  background: var(--ui-brand-soft);
}
.exchangeShell :is(input, select, textarea) {
  accent-color: var(--ui-brand);
}

/* Legacy pages still contain literal light colors. This compatibility layer
   makes every route readable while those declarations move to semantic tokens. */
html[data-theme="dark"] main:not(.exchangeShell) {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
html[data-theme="dark"] main.methodologyPage,
html[data-theme="dark"] main.intlMethodologyPage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
html[data-theme="dark"]
  .exchangeShell
  :is(
    section,
    article,
    aside,
    details,
    dialog,
    table,
    form,
    .searchPanel,
    .searchResults,
    .marketProductCard,
    .kreamProductBody,
    .kreamPriceSummary,
    .accountPanel,
    .accountForm,
    .intlDetail,
    .photoResultPage,
    .photoCardSearch,
    .tradingChartStats > div,
    .tradingChartData,
    .usVariantPrices,
    .adminStatus span
  ) {
  background-color: var(--ui-surface);
  border-color: var(--ui-border);
}
html[data-theme="dark"]
  .exchangeShell
  :is(h1, h2, h3, h4, p, dt, dd, strong, small, label, li, figcaption, summary) {
  color: var(--ui-text);
}
html[data-theme="dark"]
  .exchangeShell
  :is(
    .exchangeEyebrow,
    .marketSectionHeading > a,
    .cardFamilyInfo summary,
    .accountConsents a,
    .intlContent a:not(.exchangePrimary)
  ) {
  color: var(--ui-brand);
}
html[data-theme="dark"]
  .exchangeShell
  :is(
    .marketStatus small,
    .marketSectionHeading p,
    .homeRankingDescription,
    .accountLead,
    .adminFootnote,
    .intlNotice,
    .photoResultBack,
    .tradingChartAttribution
  ) {
  color: var(--ui-text-muted);
}
html[data-theme="dark"]
  .exchangeShell
  :is(
    input,
    select,
    textarea,
    .searchField input,
    .searchField select,
    .accountEmailField input,
    .intlFilters input,
    .intlFilters select
  ) {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-color: var(--ui-border-strong);
}
html[data-theme="dark"]
  .exchangeShell
  :is(
    .homeHero .homeBrowse,
    .homeSearch,
    .marketConceptGuide,
    .homeRiftDailyLink,
    .riftDailyBrief,
    .cardAnswerHelp,
    .accountNotice,
    .intlPurchaseLink
  ) {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"]
  .exchangeShell
  :is(.marketConceptGuide p, .homeRiftDailyLink em, .riftDailyHeading p, .cardAnswerHelp p) {
  color: var(--ui-text-muted);
}
html[data-theme="dark"]
  .exchangeShell
  :is(.exchangePrimary, .homeSearch button, .intlFilters button) {
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}
html[data-theme="dark"] .exchangeShell :is(.isUp, .marketUp, .riftDailyUp) {
  color: var(--ui-positive);
}
html[data-theme="dark"] .exchangeShell :is(.isDown, .marketDown, .riftDailyDown) {
  color: var(--ui-negative);
}
html[data-theme="dark"]
  .exchangeShell
  :is(.siteMobileMenu, .siteMobileLinks, .siteLanguageOptions, .homeGameMenu) {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"] .exchangeShell .siteHeader :is(a, button, summary) {
  color: var(--ui-header-text);
}
html[data-theme="dark"] .exchangeShell .siteHeader .themePicker select {
  color: var(--ui-on-brand);
}

html[data-theme="dark"] .analyticsConsent,
html[data-theme="dark"] .navigationLoadingPanel,
html[data-theme="dark"] .globalPartnerFooter {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html[data-theme="dark"]
  .internalReviewPage
  :is(.reviewHero, .reviewDemoNotice, .queueItem, .reviewHistory, .evidencePanel) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html[data-theme="dark"] .exchangeShell .homeBuyPicksBanner {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"] .exchangeShell .homeBuyPicksBanner :is(strong, small) {
  color: var(--ui-text);
}
html[data-theme="dark"] .exchangeShell .homeBuyPicksBanner > span:last-child {
  color: var(--ui-brand);
}
html[data-theme="dark"] .exchangeShell .homeRankingPanel > header {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
}
html[data-theme="dark"] .exchangeShell .homeRankingPanel > header :is(h2, a) {
  color: var(--ui-text);
}
html[data-theme="dark"] .exchangeShell .homeRankingPanel :is(.homeRankingDescription, small) {
  color: var(--ui-text-muted);
}
html[data-theme="dark"] .exchangeShell .homeHero .homeSearch .homeGameTrigger,
html[data-theme="dark"] .exchangeShell .homeHero .homeSearchQuery input {
  color: var(--ui-text);
}
html[data-theme="dark"] .exchangeShell .homeHero .homeSearchQuery input::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

@media (max-width: 720px) {
  .siteHeader .brandLogo {
    width: 30px;
    height: 30px;
  }
  .brandWordmark {
    font-size: 16px;
  }
  .themePicker select {
    max-width: 76px;
    padding-inline: 4px;
    font-size: 11px;
  }
}

/* Operational status is a data dashboard in both themes. */
.intlRefreshPage,
main.intlRefreshPage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.intlRefreshPage .intlHero h1,
.intlRefreshPage .intlContent :is(h2, h3),
.intlRefreshPage .refreshDashboard :is(p, dt, dd, span) {
  color: var(--ui-text);
}
.intlRefreshPage .intlContent p {
  color: var(--ui-text-muted);
}
.intlRefreshPage :is(.refreshOverview, .refreshStep, .refreshCoverage, .refreshHistory),
.intlRefreshPage .refreshDashboard > section:not(.refreshOverview, .refreshStepsIntro) {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.intlRefreshPage .refreshProgressPanel {
  margin: 24px 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.intlRefreshPage .refreshProgressBar {
  width: 100%;
  height: 16px;
  margin: 12px 0;
  accent-color: var(--ui-brand);
}
.intlRefreshPage .refreshProgressTrack {
  height: 12px;
  margin: 12px 0;
  border-radius: 6px;
  background: var(--ui-surface-muted);
}
.intlRefreshPage .refreshDashboard :is(input, select) {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}
.intlRefreshPage .refreshOverview button {
  border-color: var(--ui-brand);
  background: var(--ui-brand);
  color: var(--ui-surface);
}
.intlRefreshPage .refreshStep .intlFacts > div,
.intlRefreshPage .refreshCoverage .intlTable th {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}
.intlRefreshPage .refreshCoverage .intlTable :is(table, th, td),
.intlRefreshPage .refreshHistory {
  border-color: var(--ui-border);
}
.intlRefreshPage .refreshCoverage .intlTable td,
.intlRefreshPage .refreshHistory summary {
  color: var(--ui-text);
}

/* Catalog details prioritize exact identity and provenance before price evidence. */
.catalogDetailPage .catalogDetailContent {
  max-width: 1240px;
}
.catalogDetailPage .catalogDetailBreadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.catalogDetailPage .catalogDetailBreadcrumb a {
  color: var(--ui-brand);
}
.catalogDetailPage .catalogDetailBreadcrumb span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalogDetailPage .catalogDetailHeading {
  margin: 18px 0 22px;
}
.catalogDetailPage .catalogDetailHeading h1 {
  margin: 6px 0;
  color: var(--ui-text);
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: -0.05em;
}
.catalogDetailPage .catalogDetailHeading > p:last-child {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 13px;
}
.catalogDetailPage .catalogDetailDashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: stretch;
  gap: 14px;
}
.catalogDetailPage .catalogDetailHero {
  grid-template-columns: minmax(160px, 250px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.catalogDetailPage .catalogDetailImage {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-raised);
}
.catalogDetailPage .catalogDetailHero h2 {
  margin: 6px 0 16px;
  color: var(--ui-text);
  font-size: 20px;
}
.catalogDetailPage .catalogDetailHero dl div {
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
}
.catalogDetailPage .catalogDetailHero :is(dt, p),
.catalogDetailPage .catalogPriceGrid :is(small, span, p, time) {
  color: var(--ui-text-muted);
}
.catalogDetailPage .catalogDetailHero dd,
.catalogDetailPage .catalogPriceGrid strong {
  color: var(--ui-text);
}
.catalogDetailPage .catalogDetailSnapshot {
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
}
.catalogDetailPage .catalogDetailSnapshot dl {
  margin: 12px 0 22px;
}
.catalogDetailPage .catalogDetailSnapshot dl > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-border);
}
.catalogDetailPage .catalogDetailSnapshot dt {
  color: var(--ui-text-muted);
  font-size: 12px;
}
.catalogDetailPage .catalogDetailSnapshot dd {
  margin: 6px 0 0;
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 750;
}
.catalogDetailPage .catalogDetailSnapshot a,
.catalogDetailPage .catalogDetailHero a {
  color: var(--ui-brand);
}
.catalogDetailPage .catalogPricePanel {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.catalogDetailPage .catalogPricePanel > p {
  color: var(--ui-text-muted);
}
.catalogDetailPage .catalogPriceGrid article {
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-raised);
}
.catalogDetailPage .catalogEmpty {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-raised);
}
@media (max-width: 1000px) {
  .catalogDetailPage .catalogDetailDashboard {
    grid-template-columns: 1fr;
  }
  .catalogDetailPage .catalogDetailSnapshot dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 620px) {
  .catalogDetailPage .catalogDetailHero {
    grid-template-columns: 1fr;
  }
  .catalogDetailPage .catalogDetailSnapshot dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* The older exact-variant route uses the same compact market detail language. */
.detailPage .detailExchangeHero {
  min-height: 0;
  margin-top: 18px;
  padding: 52px 24px 24px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
}
.detailPage .detailMarketNav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 0 auto 16px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-border);
}
.detailPage .detailMarketNav a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.detailPage .detailMarketNav a:hover {
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.detailPage .detailMarketNav span {
  color: var(--ui-text-muted);
  font-size: 11px;
}
.detailPage :is(.identitySection, .priceLocked, .priceHistorySection, .siblingSection) {
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.detailPage .marketPriceCard {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
}
.detailPage .marketPriceCardHead b {
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
@media (max-width: 680px) {
  .detailPage .detailMarketNav {
    width: calc(100% - 32px);
  }
  .detailPage .detailMarketNav a {
    flex-direction: column-reverse;
    padding: 11px;
    font-size: 11px;
  }
  .detailPage .detailExchangeHero {
    padding: 52px 18px 20px;
  }
}

/* Photo lookup results use the same compact evidence layout as card details. */
.exchangeShell:has(.photoResultPage) {
  background: var(--ui-canvas);
}
.photoResultPage .photoResultBack {
  color: var(--ui-brand);
}
.photoResultPage .photoResultHero {
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border-color: var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.photoResultPage .photoResultImage {
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-raised);
}
.photoResultPage .photoResultImage img {
  height: 340px;
  border-radius: 4px;
}
.photoResultPage .photoResultImage span,
.photoResultPage .photoResultIntro,
.photoResultPage .photoResultInfo > p,
.photoResultPage .photoHeroPrice > :is(p, small),
.photoResultPage .photoResultFacts dt,
.photoResultPage .photoResultPrice p,
.photoResultPage .unifiedResultsHeading p {
  color: var(--ui-text-muted);
}
.photoResultPage .photoResultInfo {
  align-self: start;
}
.photoResultPage .photoResultBadge {
  border-radius: 4px;
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.photoResultPage .photoResultHero .photoResultInfo h1 {
  margin: 12px 0;
  color: var(--ui-text);
}
.photoResultPage .photoHeroPrice {
  padding: 18px;
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-raised);
}
.photoResultPage .photoHeroPrice > :is(span, strong) {
  color: var(--ui-text);
}
.photoResultPage .photoResultFacts div {
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
}
.photoResultPage .photoResultFacts dd {
  color: var(--ui-text);
}
.photoResultPage .photoResultNav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 22px;
}
.photoResultPage .photoResultNav a {
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.photoResultPage .photoResultNav a:hover {
  border-color: var(--ui-brand);
  color: var(--ui-brand);
}
.photoResultPage .photoUnifiedResults {
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
}
.photoResultPage .unifiedResultsHeading h2,
.photoResultPage .photoResultPrice h2 {
  color: var(--ui-text);
}
.photoResultPage .unifiedResultsHeading h2 span {
  color: var(--ui-brand);
}
.photoResultPage .unifiedResultCounts span {
  border-color: var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text-muted);
}
.photoResultPage .photoResultPrice,
.photoResultPage .unifiedSearchStatus {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.photoResultPage > .cardResearchPanel {
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.photoResultPage > .cardResearchPanel :is(h2, .cardResearchAmount, .cardResearchRange) {
  color: var(--ui-text);
}
.photoResultPage > .cardResearchPanel :is(p, small, .cardResearchEyebrow) {
  color: var(--ui-text-muted);
}
.photoResultPage :is(.photoResultActions a, .photoResultRetry) {
  border-color: var(--ui-border);
  color: var(--ui-brand);
}
.saveCardDialog {
  border-color: var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.saveCardDialog h2 {
  color: var(--ui-text) !important;
}
.saveCardDialog :is(p, small, summary) {
  color: var(--ui-text-muted);
}
.saveCardDialog :is(input, .saveCardPreview) {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
@media (max-width: 700px) {
  .photoResultPage .photoResultHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .photoResultPage .photoResultImage img {
    height: 260px;
  }
  .photoResultPage .photoUnifiedResults {
    padding: 16px;
  }
}

/* Market explorer: an analytical search workspace shared by KR, US and EU. */
.marketExplorer .explorerContent {
  margin-top: 22px;
}
.marketExplorer .explorerIntro {
  margin-bottom: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--ui-border);
}
.marketExplorer .explorerIntroRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 6px;
}
.marketExplorer .explorerIntro h1 {
  margin: 0 0 5px;
  color: var(--ui-text);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.05em;
}
.marketExplorer .explorerIntro p {
  max-width: 72ch;
  color: var(--ui-text-muted);
}
.marketExplorer .explorerMarketBadge {
  flex: none;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text-muted);
  font:
    700 11px Consolas,
    monospace;
}
.marketExplorer .explorerControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px 22px;
  padding: 20px;
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
}
.marketExplorer .explorerMarkets,
.marketExplorer .explorerGameChooser {
  grid-column: 1 / -1;
}
.marketExplorer .explorerMarkets a {
  border-color: var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.marketExplorer .explorerMarkets a[aria-current="page"] {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.marketExplorer .explorerMarkets small,
.marketExplorer .explorerSearchHelp,
.marketExplorer .explorerGames small {
  color: var(--ui-text-muted);
}
.marketExplorer .explorerSearch {
  grid-column: 1;
  min-width: 0;
  margin-top: 0;
}
.marketExplorer .explorerSearchRow {
  overflow: visible;
  padding: 4px;
  border-color: var(--ui-border-strong);
  border-radius: 8px;
  background: var(--ui-surface-raised);
  box-shadow: none;
}
.marketExplorer .explorerSearchRow:focus-within {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 18%, transparent);
}
.marketExplorer .explorerSearchRow label {
  min-width: 0;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 4px;
  background: transparent;
}
.marketExplorer .explorerSearchRow label > span {
  color: var(--ui-text-muted);
}
.marketExplorer .explorerSearchRow input {
  background: transparent;
  color: var(--ui-text);
}
.marketExplorer .explorerSearchRow input::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}
.marketExplorer .explorerSearchRow input:focus-visible {
  outline: none;
  box-shadow: none;
}
.marketExplorer .explorerSearchRow button,
.marketExplorer .explorerFilters button {
  margin: 5px;
  border-radius: 4px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
  box-shadow: none;
}
.marketExplorer .explorerSearchRow button {
  margin: 0;
}
.marketExplorer .cardSearchSuggestions {
  border-color: var(--ui-border-strong);
  border-radius: 8px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.marketExplorer .cardSearchSuggestions > a:is(:hover, :focus-visible) {
  background: var(--ui-brand-soft);
}
.marketExplorer .cardSearchSuggestions small {
  color: var(--ui-text-muted);
}
.marketExplorer .explorerGameChooser .explorerGames,
.marketExplorer .explorerFilters[open] > div {
  padding: 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.marketExplorer .explorerGames a {
  border-color: var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.marketExplorer .explorerGames a[aria-current="page"] {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.marketExplorer .photoCardSearch {
  grid-column: 2;
  align-self: stretch;
  margin: 0;
  padding: 14px;
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.marketExplorer .explorerGameChooser {
  margin-top: 0;
}
.marketExplorer .explorerResultsHeading {
  margin-top: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ui-border);
}
.marketExplorer .explorerOverview,
.marketExplorer .explorerEmpty {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

/* One card detail template: identity, source-aware price history and market tables. */
.shopProductPage .shopProductHero {
  border-color: var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
}
.shopProductPage .shopProductIdentity .exchangeEyebrow {
  color: var(--ui-brand);
}
.shopProductPage .cardDetailSnapshot {
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
}
.shopProductPage .cardDetailMarketNav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  width: min(var(--desktop-page-width, 1280px), calc(100% - 64px));
  margin: 16px auto;
  padding: 11px 15px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}
.shopProductPage .cardDetailMarketNav > span {
  margin-right: 8px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.shopProductPage .cardDetailMarketNav a {
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text);
  font-weight: 800;
  text-decoration: none;
}
.shopProductPage .cardDetailMarketNav a[aria-current="location"] {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.shopProductPage .cardDetailMarketNav small {
  margin-left: 4px;
  color: var(--ui-text-muted);
  font-size: 10px;
}
.shopProductPage .cardDetailMarket {
  scroll-margin-top: 24px;
}

/* Member and operations views use the same workspace proportions. */
.accountPage .accountWorkspace {
  align-items: start;
  gap: 18px;
}
.accountPage .accountJourney,
.accountPage .accountPanel,
.adminWorkspace .adminSidebar,
.adminWorkspace .adminWorkspaceContent {
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  box-shadow: none;
}
.adminWorkspace .adminWorkspaceContent {
  padding: 24px;
}
@media (max-width: 760px) {
  .adminWorkspace .adminWorkspaceContent {
    padding: 16px;
  }
}
.accountPage .accountSurface {
  min-height: 0;
}
.accountPage .accountJourneyHeading,
.adminWorkspace .adminSidebar > p {
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  padding-bottom: 12px;
}
.adminWorkspace .adminSidebar h2 {
  color: var(--ui-text) !important;
}
.adminWorkspace .adminSidebar nav a {
  min-width: 0;
  color: var(--ui-text) !important;
  overflow-wrap: anywhere;
}
.adminWorkspace .adminSidebar nav a span {
  flex: none;
  color: var(--ui-text-muted);
}
.adminWorkspace .adminSidebar nav a:hover {
  background: var(--ui-surface-muted);
}
.adminWorkspace .adminSidebar nav a[aria-current="page"] {
  color: var(--ui-brand) !important;
}
.adminWorkspace .adminSidebar > a {
  color: var(--ui-brand) !important;
}
.adminWorkspace .adminSidebar button {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}
.accountPage .accountJourneyHeading {
  border-radius: 6px 6px 0 0;
  background: var(--ui-header);
  color: var(--ui-header-text);
}
.accountPage .accountMenu a,
.accountPage .accountMenu a strong,
.accountPage .accountSteps li,
.accountPage .accountSteps li strong {
  color: var(--ui-text);
}
.accountPage .accountMenu a small,
.accountPage .accountSteps li small,
.accountPage .accountSecurityNote,
.accountPage .accountPageHeading > p:last-child:not(.exchangeEyebrow) {
  color: var(--ui-text-muted);
}
.accountPage .accountMenu a > span,
.accountPage .accountSteps li > span {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
}
.accountPage .accountSecurityNote {
  border-color: var(--ui-border);
}
.accountPage .accountMenu a,
.adminWorkspace .adminSidebar nav a {
  border-radius: 4px;
}
.accountPage .accountMenu a.isCurrent,
.adminWorkspace .adminSidebar nav a[aria-current="page"] {
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.accountPage .accountPageHeading,
.adminWorkspace .adminWorkspaceHeading {
  border-bottom: 1px solid var(--ui-border);
}
.accountPage .accountPageHeading h1,
.accountPage .accountPanel h1 {
  color: var(--ui-text);
}
.accountPage .accountInlineAction,
.accountPage .accountPrimaryButton,
.accountPage .accountForm button {
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}

/* Price hubs and exact search keep the data panels ahead of editorial content. */
.exchangeShell.priceLandingPage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.exchangeShell.priceLandingPage .searchHero {
  gap: 24px;
  margin-block: 20px;
  padding: 24px 30px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
}
.exchangeShell.priceLandingPage .searchHero h1 {
  color: var(--ui-text);
  font-size: clamp(27px, 3vw, 38px);
}
.exchangeShell.priceLandingPage .searchHero > p {
  color: var(--ui-text-muted);
}
.exchangeShell.priceLandingPage .searchHero .exchangeEyebrow {
  color: var(--ui-brand);
}
.priceLandingPage .priceLandingGameNav a,
.priceLandingPage .priceLandingSetNav a {
  border-color: var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text-muted);
}
.priceLandingPage .priceLandingGameNav a.isActive,
.priceLandingPage .priceLandingSetNav a.isActive {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.priceLandingPage .priceLandingSetDisclosure {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto 18px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}
.priceLandingPage .priceLandingSetDisclosure summary {
  padding: 13px 16px;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.priceLandingPage .priceLandingSetDisclosure[open] summary {
  border-bottom: 1px solid var(--ui-border);
}
.priceLandingPage .priceLandingSetDisclosure .priceLandingSetNav {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
}
.priceLandingPage .priceLandingSetNav,
.priceLandingPage .marketAccuracyNotice,
.priceLandingPage .marketProductsSection {
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.priceLandingPage .marketAccuracyNotice {
  border-left: 3px solid var(--ui-brand);
  background: var(--ui-surface-raised);
}
.exchangeShell.priceLandingPage .marketSectionHeading h2,
.exchangeShell.priceLandingPage .marketProductsSection > h2,
.exchangeShell.priceLandingPage .gameBrowseSuggestions h2,
.priceLandingPage .priceLandingNavLabel,
.priceLandingPage .marketAccuracyNotice strong {
  color: var(--ui-text);
}
.exchangeShell.priceLandingPage .marketSectionHeading p:last-child,
.exchangeShell.priceLandingPage .marketProductsSection > p,
.priceLandingPage .marketAccuracyNotice p {
  color: var(--ui-text-muted);
}
.priceLandingPage .priceGuideSteps li {
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
}
.exchangeShell.priceLandingPage > footer,
.exchangeShell.priceLandingPage > footer a {
  color: var(--ui-text-muted);
  border-color: var(--ui-border);
}
.searchPage .searchHero {
  padding-block: 34px 24px;
  gap: 24px;
}
.exchangeShell.searchPage .searchHero h1 {
  color: var(--ui-text);
  font-family: inherit;
  font-size: clamp(28px, 3.3vw, 42px);
}
.exchangeShell.searchPage .searchHero > p,
.exchangeShell.searchPage .resultsHeading > span {
  color: var(--ui-text-muted);
}
.searchPage .searchPanel,
.searchPage .searchResults {
  width: min(var(--desktop-page-width, 1240px), calc(100% - 48px));
  max-width: none;
  min-height: 0;
  margin: 0 auto 18px;
  padding: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.searchPage .searchField > span,
.searchPage .searchHint,
.searchPage .resultsHeading > span {
  color: var(--ui-text-muted);
}
.searchPage .searchField :is(input, select) {
  border-color: var(--ui-border-strong);
  border-radius: 4px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.searchPage .searchForm button {
  border-color: var(--ui-brand);
  border-radius: 4px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}
.searchPage .searchResults {
  padding: 0 20px 20px;
}
.searchPage .resultsHeading {
  padding: 18px 0;
  border-color: var(--ui-border);
}
.exchangeShell.searchPage .resultsHeading h2 {
  color: var(--ui-text);
  font-family: inherit;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
}
.cardAnswerPage .cardAnswerBreadcrumb {
  color: var(--ui-text-muted);
}
.cardAnswerPage .cardAnswerHero,
.cardAnswerPage .cardAnswerHelp {
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.exchangeShell.cardAnswerPage .cardAnswerHero h1,
.exchangeShell.cardAnswerPage .cardAnswerHelp h2 {
  color: var(--ui-text);
}
.exchangeShell.cardAnswerPage > .marketProductsSection {
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.cardAnswerPage .cardAnswerHero > p,
.cardAnswerPage .cardAnswerHero .cardAnswerCaveat,
.cardAnswerPage .cardAnswerHelp p {
  color: var(--ui-text-muted);
}
.cardAnswerPage .cardAnswerSummary > div {
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
}
.cardAnswerPage .cardAnswerSummary span {
  color: var(--ui-text-muted);
}
.cardAnswerPage .cardAnswerHelp a {
  border-radius: 4px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}
.exchangeShell :is(.emptyState, .serviceError, .catalogNotice, .demoNotice) {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.exchangeShell .emptyState :is(strong, p) {
  color: var(--ui-text-muted);
}

/* Discovery and reading routes share compact institutional navigation. */
.playPage .playHero {
  margin-top: 20px;
  padding: 24px 30px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.playPage .playHero .magazineEyebrow {
  color: var(--ui-brand);
}
.playPage .playHero h1 {
  margin: 6px 0;
  font-size: clamp(26px, 3vw, 36px);
}
.playPage .playHero > p:last-child {
  color: var(--ui-text-muted);
}
.playPage .playGameTabs {
  gap: 7px;
  margin: 16px 0;
}
.playPage .playGameTabs a {
  padding: 9px 13px;
  border-color: var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.playPage .playGameTabs a[aria-current="page"] {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.playPage .playFilters {
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}
.playPage .playFilters label,
.playPage .playResultsHeading p,
.playPage .playListing p {
  color: var(--ui-text-muted);
}
.playPage .playFilters select {
  border-color: var(--ui-border-strong);
  border-radius: 4px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.playPage .playFilters button {
  border-radius: 4px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
}
.playPage .playResultsHeading {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ui-border);
}
.playPage .playResultsHeading h2,
.playPage .playListing h3 {
  color: var(--ui-text);
}
.playPage .playListing {
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
}
.playPage .playListing :is(.playDate, a) {
  color: var(--ui-brand);
}
.magazinePage .magazineContainer {
  padding-top: 30px;
}
.exchangeShell.magazineArticlePage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.magazineArticlePage .cardGuideArticle {
  border-color: var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  box-shadow: none;
}
.magazineArticlePage .cardGuideHeading {
  border-color: var(--ui-border);
}
.exchangeShell.magazineArticlePage .cardGuideHeading h1,
.exchangeShell.magazineArticlePage .cardGuideArticle section > h2 {
  color: var(--ui-text);
}
.exchangeShell.magazineArticlePage .cardGuideHeading > p:not(.magazineEyebrow),
.exchangeShell.magazineArticlePage .cardGuideArticle section > p,
.magazineArticlePage .cardGuideHeading small,
.magazineArticlePage .magazineArticleCover figcaption,
.magazineArticlePage .cardGuideFootnote {
  color: var(--ui-text-muted);
}
.magazineArticlePage .magazineBackLink,
.magazineArticlePage .magazineArticleSources a,
.magazineArticlePage .magazineContainer > footer a {
  color: var(--ui-brand);
}
.magazineArticlePage .magazineArticleCover img,
.magazineArticlePage .magazineArticleSources,
.magazineArticlePage .cardGuideChecklist,
.magazineArticlePage .cardGuideActions a {
  border-color: var(--ui-border);
  border-radius: 5px;
}
.magazineArticlePage .magazineArticleSources,
.magazineArticlePage .cardGuideChecklist {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
main.methodologyPage,
main.intlMethodologyPage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.methodologyPage
  :is(
    .methodologyHero h1,
    .methodologySectionHeading h2,
    .methodologyCard h3,
    .methodologyDefinition h3,
    .methodologyStateList h3
  ),
.intlMethodologyPage .intlContent :is(h1, h2) {
  color: var(--ui-text);
}
.methodologyPage
  :is(
    .methodologyHero > p,
    .methodologyCurrentState p,
    .methodologyDefinition p,
    .methodologyCard p,
    .methodologyStateList p,
    .methodologyRights > div > p
  ),
.intlMethodologyPage .intlContent p {
  color: var(--ui-text-muted);
}
.methodologyPage
  :is(
    .methodologyCurrentState,
    .methodologyCard,
    .methodologyDefinition,
    .methodologyStateList article
  ),
.intlMethodologyPage .intlMethodologySection {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
}
.methodologyPage .methodologyDisclaimer p {
  color: var(--ui-on-brand);
}
.magazinePage .magazineHeading {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ui-border);
}
.magazinePage .magazineHeading h1 {
  font-size: clamp(28px, 3vw, 38px);
}
.magazinePage .magazineHeading > .magazineEyebrow {
  color: var(--ui-brand);
}
.magazinePage .magazineHeading > p:last-child {
  color: var(--ui-text-muted);
  font-size: 15px;
}
.magazinePage .magazineFeature {
  border-color: var(--ui-border);
  border-radius: 6px;
}
.magazinePage .magazineFeatureCopy {
  background: var(--ui-header);
}
.magazinePage .cardGuideTile {
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.magazinePage .cardGuideTile p {
  color: var(--ui-text-muted);
}
.magazinePage .cardGuideTile .magazineGameLabel,
.magazinePage .magazineEyebrow {
  color: var(--ui-brand);
}
.playPage .playContainer,
.buyPicksPage .buyPicksContainer {
  padding-top: 20px;
}
.trendingPage .searchHero {
  gap: 24px;
  padding-block: 28px 20px;
}
.trendingPage .searchHero h1 {
  color: var(--ui-text);
  font-family: inherit;
  font-size: clamp(27px, 3vw, 38px);
}
.trendingPage .trendingMarketTabs {
  gap: 8px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.trendingPage .trendingMarketTabs a {
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.trendingPage .trendingMarketTabs a[aria-current="page"] {
  border-color: var(--ui-brand);
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}
.trendingPage .marketAccuracyNotice,
.trendingPage .marketProductsSection {
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.exchangeShell.priceLandingPage .marketProductsSection,
.exchangeShell.trendingPage .marketProductsSection,
.exchangeShell.cardAnswerPage > .marketProductsSection {
  padding: 20px;
}
.methodologyPage .methodologyContent > .methodologySection {
  padding: 36px 28px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .exchangeShell.priceLandingPage .marketProductsSection,
  .exchangeShell.trendingPage .marketProductsSection,
  .exchangeShell.cardAnswerPage > .marketProductsSection {
    padding: 16px;
  }
  .methodologyPage .methodologyContent > .methodologySection {
    padding: 28px 16px;
  }
}
.trendingPage .marketAccuracyNotice {
  background: var(--ui-surface-raised);
}
.trendingPage .marketSectionHeading h2 {
  color: var(--ui-text);
}
.trendingPage .marketSectionHeading > a {
  color: var(--ui-brand);
}
html[data-theme="dark"] .exchangeShell .coupangAffiliateItem,
html[data-theme="dark"] .exchangeShell .marketSourceCard dl > div {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
html[data-theme="dark"] .exchangeShell .coupangAffiliateItem :is(strong, span, small),
html[data-theme="dark"] .exchangeShell .marketSourceCard dl :is(dt, dd) {
  color: var(--ui-text);
}
.buyPicksPage {
  background: var(--ui-canvas);
}
.buyPicksPage .buyPicksContainer {
  color: var(--ui-text);
}
.buyPicksPage .buyPicksMemberGate,
.buyPicksPage .buyPicksHero {
  display: block;
  min-height: 0;
  padding: 28px 32px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.buyPicksPage .buyPicksMemberCopy {
  max-width: none;
}
.buyPicksPage .buyPicksMemberCopy .exchangeEyebrow {
  color: var(--ui-brand);
}
.buyPicksPage .buyPicksMemberCopy h1,
.buyPicksPage .buyPicksHero h1 {
  margin: 8px 0;
  color: var(--ui-text);
  font-size: clamp(27px, 3vw, 38px);
}
.buyPicksPage .buyPicksMemberCopy > p:not(.exchangeEyebrow),
.buyPicksPage .buyPicksHero > p:last-child,
.buyPicksPage .buyPicksCriteria,
.buyPicksPage .buyPicksFootnote {
  color: var(--ui-text-muted);
  font-size: 14px;
}
.buyPicksPage .buyPicksMemberCopy ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}
.buyPicksPage .buyPicksMemberCopy li {
  min-height: 68px;
  padding: 12px 16px;
  border-right: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font-size: 13px;
}
.buyPicksPage .buyPicksMemberCopy li:last-child {
  border-right: 0;
}
.buyPicksPage .buyPicksMemberCopy li::before {
  content: "•";
  color: var(--ui-brand);
}
.buyPicksPage .buyPicksMemberCopy > a,
.buyPicksPage .buyPickGate a {
  padding: 12px 17px;
  border-radius: 4px;
  background: var(--ui-brand-solid);
  color: var(--ui-on-brand);
  box-shadow: none;
}
.buyPicksPage .buyPicksMemberCopy small {
  color: var(--ui-text-muted);
}
.buyPicksPage :is(.buyPickCard, .buyPickGate, .buyPickFacts, .buyPickAi, .buyPickTrend) {
  border-color: var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  box-shadow: none;
}
.buyPicksPage .buyPickTrend {
  padding: 0;
  border: 0;
  background: transparent;
}
.buyPicksPage .buyPickTrend > h2 {
  margin: 0 0 8px;
}
.buyPicksPage .buyPickTrend > p {
  margin: 0 0 12px;
}
.buyPicksPage
  :is(
    .buyPicksMarketHead h2,
    .buyPickFacts h2,
    .buyPickAi h2,
    .buyPickTrend h2,
    .buyPickBody h2,
    .buyPickAi h3
  ) {
  color: var(--ui-text);
}
.buyPicksPage :is(.buyPicksMarketHead p, .buyPickBody p, .buyPickGate p, .buyPickAi p) {
  color: var(--ui-text-muted);
}

@media (max-width: 720px) {
  .buyPicksPage .buyPicksMemberCopy ul {
    grid-template-columns: 1fr;
  }
  .buyPicksPage .buyPicksMemberCopy li {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .buyPicksPage .buyPicksMemberCopy li:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 1000px) {
  .marketHome .overviewStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .marketHome .overviewStats article:nth-child(3) {
    border-right: 0;
  }
  .marketHome .overviewStats article:nth-child(-n + 3) {
    border-bottom: 1px solid var(--ui-border);
  }
}

@media (max-width: 720px) {
  .marketHome .homeHero,
  .marketHome .homeMarketBoard,
  .marketHome .homeDashboardLayout,
  .shopProductPage .cardDetailMarketNav {
    width: calc(100% - 28px);
  }
  .marketHome .homeHero .homeBrowse {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }
  .marketHome .homeValueIntro h1 {
    font-size: 27px;
  }
  .marketHome .photoCardSearch {
    width: 100%;
  }
  .marketHome .overviewHeading {
    padding: 16px;
  }
  .marketHome .homeMarketOverview {
    display: flex;
    flex-direction: column;
  }
  .marketHome .overviewHeading {
    order: 0;
  }
  .marketHome .overviewTableScroll {
    order: 1;
  }
  .marketHome .overviewStats {
    order: 2;
  }
  .marketHome .overviewFootnote {
    order: 3;
  }
  .marketHome .overviewStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .marketHome .overviewStats article:nth-child(3) {
    border-right: 1px solid var(--ui-border);
  }
  .marketHome .overviewStats article:nth-child(2n) {
    border-right: 0;
  }
  .marketHome .overviewStats article:nth-child(-n + 4) {
    border-bottom: 1px solid var(--ui-border);
  }
  .marketExplorer .explorerIntroRow {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .marketExplorer .explorerControls {
    display: block;
    padding: 14px;
  }
  .marketExplorer .photoCardSearch {
    margin-top: 12px;
  }
  .marketExplorer .explorerGameChooser {
    margin-top: 16px;
  }
}

/* Exchange layouts: dense data tables, two-column desktop and task-based mobile. */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.exchangeShell .nav.siteHeader {
  min-height: 60px;
  padding: 0 24px;
  gap: 24px;
  background: var(--ui-surface);
  color: var(--ui-text);
  border-bottom: 1px solid var(--ui-border);
}
.siteHeader .brand {
  color: var(--ui-text);
  flex-shrink: 0;
  min-width: 163px;
}
.siteHeader .brandSymbol {
  display: none;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.siteHeader .brandWordmark { width: 141px; height: 38px; }
.siteHeader .sitePrimaryLinks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(780px, 54vw);
  align-self: stretch;
  gap: 0;
  align-items: stretch;
}
.siteHeader .sitePrimaryLinks > a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 5px;
  color: var(--ui-text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.siteHeader .sitePrimaryLinks > a[aria-current="page"] {
  color: var(--ui-text);
  background: none;
}
.siteHeader .sitePrimaryLinks > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--ui-brand);
  left: 0;
  right: 0;
}
.headerSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
}
.headerSearch svg {
  width: 16px;
  flex-shrink: 0;
}
.exchangeShell .headerSearch input {
  border: 0;
  background: none;
  min-width: 0;
  width: 100%;
  color: var(--ui-text);
  padding: 0;
  height: auto;
  font-size: 11px;
  outline-offset: 3px;
}
.siteHeader .siteHeaderActions {
  margin-left: 0;
  gap: 12px;
}
.siteHeader .siteAccountLink,
.siteHeader .siteAdminLink,
.siteHeader .siteLanguage summary {
  color: var(--ui-text-muted);
  font-size: 12px;
}
.siteHeader .siteAccountLink {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}
.siteHeader .siteAccountLink svg {
  width: 16px;
  height: 16px;
}
.siteHeader .siteAccountLink:hover,
.siteHeader .siteAccountLink[aria-current="page"],
.siteHeader .siteAdminLink:hover,
.siteHeader .siteAdminLink[aria-current="page"] {
  color: var(--ui-brand);
}
.siteHeader .siteAdminLink {
  flex-shrink: 0;
  white-space: nowrap;
}
.siteHeader .themePicker select {
  color: var(--ui-text-muted);
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
  min-height: 30px;
  max-width: 72px;
  padding: 0 4px;
  font-size: 11px;
}
.siteHeader .siteMenuButton {
  align-items: center;
  justify-content: center;
  color: var(--ui-text);
}
.siteHeader .siteMenuButton svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.headerMobileSearch,
.mobileBottomNav {
  display: none;
}
.exchangeShell.terminalHome {
  max-width: none;
  padding: 0;
}
.terminalHome > .siteHeader {
  padding-inline: max(24px, calc((100vw - 1600px) / 2 + 24px));
}
.terminalHomeContent {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}
.marketSourceBar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 10px;
}
.marketSourceBar a,
.terminalPanelHeading > a,
.indexFootnote a,
.homePhotoPanel > a,
.terminalTableNote > a {
  color: var(--ui-brand);
  white-space: nowrap;
}
.marketTicker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-border);
  overflow-x: auto;
}
.marketTicker > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-right: 1px solid var(--ui-border);
  min-width: 0;
}
.marketTicker > a:first-child {
  padding-left: 0;
}
.marketTicker > a:last-child {
  border-right: 0;
}
.tickerNumbers {
  display: grid;
  gap: 3px;
  color: var(--ui-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tickerNumbers small {
  font-size: 10px;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
.tickerNumbers b {
  color: var(--ui-brand);
}
.tickerNumbers strong {
  font-size: 17px;
}
.marketTicker svg {
  width: 80px;
  height: 36px;
  min-width: 34px;
  flex: 1;
}
.tickerMissing {
  color: var(--ui-text-muted);
  margin-left: auto;
}
.terminalPageHeading {
  margin: 24px 0 18px;
}
.terminalPageHeading h1 {
  font-size: 27px;
  letter-spacing: -0.8px;
  line-height: 1.3;
  margin: 0;
}
.terminalPageHeading p {
  color: var(--ui-text-muted);
  font-size: 14px;
  margin: 8px 0 0;
}
.terminalMarketHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}
.terminalMarketHeading > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.terminalMarketHeading h1 {
  font-size: 23px;
}
.terminalMarketHeading p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  max-width: 850px;
}
.terminalMarketHeading > span {
  color: var(--ui-text-muted);
  font-size: 11px;
}
.marketOverviewGrid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(285px, 1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}
.terminalPanel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
}
.terminalPanelHeading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.terminalPanelHeading h2 {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin: 0;
}
.terminalPanelHeading > a,
.terminalPanelHeading > span {
  font-size: 11px;
}
.terminalPanelHeading > span {
  color: var(--ui-text-muted);
}
.terminalTableScroll {
  width: 100%;
  overflow-x: auto;
}
.terminalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.terminalTable :is(th, td) {
  padding: 7px 9px;
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap;
  height: 35px;
}
.terminalTable th {
  font-weight: 500;
}
.terminalTable thead th {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: 11px;
}
.terminalTable thead button {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.terminalTable tbody tr:hover {
  background: var(--ui-surface-raised);
}
.terminalTable tbody tr:last-child :is(td, th) {
  border-bottom: 0;
}
.terminalPositive {
  color: var(--ui-positive);
}
.terminalNegative {
  color: var(--ui-negative);
}
.globalIndexTable :is(th, td) {
  padding: 3px 9px;
  height: 30px;
}
.globalIndexTable th a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gameSymbol {
  color: var(--ui-brand);
  min-width: 36px;
  font-size: 11px;
}
.globalIndexTable th a > span {
  font-size: 11px;
  color: var(--ui-text-muted);
}
.globalIndexTable th:last-child {
  text-align: center;
}
.compactMarketChart {
  height: 27px;
  position: relative;
  display: flex;
  align-items: center;
}
.compactMarketChart > svg {
  height: 27px;
}
.compactMarketChart > small {
  display: none !important;
}
.compactMarketChart > button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-text-muted);
  font-size: 10px;
}
.compactMarketChart .chartLoading {
  min-height: 20px;
}
.indexMethod {
  margin-top: 7px;
  color: var(--ui-text-muted);
  font-size: 10px;
}
.indexMethod summary {
  cursor: pointer;
}
.indexMethod p {
  font-size: 11px;
  line-height: 1.7;
}
.indexMethod ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.indexFootnote {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--ui-text-muted);
  margin-top: 8px;
}
.indexFootnote > span {
  margin-right: auto;
}
.terminalEmpty {
  padding: 16px 0;
  margin: 0;
  font-size: 12px;
  color: var(--ui-text-muted);
  line-height: 1.7;
}
.homePhotoPanel {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  display: flex;
  flex-direction: column;
}
.homeOverviewAside {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}
.homeOverviewAside > .savedCardsPreview {
  min-width: 0;
  overflow: hidden;
}
.homePhotoPanel > .photoLookup {
  padding: 0;
  border: 0;
}
.homePhotoPanel > form {
  display: flex;
  margin-top: 6px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface-raised);
}
.homeTextSearchLabel {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 700;
}
.homePhotoPanel > form > input {
  width: 100%;
  min-width: 0;
  background: none;
  color: var(--ui-text);
  border: 0;
  padding: 8px;
  font-size: 11px;
}
.homePhotoPanel > form > button {
  background: none;
  border: 0;
  color: var(--ui-text-muted);
  font-size: 20px;
  padding: 0 10px;
}
.homePhotoPanel > a {
  align-self: flex-end;
  margin-top: 8px;
  font-size: 11px;
}
.photoLookupUpload {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: var(--ui-surface-raised);
}
.photoDropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 90px;
  padding: 12px;
  border: 1px dashed var(--ui-border-strong);
  border-radius: 3px;
  background: var(--ui-canvas);
  color: var(--ui-text-muted);
  cursor: pointer;
}
.photoDropzone img {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
}
.photoLookupActions {
  display: grid;
  gap: 6px;
}
.photoLookupActions p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 4px;
  color: var(--ui-text-muted);
}
.terminalPrimary,
.terminalSecondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 34px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.terminalPrimary {
  color: var(--ui-on-brand);
  background: var(--ui-brand-solid);
  border: 1px solid var(--ui-brand);
}
.terminalPrimary > span {
  margin-left: auto;
}
.terminalSecondary {
  color: var(--ui-brand);
  background: transparent;
  border: 1px solid var(--ui-border-strong);
}
.photoGuestNote {
  font-size: 11px;
  margin: 8px 0;
  text-align: center;
  color: var(--ui-brand);
}
.photoDisclosure {
  margin: 6px 0 10px;
  font-size: 10px;
  color: var(--ui-text-muted);
}
.photoDisclosure summary {
  cursor: pointer;
}
.photoDisclosure p {
  line-height: 1.7;
  margin: 8px 0;
}
.terminalDashboard {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(285px, 1fr);
  gap: 12px;
  align-items: start;
}
.terminalDashboardMain,
.terminalDashboardAside {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.priceTerminalTools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.terminalSegments {
  display: flex;
  padding: 3px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-raised);
  border-radius: 4px;
}
.terminalSegments a {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--ui-text-muted);
}
.terminalSegments a[aria-current="page"] {
  outline: 1px solid var(--ui-brand);
  border-radius: 3px;
  color: var(--ui-brand);
  background: var(--ui-brand-soft);
}
.priceTerminalTools :is(select, input) {
  padding: 8px;
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 11px;
}
.priceTerminalTools input {
  flex: 1;
  min-width: 130px;
}
.terminalTabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  margin: 4px 0 6px;
}
.terminalTabs > button {
  padding: 9px 6px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ui-text-muted);
  background: none;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.terminalTabs > button[aria-pressed="true"] {
  color: var(--ui-brand);
  border-bottom-color: var(--ui-brand);
}
.terminalCard {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  white-space: normal;
}
.terminalCard img {
  width: 32px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.priceTerminal .terminalTable tbody :is(th, td) {
  padding-block: 4px;
}
.terminalCardIdentity {
  max-width: 230px;
}
.terminalCard small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--ui-text-muted);
}
.terminalTable .terminalSave {
  width: 26px;
  padding: 2px;
}
.terminalSave .saveToCards > .saveToCardsButton {
  padding: 0;
  width: 26px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ui-text-muted);
  font-size: 19px;
}
.terminalGameBadge {
  font-size: 10px;
  color: var(--ui-brand);
  background: var(--ui-brand-soft);
  padding: 3px 5px;
  border-radius: 3px;
}
.terminalAmount {
  text-align: right;
  font-weight: 600;
}
.terminalChart {
  width: 115px;
}
.terminalChart > div {
  min-height: 28px !important;
}
.terminalChart svg {
  height: 28px !important;
}
.terminalTableNote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--ui-border);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 10px;
  color: var(--ui-text-muted);
}
.exchangeShell .terminalTableNote {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 0 0;
  min-height: 0;
}
.terminalRanking > small {
  display: block;
  color: var(--ui-text-muted);
  font-size: 10px;
  margin-top: -5px;
  margin-bottom: 6px;
}
.terminalRanking ol,
.recentSearchPanel ul,
.savedCardsUpdates ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.terminalRanking li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 7px 0;
  border-top: 1px solid var(--ui-border);
}
.terminalRanking li strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.terminalRanking li > a > span:last-child {
  font-variant-numeric: tabular-nums;
}
.terminalRankNumber {
  display: grid;
  place-items: center;
  width: 19px;
  height: 20px;
  background: var(--ui-surface-muted);
  border-radius: 3px;
}
.recentSearchPanel li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--ui-border);
  font-size: 12px;
}
.recentSearchPanel li > a > span:last-child {
  margin-left: auto;
}
.recentSearchPanel small {
  display: block;
  font-size: 10px;
  color: var(--ui-text-muted);
  margin-top: 4px;
}
.recentSearchPanel img {
  height: 44px;
  width: 32px;
  object-fit: contain;
}
.terminalDailyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.terminalDailyGrid > .terminalPanel:last-child {
  grid-column: 1 / -1;
}
.terminalDailyActivities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.terminalDailyActivity {
  min-width: 0;
}
.terminalDailyActivity:only-child {
  grid-column: 1 / -1;
}
.terminalDailyGrid .dailyDraw,
.terminalDailyGrid .dailyMarketQuiz {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 16px;
  gap: 12px;
  border-color: var(--ui-border);
  border-radius: 5px;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}
.terminalDailyGrid .dailyDraw {
  min-height: 0;
}
.terminalDailyGrid .dailyDrawStage {
  flex-basis: 170px;
  min-height: 260px;
  min-width: 0;
}
.terminalDailyGrid .dailyDrawCardSlot {
  width: 170px;
  height: 236px;
}
.terminalDailyGrid .dailyDrawCopy,
.terminalDailyGrid .dailyMarketQuizCopy {
  flex: 1 1 170px;
  min-width: 0;
}
.terminalDailyGrid .dailyDraw h2,
.terminalDailyGrid .dailyMarketQuiz h2 {
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.25;
  word-break: keep-all;
}
.terminalDailyGrid .dailyDraw :is(h2, p, small),
.terminalDailyGrid .dailyMarketQuiz :is(h2, p, small) {
  color: var(--ui-text);
}
.terminalDailyGrid .dailyMarketQuiz {
  flex-wrap: wrap;
}
.terminalDailyGrid .dailyMarketQuizCard {
  flex-basis: 115px;
}
.terminalDailyGrid .terminalPanelHeading h2 {
  font-size: 13px;
}
.terminalDailyGrid .terminalPanelHeading {
  flex-wrap: wrap;
  gap: 3px;
}
.terminalDailyGrid p {
  font-size: 11px;
  color: var(--ui-text-muted);
  line-height: 1.8;
  margin: 0;
}
.marketExplorer .explorerContent,
.marketExplorer > footer {
  width: calc(100% - 48px);
  max-width: none;
}
.marketExplorer .explorerControls {
  grid-template-areas:
    "markets markets"
    "search photo"
    "games photo";
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 12px 16px;
}
.marketExplorer .explorerMarkets {
  grid-area: markets;
}
.marketExplorer .explorerSearch {
  grid-area: search;
}
.marketExplorer .explorerControls > .photoLookup {
  grid-area: photo;
  margin: 0;
}
.marketExplorer .explorerGameChooser {
  grid-area: games;
  min-width: 0;
}
.marketExplorer .explorerControls:not(:has(> .photoLookup)) > .explorerGameChooser {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .marketExplorer .explorerControls {
    display: flex;
    flex-direction: column;
  }
  .marketExplorer .explorerControls > * {
    width: 100%;
  }
}
.terminalLinkRows {
  display: grid;
  gap: 0;
}
.terminalLinkRows > a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--ui-border);
}
.terminalLinkRows > a:last-child {
  border: 0;
}
.terminalAffiliate {
  margin: 12px 0;
}
.terminalAffiliate .coupangCategoryBanner {
  margin: 0;
}
.terminalAdStrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  font-size: 11px;
}
.terminalAdStrip > a {
  color: var(--ui-brand);
}
.terminalAdStrip p {
  margin: 0 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 10px;
}
.globalPartnerFooter {
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
  color: var(--ui-text);
  padding: 18px 24px;
  gap: 20px;
}
.globalPartnerFooter > div > span {
  color: var(--ui-text-muted);
  font-size: 10px;
}
.globalPartnerFooter > div > strong {
  font-size: 14px;
  color: var(--ui-text);
}
.globalPartnerFooter > div > p {
  font-size: 11px;
  color: var(--ui-text-muted);
}
.globalPartnerLinks > a {
  background: none;
  color: var(--ui-brand);
  border: 0;
  padding: 0;
  font-size: 11px;
}
.terminalSources {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 1.5fr;
  gap: 20px;
  padding: 22px 4px;
  border-top: 1px solid var(--ui-border);
  margin-top: 16px;
}
.terminalSources > div,
.terminalSources > a {
  display: grid;
  align-content: start;
  gap: 6px;
}
.terminalSources > div > strong {
  font-size: 23px;
  letter-spacing: -0.6px;
}
.terminalSources > a > strong {
  font-size: 12px;
}
.terminalSources small,
.terminalSources p {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ui-text-muted);
  margin: 0;
}
.terminalHomeContent > footer {
  margin: 0;
  padding: 16px 0 24px;
  border-top: 1px solid var(--ui-border);
  font-size: 10px;
}
.photoSearchWorkspace {
  width: min(960px, calc(100% - 40px));
  margin: 30px auto 60px;
}
.photoSearchColumns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
}
.photoLookupExpanded .photoLookupUpload {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: none;
}
.photoLookupExpanded .photoDropzone {
  min-height: 250px;
  font-size: 16px;
  background: var(--ui-surface-raised);
}
.photoLookupExpanded .photoLookupActions {
  width: 100%;
  gap: 10px;
}
.photoLookupExpanded .photoLookupActions > p {
  display: none;
}
.photoLookupExpanded :is(.terminalPrimary, .terminalSecondary) {
  min-height: 48px;
  font-size: 16px;
}
.photoLookupExpanded .photoGuestNote {
  font-size: 12px;
  margin: 14px 0;
}
.photoSearchGuide {
  padding-top: 10px;
}
.photoSearchGuide h2 {
  font-size: 18px;
  margin: 0 0 16px;
}
.photoSearchGuide ol {
  counter-reset: photo;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.photoSearchGuide li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--ui-text-muted);
  font-size: 14px;
}
.photoSearchGuide li::before {
  counter-increment: photo;
  content: counter(photo);
  display: grid;
  place-items: center;
  background: var(--ui-surface-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ui-text);
  flex-shrink: 0;
}
.photoNameSearch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--ui-border);
  padding-top: 22px;
  margin-bottom: 18px;
}
.photoNameSearch h2 {
  flex-basis: 100%;
  margin-bottom: 2px;
}
.photoNameSearch label {
  flex: 1;
  min-width: 0;
}
.photoNameSearch input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-size: 13px;
}
.photoNameSearch button {
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  padding: 0 14px;
}
.photoSearchGuide > a {
  color: var(--ui-brand);
  font-size: 12px;
}
.photoSearchWorkspace > .recentSearchPanel {
  margin-top: 24px;
}
.savedCardsWorkspace {
  width: min(980px, calc(100% - 40px));
  margin: 28px auto 50px;
}
.savedCardsToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--ui-surface-muted);
  font-size: 12px;
  color: var(--ui-text-muted);
  border-radius: 4px;
}
.savedCardsToolbar > button {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: var(--ui-text);
  border: 0;
  background: none;
  padding: 2px 0;
  cursor: pointer;
}
.savedCardsSearch {
  padding: 10px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  color: var(--ui-text);
  margin: 10px 0;
  font-size: 12px;
  width: 100%;
}
.savedCardIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  border: 0;
  background: none;
  color: var(--ui-text);
  padding: 2px 0;
  cursor: pointer;
}
.savedCardIdentity > img {
  width: 30px;
  height: 42px;
  object-fit: contain;
}
.savedCardIdentity > span {
  white-space: normal;
}
.savedCardIdentity small {
  display: block;
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 400;
  margin-top: 5px;
}
.savedCardDate {
  display: block;
  color: var(--ui-text-muted);
  font-size: 10px;
  margin-top: 5px;
  font-weight: 400;
}
.savedCardsTabs > button {
  flex: 1;
  font-size: 14px;
}
.savedCardsNew {
  color: var(--ui-brand);
  font-size: 11px;
}
.savedCardRemove {
  border: 0;
  background: none;
  color: var(--ui-text-muted);
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
}
.savedCardsSignIn p {
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 8px 0 12px;
}
.savedCardsSignIn .terminalPrimary {
  display: inline-flex;
}
.savedCardsPreview .terminalTable {
  font-size: 11px;
}
.savedCardsPreview .terminalTable th {
  padding-left: 0;
}
.savedCardsPreview .terminalTable th:first-child {
  width: 50%;
}
.savedCardsPreview .terminalTable td {
  padding-right: 0;
}
.savedCardsPreview .savedCardIdentity {
  font-size: 11px;
  gap: 6px;
}
.savedCardsPreview .savedCardIdentity > img {
  width: 20px;
  height: 28px;
}
.savedCardsPreview .savedCardIdentity small {
  display: none;
}
.savedCardsPreview .terminalTable thead {
  display: none;
}
.savedCardsUpdates {
  margin-top: 28px;
}
.savedCardsUpdates li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-border);
  font-size: 13px;
}
.savedCardsUpdates li > span {
  display: flex;
  gap: 10px;
  align-items: center;
}
.savedCardsUpdates i {
  width: 8px;
  height: 8px;
  background: var(--ui-brand);
  border-radius: 50%;
  flex-shrink: 0;
}
.savedCardsUpdates button {
  padding: 0;
  background: none;
  color: var(--ui-brand);
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}
.savedCardsExplore {
  margin-top: 28px;
}
.savedCardsExplore h2 {
  font-size: 18px;
}
.savedCardsExplore .terminalLinkRows > a {
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  padding: 12px;
  margin-bottom: 4px;
  font-size: 14px;
}
.savedCardsAccountLinks {
  display: flex;
  gap: 18px;
  color: var(--ui-text-muted);
  font-size: 12px;
  margin-top: 24px;
}
@media (max-width: 1250px) {
  .terminalDailyActivities {
    grid-template-columns: 1fr;
  }
  .exchangeShell .nav.siteHeader {
    gap: 20px;
    padding-inline: 20px;
  }
  .siteHeader .sitePrimaryLinks {
    width: min(600px, 50vw);
  }
  .headerSearch {
    display: none;
  }
  .siteHeader .siteHeaderActions {
    margin-left: auto;
  }
  .headerMobileSearch {
    display: inline-flex;
    color: var(--ui-text);
  }
  .terminalGame,
  .terminalDate {
    display: none;
  }
  .marketTicker > a {
    padding-inline: 10px;
  }
  .tickerNumbers small > span {
    display: none;
  }
}
@media (max-width: 1000px) {
  .siteHeader .sitePrimaryLinks {
    display: none;
  }
  .headerSearch {
    display: flex;
    width: 260px;
  }
  .headerMobileSearch {
    display: none;
  }
  .marketOverviewGrid {
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  }
  .indexCards {
    display: none;
  }
  .marketOverviewGrid,
  .terminalDashboard {
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  }
  .terminalChart {
    display: none;
  }
  .terminalMarketHeading > span {
    display: none;
  }
  .terminalDailyGrid,
  .terminalDailyActivities {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .terminalDailyGrid .dailyDraw {
    flex-direction: column;
    align-items: stretch;
  }
  .terminalDailyGrid .dailyDrawStage {
    order: -1;
    width: 100%;
    flex-basis: auto;
  }
}
@media (max-width: 700px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .exchangeShell .nav.siteHeader {
    min-height: 64px;
    padding: 0 18px;
    gap: 12px;
  }
  .siteHeader .brand { min-width: 0; }
  .siteHeader .siteHeaderActions {
    margin-left: auto;
    gap: 13px;
  }
  .siteHeader .siteAccountLink,
  .siteHeader .siteAdminLink,
  .siteHeader .siteLanguage,
  .headerSearch {
    display: none;
  }
  .siteHeader .themePicker select {
    max-width: 48px;
    font-size: 10px;
  }
  .headerMobileSearch {
    display: inline-flex;
    color: var(--ui-text);
  }
  .mobileBottomNav {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 9px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
  }
  .mobileBottomNav > a,
  .mobileBottomNav > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    font-size: 11px;
    font-family: inherit;
    color: var(--ui-text-muted);
    background: none;
    border: 0;
    text-decoration: none;
  }
  .mobileBottomNav svg {
    width: 24px;
    height: 24px;
  }
  .mobileBottomNav [aria-current="page"],
  .mobileBottomNav [aria-expanded="true"] {
    color: var(--ui-brand);
  }
  .exchangeShell.terminalHome {
    padding: 0;
  }
  .terminalHome > .siteHeader {
    padding-inline: 18px;
  }
  .terminalHomeContent {
    padding: 0 16px;
  }
  .marketSourceBar {
    display: none;
  }
  .marketTicker {
    margin: 0 -16px;
    padding: 12px 16px;
    display: flex;
  }
  .marketTicker > a {
    flex: 0 0 135px;
    gap: 8px;
    padding: 0 12px;
  }
  .marketTicker > a:first-child {
    padding-left: 0;
  }
  .tickerNumbers small {
    font-size: 12px;
  }
  .tickerNumbers strong {
    font-size: 17px;
  }
  .marketTicker svg {
    width: 60px;
  }
  .terminalMarketHeading {
    margin: 14px 0 10px;
  }
  .terminalMarketHeading h1 {
    font-size: 23px;
  }
  .terminalMarketHeading p {
    display: block;
  }
  .marketOverviewGrid,
  .terminalDashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .homeOverviewAside { order: 0; }
  .globalIndexPanel { order: 1; }
  .terminalDashboardMain { order: 2; }
  .terminalDashboardAside { order: 3; }
  .marketOverviewGrid > *,
  .terminalDashboard > * {
    width: 100%;
    min-width: 0;
  }
  .globalIndexPanel {
    padding: 10px;
  }
  .terminalPanelHeading h2 {
    font-size: 18px;
  }
  .globalIndexPanel .terminalPanelHeading > span {
    display: none;
  }
  .globalIndexTable th a {
    display: block;
  }
  .globalIndexTable th a > span {
    display: none;
  }
  .globalIndexTable .gameSymbol {
    font-size: 11px;
  }
  .globalIndexTable :is(th, td) {
    padding: 4px 5px;
    font-size: 12px;
    height: 31px;
  }
  .indexMarkets {
    display: none;
  }
  .compactMarketChart {
    width: 85px !important;
  }
  .compactMarketChart svg {
    width: 85px;
  }
  .indexFootnote {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
  }
  .homePhotoPanel {
    padding: 0;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
  }
  .homePhotoPanel > .photoLookup {
    padding: 12px;
    background: var(--ui-brand-soft);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
  }
  .homePhotoPanel .photoLookupUpload {
    padding: 0;
    background: none;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }
  .homePhotoPanel .photoDropzone {
    min-height: 46px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--ui-brand);
  }
  .homePhotoPanel .photoDropzone svg {
    width: 30px;
    height: 30px;
  }
  .homePhotoPanel .photoLookupActions {
    grid-template-columns: 1fr 1fr;
  }
  .homePhotoPanel .photoLookupActions p,
  .homePhotoPanel .photoGuestNote,
  .homePhotoPanel > a {
    display: none;
  }
  .homePhotoPanel > form {
    margin: 6px 12px 12px;
  }
  .homeTextSearchLabel {
    margin: 0 12px;
  }
  .homePhotoPanel .photoDisclosure {
    margin-bottom: 0;
  }
  .homePhotoPanel .terminalPanelHeading h2 {
    font-size: 16px;
    color: var(--ui-brand);
  }
  .priceTerminal {
    padding: 0;
    border: 0;
    background: none;
  }
  .priceTerminal > .terminalPanelHeading {
    margin-top: 4px;
  }
  .priceTerminal > .terminalPanelHeading h2 {
    font-size: 23px;
  }
  .priceTerminalTools {
    gap: 8px;
  }
  .terminalSegments {
    width: 100%;
  }
  .terminalSegments a {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .priceTerminalTools :is(input, select) {
    font-size: 12px;
    padding: 9px;
  }
  .priceTerminalTools input {
    min-width: 100px;
  }
  .terminalTabs {
    gap: 16px;
  }
  .terminalTabs > button {
    font-size: 12px;
  }
  .priceTerminal .terminalRank {
    display: none;
  }
  .priceTerminal .terminalTable :is(th, td) {
    padding: 7px 4px;
    font-size: 12px;
  }
  .priceTerminal .terminalTable thead th {
    font-size: 10px;
  }
  .terminalCard {
    min-width: 0;
    gap: 7px;
  }
  .terminalCardIdentity {
    max-width: 130px;
    min-width: 0;
  }
  .terminalTableNote {
    flex-wrap: wrap;
  }
  .terminalSources {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .terminalSources > p {
    grid-column: 1 / -1;
  }
  .terminalDailyGrid {
    grid-template-columns: 1fr;
  }
  .marketExplorer .explorerContent,
  .marketExplorer > footer {
    width: calc(100% - 32px);
  }
  .marketExplorer .explorerControls {
    display: flex;
    flex-direction: column;
  }
  .marketExplorer .explorerControls > * {
    width: 100%;
  }
  .terminalDashboardAside {
    margin-top: 6px;
  }
  .terminalDashboardAside .terminalPanelHeading h2 {
    font-size: 16px;
  }
  .photoSearchWorkspace,
  .savedCardsWorkspace {
    width: calc(100% - 36px);
    margin: 20px auto 30px;
  }
  .terminalPageHeading h1 {
    font-size: 26px;
  }
  .terminalPageHeading p {
    font-size: 14px;
  }
  .photoSearchColumns {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .photoLookupExpanded .photoDropzone {
    min-height: 170px;
  }
  .photoSearchGuide {
    border-top: 1px solid var(--ui-border);
    padding-top: 14px;
  }
  .photoSearchGuide h2 {
    font-size: 18px;
  }
  .photoSearchGuide li {
    margin: 8px 0;
  }
  .photoSearchWorkspace > .recentSearchPanel {
    padding: 0;
    border: 0;
    margin-top: 24px;
  }
  .savedCardsTable :is(th, td) {
    padding: 8px 4px;
    font-size: 12px;
  }
  .savedCardIdentity {
    gap: 8px;
  }
  .savedCardIdentity small {
    font-size: 10px;
  }
  .savedCardsToolbar {
    font-size: 10px;
    padding: 9px 8px;
  }
  .savedCardsToolbar svg {
    width: 18px;
  }
  .savedCardsToolbar button {
    font-size: 11px;
  }
  .savedCardsUpdates li {
    font-size: 12px;
  }
}

.terminalPriceLabel { display:block; font-size:9px; font-weight:400; color:var(--ui-text-muted); margin-top:3px; }

.siteHeader .sitePrimaryLinks > a { text-decoration:none; }

/* Shared page geometry; all page families align with the market overview. */
:root {
  --page-max: 1600px;
  --page-gutter: 24px;
  --desktop-page-width: 1600px;
}
main.exchangeShell.exchangeShell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
main.exchangeShell.exchangeShell > .siteHeader {
  max-width: none;
  padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
}
main.exchangeShell.exchangeShell
  > :not(.siteHeader, .mobileBottomNav, .terminalHomeContent, .globalPartnerFooter) {
  width: min(calc(100% - var(--page-gutter) * 2), calc(var(--page-max) - var(--page-gutter) * 2));
  max-width: calc(var(--page-max) - var(--page-gutter) * 2);
  margin-inline: auto;
  box-sizing: border-box;
}
main.exchangeShell.exchangeShell
  > :is(.explorerContent, .intlContent, .buyPicksContainer, .adminContainer, .accountContainer, .catalogDetailContent, .adminWorkspaceGrid) {
  padding-inline: 0;
}
.terminalHomeContent {
  max-width: var(--page-max);
  padding-inline: var(--page-gutter);
}
.exchangeShell :is(.searchPanel, .searchResults, .marketProductsSection, .marketSectionHeading) {
  max-width: none;
}
.exchangeShell :is(.cardGuideArticle, .legalContent) {
  max-width: 82ch;
  margin-inline: auto;
}
.exchangeShell :is(.accountForm, .accountPanel:has(.accountForm)) {
  max-width: 640px;
  margin-inline: auto;
}
.exchangeShell :is(.kreamProductGrid, .variantGrid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  gap: 18px;
  align-items: start;
}
.exchangeShell :is(.kreamProductCard, .variantCard) {
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: none;
  overflow: hidden;
}
.exchangeShell :is(.kreamProductBody, .variantBody) {
  color: var(--ui-text);
  padding: 18px;
}
.exchangeShell :is(.kreamProductBody, .variantBody) :is(h2, h3) {
  color: var(--ui-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.exchangeShell :is(.kreamProductVisual, .cardArt) {
  background: var(--ui-surface-muted);
}
.exchangeShell :is(.kreamPriceSummary, .variantFacts) {
  color: var(--ui-text);
  border-color: var(--ui-border);
}
.exchangeShell :is(.searchHero, .intlHero, .marketHeading) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 28px;
}
.exchangeShell :is(.emptyState, .serviceError, .catalogNotice) {
  padding: 24px;
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  border-radius: 12px;
}
.exchangeShell :is(input, select, textarea) {
  max-width: 100%;
}
.exchangeShell :is(.intlFacts, .variantFacts, .identityGrid) > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A thumbnail is a frame, independent of an image's loading or failure state. */
.cardThumbnail {
  display: grid;
  place-items: center;
  width: 40px;
  height: 56px;
  flex: 0 0 40px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--ui-surface-muted);
}
.cardThumbnail :is(img, .cardImageFallback, .cardImageReview) {
  width: 40px;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
}
/* KREAM returns a square image with the portrait card centered inside it. */
.cardThumbnail img[src^="/market/images/kream/"] {
  transform: scale(1.75);
}
.cardThumbnail .cardImageFallbackOverlay,
.cardThumbnail .cardImageReviewOverlay {
  display: none;
}
.terminalCardIdentity {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
}
.terminalCard {
  min-width: 0;
  gap: 12px;
}
.terminalCardIdentity small {
  line-height: 1.5;
  font-weight: 400;
}
.terminalPanel {
  border-radius: 12px;
  padding: 20px;
}
.marketOverviewGrid {
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 20px;
}
.marketOverviewGrid > .homeOverviewAside {
  grid-column: 2;
  grid-row: 1;
}
.marketOverviewGrid > .globalIndexPanel {
  grid-column: 1;
  grid-row: 1;
}
.marketOverviewGrid > :is(.terminalDashboardMain, .terminalDashboardAside) {
  grid-column: 1 / -1;
}
.terminalDashboardMain {
  gap: 20px;
}
.terminalDashboardAside {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.terminalRanking li > a {
  padding-block: 10px;
  font-size: 13px;
}
.terminalRanking li strong {
  white-space: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.terminalRanking li > a > span:last-child {
  white-space: nowrap;
}
.terminalRankNumber {
  flex-shrink: 0;
}
.priceTerminal .terminalTable tbody :is(th, td) {
  padding-block: 12px;
  font-size: 13px;
}
.priceTerminal .terminalTable th[scope="row"] {
  width: 40%;
}
.terminalAmount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.terminalChange {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.priceTerminalTools {
  gap: 12px;
  margin-bottom: 16px;
}
.priceTerminalTools :is(input, select) {
  min-height: 40px;
  border-radius: 7px;
  font-size: 13px;
}
.terminalSegments {
  border-radius: 8px;
}
.terminalSegments a {
  padding: 10px 14px;
  font-size: 13px;
}
.terminalTabs > button {
  font-size: 13px;
}
.terminalMobileSort,
.terminalCardIdentity .terminalMobileMeta {
  display: none;
}
.marketTickerViewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.marketTicker {
  overflow: visible;
}
.marketTicker > .tickerCopy,
.tickerPause {
  display: none;
}
.globalIndexTable {
  width: 100%;
}
.globalIndexTable .compactMarketChart {
  max-width: 100%;
}
@media (min-width: 1101px) {
  .siteHeader .sitePrimaryLinks {
    display: flex;
    width: auto;
    flex: 1;
    justify-content: space-evenly;
  }
  .siteHeader .sitePrimaryLinks > a {
    font-size: 12px;
    padding-inline: 6px;
  }
  .siteHeader .siteMenuButton {
    display: none;
  }
}
@media (min-width: 1101px) and (max-width: 1599px) {
  .siteHeader .headerSearch {
    display: none;
  }
  .exchangeShell .nav.siteHeader {
    gap: 14px;
  }
}
@media (max-width: 1100px) {
  .siteHeader .sitePrimaryLinks {
    display: none;
  }
  .siteHeader .siteMenuButton {
    display: flex;
  }
  .siteHeader .headerSearch {
    margin-left: auto;
  }
}
@media (max-width: 1000px) {
  .terminalDashboardAside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .marketOverviewGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketOverviewGrid > :is(.homeOverviewAside, .globalIndexPanel) {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 700px) {
  :root {
    --page-gutter: 16px;
  }
  .siteHeader .siteMenuButton {
    display: none;
  }
  .terminalPanel {
    padding: 14px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
  }
  .marketOverviewGrid,
  .terminalDashboardAside {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .terminalDashboardAside > * {
    width: 100%;
  }
  .exchangeShell :is(.searchHero, .intlHero, .marketHeading) {
    padding: 20px;
  }
  .exchangeShell :is(.kreamProductGrid, .variantGrid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .exchangeShell :is(.kreamProductBody, .variantBody) {
    padding: 12px;
  }
  .priceTerminal .terminalTable,
  .priceTerminal .terminalTable tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .priceTerminal .terminalTable thead {
    display: none;
  }
  .priceTerminal .terminalTable tr {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 5px 8px;
    border-bottom: 1px solid var(--ui-border);
    padding-block: 14px;
    position: relative;
    --mobile-card-image-width: clamp(64px, 21vw, 84px);
  }
  .priceTerminal .terminalTable tbody :is(th, td) {
    border: 0;
    padding: 0;
    width: auto;
    min-width: 0;
    height: auto;
    white-space: normal;
  }
  .priceTerminal .terminalTable th[scope="row"] {
    grid-column: 2 / -1;
    grid-row: 1;
    width: auto;
    padding-left: calc(var(--mobile-card-image-width) + 12px);
    overflow-wrap: anywhere;
  }
  .priceTerminal .terminalSave {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .priceTerminal .terminalSave .saveToCardsButton {
    color: var(--ui-text-muted) !important;
  }
  .priceTerminal .terminalTable tbody td.terminalRank {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-height: 26px;
    border-radius: 4px;
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .priceTerminal .terminalRank::before {
    content: "#";
  }
  .priceTerminal .terminalAmount {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
  .priceTerminal .terminalTable tbody td.terminalAmount {
    padding-left: calc(var(--mobile-card-image-width) + 12px);
  }
  .priceTerminal .terminalChange {
    grid-column: 3;
    align-self: center;
    white-space: nowrap;
  }
  .priceTerminal :is(.terminalGame, .terminalDate, .terminalChart) {
    display: none;
  }
  .terminalCardIdentity {
    max-width: none;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .priceTerminal .terminalCard .cardThumbnail {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--mobile-card-image-width);
    height: auto;
    aspect-ratio: 5 / 7;
    max-height: calc(100% - 28px);
    flex: none;
  }
  .priceTerminal .terminalCard .cardThumbnail :is(img, .cardImageFallback, .cardImageReview) {
    width: 100%;
    height: 100%;
  }
  .terminalMobileSort,
  .terminalCardIdentity .terminalMobileMeta {
    display: block;
  }
  .priceTerminal .terminalTableScroll {
    overflow: visible;
  }
  .priceTerminal .terminalTableNote {
    font-size: 11px;
  }
  .terminalSegments a {
    padding: 8px;
    font-size: 12px;
  }
  .globalIndexTable {
    table-layout: fixed;
  }
  .globalIndexTable :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .globalIndexTable th:last-child {
    width: 28%;
  }
  .globalIndexTable .compactMarketChart,
  .globalIndexTable .compactMarketChart svg {
    width: 100% !important;
    max-width: 100%;
  }
  .globalIndexPanel .terminalTableScroll {
    overflow: visible;
  }
  .marketTicker {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 10px 0 26px;
    animation: tickerFlow 40s linear infinite;
  }
  .marketTicker > a,
  .marketTicker > a:first-child {
    display: flex;
    flex: 0 0 170px;
    width: 170px;
    padding: 0 14px;
  }
  .marketTickerViewport:is(:hover, :active, .isPaused) .marketTicker {
    animation-play-state: paused;
  }
  .marketTicker:focus-within {
    animation-play-state: paused;
  }
  .tickerPause {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font-size: 10px;
  }
}
@keyframes tickerFlow {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marketTicker {
    animation: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 0;
  }
  .marketTicker > a,
  .marketTicker > a:first-child {
    width: auto;
    padding: 8px;
  }
  .marketTicker > .tickerCopy,
  .tickerPause {
    display: none;
  }
}

.exchangeShell .explorerHint { color: var(--ui-text-muted); }
/* Market explorer: one filter surface and a padded, continuous result collection. */
.marketExplorer .explorerControls {
  grid-template-areas: "markets photo" "search photo" "games games";
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-rows: auto auto auto;
  gap: 20px 24px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: none;
}
.marketExplorer .explorerMarkets { gap: 8px; margin: 0; flex-wrap: wrap; }
.marketExplorer .explorerMarkets a { border-radius: 10px; padding: 12px 16px; }
.marketExplorer .explorerControls > .photoLookup { border-radius: 12px; padding: 16px; }
.marketExplorer .explorerSearchRow { border-radius: 10px; }
.marketExplorer .explorerSearchRow label { padding: 10px 14px; }
.marketExplorer .explorerSearchRow button { border-radius: 7px; min-height: 44px; }
.marketExplorer .explorerGameChooser { border-top: 1px solid var(--ui-border); padding-top: 18px; }
.marketExplorer .explorerGameChooser h2 { margin: 0 0 12px; font-size: 13px; color: var(--ui-text-muted); }
.marketExplorer .explorerGameChooser .explorerGames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.marketExplorer .explorerGames a,
.marketExplorer .explorerGames a.explorerAllGames {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  box-shadow: none;
  transform: none;
  white-space: normal;
  line-height: 1.4;
  font-size: 13px;
}
.marketExplorer .explorerGames strong { font-size: inherit; font-weight: 600; }
.marketExplorer .explorerGames a:hover { border-color: var(--ui-brand); color: var(--ui-brand); background: var(--ui-brand-soft); }
.marketExplorer .explorerGames a[aria-current="page"] { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-brand); }
.marketExplorer .explorerGames a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.marketExplorer .explorerResultsPanel {
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  min-width: 0;
}
.marketExplorer .explorerOverview { background: transparent; }
.marketExplorer .explorerResultsHeading { margin: 0 0 12px; padding: 0 0 18px; gap: 16px; flex-wrap: wrap; }
.marketExplorer .explorerResultsHeading h2 { font-size: 20px; line-height: 1.4; }
.marketExplorer .explorerHint { margin: 0 0 24px; line-height: 1.7; }
/* Results remain rows for every market, including asynchronously found cards. */
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) :is(.unifiedResultGrid, .kreamProductGrid) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard { border-radius: 10px; background: var(--ui-surface); }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .marketProductCardLink {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 18px; height: auto; align-items: center;
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamProductVisual {
  width: 72px; height: 100px; min-height: 0; aspect-ratio: auto; padding: 4px; border: 0; border-radius: 6px; background: var(--ui-surface-muted);
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard :is(.kreamProductImage, .cardImageFallback) {
  width: 100%; height: 100%; max-height: 92px; object-fit: contain;
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamProductBody {
  display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 7px 24px; padding: 0; align-items: start;
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamProductBody > * { min-width: 0; grid-column: 1; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamProductBody h3 { margin: 0; font-size: 15px; line-height: 1.6; min-height: 0; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamProductBody > p { margin: 0; color: var(--ui-text-muted); font-size: 12px; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .kreamProductBadges { flex-wrap: wrap; gap: 4px; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .kreamProductBadges span { padding: 3px 6px; font-size: 10px; border-radius: 4px; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamPriceSummary {
  grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface-raised);
}
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductCard .kreamPriceSummary strong { font-size: 22px; }
:is(.marketExplorer, .buyPicksPage, .photoDetailPage) .marketProductActions { margin: 0 18px 14px 108px; }
.marketExplorer .unifiedSearchResults { margin: 0; }
.marketExplorer .unifiedResultsHeading { padding-bottom: 20px; border-bottom: 1px solid var(--ui-border); }
.marketExplorer .unifiedResultsHeading h2 { color: var(--ui-text); font-size: 20px; }
.marketExplorer .unifiedResultsHeading h2 span { color: var(--ui-brand); }
.marketExplorer .unifiedResultsHeading p { color: var(--ui-text-muted); }
.marketExplorer .unifiedResultCounts span { border-color: var(--ui-border); background: var(--ui-surface-raised); color: var(--ui-text-muted); }
.marketExplorer .explorerResultsPanel .priceTerminal { padding: 0; border: 0; }
.marketExplorer .explorerPagination { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ui-border); }

/* Daily watch: the same market surfaces, rows and price hierarchy. */
.buyPicksPage .buyPicksContainer { padding-block: 28px 48px; }
.buyPicksPage .buyPicksHero { display: block; padding: 0 0 24px; margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--ui-border); border-radius: 0; background: transparent; box-shadow: none; }
.buyPicksPage .buyPicksHero h1 { max-width: none; font-size: clamp(26px,3vw,36px); line-height: 1.3; margin: 10px 0 12px; }
.buyPicksPage .buyPicksHero > p { max-width: 85ch; line-height: 1.8; color: var(--ui-text-muted); }
.buyPicksPage .buyPicksMemberGate { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; min-height: 0; padding: 32px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: none; }
.buyPicksPage .buyPicksMemberCopy { max-width: none; }
.buyPicksPage .buyPicksMemberCopy h2 { color: var(--ui-text); font-size: 24px; margin: 14px 0; line-height: 1.5; }
.buyPicksPage .buyPicksMemberCopy > p { color: var(--ui-text-muted); line-height: 1.8; }
.buyPicksPage .buyPicksMemberCopy > a { display: inline-flex; margin-top: 18px; padding: 13px 18px; border-radius: 8px; background: var(--ui-brand); color: white; }
.buyPicksPage .buyPicksMemberCopy small { display: block; margin-top: 16px; max-width: 55ch; line-height: 1.7; }
.buyPicksOverview { display: grid; gap: 12px; }
.buyPicksOverview > div { padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface-raised); }
.buyPicksOverview span { color: var(--ui-brand); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.buyPicksOverview h3 { color: var(--ui-text); font-size: 16px; margin: 8px 0; }
.buyPicksOverview p { color: var(--ui-text-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.buyPicksPage .buyPicksCriteria { padding: 18px 22px; margin: 0 0 20px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-raised); font-size: 13px; line-height: 1.8; }
.buyPicksMarkets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.buyPicksMarkets a { border: 1px solid var(--ui-border); border-radius: 8px; padding: 10px 16px; background: var(--ui-surface); color: var(--ui-text); font-size: 13px; }
.buyPicksMarkets a:hover { color: var(--ui-brand); border-color: var(--ui-brand); }
.buyPicksPage :is(.buyPicksMarket,.buyPicksSection) { padding: 28px; margin: 0 0 24px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); scroll-margin-top: 90px; }
.buyPicksPage .buyPicksMarketHead { display: block; padding: 0 0 20px; margin: 0 0 18px; border-bottom: 1px solid var(--ui-border); }
.buyPicksPage :is(.buyPicksMarketHead,.buyPicksSection) h2 { color: var(--ui-text); font-size: 21px; margin: 8px 0; }
.buyPicksPage :is(.buyPicksMarketHead,.buyPicksSection) > p { max-width: 90ch; font-size: 13px; line-height: 1.8; color: var(--ui-text-muted); }
.buyPicksPage .buyPicksGrid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.buyPicksPage .buyPickCard { display: grid; grid-template-columns: 56px 64px minmax(0,1fr) 190px; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: none; }
.buyPicksPage .buyPickNumber { position: static; padding: 6px; color: var(--ui-text-muted); background: var(--ui-surface-muted); border-radius: 6px; font-size: 10px; letter-spacing: 0; text-align: center; }
.buyPicksPage .buyPickImage { width: 64px; height: 90px; padding: 0; min-height: 0; aspect-ratio: auto; border-radius: 6px; background: var(--ui-surface-muted); }
.buyPicksPage .buyPickImage :is(img,.cardImageFallback) { width: 100%; height: 100%; object-fit: contain; }
.buyPicksPage .buyPickBody { min-width: 0; padding: 0; }
.buyPicksPage .buyPickBody h3 { font-size: 16px; line-height: 1.6; margin: 7px 0; color: var(--ui-text); }
.buyPicksPage .buyPickBody > span { color: var(--ui-text-muted); font-size: 11px; }
.buyPicksPage .buyPickBody p { font-size: 12px; margin: 6px 0; }
.buyPicksPage .buyPickBody a { color: var(--ui-brand); background: transparent; padding: 0; margin-top: 8px; font-size: 13px; }
.buyPicksPage .buyPickActions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.buyPicksPage .buyPickActions a { margin-top: 0; }
.buyPicksPage .buyPickReason { margin-top: 10px; font-size: 12px; color: var(--ui-text-muted); }
.buyPicksPage .buyPickReason summary { cursor: pointer; }
.buyPicksPage .buyPickReason p { line-height: 1.7; }
.buyPicksPage .marketProductActions { justify-content: flex-start; padding: 0; border: 0; background: transparent; }
.buyPicksPage :is(.buyPickActions, .marketProductActions) > .saveToCards { width: auto; }
.buyPicksPage :is(.buyPickActions, .marketProductActions) > .saveToCards > .saveToCardsButton { width: auto; min-height: 36px; padding: 7px 12px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-surface); color: var(--ui-brand) !important; font-size: 12px; line-height: 20px; box-shadow: none; }
.buyPicksPage :is(.buyPickActions, .marketProductActions) > .saveToCards > .saveToCardsButton:hover { background: var(--ui-surface-raised); border-color: var(--ui-brand); }
.buyPicksPage :is(.buyPickActions, .marketProductActions) > .saveToCards > .saveToCardsButton:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 3px; }
.buyPickQuote { display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: var(--ui-surface-raised); border: 1px solid var(--ui-border); }
.buyPickQuote span { font-size: 11px; color: var(--ui-text-muted); }
.buyPickQuote strong { font-size: 23px; color: var(--ui-text); overflow-wrap: anywhere; }
.buyPicksPage :is(.playEmpty,.catalogEmpty) { background: var(--ui-surface-raised); border: 1px solid var(--ui-border); border-radius: 10px; padding: 20px; color: var(--ui-text-muted); }
.buyPicksPage .buyPicksFootnote { padding: 16px 0; margin: 16px 0 0; font-size: 12px; line-height: 1.8; }
.buyPicksPage .buyPicksHeroDetail { display: grid; grid-template-columns: minmax(0,1fr) 160px; align-items: center; gap: 28px; }
.buyPicksPage .buyPickDetailImage { max-width: 160px; }
.buyPicksPage :is(.buyPickGate,.buyPickFacts,.buyPickAi,.buyPickTrend) { border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: none; }
@media (max-width: 720px) {
  .marketExplorer .explorerControls { display: flex; gap: 18px; padding: 16px; border-radius: 12px; }
  .marketExplorer .explorerMarkets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .marketExplorer .explorerMarkets a { padding: 10px 5px; font-size: 12px; flex-direction: column; gap: 4px; text-align: center; }
  .marketExplorer .explorerGames a,
  .marketExplorer .explorerGames a.explorerAllGames { min-height: 38px; padding: 8px 10px; font-size: 12px; }
  .marketExplorer .explorerResultsPanel { padding: 16px; margin-top: 18px; border-radius: 12px; }
  .marketExplorer .unifiedResultsHeading { align-items: flex-start; flex-direction: column; }
  :is(.marketExplorer,.buyPicksPage,.photoDetailPage) .marketProductCard .marketProductCardLink { grid-template-columns: 48px minmax(0,1fr); padding: 12px; gap: 12px; }
  :is(.marketExplorer,.buyPicksPage,.photoDetailPage) .marketProductCard .kreamProductVisual { width: 48px; height: 68px; align-self: start; }
  :is(.marketExplorer,.buyPicksPage,.photoDetailPage) .marketProductCard .kreamProductBody { grid-template-columns: minmax(0,1fr); }
  :is(.marketExplorer,.buyPicksPage,.photoDetailPage) .marketProductCard .kreamPriceSummary { grid-column: 1; grid-row: auto; padding: 10px; }
  :is(.marketExplorer,.buyPicksPage,.photoDetailPage) .marketProductActions { margin-left: 72px; }
  .buyPicksPage .buyPicksMemberGate { grid-template-columns: minmax(0,1fr); padding: 20px; gap: 24px; }
  .buyPicksPage :is(.buyPicksMarket,.buyPicksSection) { padding: 16px; }
  .buyPicksPage .buyPickCard { grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 14px; }
  .buyPicksPage .buyPickNumber { grid-column: 1 / -1; justify-self: start; }
  .buyPicksPage .buyPickImage { width: 48px; height: 68px; align-self: start; }
  .buyPicksPage .buyPickQuote { grid-column: 2; }
  .buyPicksPage .buyPicksHeroDetail { grid-template-columns: minmax(0,1fr); }
}

/* Detail families share outer geometry; inner columns never impose another page width. */
.detailPage, .trendingPage { --detail-padding: 28px; --detail-gap: 24px; }
.detailPage :is(.shopProductIdentity,.intlCardSummary,.catalogDetailHero > div,.buyPicksHeroCopy,.photoResultInfo) { min-width: 0; overflow-wrap: anywhere; }
.detailPage :is(h1,h2,h3) { color: var(--ui-text); overflow-wrap: anywhere; }
.detailPage :is(.backLink,.buyPicksBack,.photoResultBack,.magazineBackLink) { color: var(--ui-brand); }
.detailPage .intlContent .intlCardEyebrow { color: var(--ui-brand); }
.detailPage .intlContent .intlCardCode { color: var(--ui-text-muted); }
.detailPage .intlContent .intlNotice { background: var(--ui-surface-raised); color: var(--ui-text-muted); border-color: var(--ui-border); }
.detailPage :is(.shopProductHero,.shopHistorySection,.shopOffersSection,.cardEditorialSection,.catalogDetailHero,.catalogDetailSnapshot,.catalogPricePanel,.intlCardHero,.intlDetail,.intlContent > section,.buyPicksHeroDetail,.buyPickGate,.buyPickFacts,.buyPickAi,.buyPickTrend,.photoResultHero,.photoResultPrice,.cardResearchPanel) {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--detail-padding);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
}
.detailPage :is(.catalogDetailContent,.intlContent,.buyPicksContainer,.photoResultPage,.magazineContainer) { padding-block: 28px 48px; }
main.detailPage.exchangeShell > .photoResultPage { padding-inline: 0; }
.detailPage .cardDetailMarkets { display: grid; gap: var(--detail-gap); }
.detailPage .cardDetailMarkets > .shopOffersSection { width: 100%; max-width: none; margin: 0; }
.detailPage :is(.shopHistorySection,.cardEditorialSection) { margin-block: var(--detail-gap); }
.detailPage :is(.marketSectionHeading,.shopHistoryHeader) { padding: 0 0 18px; margin: 0 0 20px; gap: 16px; flex-wrap: wrap; }
.detailPage .shopProductHero { grid-template-columns: 280px minmax(0,1fr); gap: var(--detail-gap); align-items: start; }
.detailPage .shopProductHero .backLink { grid-column: 1 / -1; }
.detailPage :is(.shopProductVisual,.intlCardArtwork,.catalogDetailImage,.buyPickDetailImage) {
  box-sizing: border-box;
  width: 100%;
  max-width: 280px;
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  align-self: start;
  padding: 12px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-muted);
  box-shadow: none;
}
.detailPage :is(.shopProductVisual,.intlCardArtwork,.catalogDetailImage,.buyPickDetailImage) :is(img,.cardImageReview,.cardImageFallback) {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  aspect-ratio: auto;
}
/* KREAM's square product shots include a large blank border around the card. */
.detailPage :is(.shopProductVisual,.intlCardArtwork,.catalogDetailImage,.buyPickDetailImage):has(img[src*="kream"]) { padding: 0; }
.detailPage :is(.shopProductVisual,.intlCardArtwork,.catalogDetailImage,.buyPickDetailImage) img[src*="kream"] { object-fit: contain; transform: scale(1.75); }
.detailPage .intlDetail { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--detail-gap); align-items: start; }
.detailPage .intlDetail > .intlDetailImage { width: 100%; max-width: 280px; height: auto; aspect-ratio: 5 / 7; object-fit: contain; background: var(--ui-surface-muted); border-radius: 10px; }
.detailPage .intlCardHeroGrid { grid-template-columns: 280px minmax(0,1fr); gap: var(--detail-gap); }
.detailPage .intlContent > section { margin-block: var(--detail-gap); }
.detailPage .intlHero { margin: 0 0 var(--detail-gap); }
.detailPage .catalogDetailDashboard { grid-template-columns: minmax(0,1fr); gap: var(--detail-gap); }
.detailPage .catalogDetailHero { grid-template-columns: 280px minmax(0,1fr); gap: var(--detail-gap); }
.detailPage .catalogDetailSnapshot dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.detailPage .catalogPricePanel { margin-top: var(--detail-gap); }
.detailPage :is(.catalogPriceGrid,.shopOfferGrid) { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 16px; }
.detailPage :is(.catalogPriceGrid article,.shopOfferGrid article,.intlFacts > div,.buyPickFacts dl > div,.photoResultFacts > div) { min-width: 0; padding: 18px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface-raised); }
.detailPage :is(.catalogPriceGrid,.shopOfferGrid,.intlFacts,.buyPickFacts dl,.photoResultFacts) :is(dd,strong,p,a) { overflow-wrap: anywhere; }
.detailPage :is(.shopOfferContent,.shopOfferHeading) { min-width: 0; }
.detailPage .shopOfferImage { flex-shrink: 0; }
.detailPage .shopOfferImage img { object-fit: contain; }
.detailPage :is(.intlTableScroll,.usVariantPrices > div) { max-width: 100%; overflow-x: auto; }
.detailPage .buyPicksHeroDetail { grid-template-columns: minmax(0,1fr) 280px; gap: 32px; align-items: center; margin: 0; }
.detailPage .buyPicksHeroCopy > p:not(.exchangeEyebrow) { color: var(--ui-text-muted); line-height: 1.8; }
.detailPage .buyPicksHeroDetail h1 { font-size: clamp(26px,3vw,36px); }
.detailPage .buyPickAnalysis, .detailPage .buyPickEvidenceColumn { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--detail-gap); }
.detailPage .buyPickEvidenceColumn, .detailPage .buyPickAnalysis .buyPickAi { grid-column: 1; }
.detailPage .buyPickAnalysis { margin-top: var(--detail-gap); }
.detailPage .buyPickTrend > h2 { margin: 0 0 12px; }
.detailPage .buyPickTrend > p { margin: 0 0 20px; }
.detailPage .buyPickFacts dl { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.detailPage .buyPickAiPoint p { max-width: 90ch; }
.detailPage .buyPickTrend .shopPriceChart { margin: 0; }
.detailPage :is(.buyPickFacts,.buyPickAi,.buyPickTrend,.catalogDetailSnapshot,.photoResultInfo,.intlDetail) :is(p,dt,small) { color: var(--ui-text-muted); }
.detailPage :is(.buyPickFacts,.buyPickAi,.buyPickTrend) :is(h2,h3,dd) { color: var(--ui-text); }
.detailPage .photoResultHero { grid-template-columns: 280px minmax(0,1fr); gap: var(--detail-gap); }
.detailPage .photoResultImage { width: 100%; min-width: 0; padding: 12px; border-radius: 10px; background: var(--ui-surface-muted); }
.detailPage .photoResultImage img { height: auto; width: 100%; aspect-ratio: 5 / 7; object-fit: contain; }
.detailPage :is(.photoResultNav,.cardDetailMarketNav) { flex-wrap: wrap; gap: 10px; }
.detailPage .photoResultPrice { margin-block: var(--detail-gap); }
.detailPage .photoResultFacts { grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); }
/* Photo result sections align with the market shell, with no nested row surfaces. */
.exchangeShell.photoDetailPage.detailPage { --photo-panel: var(--ui-surface); --photo-divider: var(--ui-border); }
html[data-theme="dark"] .exchangeShell.photoDetailPage.detailPage { --photo-panel: var(--ui-surface); --photo-divider: var(--ui-border); }
.exchangeShell.photoDetailPage.detailPage .photoResultTopbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.exchangeShell.photoDetailPage.detailPage .photoResultTopbar :is(.photoResultBack,.photoEngineProgress) { margin: 0; }
.exchangeShell.photoDetailPage.detailPage .photoResultTopbar .photoEngineProgress { text-align: right; }
.exchangeShell.photoDetailPage.detailPage .photoResultTopbar .photoEngineHeading { justify-content: flex-end; }
.exchangeShell.photoDetailPage.detailPage .photoResultTopbar .isComplete > p { display: none; }
.exchangeShell.photoDetailPage.detailPage .photoResultPage { background: transparent; padding-block: 28px 64px; }
.exchangeShell.photoDetailPage.detailPage .photoResultBack { color: var(--ui-text-muted); margin-bottom: 24px; font-size: 13px; }
.exchangeShell.photoDetailPage.detailPage .photoEngineProgress { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 36px; color: var(--ui-text); }
.exchangeShell.photoDetailPage.detailPage .photoEngineHeading { margin: 0 0 6px; }
.exchangeShell.photoDetailPage.detailPage .photoEngineHeading strong { color: var(--ui-text); font-size: 14px; }
.exchangeShell.photoDetailPage.detailPage .photoEngineProgress :is(p,small) { color: var(--ui-text-muted); font-size: 12px; font-weight: 400; margin: 0; line-height: 1.7; }
.exchangeShell.photoDetailPage.detailPage .photoEngineDot { background: var(--ui-positive); box-shadow: none; width: 7px; height: 7px; }
.exchangeShell.photoDetailPage.detailPage .isWaiting .photoEngineDot { background: var(--ui-warning); }
.exchangeShell.photoDetailPage.detailPage .photoEngineTrack { margin-top: 16px; background: var(--ui-border); }
.exchangeShell.photoDetailPage.detailPage .photoEngineTrack > span { background: var(--ui-positive); }
.exchangeShell.photoDetailPage.detailPage .photoEngineSteps { color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .photoEngineSteps li > span { background: var(--ui-surface-muted); }
.exchangeShell.photoDetailPage.detailPage .photoEngineSteps :is(.isDone,.isCurrent) { color: var(--ui-positive); }
.exchangeShell.photoDetailPage.detailPage .photoResultHero { grid-template-columns: 300px minmax(0,1fr); gap: clamp(32px,4vw,56px); padding: 28px; border: 0; border-radius: 16px; background: var(--photo-panel); box-shadow: none; align-items: start; }
.exchangeShell.photoDetailPage.detailPage .photoResultImage { width: 100%; max-width: 300px; padding: 0; margin: 0; gap: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.photoCardViewport { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.exchangeShell.photoDetailPage.detailPage .photoResultImage img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.exchangeShell.photoDetailPage.detailPage .photoCardViewport.isTrimmed img { position: absolute; max-width: none; max-height: none; }
.exchangeShell.photoDetailPage.detailPage .photoResultImage > span { border: 0; background: transparent; padding: 18px 0 0; width: 100%; text-align: left; font-size: 11px; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .photoOriginalToggle { align-self: flex-start; margin: 8px 0 0; padding: 0; border: 0; background: transparent; color: var(--ui-brand); font-size: 12px; cursor: pointer; }
.exchangeShell.photoDetailPage.detailPage .photoResultBadge { padding: 0; border: 0; background: transparent; color: var(--ui-positive); font-size: 12px; font-weight: 600; }
.exchangeShell.photoDetailPage.detailPage .photoResultHero .photoResultInfo h1 { margin: 10px 0 24px; font-size: clamp(28px,3vw,38px); line-height: 1.25; letter-spacing: -.035em; }
.exchangeShell.photoDetailPage.detailPage .photoHeroPrice { padding: 0; margin: 0 0 32px; gap: 10px; border: 0; border-radius: 0; background: transparent; }
.exchangeShell.photoDetailPage.detailPage .photoHeroPrice > span { font-size: 12px; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .photoHeroPrice > strong { font-size: clamp(36px,4vw,48px); font-weight: 700; letter-spacing: -.04em; }
.exchangeShell.photoDetailPage.detailPage .photoHeroPrice > :is(p,small) { color: var(--ui-text-muted); font-size: 12px; line-height: 1.7; max-width: 70ch; }
.exchangeShell.photoDetailPage.detailPage .photoResultFacts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 24px; margin: 0 0 24px; }
.exchangeShell.photoDetailPage.detailPage .photoResultFacts > div { padding: 0; border: 0; border-radius: 0; background: transparent; }
.exchangeShell.photoDetailPage.detailPage .photoResultFacts dt { color: var(--ui-text-muted); font-size: 11px; margin-bottom: 8px; }
.exchangeShell.photoDetailPage.detailPage .photoResultFacts dd { color: var(--ui-text); font-size: 14px; line-height: 1.65; font-weight: 500; word-break: keep-all; overflow-wrap: break-word; }
.exchangeShell.photoDetailPage.detailPage .photoResultInfo > p { font-size: 12px; line-height: 1.8; color: var(--ui-text-muted); max-width: 72ch; margin: 14px 0; }
.exchangeShell.photoDetailPage.detailPage .photoVerificationNotes { margin: 24px 0 0; padding: 0; border: 0; background: transparent; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .photoVerificationNotes > summary { padding: 0; font-size: 12px; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .photoVerificationNotes p { font-size: 12px; line-height: 1.8; }
.exchangeShell.photoDetailPage.detailPage .photoResultActions { margin-top: 28px; align-items: flex-start; }
.exchangeShell.photoDetailPage.detailPage .photoResultActions > .saveToCards { width: auto; margin: 0; }
.exchangeShell.photoDetailPage.detailPage .photoResultActions > .saveToCards > .saveToCardsButton { width: auto; padding: 13px 22px; font-size: 13px; border-radius: 9px; }
.exchangeShell.photoDetailPage.detailPage .photoResultSource { margin-top: 8px; color: var(--ui-text-muted); font-size: 12px; }
.exchangeShell.photoDetailPage.detailPage .photoResultNav { margin: 48px 0 0; padding-bottom: 16px; border-bottom: 0; gap: 24px; }
.exchangeShell.photoDetailPage.detailPage .photoResultNav a { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ui-text-muted); font-size: 13px; }
.exchangeShell.photoDetailPage.detailPage .photoResultNav a:hover { color: var(--ui-brand); }
.exchangeShell.photoDetailPage.detailPage :is(.photoUnifiedResults,.cardResearchPanel,.photoResultPrice) { padding: 28px; margin: 24px 0 32px; border: 0; border-radius: 16px; background: var(--photo-panel); box-shadow: none; }
.exchangeShell.photoDetailPage.detailPage .unifiedResultsHeading { padding: 0; margin-bottom: 26px; border: 0; gap: 16px; align-items: flex-start; }
.exchangeShell.photoDetailPage.detailPage .unifiedResultsHeading h2 { font-size: 22px; }
.exchangeShell.photoDetailPage.detailPage .unifiedResultsHeading p { font-size: 12px; line-height: 1.8; }
.exchangeShell.photoDetailPage.detailPage .unifiedResultCounts span { border: 0; background: transparent; padding: 0; font-size: 11px; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .unifiedResultCounts { gap: 16px; }
.exchangeShell.photoDetailPage.detailPage .unifiedResultGrid { gap: 0; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard { border: 0; border-bottom: 1px solid var(--photo-divider); border-radius: 0; background: transparent; box-shadow: none; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .marketProductCardLink { padding: 24px 0; gap: 24px; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamPriceSummary { padding: 0; border: 0; background: transparent; text-align: right; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductVisual { background: transparent; padding: 0; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard :is(.kreamProductBody,.kreamPriceSummary,.marketProductCardLink,.kreamProductBadges) { background: transparent; box-shadow: none; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard:last-child { border-bottom: 0; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductBody { grid-template-columns: minmax(0,1fr) 180px; gap: 7px 24px; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductBody h3 { font-size: 15px; font-weight: 600; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamPriceSummary strong { font-size: 21px; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamPriceSummary small { font-size: 11px; line-height: 1.7; }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductBadges span { padding: 0; background: transparent; border: 0; color: var(--ui-text-muted); }
.exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductBadges { gap: 10px; }
.exchangeShell.photoDetailPage.detailPage .cardResearchAmount { font-size: 36px; }
.exchangeShell.photoDetailPage.detailPage .cardResearchPanel details { padding: 0; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 1200px) {
  .exchangeShell.photoDetailPage.detailPage .photoResultFacts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .exchangeShell.photoDetailPage.detailPage .photoResultHero { grid-template-columns: 250px minmax(0,1fr); gap: 32px; }
  .exchangeShell.photoDetailPage.detailPage .photoResultFacts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .exchangeShell.photoDetailPage.detailPage .unifiedResultsHeading { flex-direction: column; }
}
@media (max-width: 700px) {
  .exchangeShell.photoDetailPage.detailPage .photoResultPage { padding-top: 20px; }
  .exchangeShell.photoDetailPage.detailPage .photoEngineProgress { margin-bottom: 24px; }
  .exchangeShell.photoDetailPage.detailPage .photoResultHero { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 20px; }
  .exchangeShell.photoDetailPage.detailPage :is(.photoUnifiedResults,.cardResearchPanel,.photoResultPrice) { padding: 20px; }
  .exchangeShell.photoDetailPage.detailPage .photoResultTopbar { gap: 12px; margin-bottom: 20px; }
  .exchangeShell.photoDetailPage.detailPage .photoResultTopbar .photoEngineHeading strong { font-size: 12px; }
  .exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamProductBody { grid-template-columns: minmax(0,1fr); }
  .exchangeShell.photoDetailPage.detailPage .photoResultImage { width: min(100%,300px); max-width: 300px; margin-inline: auto; }
  .exchangeShell.photoDetailPage.detailPage .photoResultImage > span { text-align: center; }
  .exchangeShell.photoDetailPage.detailPage .photoOriginalToggle { align-self: center; }
  .exchangeShell.photoDetailPage.detailPage .photoResultFacts { gap: 20px; }
  .exchangeShell.photoDetailPage.detailPage .photoResultFacts > div { display: block; }
  .exchangeShell.photoDetailPage.detailPage .photoResultFacts > div:nth-child(3), .exchangeShell.photoDetailPage.detailPage .photoResultFacts > div:last-child { grid-column: 1 / -1; }
  .exchangeShell.photoDetailPage.detailPage .photoResultNav { margin-top: 36px; }
  .exchangeShell.photoDetailPage.detailPage .marketProductCard .marketProductCardLink { gap: 16px; padding: 20px 0; }
  .exchangeShell.photoDetailPage.detailPage .marketProductCard .kreamPriceSummary { text-align: left; }
}
/* Article panels align with the page; prose retains a readable line length inside. */
.detailPage.magazineArticlePage .cardGuideArticle { width: 100%; max-width: none; padding: var(--detail-padding); margin: 0 0 32px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); box-shadow: none; }
.detailPage.magazineArticlePage .cardGuideArticle > * { box-sizing: border-box; width: 100%; max-width: 900px; margin-inline: auto; }
.detailPage.magazineArticlePage .cardGuideArticle section { margin-inline: auto; }
.detailPage.magazineArticlePage .cardGuideHeading h1 { max-width: none; font-size: clamp(28px,3vw,40px); color: var(--ui-text); }
.detailPage.magazineArticlePage .cardGuideArticle :is(h2,h3) { color: var(--ui-text); }
.detailPage.magazineArticlePage .marketSectionHeading h2 { color: var(--ui-text); }
.detailPage.magazineArticlePage .cardGuideArticle :is(p,small,figcaption) { color: var(--ui-text-muted); }
.detailPage.magazineArticlePage .magazineArticleCover { max-width: 900px; }
.detailPage.magazineArticlePage .magazineArticleCover img { display: block; width: 100%; max-height: 560px; height: auto; object-fit: contain; background: var(--ui-surface-muted); }
.detailPage.magazineArticlePage :is(.cardGuideChecklist,.magazineArticleSources) { padding: 24px; border: 1px solid var(--ui-border); background: var(--ui-surface-raised); color: var(--ui-text); }
.detailPage.magazineArticlePage .cardGuideComparison { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 20px; }
.detailPage.magazineArticlePage .cardGuideComparison figure { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--ui-border); background: var(--ui-surface-raised); border-radius: 10px; }
.detailPage.magazineArticlePage .cardGuideComparison img { display: block; width: 100%; height: 260px; object-fit: contain; transform: none; }
.detailPage.magazineArticlePage .cardGuideComparison figcaption { padding: 16px 0 0; }
.trendingPage :is(.searchHero,.intlHero) { margin-top: 28px; display: block; padding: var(--detail-padding); border-radius: 14px; }
.trendingPage :is(.searchHero,.intlHero) h1 { font-size: clamp(26px,3vw,36px); line-height: 1.35; }
.trendingPage :is(.searchHero,.intlHero) p { max-width: 90ch; line-height: 1.8; }
.trendingPage .trendingMarketTabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.trendingPage .trendingMarketTabs a { flex: 0 1 auto; padding: 10px 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface); color: var(--ui-text-muted); box-shadow: none; }
.trendingPage .trendingMarketTabs a[aria-current="page"] { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-brand); }
.trendingPage :is(.marketProductsSection,.intlContent > section) { padding: var(--detail-padding); margin-block: 24px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); }
.trendingPage .marketSectionHeading { padding: 0; margin: 0 0 24px; gap: 16px; flex-wrap: wrap; }
.trendingPage .priceTerminal { width: 100%; max-width: none; margin: 0; }
.trendingPage .marketAccuracyNotice { padding: 18px 24px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-raised); }
@media (max-width: 900px) {
  .detailPage, .trendingPage { --detail-padding: 22px; --detail-gap: 20px; }
  .detailPage :is(.shopProductHero,.intlCardHeroGrid,.catalogDetailHero,.intlDetail,.photoResultHero) { grid-template-columns: 220px minmax(0,1fr); }
  .detailPage .buyPicksHeroDetail { grid-template-columns: minmax(0,1fr) 220px; }
  .detailPage .catalogDetailSnapshot dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .detailPage, .trendingPage { --detail-padding: 18px; --detail-gap: 18px; }
  .detailPage :is(.shopProductHero,.intlCardHeroGrid,.catalogDetailHero,.intlDetail,.photoResultHero,.buyPicksHeroDetail) { grid-template-columns: minmax(0,1fr); }
  .detailPage :is(.shopProductVisual,.intlCardArtwork,.catalogDetailImage,.buyPickDetailImage,.photoResultImage,.intlDetail > .intlDetailImage) { width: min(100%,260px); max-width: 260px; margin-inline: auto; }
  .detailPage .buyPickDetailImage { grid-row: 1; }
  .detailPage :is(.shopProductIdentity,.intlCardSummary,.photoResultInfo) h1 { font-size: 26px; line-height: 1.45; }
  .detailPage .catalogDetailSnapshot dl { grid-template-columns: minmax(0,1fr); }
  .detailPage.magazineArticlePage :is(.cardGuideChecklist,.magazineArticleSources) { padding: 18px; }
  .detailPage .cardGuideActions { flex-wrap: wrap; }
  .trendingPage .trendingMarketTabs a { font-size: 12px; padding: 9px 12px; }
  .trendingPage .marketSectionHeading { flex-direction: column; align-items: flex-start; }
}

/* Nested legacy surfaces must use the same palette as their page. */
html[data-theme="dark"] main :is(
  .dailyDrawFrontFrame,.dailyDrawFront,.dailyMarketQuizArtwork,
  .coupangGameLinksGroup,.magazineFeature,.magazineGameLabel,
  .cardDetailSnapshot li,.cardDetailActionPanel,.cardDetailIdentityFacts > div,
  .cardDetailPriceFacts > div,.cardDetailComparisonNote,.shopHistoryNote,
  .shopOfferImage,.cardDetailMarketEmpty,.saleProfitReference,.saleProfitResult > div,
  .catalogEmpty,.explorerPagination a,.intlPagination a,.memberCardActions > a,
  .playSources a,.adminPhotoIssueGrid > a,.adminQuickLinks a,
  .searchRequestCallout,.marketProductActions,.kreamProductBadges span,
  .gameBrowseSuggestions nav a,.gameBrowseStory,
  .cardEditorialFacts dl,.cardEvolutionRow,.intlCardActions,
  .accountCollectionTopbar,.accountFeatureNote,.accountEmptyState,
  .accountEmptyState > span,.accountSteps .isCurrent,.accountConsents,
  .intlNotice,.intlFacts,.intlPriceGrid > div,.cardGuideComparison figure
) {
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"] main .saleProfitResult strong { color: var(--ui-text); }
html[data-theme="dark"] main .saleProfitResult .isLoss { color: var(--ui-negative); }
html[data-theme="dark"] main.adminPage .adminTable th { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
html[data-theme="dark"] main :is(.buyPicksMarketHead span,.magazineReadLink,.magazineReadLink span,.cardGuideTile span,.recentSearches li > a,.coupangAffiliateAction,.coupangAffiliateAction span,.backLink) { color: var(--ui-brand); }
html[data-theme="dark"] main .cardGuideComparison a { color: var(--ui-brand); }
html[data-theme="dark"] main :is(.intlTable td,.memberCardActions > span) { color: var(--ui-text-muted); }
html[data-theme="dark"] main.exchangeShell .shopProductHero .backLink { color: var(--ui-brand); }
html[data-theme="dark"] main.exchangeShell.searchPage .searchRequestCallout strong { color: var(--ui-text); }
html[data-theme="dark"] main.exchangeShell.searchPage .searchRequestCallout p { color: var(--ui-text-muted); }
html[data-theme="dark"] main :is(.searchPagination a,.gameBrowseStory .gameBrowseRead) { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-theme="dark"] main :is(.searchPagination a,.gameBrowseStory .gameBrowseRead) span { color: inherit; }
html[data-theme="dark"] main :is(.dailyDrawFallback,.shopHistoryHeader a[aria-current],.shopVisitLink) { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-theme="dark"] main.adminPage .adminWorkspaceHeading h1 { color: var(--ui-text) !important; }
html[data-theme="dark"] main.adminPage :is(.adminFilters,.adminStatus,.adminStatus span,.adminTable caption,.adminTable td) { color: var(--ui-text-muted); }
html[data-theme="dark"] main.adminPage .adminSection > a { color: var(--ui-brand); }
html[data-theme="dark"] main :is(.dailyMarketQuiz,.dailyDrawPanel) button,
html[data-theme="dark"] main .shopProductIdentity .kreamProductBadges span,
html[data-theme="dark"] main .magazineFeature :is(h2,p,span),
html[data-theme="dark"] main :is(.accountEmptyState,.cardDetailSnapshot,.cardDetailIdentityFacts) :is(strong,dd,p,span),
html[data-theme="dark"] main .cardDetailSnapshot li a {
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"] main :is(.dailyMarketQuiz,.dailyDrawPanel) button,
html[data-theme="dark"] main .shopProductIdentity .kreamProductBadges span { background: var(--ui-surface-raised); }
html[data-theme="dark"] main .siteLanguageOptions a { background: var(--ui-surface); color: var(--ui-text); }
html[data-theme="dark"] main .siteLanguageOptions a[aria-current] { background: var(--ui-brand-soft); color: var(--ui-brand); }
html[data-theme="dark"] main :is(.siteMobileMenu button,.siteMobileLinks a,.dailyMarketQuizChoices button) { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
html[data-theme="dark"] main .adminWorkspace :is(th,button),
html[data-theme="dark"] main.adminWorkspace :is(th,button),
html[data-theme="dark"] main :is(.adminToolbar,.adminFilters,.adminWorkspaceHeading) a { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
/* HTML controls and canvas chart share semantic colors in both themes. */
.exchangeShell .tradingPriceChart { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.exchangeShell .tradingPriceChart :is(button,select,summary,th,.tradingChartStats > div,.tradingChartStatus) { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
.exchangeShell .tradingPriceChart button:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
.exchangeShell .tradingPriceChart button[aria-pressed="true"] { background: var(--ui-brand-soft); color: var(--ui-brand); border-color: var(--ui-brand); }
.exchangeShell .tradingPriceChart :is(.tradingChartHeading h3,.tradingChartQuote > strong,.tradingChartStats dd) { color: var(--ui-text); }
.exchangeShell .tradingPriceChart :is(label,small,time,.tradingChartQuote > span,.tradingChartReadout,.tradingChartNavigation > span,.tradingChartStats dt,.tradingChartNote,.tradingChartAttribution,.tradingChartAttribution a) { color: var(--ui-text-muted); }
.exchangeShell .tradingPriceChart .tradingChartReadout strong { color: var(--ui-brand); }
.exchangeShell .tradingPriceChart .comparisonLegend { color: var(--ui-warning); }
.exchangeShell .tradingPriceChart :is(.averageLegend,.isUp) { color: var(--ui-positive); }
.exchangeShell .tradingPriceChart .isDown { color: var(--ui-negative); }
.exchangeShell .tradingPriceChart :is(.tradingChartToolbar,.tradingChartData,.tradingChartStats > div,th,td) { border-color: var(--ui-border); }
.exchangeShell .tradingPriceChart .tradingChartCanvas { background: var(--ui-surface); }
html[data-theme="dark"] .exchangeShell .usVariantPrices :is(summary,th) { background: var(--ui-surface-raised); color: var(--ui-text); }

/* Reuse the same vector wordmark for the daily card back and header. */
.dailyDrawBack .brandWordmark {
  position: relative;
  z-index: 2;
  width: 80%;
  height: auto;
  aspect-ratio: 300 / 80;
  pointer-events: none;
  background-color: var(--ui-on-brand);
}
.dailyDrawBack img { filter: brightness(0) invert(1); }

/* Icon-only save actions use a transparent surface, unlike filled save buttons. */
.terminalSave .saveToCards > .saveToCardsButton { color: var(--ui-text-muted) !important; }
.terminalSave .saveToCards > .saveToCardsButton:is(:hover,[aria-pressed="true"]) { color: var(--ui-brand) !important; }
.magazinePage .magazineFeatureCopy { background: var(--ui-inverse); color: var(--ui-on-inverse); }
.magazinePage .magazineFeatureCopy :is(h2,p,a,span) { color: var(--ui-on-inverse); }

/* Operations surfaces share one palette, including nested and interactive states. */
html[data-theme] main.exchangeShell.adminPage {
  background: var(--ui-canvas);
  color: var(--ui-text);
}
html[data-theme] .adminWorkspace .adminWorkspaceHeading {
  padding-bottom: 20px;
  flex-wrap: wrap;
}
html[data-theme] .adminWorkspace .adminWorkspaceHeading h1 { color: var(--ui-text) !important; }
html[data-theme] .adminWorkspace :is(.adminSection,.adminMetrics article,.adminJob,.refreshOverview,.refreshStep,.refreshCoverage,.refreshHistory,.refreshProgressPanel,.catalogPricePanel) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: none;
  min-width: 0;
}
html[data-theme] .adminWorkspace :is(.adminMetrics,.adminStatus,.adminFilters,.refreshStepsIntro,.photoCardReview,.photoCardReview form) { background: transparent; }
html[data-theme] .adminWorkspace :is(h2,h3,h4,.adminMetrics strong,.adminJobTop strong,.adminPhotoIssueGrid strong,dd) { color: var(--ui-text); }
html[data-theme] .adminWorkspace :is(.adminWorkspaceHeading p,.adminSection p,.adminMetrics p,.adminJob p,.adminJob dt,.adminContentGrid small,.adminPhotoIssueGrid small,.adminFootnote,.searchQualityPanel td small,.adminTable small,.adminFilters > span) { color: var(--ui-text-muted); }
html[data-theme] .adminWorkspace :is(.adminWorkspaceContent a,.adminContentGrid span) { color: var(--ui-brand); }
html[data-theme] .adminWorkspace :is(.adminQuickLinks a,.adminWorkspaceHeading > a,.adminPhotoIssueGrid > a,.adminContentGrid > a) {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
  box-shadow: none;
}
html[data-theme] .adminWorkspace :is(.adminQuickLinks a,.adminWorkspaceHeading > a,.adminPhotoIssueGrid > a,.adminContentGrid > a):hover {
  background: var(--ui-brand-soft);
  border-color: var(--ui-brand);
}
html[data-theme] .adminWorkspace .adminPhotoIssueGrid > a[aria-current="page"] { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-theme] .adminWorkspace .adminContentGrid img { background: var(--ui-surface-muted); }
html[data-theme] .adminWorkspace :is(.adminJob dl,.adminPhotoAnalysis,.adminTable,.adminTable th,.adminTable td,.intlTable,.intlTable th,.intlTable td) { border-color: var(--ui-border); }
html[data-theme] .adminWorkspace :is(.adminTable table,.intlTable table) { background: transparent; color: var(--ui-text); }
html[data-theme] .adminWorkspace :is(.adminTable th,.intlTable th) { background: var(--ui-surface-muted); color: var(--ui-text); }
html[data-theme] .adminWorkspace :is(.adminTable td,.adminTable caption,.intlTable td) { color: var(--ui-text); }
html[data-theme] .adminWorkspace :is(.adminTable,.intlTable) tbody tr:hover { background: var(--ui-surface-muted); }
html[data-theme] .adminWorkspace .adminTable caption { padding: 14px; white-space: normal; line-height: 1.6; }
html[data-theme] .adminWorkspace .adminStatus span { background: var(--ui-surface-raised); color: var(--ui-text-muted); border-color: var(--ui-border); }
html[data-theme] .adminWorkspace .adminJobTop span {
  --job-color: var(--ui-text-muted);
  color: var(--job-color);
  background: color-mix(in srgb, var(--job-color) 10%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--job-color) 30%, var(--ui-border));
  border-radius: 6px;
}
html[data-theme] .adminWorkspace .adminJobTop span[data-status="complete"] { --job-color: var(--ui-positive); }
html[data-theme] .adminWorkspace .adminJobTop span[data-status="running"] { --job-color: var(--ui-brand); }
html[data-theme] .adminWorkspace .adminJobTop span:is([data-status="partial"],[data-status="blocked"]) { --job-color: var(--ui-warning); }
html[data-theme] .adminWorkspace .adminJobTop span[data-status="failed"] { --job-color: var(--ui-negative); }
html[data-theme] .adminWorkspace .adminWorkspaceContent :is(input,select,textarea,button) {
  max-width: 100%;
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  border-radius: 7px;
}
html[data-theme] .adminWorkspace .adminWorkspaceContent button { white-space: normal; line-height: 1.5; }
html[data-theme] .adminWorkspace .adminWorkspaceContent button:enabled:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
html[data-theme] .adminWorkspace .adminWorkspaceContent button:disabled { opacity: .55; cursor: not-allowed; }
html[data-theme] .adminWorkspace .refreshDashboard { background: transparent; }
html[data-theme] .adminWorkspace .refreshDashboard > section { padding: 24px; margin: 0; }
html[data-theme] .adminWorkspace .refreshDashboard > .refreshStepsIntro { padding: 8px 0 0; border: 0; box-shadow: none; }
html[data-theme] .adminWorkspace .refreshDashboard :is(form,fieldset,details,.intlFacts) { background: transparent; border-color: var(--ui-border); }
html[data-theme] .adminWorkspace .refreshStep .intlFacts > div { background: var(--ui-surface-raised); }
html[data-theme] .adminWorkspace .refreshHistory > summary { color: var(--ui-text); line-height: 1.6; }
html[data-theme] .adminWorkspace .refreshProgressBar { appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: var(--ui-surface-muted); }
html[data-theme] .adminWorkspace .refreshProgressBar::-webkit-progress-bar { background: var(--ui-surface-muted); }
html[data-theme] .adminWorkspace .refreshProgressBar::-webkit-progress-value { background: var(--ui-brand); border-radius: 6px; }
html[data-theme] .adminWorkspace .refreshProgressBar::-moz-progress-bar { background: var(--ui-brand); border-radius: 6px; }
html[data-theme] .adminWorkspace .photoCardReview { padding-block: 24px; border-bottom: 1px solid var(--ui-border); gap: 24px; }
html[data-theme] .adminWorkspace .photoCardReview img { height: auto; border-radius: 8px; }
html[data-theme] .adminSignInPage .accountBackLink { color: var(--ui-brand); }
.dailyRefreshSummary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.dailyRefreshSummary > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--ui-border); }
.dailyRefreshSummary span,.dailyRefreshSummary small,.dailyRefreshTimestamp { color: var(--ui-text-muted); }
.dailyRefreshSummary strong { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.dailyRefreshIssues ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.7; }
.dailyRefreshSteps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dailyRefreshSteps .refreshStep { min-width: 0; padding: 24px; }
.dailyRefreshStepHead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dailyRefreshStepHead > span { color: var(--ui-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dailyRefreshStepHead h3 { flex: 1 1 160px; margin: 0; }
.dailyRefreshStepHead > strong { font-size: 13px; color: var(--ui-text-muted); }
.dailyRefreshStepHead > strong[data-status="completed"] { color: var(--ui-positive); }
.dailyRefreshStepHead > strong[data-status="running"] { color: var(--ui-brand); }
.dailyRefreshStepHead > strong:is([data-status="failed"],[data-status="unknown"]) { color: var(--ui-negative); }
.dailyRefreshStepHead > strong:is([data-status="partial"],[data-status="retrying"],[data-status="stale"]) { color: var(--ui-warning); }
.dailyRefreshCount strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.dailyRefreshSteps progress { width: 100%; height: 7px; }
.dailyRefreshSteps details { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.dailyRefreshSteps p { overflow-wrap: anywhere; line-height: 1.7; }
@media (max-width: 760px) {
  .dailyRefreshSummary,.dailyRefreshSteps { grid-template-columns: minmax(0,1fr); }
  .dailyRefreshSteps .refreshStep { padding: 18px; }
  .adminWorkspace .adminWorkspaceHeading { gap: 16px; }
  .adminWorkspace .adminWorkspaceHeading > div { flex: 1 1 220px; min-width: 0; }
  .adminWorkspace .adminMetrics { grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); }
  .adminWorkspace .adminPhotoIssueGrid { grid-template-columns: repeat(auto-fit,minmax(min(100%,185px),1fr)); }
  html[data-theme] .adminWorkspace .refreshDashboard > section { padding: 16px; }
  html[data-theme] .adminWorkspace .refreshDashboard > .refreshStepsIntro { padding: 8px 0 0; }
  .adminWorkspace .photoCardReview { grid-template-columns: minmax(0,1fr); }
  .adminWorkspace .photoCardReview img { width: min(100%,160px); }
}