/*
 * XApp bridge host UI.
 * Parent-layer bridge overlays use XAUI tokens for visual style.
 */

@import url("/runtime/xaui/v1/xaui.css?v=20260829194528");

:root {
  --xbridge-font: var(--xaui-font, var(--xui-font, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
  --xbridge-mono: var(--xaui-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
  --xbridge-text-xs: var(--xaui-text-xs, 11px);
  --xbridge-text-sm: var(--xaui-text-sm, 12px);
  --xbridge-text: var(--xaui-text, 14px);
  --xbridge-text-md: var(--xaui-text-md, 15px);
  --xbridge-text-lg: var(--xaui-text-lg, 18px);
  --xbridge-line-height: var(--xaui-line-height, 1.5);
  --xbridge-space-1: var(--xaui-space-1, 4px);
  --xbridge-space-2: var(--xaui-space-2, 8px);
  --xbridge-space-3: var(--xaui-space-3, 12px);
  --xbridge-space-4: var(--xaui-space-4, 16px);
  --xbridge-space-5: var(--xaui-space-5, 20px);
  --xbridge-space-6: var(--xaui-space-6, 24px);
  --xbridge-control-h: var(--xaui-control-h, 44px);
  --xbridge-control-sm: var(--xaui-control-sm, 34px);
  --xbridge-radius-sm: var(--xaui-radius-sm, 8px);
  --xbridge-radius: var(--xaui-radius, 12px);
  --xbridge-radius-lg: var(--xaui-radius-lg, 18px);
  --xbridge-radius-xl: var(--xaui-radius-xl, 24px);
  --xbridge-radius-pill: var(--xaui-radius-pill, 999px);
  --xbridge-border: var(--xaui-border, 1px);
  --xbridge-page-max: var(--xaui-page-max, 520px);
  --xbridge-primary-1: var(--xaui-primary-1, #f0fbf5);
  --xbridge-primary-2: var(--xaui-primary-2, #d9f3e5);
  --xbridge-primary-3: var(--xaui-primary-3, #aee4c5);
  --xbridge-primary-4: var(--xaui-primary-4, #58c586);
  --xbridge-primary-5: var(--xaui-primary-5, #18a058);
  --xbridge-primary-6: var(--xaui-primary-6, #0f7f45);
  --xbridge-primary-7: var(--xaui-primary-7, #075f34);
  --xbridge-secondary-1: var(--xaui-secondary-1, #eff6ff);
  --xbridge-secondary-2: var(--xaui-secondary-2, #d9eaff);
  --xbridge-secondary-3: var(--xaui-secondary-3, #a9d0ff);
  --xbridge-secondary-4: var(--xaui-secondary-4, #62a5f5);
  --xbridge-secondary-5: var(--xaui-secondary-5, #1d6fd8);
  --xbridge-secondary-6: var(--xaui-secondary-6, #164ea6);
  --xbridge-secondary-7: var(--xaui-secondary-7, #0f3477);
  --xbridge-bg: var(--xaui-bg, #ffffff);
  --xbridge-bg-soft: var(--xaui-bg-soft, #f5f7f6);
  --xbridge-surface: var(--xaui-surface, #ffffff);
  --xbridge-surface-2: var(--xaui-surface-2, #f8faf9);
  --xbridge-surface-3: var(--xaui-surface-3, var(--xbridge-secondary-1));
  --xbridge-control-bg: var(--xaui-control-bg, #ffffff);
  --xbridge-ink: var(--xaui-ink, #151c18);
  --xbridge-ink-muted: var(--xaui-ink-muted, #637069);
  --xbridge-ink-faint: var(--xaui-ink-faint, #88948d);
  --xbridge-line: var(--xaui-line, #d8dfda);
  --xbridge-line-strong: var(--xaui-line-strong, #aebbb3);
  --xbridge-accent: var(--xaui-accent, var(--xbridge-primary-6));
  --xbridge-accent-2: var(--xaui-accent-2, var(--xbridge-primary-7));
  --xbridge-accent-soft: var(--xaui-accent-soft, var(--xbridge-primary-1));
  --xbridge-accent-line: var(--xaui-accent-line, var(--xbridge-primary-3));
  --xbridge-accent-ink: var(--xaui-accent-ink, #ffffff);
  --xbridge-secondary: var(--xaui-secondary, var(--xbridge-secondary-6));
  --xbridge-secondary-soft: var(--xaui-secondary-soft, var(--xbridge-secondary-1));
  --xbridge-secondary-line: var(--xaui-secondary-line, var(--xbridge-secondary-3));
  --xbridge-danger: var(--xaui-danger, #d92d20);
  --xbridge-danger-soft: var(--xaui-danger-soft, #fff0ee);
  --xbridge-danger-line: var(--xaui-danger-line, #f2b8b2);
  --xbridge-success: var(--xaui-success, #168a4a);
  --xbridge-success-soft: var(--xaui-success-soft, #e8f7ef);
  --xbridge-success-line: var(--xaui-success-line, #b8dcc8);
  --xbridge-warning: var(--xaui-warning, #b7791f);
  --xbridge-warning-soft: var(--xaui-warning-soft, #fff7e6);
  --xbridge-warning-line: var(--xaui-warning-line, #efd9a8);
  --xbridge-backdrop-bg: var(--xaui-backdrop-bg, rgba(17, 24, 20, 0.42));
  --xbridge-shadow: var(--xaui-shadow, none);
  --xbridge-shadow-strong: var(--xaui-shadow-strong, none);
  --xbridge-shadow-soft: var(--xaui-shadow-soft, none);
  --xbridge-body-bg: var(--xaui-body-bg, var(--xbridge-bg));
  --xbridge-surface-bg: var(--xaui-surface-bg, var(--xbridge-surface));
  --xbridge-control-gradient: var(--xaui-control-gradient, var(--xbridge-accent));
  --xbridge-shell-bg: var(--xaui-shell-bg, var(--xbridge-surface-bg));
  --xbridge-shell-line: var(--xaui-shell-line, var(--xbridge-line));
  --xbridge-shell-shadow: var(--xaui-shell-shadow, var(--xbridge-shadow));
  --xbridge-surface-highlight: var(--xaui-surface-highlight, none);
  --xbridge-blur: var(--xaui-blur, 0);
}

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

body[data-xapp-bridge-ui="1"] {
  min-height: 100vh;
  margin: 0;
  background: var(--xbridge-body-bg);
  color: var(--xbridge-ink);
  font: var(--xbridge-text) / var(--xbridge-line-height) var(--xbridge-font);
}

body[data-xapp-bridge-ui="1"] #xappHostRoot {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.xapp-host-shell {
  width: 100%;
  min-height: 100%;
  display: grid;
  background: var(--xbridge-body-bg);
  color: var(--xbridge-ink);
}

.xapp-host-frame {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  border: 0;
  background: var(--xbridge-surface);
}

.xapp-host-shell.is-state {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.xapp-host-state {
  width: min(520px, calc(100% - 32px));
  margin: 0;
  display: grid;
  gap: var(--xbridge-space-3);
  place-items: center;
  padding: var(--xbridge-space-6) var(--xbridge-space-4);
  color: var(--xbridge-ink);
  box-shadow: none;
  text-align: center;
}

.xapp-host-wait {
  width: min(520px, calc(100% - 32px));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  gap: var(--xbridge-space-3);
  color: var(--xbridge-ink);
  box-shadow: none;
}

.xapp-host-state strong,
.xapp-host-wait strong {
  font-size: var(--xbridge-text-lg);
  line-height: 1.25;
}

.xapp-host-state p,
.xapp-host-wait p,
.xapp-host-wait span {
  margin: 0;
  color: var(--xbridge-ink-muted);
}

.xapp-host-state a:not(.xaui-btn) {
  color: var(--xbridge-accent-2);
  font-weight: 700;
  text-decoration: none;
}

.xapp-host-actions {
  width: min(240px, 100%);
  display: grid;
  justify-items: stretch;
}

.xapp-host-state code {
  color: var(--xbridge-accent-2);
  font-family: var(--xbridge-mono);
  font-size: var(--xbridge-text-sm);
  word-break: break-all;
}

.xapp-host-wait {
  place-content: center;
  justify-items: center;
  text-align: center;
}

.xapp-host-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--xbridge-accent-line);
  border-top-color: var(--xbridge-accent);
  border-radius: 50%;
  animation: xbridge-spin 0.82s linear infinite;
}

@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(--xaui-motion, 220ms) 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(--xaui-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(--xaui-motion-fast, 140ms) 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(--xaui-motion, 220ms) 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(--xaui-motion, 220ms) 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;
  }
}