/* XAPP parent-layer UI is official XUI / XUI-M. The iframe owns XAUI. */
:root {
  --xbridge-font: var(--xui-font);
  --xbridge-mono: var(--xui-mono);
  --xbridge-text-xs: var(--xui-text-xs);
  --xbridge-text-sm: var(--xui-text-sm);
  --xbridge-text: var(--xui-text-md);
  --xbridge-text-md: var(--xui-text-md);
  --xbridge-text-lg: var(--xui-text-lg);
  --xbridge-line-height: var(--xui-line-height);
  --xbridge-control-h: var(--xui-control-h);
  --xbridge-control-sm: var(--xui-control-small-h);
  --xbridge-radius-sm: var(--xui-radius-small);
  --xbridge-radius: var(--xui-radius-control);
  --xbridge-radius-lg: var(--xui-radius-panel);
  --xbridge-radius-xl: var(--xui-radius-page);
  --xbridge-radius-pill: 999px;
  --xbridge-border: var(--xui-border);
  --xbridge-page-max: var(--xui-page-max);
  --xbridge-primary-1: var(--xui-accent-soft);
  --xbridge-primary-2: var(--xui-accent-soft);
  --xbridge-primary-3: var(--xui-line-mid);
  --xbridge-primary-4: var(--xui-accent);
  --xbridge-primary-5: var(--xui-accent);
  --xbridge-primary-6: var(--xui-accent-strong);
  --xbridge-primary-7: var(--xui-accent-strong);
  --xbridge-secondary-1: var(--xui-info-soft);
  --xbridge-secondary-2: var(--xui-info-soft);
  --xbridge-secondary-3: var(--xui-line-mid);
  --xbridge-secondary-4: var(--xui-info);
  --xbridge-secondary-5: var(--xui-info);
  --xbridge-secondary-6: var(--xui-info);
  --xbridge-secondary-7: var(--xui-info);
  --xbridge-bg: var(--xui-bg);
  --xbridge-bg-soft: var(--xui-bg-quiet);
  --xbridge-surface: var(--xui-surface);
  --xbridge-surface-2: var(--xui-surface-soft);
  --xbridge-surface-3: var(--xui-surface-tint);
  --xbridge-control-bg: var(--xui-surface);
  --xbridge-ink: var(--xui-ink);
  --xbridge-ink-muted: var(--xui-ink-muted);
  --xbridge-ink-faint: var(--xui-ink-soft);
  --xbridge-line: var(--xui-line-soft);
  --xbridge-line-strong: var(--xui-line-mid);
  --xbridge-accent: var(--xui-accent);
  --xbridge-accent-2: var(--xui-accent-strong);
  --xbridge-accent-soft: var(--xui-accent-soft);
  --xbridge-accent-line: var(--xui-line-mid);
  --xbridge-accent-ink: var(--xui-accent-ink);
  --xbridge-secondary: var(--xui-info);
  --xbridge-secondary-soft: var(--xui-info-soft);
  --xbridge-secondary-line: var(--xui-line-mid);
  --xbridge-danger: var(--xui-danger);
  --xbridge-danger-soft: var(--xui-danger-soft);
  --xbridge-danger-line: var(--xui-line-mid);
  --xbridge-success: var(--xui-success);
  --xbridge-success-soft: var(--xui-success-soft);
  --xbridge-success-line: var(--xui-line-mid);
  --xbridge-warning: var(--xui-warning);
  --xbridge-warning-soft: var(--xui-warning-soft);
  --xbridge-warning-line: var(--xui-line-mid);
  --xbridge-backdrop-bg: var(--xui-modal-backdrop);
  --xbridge-shadow: none;
  --xbridge-shadow-strong: none;
  --xbridge-shadow-soft: none;
  --xbridge-body-bg: var(--xui-bg-shell);
  --xbridge-surface-bg: var(--xui-surface);
  --xbridge-control-gradient: var(--xui-accent);
  --xbridge-shell-bg: var(--xui-surface);
  --xbridge-shell-line: var(--xui-line-soft);
  --xbridge-shell-shadow: none;
  --xbridge-surface-highlight: none;
  --xbridge-blur: 0;
  --xbridge-space-1: var(--xui-space-1);
  --xbridge-space-2: var(--xui-space-2);
  --xbridge-space-3: var(--xui-space-3);
  --xbridge-space-4: var(--xui-space-4);
  --xbridge-space-5: var(--xui-space-5);
  --xbridge-space-6: var(--xui-space-6);
}

.xbridge-overlay,
.xbridge-overlay *,
.xbridge-result-overlay,
.xbridge-result-overlay *,
.xapp-actions-root.is-xbridge,
.xapp-actions-root.is-xbridge * {
  box-sizing: border-box;
}

@keyframes xbridge-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes xbridge-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes xbridge-sheet-up {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes xbridge-goods-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.xbridge-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: max(var(--xbridge-space-4), env(safe-area-inset-top)) max(var(--xbridge-space-4), env(safe-area-inset-right)) max(var(--xbridge-space-4), env(safe-area-inset-bottom)) max(var(--xbridge-space-4), env(safe-area-inset-left));
  background: var(--xbridge-backdrop-bg);
  color: var(--xbridge-ink);
  font: var(--xbridge-text) / var(--xbridge-line-height) var(--xbridge-font);
}

.xbridge-overlay.is-full {
  place-items: stretch center;
  padding: 0;
  background: var(--xbridge-body-bg);
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] {
  place-items: end center;
  padding: 0;
  overflow: hidden;
  background: var(--xbridge-body-bg);
}

.xbridge-panel {
  width: min(980px, 100%);
  max-height: min(820px, calc(100dvh - 32px));
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-xl);
  background: var(--xbridge-shell-bg);
  color: var(--xbridge-ink);
  box-shadow: var(--xbridge-shell-shadow), var(--xbridge-surface-highlight);
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
}

.xbridge-panel.is-full {
  width: min(100%, var(--xbridge-page-max));
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] .xbridge-panel.is-full {
  --xbridge-goods-panel-pad: var(--xbridge-space-3);
  width: min(100%, var(--xbridge-page-max));
  max-width: none;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: bottom center;
  will-change: transform;
  animation: xbridge-goods-sheet-up var(--xui-speed) cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-head {
  width: 100%;
  margin: var(--xbridge-space-3) 0 0;
  padding-right: var(--xbridge-goods-panel-pad);
  padding-left: var(--xbridge-goods-panel-pad);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-body {
  width: 100%;
  margin: 0;
  gap: var(--xbridge-space-4);
  padding: 0 var(--xbridge-goods-panel-pad);
  background: transparent;
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-foot {
  width: 100%;
  margin: 0 0 var(--xbridge-space-3);
  padding-right: var(--xbridge-goods-panel-pad);
  padding-left: var(--xbridge-goods-panel-pad);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.xbridge-head {
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xbridge-space-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--xbridge-space-3)) var(--xbridge-space-4) var(--xbridge-space-3);
  border-bottom: var(--xbridge-border) solid var(--xbridge-line);
  background: var(--xbridge-shell-bg);
  box-shadow: var(--xbridge-surface-highlight);
}

.xbridge-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.xbridge-title strong {
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text-lg);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.xbridge-title span,
.xbridge-title small {
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
  overflow-wrap: anywhere;
}

.xbridge-icon-btn {
  width: var(--xbridge-control-h);
  min-width: var(--xbridge-control-h);
  height: var(--xbridge-control-h);
  min-height: var(--xbridge-control-h);
  padding: 0;
  border: 0;
  border-radius: var(--xbridge-radius-sm);
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--xbridge-ink);
  cursor: pointer;
}

.xbridge-icon-btn:hover,
.xbridge-icon-btn:focus-visible {
  background: var(--xbridge-accent-soft);
  color: var(--xbridge-accent-2);
  outline: none;
}

.xbridge-close-mark {
  width: 16px;
  height: 16px;
  position: relative;
  display: block;
}

.xbridge-close-mark::before,
.xbridge-close-mark::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 1px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.xbridge-close-mark::before {
  transform: rotate(45deg);
}

.xbridge-close-mark::after {
  transform: rotate(-45deg);
}

.xbridge-body {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--xbridge-space-4);
  padding: var(--xbridge-space-4);
  background: var(--xbridge-body-bg);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.xbridge-foot {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--xbridge-space-2);
  padding: var(--xbridge-space-3) var(--xbridge-space-4) calc(env(safe-area-inset-bottom, 0px) + var(--xbridge-space-3));
  border-top: var(--xbridge-border) solid var(--xbridge-line);
  background: var(--xbridge-shell-bg);
}

.xbridge-btn {
  min-width: var(--xbridge-control-h);
  min-height: var(--xbridge-control-h);
  padding: 0 var(--xbridge-space-4);
  border: var(--xbridge-border) solid var(--xbridge-line-strong);
  border-radius: var(--xbridge-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xbridge-space-2);
  background: var(--xbridge-control-bg);
  color: var(--xbridge-ink);
  font: 750 var(--xbridge-text) / 1 var(--xbridge-font);
  text-decoration: none;
  cursor: pointer;
}

.xbridge-btn:hover,
.xbridge-btn:focus-visible {
  border-color: var(--xbridge-accent-line);
  background: var(--xbridge-accent-soft);
  color: var(--xbridge-accent-2);
  outline: none;
}

.xbridge-btn.is-primary {
  border-color: var(--xbridge-accent);
  background: var(--xbridge-control-gradient);
  color: var(--xbridge-accent-ink);
  box-shadow: var(--xbridge-shadow-soft);
}

.xbridge-btn.is-primary:hover,
.xbridge-btn.is-primary:focus-visible {
  border-color: var(--xbridge-accent-2);
  background: var(--xbridge-control-gradient);
  color: var(--xbridge-accent-ink);
}

.xbridge-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.xbridge-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: var(--xbridge-space-5);
  border: var(--xbridge-border) dashed var(--xbridge-line-strong);
  border-radius: var(--xbridge-radius-lg);
  background: var(--xbridge-surface);
  text-align: center;
}

.xbridge-overlay[data-xbridge-goods-dialog="1"] .xbridge-state,
.xbridge-detail-sheet .xbridge-state {
  border: 0;
  background: transparent;
}

.xbridge-state > div {
  max-width: 420px;
  display: grid;
  gap: var(--xbridge-space-1);
}

.xbridge-state strong {
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text-md);
}

.xbridge-state p {
  margin: 0;
  color: var(--xbridge-ink-muted);
}

.xbridge-wechat-purchase-qr > div {
  justify-items: center;
  text-align: center;
}

.xbridge-wechat-purchase-qr-image {
  width: min(64vw, 260px);
  aspect-ratio: 1;
  padding: var(--xbridge-space-2);
  border-radius: var(--xbridge-radius-md);
  background: #fff;
}

.xbridge-wechat-purchase-qr-link {
  width: 100%;
  max-height: 5.4em;
  overflow: auto;
  color: var(--xbridge-ink-muted);
  font: var(--xbridge-text-xs) / 1.45 var(--xbridge-font-mono, monospace);
  overflow-wrap: anywhere;
  text-align: left;
}

.xbridge-notice {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-1);
  padding: var(--xbridge-space-3);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink-muted);
  overflow-wrap: anywhere;
}

.xbridge-notice.is-error {
  border-color: var(--xbridge-danger-line);
  background: var(--xbridge-danger-soft);
  color: var(--xbridge-danger);
}

.xbridge-goods-toolbar {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-3);
}

.xbridge-goods-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--xbridge-space-2);
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
}

.xbridge-chip {
  min-height: var(--xbridge-control-sm);
  padding: 0 var(--xbridge-space-3);
  border: 0;
  border-radius: var(--xbridge-radius-pill);
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
  font-weight: 750;
}

.xbridge-goods-list {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-4);
  padding: 0;
}

.xbridge-goods-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(128px, 34%) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--xbridge-space-3);
  padding: var(--xbridge-space-3);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-lg);
  background: var(--xbridge-surface-bg);
  color: var(--xbridge-ink);
  box-shadow: var(--xbridge-shadow), var(--xbridge-surface-highlight);
}

.xbridge-goods-media {
  width: 100%;
  height: 100%;
  min-height: 128px;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  container-type: size;
  overflow: hidden;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface-3);
  box-shadow: var(--xbridge-surface-highlight);
}

.xbridge-goods-media img,
.xbridge-detail-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.xbridge-image-cover {
  width: 100%;
  height: 100%;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.xbridge-goods-media img.xbridge-default-logo,
.xbridge-detail-media img.xbridge-default-logo {
  width: clamp(48px, 60cqmin, 256px);
  height: clamp(48px, 60cqmin, 256px);
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  opacity: 0.2;
}

.xbridge-goods-card-body {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(var(--xbridge-control-h), 1fr);
  gap: var(--xbridge-space-3);
  padding: var(--xbridge-space-1) 0;
}

.xbridge-goods-title {
  margin: 0;
  color: var(--xbridge-ink);
  font-size: var(--xui-text-lg);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
}

.xbridge-goods-meta {
  min-width: 0;
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xbridge-goods-card-foot,
.xbridge-goods-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--xbridge-space-2);
}

.xbridge-goods-card-foot {
  align-self: end;
  justify-content: flex-end;
  gap: var(--xbridge-space-3);
}

.xbridge-goods-actions {
  justify-content: flex-end;
}

.xbridge-price {
  color: var(--xbridge-accent-2);
  font-size: var(--xbridge-text-md);
  font-weight: 850;
  white-space: nowrap;
}

.xbridge-buy-btn {
  min-height: var(--xbridge-control-h);
  padding: 0 var(--xbridge-space-4);
  border-radius: var(--xbridge-radius);
  font-size: var(--xbridge-text);
}

.xbridge-detail-btn {
  width: var(--xbridge-control-h);
  min-width: var(--xbridge-control-h);
  height: var(--xbridge-control-h);
  min-height: var(--xbridge-control-h);
  border: var(--xbridge-border) solid var(--xbridge-line);
  background: var(--xbridge-surface-bg);
}

.xbridge-chevron-down {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.xbridge-detail-overlay,
.xbridge-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: grid;
  place-items: end center;
  padding: max(var(--xbridge-space-4), env(safe-area-inset-top)) max(var(--xbridge-space-4), env(safe-area-inset-right)) 0 max(var(--xbridge-space-4), env(safe-area-inset-left));
  background: var(--xbridge-backdrop-bg);
  color: var(--xbridge-ink);
  font: var(--xbridge-text) / var(--xbridge-line-height) var(--xbridge-font);
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
  animation: xbridge-fade-in var(--xui-speed) ease-out both;
}

.xbridge-result-overlay {
  z-index: 2147483300;
}

.xbridge-detail-sheet,
.xbridge-result-sheet {
  width: min(var(--xbridge-page-max), 100%);
  max-height: min(760px, calc(100dvh - max(var(--xbridge-space-6), env(safe-area-inset-top))));
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-xl) var(--xbridge-radius-xl) 0 0;
  background: var(--xbridge-shell-bg);
  color: var(--xbridge-ink);
  box-shadow: var(--xbridge-shadow-strong), var(--xbridge-surface-highlight);
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
  animation: xbridge-sheet-up var(--xui-speed) cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.xbridge-detail-sheet > .xbridge-head,
.xbridge-result-sheet > .xbridge-head {
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  margin-top: 12px;
}

.xbridge-detail-sheet > .xbridge-foot,
.xbridge-result-sheet > .xbridge-foot {
  border-top: 0;
  background: transparent;
}

.xbridge-result-sheet > .xbridge-body {
  --xbridge-scroll-fade-size: 16px;
  min-height: 0;
  max-height: 100%;
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  align-content: start;
  gap: var(--xbridge-space-4);
  padding: var(--xbridge-space-4);
  background: transparent;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--xbridge-scroll-fade-size),
    #000 calc(100% - var(--xbridge-scroll-fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--xbridge-scroll-fade-size),
    #000 calc(100% - var(--xbridge-scroll-fade-size)),
    transparent 100%
  );
}

.xbridge-checkout-sheet {
  width: min(var(--xbridge-page-max), 100%);
  height: min(820px, calc(100dvh - max(var(--xbridge-space-4), env(safe-area-inset-top))));
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-xl) var(--xbridge-radius-xl) 0 0;
  background: var(--xbridge-shell-bg);
  box-shadow: var(--xbridge-shadow-strong), var(--xbridge-surface-highlight);
  animation: xbridge-sheet-up var(--xui-speed) cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.xbridge-checkout-sheet > .xbridge-head {
  border-bottom: var(--xbridge-border) solid var(--xbridge-line);
  background: var(--xbridge-shell-bg);
}

.xbridge-checkout-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--xbridge-body-bg);
}

.xbridge-detail-body {
  --xbridge-scroll-fade-size: 16px;
  min-height: 0;
  max-height: 100%;
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  align-content: start;
  gap: var(--xbridge-space-4);
  padding: var(--xbridge-space-4);
  background: transparent;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--xbridge-scroll-fade-size),
    #000 calc(100% - var(--xbridge-scroll-fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--xbridge-scroll-fade-size),
    #000 calc(100% - var(--xbridge-scroll-fade-size)),
    transparent 100%
  );
}

.xbridge-detail-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--xbridge-space-4);
  align-items: start;
}

.xbridge-detail-media {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: grid;
  place-items: center;
  container-type: size;
  overflow: hidden;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-bg-soft);
}

.xbridge-detail-copy {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.xbridge-detail-copy h2 {
  margin: 0;
  color: var(--xbridge-ink);
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.xbridge-detail-copy p {
  margin: 0;
  color: var(--xbridge-ink-muted);
  overflow-wrap: anywhere;
}

.xbridge-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface-bg);
}

.xbridge-kv div {
  min-width: 0;
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: var(--xbridge-space-1);
  padding: var(--xbridge-space-3) var(--xbridge-space-4);
  border-top: var(--xbridge-border) solid var(--xbridge-line);
  overflow-wrap: anywhere;
}

.xbridge-kv div:nth-child(-n + 2) {
  border-top: 0;
}

.xbridge-kv div:nth-child(odd) {
  border-right: var(--xbridge-border) solid var(--xbridge-line);
}

.xbridge-kv small {
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
  font-weight: 750;
}

.xbridge-resource-list {
  display: grid;
  gap: var(--xbridge-space-3);
}

.xbridge-resource-list strong {
  font-size: var(--xbridge-text);
}

.xbridge-resource-list span {
  padding: var(--xbridge-space-3) var(--xbridge-space-4);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text);
  overflow-wrap: anywhere;
}

.xbridge-discount-code {
  display: grid;
  gap: 8px;
}

.xbridge-discount-code label {
  display: grid;
  gap: 6px;
  color: var(--xbridge-ink-muted, #667085);
}

.xbridge-discount-code input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--xbridge-line, #d9e0ea);
  border-radius: 8px;
  background: var(--xbridge-surface, #fff);
  color: var(--xbridge-ink, #172033);
  padding: 0 12px;
}

.xbridge-discount-code > span { color: var(--xbridge-ink-muted, #667085); font-size: 13px; }

.xbridge-result {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-4);
}

.xbridge-result-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--xbridge-space-4);
  padding: var(--xbridge-space-4);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-lg);
  background: var(--xbridge-surface);
}

.xbridge-result-head > div {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-1);
}

.xbridge-result-head h2 {
  margin: 0;
  color: var(--xbridge-ink);
  font-size: 22px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.xbridge-result-head p {
  margin: 0;
  color: var(--xbridge-ink-muted);
  overflow-wrap: anywhere;
}

.xbridge-result-badge {
  width: fit-content;
  min-height: 26px;
  padding: 3px 9px;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-pill);
  display: inline-flex;
  align-items: center;
  background: var(--xbridge-surface-2);
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text-sm);
  font-weight: 800;
}

.xbridge-result-badge.is-success {
  border-color: var(--xbridge-success-line);
  background: var(--xbridge-success-soft);
  color: var(--xbridge-success);
}

.xbridge-result-badge.is-pending,
.xbridge-result-badge.is-warn,
.xbridge-result-badge.is-warning {
  border-color: var(--xbridge-warning-line);
  background: var(--xbridge-warning-soft);
  color: var(--xbridge-warning);
}

.xbridge-result-badge.is-error,
.xbridge-result-badge.is-danger {
  border-color: var(--xbridge-danger-line);
  background: var(--xbridge-danger-soft);
  color: var(--xbridge-danger);
}

.xbridge-result-tags,
.xbridge-result-schedule {
  min-width: 0;
  display: grid;
  gap: var(--xbridge-space-2);
}

.xbridge-result-tags {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.xbridge-result-schedule div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: var(--xbridge-space-3);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface);
}

.xbridge-result-schedule strong {
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text);
}

.xbridge-result-schedule span {
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
  overflow-wrap: anywhere;
}

.xapp-actions-root.is-xbridge {
  top: max(var(--xbridge-space-3), env(safe-area-inset-top));
  right: max(var(--xbridge-space-3), env(safe-area-inset-right));
  z-index: 70;
  color: var(--xbridge-ink);
  font: var(--xbridge-text) / var(--xbridge-line-height) var(--xbridge-font);
}

.xapp-actions-root.is-xbridge.is-bottom-right {
  top: auto;
  bottom: max(var(--xbridge-space-3), env(safe-area-inset-bottom));
}

.xapp-actions-root.is-xbridge .xapp-actions-bar {
  gap: var(--xbridge-space-2);
}

.xapp-actions-root.is-xbridge .xapp-action-button {
  min-height: var(--xbridge-control-h);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-pill);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
}

.xapp-actions-root.is-xbridge .xapp-action-button:hover,
.xapp-actions-root.is-xbridge .xapp-action-button:focus {
  border-color: var(--xbridge-accent-line);
  background: var(--xbridge-accent-soft);
  color: var(--xbridge-accent-2);
  outline: none;
}

.xapp-actions-root.is-xbridge .xapp-feedback-button {
  padding: 0 var(--xbridge-space-4);
  gap: var(--xbridge-space-2);
  border-color: var(--xbridge-accent);
  background: var(--xbridge-accent);
  color: var(--xbridge-accent-ink);
  font-weight: 800;
}

.xapp-actions-root.is-xbridge .xapp-feedback-button span {
  flex: 0 0 auto;
}

.xapp-actions-root.is-xbridge .xapp-feedback-button span:last-child {
  min-width: 2em;
  white-space: nowrap;
}

.xapp-actions-root.is-xbridge .xapp-more-button {
  width: var(--xbridge-control-h);
  min-width: var(--xbridge-control-h);
  height: var(--xbridge-control-h);
  min-height: var(--xbridge-control-h);
  padding: 0;
}

.xapp-actions-root.is-xbridge .xapp-feedback-icon {
  width: 16px;
  height: 16px;
  border: var(--xbridge-border) solid currentColor;
  border-radius: var(--xbridge-radius-sm);
  background: currentColor;
}

.xapp-actions-root.is-xbridge .xapp-feedback-icon::after {
  background: currentColor;
}

.xapp-actions-root.is-xbridge .xapp-feedback-icon::before {
  background: var(--xbridge-accent);
}

.xapp-actions-root.is-xbridge .xapp-actions-menu {
  min-width: 180px;
  padding: var(--xbridge-space-2);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-lg);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
}

.xapp-actions-root.is-xbridge .xapp-menu-item {
  min-height: var(--xbridge-control-h);
  padding: 0 var(--xbridge-space-3);
  border: var(--xbridge-border) solid transparent;
  border-radius: var(--xbridge-radius);
  color: var(--xbridge-ink);
  font-weight: 750;
}

.xapp-actions-root.is-xbridge .xapp-menu-item:hover,
.xapp-actions-root.is-xbridge .xapp-menu-item:focus {
  border-color: var(--xbridge-accent-line);
  background: var(--xbridge-accent-soft);
  color: var(--xbridge-accent-2);
}

.xapp-actions-root.is-xbridge .xapp-action-toast {
  padding: var(--xbridge-space-3) var(--xbridge-space-4);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-lg);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  box-shadow: none;
}

.xapp-actions-root.is-xbridge .xapp-action-modal {
  z-index: 100;
  align-items: center;
  padding: var(--xbridge-space-4);
  background: var(--xbridge-backdrop-bg);
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
}

.xapp-actions-root.is-xbridge .xapp-action-dialog {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius-xl);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--xbridge-blur));
  backdrop-filter: blur(var(--xbridge-blur));
}

.xapp-actions-root.is-xbridge .xapp-dialog-head {
  padding: var(--xbridge-space-4);
  border-bottom: var(--xbridge-border) solid var(--xbridge-line);
}

.xapp-actions-root.is-xbridge .xapp-dialog-head strong {
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text-lg);
}

.xapp-actions-root.is-xbridge .xapp-dialog-head p {
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
}

.xapp-actions-root.is-xbridge .xapp-dialog-close {
  width: var(--xbridge-control-h);
  min-width: var(--xbridge-control-h);
  height: var(--xbridge-control-h);
  min-height: var(--xbridge-control-h);
  padding: 0;
  border: 0;
  border-radius: var(--xbridge-radius-sm);
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--xbridge-ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.xapp-actions-root.is-xbridge .xapp-dialog-close:hover,
.xapp-actions-root.is-xbridge .xapp-dialog-close:focus {
  background: var(--xbridge-accent-soft);
  color: var(--xbridge-accent-2);
  outline: none;
}

.xapp-actions-root.is-xbridge .xapp-feedback-form,
.xapp-actions-root.is-xbridge .xapp-qr-body,
.xapp-actions-root.is-xbridge .xapp-feedback-success {
  gap: var(--xbridge-space-4);
  padding: var(--xbridge-space-4);
  background: var(--xbridge-surface);
}

.xapp-actions-root.is-xbridge .xapp-feedback-hint,
.xapp-actions-root.is-xbridge .xapp-feedback-form label > span,
.xapp-actions-root.is-xbridge .xapp-feedback-reasons > span {
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text-sm);
}

.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs {
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface);
}

.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs button {
  min-height: var(--xbridge-control-h);
  border-left: var(--xbridge-border) solid var(--xbridge-line);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
  font-weight: 750;
}

.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs button:first-child {
  border-left: 0;
}

.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs button:hover,
.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs button:focus {
  background: var(--xbridge-accent-soft);
  outline: none;
}

.xapp-actions-root.is-xbridge .xapp-feedback-category-tabs button.is-active {
  border-color: var(--xbridge-accent);
  background: var(--xbridge-accent);
  color: var(--xbridge-accent-ink);
}

.xapp-actions-root.is-xbridge .xapp-feedback-form textarea {
  min-height: 112px;
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-control-bg);
  color: var(--xbridge-ink);
}

.xapp-actions-root.is-xbridge .xapp-feedback-form textarea:focus {
  border-color: var(--xbridge-accent);
  outline: none;
}

.xapp-actions-root.is-xbridge .xapp-reason-list label {
  border: var(--xbridge-border) solid var(--xbridge-line);
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
}

.xapp-actions-root.is-xbridge .xapp-reason-list label:hover {
  border-color: var(--xbridge-accent-line);
  background: var(--xbridge-accent-soft);
}

.xapp-actions-root.is-xbridge .xapp-reason-list input {
  accent-color: var(--xbridge-accent);
}

.xapp-actions-root.is-xbridge .xapp-feedback-primary,
.xapp-actions-root.is-xbridge .xapp-feedback-secondary {
  min-height: var(--xbridge-control-h);
  padding: 0 var(--xbridge-space-4);
  border: var(--xbridge-border) solid var(--xbridge-line-strong);
  border-radius: var(--xbridge-radius);
  font-weight: 750;
}

.xapp-actions-root.is-xbridge .xapp-feedback-primary {
  border-color: var(--xbridge-accent);
  background: var(--xbridge-accent);
  color: var(--xbridge-accent-ink);
}

.xapp-actions-root.is-xbridge .xapp-feedback-secondary {
  background: var(--xbridge-surface);
  color: var(--xbridge-ink);
}

.xapp-actions-root.is-xbridge .xapp-feedback-primary:hover,
.xapp-actions-root.is-xbridge .xapp-feedback-primary:focus {
  border-color: var(--xbridge-accent-2);
  background: var(--xbridge-accent-2);
}

.xapp-actions-root.is-xbridge .xapp-feedback-secondary:hover,
.xapp-actions-root.is-xbridge .xapp-feedback-secondary:focus {
  background: var(--xbridge-accent-soft);
}

.xapp-actions-root.is-xbridge .xapp-qr-code {
  width: 200px;
  height: 200px;
  justify-self: center;
  padding: 18px;
  border: 0;
  border-radius: var(--xbridge-radius-lg);
  background: #fff;
}

.xapp-actions-root.is-xbridge .xapp-qr-code img {
  width: 164px;
  height: 164px;
}

.xapp-actions-root.is-xbridge .xapp-qr-link {
  border: 0;
  border-radius: var(--xbridge-radius);
  background: var(--xbridge-bg-soft);
  color: var(--xbridge-ink-muted);
  font-size: var(--xbridge-text);
}

.xapp-actions-root.is-xbridge .xapp-qr-link strong {
  color: var(--xbridge-ink);
  font-size: var(--xbridge-text);
}

@media (max-width: 680px) {
  .xbridge-overlay {
    padding: 0;
  }

  .xbridge-overlay[data-xbridge-goods-dialog="1"] {
    background: var(--xbridge-body-bg);
  }

  .xbridge-panel {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .xbridge-body {
    padding: var(--xbridge-space-3);
  }

  .xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-head {
    width: 100%;
    margin-top: var(--xbridge-space-3);
  }

  .xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-body {
    width: 100%;
    gap: var(--xbridge-space-4);
    padding-top: var(--xbridge-space-4);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--xbridge-space-4));
  }

  .xbridge-overlay[data-xbridge-goods-dialog="1"] > .xbridge-panel.is-full > .xbridge-foot {
    width: 100%;
    margin-bottom: var(--xbridge-space-3);
  }

  .xbridge-foot .xbridge-btn {
    flex: 1 1 auto;
  }

  .xbridge-head {
    min-height: 56px;
    padding-right: var(--xbridge-space-3);
    padding-left: var(--xbridge-space-3);
  }

  .xbridge-title strong {
    font-size: 16px;
  }

  .xbridge-goods-toolbar {
    gap: var(--xbridge-space-3);
  }

  .xbridge-goods-summary {
    gap: var(--xbridge-space-2);
  }

  .xbridge-goods-list {
    gap: var(--xbridge-space-4);
  }

  .xbridge-goods-card {
    grid-template-columns: minmax(124px, 36%) minmax(0, 1fr);
    gap: var(--xbridge-space-3);
    min-height: 0;
    padding: var(--xbridge-space-3);
  }

  .xbridge-goods-media {
    width: 100%;
    min-height: 124px;
  }

  .xbridge-goods-card-body {
    grid-template-rows: auto auto minmax(var(--xbridge-control-h), 1fr);
    padding: var(--xbridge-space-1) 0;
  }

  .xbridge-goods-title {
    font-size: var(--xbridge-text-md);
  }

  .xbridge-goods-card-foot {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: var(--xbridge-space-2);
  }

  .xbridge-goods-actions {
    gap: var(--xbridge-space-2);
  }

  .xbridge-buy-btn {
    min-width: 128px;
    min-height: var(--xbridge-control-h);
    padding: 0 var(--xbridge-space-4);
  }

  .xbridge-detail-btn {
    width: var(--xbridge-control-h);
    min-width: var(--xbridge-control-h);
    height: var(--xbridge-control-h);
    min-height: var(--xbridge-control-h);
  }

  .xbridge-result-head {
    display: grid;
    gap: var(--xbridge-space-3);
  }

  .xbridge-result-tags {
    grid-template-columns: 1fr;
  }

  .xbridge-detail-overlay,
  .xbridge-result-overlay {
    padding: 0;
    place-items: end stretch;
  }

  .xbridge-detail-sheet,
  .xbridge-result-sheet {
    width: min(100%, var(--xbridge-page-max));
    margin: 0 auto;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--xbridge-radius-xl) var(--xbridge-radius-xl) 0 0;
  }

  .xbridge-checkout-sheet {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .xbridge-detail-body {
    gap: var(--xbridge-space-4);
    padding: var(--xbridge-space-4) var(--xbridge-space-3);
  }

  .xbridge-detail-hero,
  .xbridge-kv {
    grid-template-columns: 1fr;
  }

  .xbridge-kv div:nth-child(odd) {
    border-right: 0;
  }

  .xbridge-kv div:nth-child(2) {
    border-top: var(--xbridge-border) solid var(--xbridge-line);
  }

  .xapp-actions-root.is-xbridge {
    top: max(var(--xbridge-space-2), env(safe-area-inset-top));
    right: max(var(--xbridge-space-2), env(safe-area-inset-right));
  }

  .xapp-actions-root.is-xbridge .xapp-feedback-button {
    width: auto;
    min-width: calc(var(--xbridge-control-h) + 2em + var(--xbridge-space-2));
    padding: 0 var(--xbridge-space-3);
  }

  .xapp-actions-root.is-xbridge .xapp-action-modal {
    align-items: flex-end;
    padding: 0;
  }

  .xapp-actions-root.is-xbridge .xapp-action-dialog {
    width: 100%;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--xbridge-radius-xl) var(--xbridge-radius-xl) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xbridge-overlay[data-xbridge-goods-dialog="1"] .xbridge-panel.is-full {
    animation: none;
  }
}

@media (max-width: 420px) {
  .xbridge-goods-card {
    grid-template-columns: minmax(96px, 32%) minmax(0, 1fr);
    gap: var(--xbridge-space-2);
    padding: var(--xbridge-space-2);
  }

  .xbridge-goods-media {
    min-height: 96px;
  }

  .xbridge-goods-card-body {
    gap: var(--xbridge-space-2);
    padding: 0;
  }

  .xbridge-goods-card-foot {
    align-items: end;
    justify-content: flex-end;
    gap: var(--xbridge-space-2);
  }

  .xbridge-goods-actions {
    justify-content: flex-end;
    gap: 6px;
  }

  .xbridge-buy-btn {
    min-width: 120px;
    min-height: 40px;
    padding: 0 var(--xbridge-space-3);
  }

  .xbridge-detail-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}