:root {
  --yxb-bg: #f8fcff;
  --yxb-bg-page: #ffffff;
  --yxb-surface: #ffffff;
  --yxb-surface-soft: #f3faff;
  --yxb-line: #e1eff8;
  --yxb-line-strong: #cdeafb;
  --yxb-text: #20384a;
  --yxb-muted: #758da1;
  --yxb-primary: #bae6fd;
  --yxb-primary-strong: #075985;
  --yxb-primary-soft: #f0f9ff;
  --yxb-accent: #fed7aa;
  --yxb-accent-strong: #9a3412;
  --yxb-accent-soft: #fff7ed;
  --yxb-success: #16a34a;
  --yxb-success-soft: #ecfdf5;
  --yxb-price: #e11d48;
  --yxb-warning: #d97706;
  --yxb-warning-soft: #fffbeb;
  --yxb-shadow: rgba(7, 89, 133, .08);
}

body {
  background: var(--yxb-bg);
  color: var(--yxb-text);
}

.screen {
  background: linear-gradient(180deg, var(--yxb-bg) 0, var(--yxb-bg-page) 148px);
}

.header,
.tabbar,
.buybar {
  background: rgba(255, 255, 255, .96);
  border-color: var(--yxb-line);
  backdrop-filter: blur(12px);
}

.back,
.card,
.order,
.panel,
.preview,
.pay-card,
.file,
.hero {
  background: var(--yxb-surface);
  border-color: var(--yxb-line);
  box-shadow: 0 10px 24px var(--yxb-shadow);
}

.back::before {
  border-color: var(--yxb-primary-strong);
}

.search,
.watermark {
  background: var(--yxb-surface-soft);
  border-color: var(--yxb-line);
  color: var(--yxb-muted);
}

.tab,
.method,
.yxb-pay-method {
  background: var(--yxb-surface);
  border-color: var(--yxb-line);
  color: var(--yxb-muted);
}

.tab.active,
.search-btn,
.type,
.action,
.action.rose,
.btn.indigo,
.contact-float,
.navitem.active {
  background: var(--yxb-primary);
  border-color: var(--yxb-primary);
  color: var(--yxb-primary-strong);
  box-shadow: 0 8px 18px rgba(14, 165, 233, .12);
}

.navitem.active {
  background: transparent;
  color: var(--yxb-primary-strong);
}

.mini-btn,
.buy-btn,
.download-btn,
.help-link,
.btn.rose,
.pay-btn,
.yxb-pay-button,
a[data-yxb-pay],
.payment-card a,
.intent-card a,
body[data-product-id] .card a {
  background: var(--yxb-accent);
  border: 1px solid #fdba74;
  color: var(--yxb-accent-strong);
  box-shadow: 0 10px 22px rgba(249, 115, 22, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

.mini-btn {
  min-width: 56px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
}

@media (max-width: 440px) {
  .mini-btn {
    min-height: 32px;
    padding: 0 9px;
    line-height: 1.1;
  }
}

.buy-btn,
.download-btn,
.help-link,
.pay-btn,
.yxb-pay-button {
  min-height: 52px;
}

.paper-top,
.thumb .title,
.thumb.green .title,
.thumb.rose .title,
.thumb.blue .title,
.thumb.amber .title {
  background: var(--yxb-primary);
}

.paper h2 {
  color: var(--yxb-primary-strong);
}

.picture,
.image,
.poster-box {
  background: var(--yxb-primary-soft);
  border-color: var(--yxb-line-strong);
}

.color-row i,
.swatches i {
  background: var(--yxb-primary-soft);
}

.tip,
.empty-tip {
  background: var(--yxb-primary-soft);
  color: var(--yxb-primary-strong);
}

.paid,
.method.is-active,
.yxb-pay-method.is-active {
  background: var(--yxb-success-soft);
  border-color: var(--yxb-success);
  color: var(--yxb-success);
}

.pending {
  background: var(--yxb-warning-soft);
  color: var(--yxb-warning);
}

.success,
.mark,
.yxb-pay-mark {
  background: var(--yxb-success);
  color: #fff;
}

body[data-page-id="pay"],
body[data-page-id="pay"] .screen {
  background: transparent;
}

body[data-page-id="pay"] .pay-btn,
body[data-page-id="pay"] .mark {
  background: var(--yxb-success);
}

body[data-page-id="pay"] .mini-mark {
  color: var(--yxb-success);
}

.preview-layer {
  background: rgba(18, 48, 71, .72);
}

.preview-close {
  background: rgba(186, 230, 253, .55);
  color: var(--yxb-primary-strong);
}

.preview-download {
  background: var(--yxb-accent);
  color: var(--yxb-accent-strong);
  box-shadow: 0 12px 28px rgba(249, 115, 22, .16);
}

.message b,
.yxb-pay-message b,
.meta b,
.hero .tag {
  color: var(--yxb-price);
}

.line {
  background: #cbd5e1;
}

.product,
.status,
.help,
.file-info span,
.row,
.order-bottom,
.no,
.hero p,
.panel p {
  color: var(--yxb-muted);
}