/* Unified visual skin for all public-facing pages */
:root {
  --ux-primary: #2f7dff;
  --ux-primary-dark: #1f5fd2;
  --ux-accent: #19c7b3;
  --ux-text: #13233c;
  --ux-text-light: #4e607f;
  --ux-border: #d9e4f5;
  --ux-border-soft: #e7eef9;
  --ux-surface: #ffffff;
  --ux-bg: #f3f7fd;
  --ux-soft: #eef5ff;
  --ux-shadow-sm: 0 8px 22px rgba(18, 46, 89, 0.08);
  --ux-shadow-md: 0 14px 32px rgba(18, 46, 89, 0.12);
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(47, 125, 255, 0.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(25, 199, 179, 0.12), transparent 36%),
    var(--ux-bg) !important;
  color: var(--ux-text) !important;
}

.home-main,
.social-shell,
.guide-page,
.store-shell,
.shop-shell,
.product-shell,
.detail-shell,
.route-shell,
.post-shell,
.user-center,
.reward-page,
.profile-page,
.merchant-shell {
  color: var(--ux-text);
}

.ai-assistant-card,
.store-highlight-shell,
.store-card,
.store-product-card,
.social-main,
.side-card,
.guide-section,
.guide-sidebar,
.shop-list-section,
.shop-card,
.product-card,
.shop-panel,
.detail-panel,
.route-panel,
.post-card,
.profile-form,
.profile-nav,
.points-card,
.reward-card,
.history,
.reward-modal,
.rule-box,
.profile-card,
.media-section,
.media-item,
.share-content,
.merchant-banner,
.merchant-sidebar,
.merchant-panel,
.status-card,
.data-card,
.preview-card,
.filter-bar,
.stats-bar,
.store-kpi,
.route-card,
.attraction-card {
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow-sm) !important;
}

.page-header {
  background: linear-gradient(135deg, #f7faff, #eef5ff) !important;
  border-bottom: 1px solid var(--ux-border) !important;
  color: var(--ux-text) !important;
}

.page-header p {
  color: var(--ux-text-light) !important;
  opacity: 1 !important;
}

h1, h2, h3, h4,
.section-title,
.panel-title,
.post-title,
.route-copy h1,
.guide-hero h1,
.shop-title,
.product-title,
.reward-title,
.profile-details h1,
.profile-name,
.merchant-banner h1,
.route-content h3,
.attraction-info h3 {
  color: var(--ux-text) !important;
}

p,
.section-desc,
.post-content,
.shop-desc,
.product-desc,
.guide-hero p,
.route-copy p,
.detail-panel p,
.reward-desc,
.reward-meta,
.profile-details p,
.profile-username,
.profile-bio,
.meta-item,
.ai-followup-title,
.stat-label,
.media-meta,
.route-desc,
.route-info,
.attraction-desc,
.attraction-meta,
.data-meta,
.side-username,
.mini-time {
  color: var(--ux-text-light) !important;
}

input,
select,
textarea {
  border-color: #d7e3f5 !important;
  color: var(--ux-text) !important;
  background: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ux-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.14) !important;
  outline: none !important;
}

.btn-primary,
.btn-submit,
.btn-send,
.social-btn.primary,
.guide-btn.primary,
.store-btn.primary,
.btn-buy,
.primary-btn,
.btn-primary-link,
.comment-submit-btn,
.detail-action-btn.active,
.reward-nav-btn,
.btn-route,
.btn-action.primary,
.filter-btn.active,
.merchant-sidebar button.active,
.page-btn.active,
.mini-btn.accept {
  background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(47, 125, 255, 0.28) !important;
}

.btn-primary:hover,
.btn-submit:hover,
.btn-send:hover,
.social-btn.primary:hover,
.guide-btn.primary:hover,
.store-btn.primary:hover,
.btn-buy:hover,
.primary-btn:hover,
.btn-primary-link:hover,
.comment-submit-btn:hover,
.reward-nav-btn:hover,
.btn-route:hover,
.btn-action.primary:hover,
.filter-btn.active:hover,
.merchant-sidebar button.active:hover,
.mini-btn.accept:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-cancel,
.social-btn.muted,
.guide-btn.secondary,
.store-btn.secondary,
.btn-cart,
.btn-detail,
.secondary-btn,
.btn-secondary-link,
.detail-action-btn,
.post-action-btn,
.actions .btn-secondary,
.btn-link,
.btn-outline,
.btn-action.secondary,
.merchant-sidebar button,
.filter-btn,
.page-btn,
.mini-btn,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-neutral) {
  background: #f4f8ff !important;
  color: #25559f !important;
  border: 1px solid var(--ux-border) !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.social-btn.muted:hover,
.guide-btn.secondary:hover,
.store-btn.secondary:hover,
.btn-cart:hover,
.btn-detail:hover,
.secondary-btn:hover,
.btn-secondary-link:hover,
.detail-action-btn:hover,
.post-action-btn:hover,
.btn-link:hover,
.btn-outline:hover,
.btn-action.secondary:hover,
.merchant-sidebar button:hover,
.filter-btn:hover,
.page-btn:hover,
.mini-btn:hover,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-neutral):hover {
  background: #eaf1ff !important;
  color: #1d4b94 !important;
}

.shop-meta span,
.product-meta span,
.store-meta span,
.meta-list span,
.post-category,
.region-tag,
.stat-pill,
.detail-meta span,
.detail-tag,
.route-pills span,
.guide-chip,
.guide-summary-meta span,
.reward-chip,
.tag,
.highlight-tag,
.preview-meta span {
  background: var(--ux-soft) !important;
  color: #2c5ea8 !important;
  border: 1px solid #d8e5fb !important;
}

.store-hero,
.social-hero,
.guide-hero-inner,
.route-copy,
.invite-banner,
.merchant-banner {
  background: linear-gradient(135deg, #f7faff, #eef5ff) !important;
  border-color: var(--ux-border) !important;
}

.store-highlight-shell .section-top h3,
.store-shell .section-top h2,
.shop-shell .shop-panel h2,
.product-shell .order-panel h3 {
  color: var(--ux-text) !important;
}

.store-kpi {
  background: #f7fbff !important;
  border: 1px solid var(--ux-border) !important;
}

.store-kpi span {
  color: var(--ux-text-light) !important;
}

.store-kpi strong,
.store-price,
.product-price,
.price,
.cost {
  color: #215eb5 !important;
}

.rank-card {
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow-sm) !important;
}

.rank-card h3,
.rank-card h4 {
  color: var(--ux-text) !important;
}

.contact-list div,
.order-panel {
  background: #f7faff !important;
  border: 1px solid var(--ux-border-soft) !important;
  color: var(--ux-text-light) !important;
}

.card-actions .primary,
.actions .primary,
.product-actions .primary,
.order-actions .primary-btn {
  background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(47, 125, 255, 0.24) !important;
}

.card-actions .secondary,
.actions .secondary,
.product-actions .secondary,
.order-actions .secondary-btn {
  background: #f4f8ff !important;
  color: #25559f !important;
  border: 1px solid var(--ux-border) !important;
}

.reward-hero {
  background:
    linear-gradient(120deg, rgba(6, 18, 36, 0.78), rgba(12, 38, 63, 0.62), rgba(17, 57, 89, 0.52)),
    url("/assets/images/original/picsum-jingzhou-rewards-1400x520.jpg") center/cover !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.reward-hero h1,
.reward-hero p {
  color: #f3f8ff !important;
  text-shadow: 0 8px 22px rgba(5, 14, 28, 0.34);
}

.profile-header,
.reward-nav-shell,
.profile-banner {
  background: linear-gradient(120deg, #081a33 0%, #102a43 55%, #173e63 100%) !important;
}

.profile-header .profile-details h1,
.profile-header .profile-details p,
.reward-brand-copy strong,
.reward-brand-copy span {
  color: #edf4ff !important;
}

.profile-banner-cover {
  opacity: 0.22 !important;
}

.profile-meta,
.profile-card .profile-meta,
.route-footer,
.data-card,
.side-item-head {
  border-color: var(--ux-border-soft) !important;
}

.stat-box {
  background: #f7fbff !important;
  border: 1px solid var(--ux-border) !important;
}

.stat-number,
.stat-value {
  color: var(--ux-primary) !important;
}

.rank-item strong {
  color: var(--ux-primary) !important;
}

#profileUserId {
  color: var(--ux-text-light) !important;
}

.share-url,
.route-detail {
  background: #f7faff !important;
  border: 1px solid var(--ux-border-soft) !important;
  color: var(--ux-text-light) !important;
}

.route-badge {
  background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent)) !important;
  color: #fff !important;
}

.route-price {
  color: #215eb5 !important;
}

.reward-brand-mark,
.avatar-fallback,
.post-avatar-link,
.mini-avatar {
  background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent)) !important;
}

.social-main,
.side-card,
.post-item,
.post-comment-panel,
.side-item,
.post-comment-item,
.comment-item,
.related-card,
.chat-body,
.chat-bubble,
.profile-meta-box,
.profile-meta-line {
  border-color: var(--ux-border) !important;
}

.post-comment-panel,
.post-comment-item,
.post-comment-list .empty,
.social-note,
.comment-item,
.related-card,
.side-item {
  background: #f7faff !important;
  border-color: var(--ux-border-soft) !important;
}

.mini-actions .mini-btn,
.chat-header-actions .mini-btn,
.post-action-btn {
  border-color: var(--ux-border) !important;
}

.rank-card,
.rank-item,
.comment-item,
.related-card,
.post-comment-item {
  border-color: #e3ebf8 !important;
}

.data-table tbody tr:hover,
.post-card:hover,
.shop-card:hover,
.product-card:hover,
.route-card:hover,
.attraction-card:hover,
.media-item:hover,
.data-card:hover {
  box-shadow: 0 14px 30px rgba(18, 46, 89, 0.14) !important;
}

/* Guide page full unification */
.guide-hero-inner,
.guide-summary-card,
.guide-sidebar,
.guide-section,
.guide-card,
.guide-list-item,
.route-card,
.info-table,
.budget-panel,
.guide-note {
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow-sm) !important;
}

.guide-hero-inner {
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 125, 255, 0.14), transparent 30%),
    linear-gradient(135deg, #f8fbff, #eef5ff) !important;
}

.guide-hero-inner::before {
  background: radial-gradient(circle, rgba(47, 125, 255, 0.16), transparent 65%) !important;
}

.guide-eyebrow,
.guide-chip,
.guide-summary-meta span,
.route-meta span,
.guide-badge {
  background: var(--ux-soft) !important;
  color: #2c5ea8 !important;
  border: 1px solid #d8e5fb !important;
}

.guide-hero h1,
.guide-summary-title,
.guide-sidebar h3,
.guide-section h2,
.guide-card h4,
.route-top h3,
.info-table th,
.guide-list-item strong {
  color: var(--ux-text) !important;
}

.guide-hero p,
.guide-lead,
.guide-card p,
.route-body p,
.guide-note,
.guide-sidebar a,
.info-table td {
  color: var(--ux-text-light) !important;
}

.guide-sidebar a:hover {
  background: #edf4ff !important;
  color: #1d4b94 !important;
}

.guide-summary-list li {
  background: #f7faff !important;
  border-color: var(--ux-border-soft) !important;
}

.guide-list-item,
.route-card,
.route-top,
.route-body,
.info-table th,
.info-table td {
  border-color: var(--ux-border-soft) !important;
}

.route-top {
  background: linear-gradient(135deg, #f7faff, #eef5ff) !important;
}

.budget-panel {
  background: linear-gradient(135deg, #2f7dff, #19c7b3) !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(47, 125, 255, 0.26) !important;
  color: #fff !important;
}

.budget-row {
  border-bottom-color: rgba(255, 255, 255, 0.24) !important;
}

.guide-note {
  background: #f7faff !important;
  border-left: 4px solid var(--ux-primary) !important;
}

.guide-btn.primary {
  background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(47, 125, 255, 0.24) !important;
}

.guide-btn.secondary {
  background: #f4f8ff !important;
  color: #25559f !important;
  border: 1px solid var(--ux-border) !important;
}

.guide-btn.secondary:hover {
  background: #eaf1ff !important;
  color: #1d4b94 !important;
}