/* ============================================================
   龙慧云 H5 统一主题 — 对齐小程序新版界面
   风格：科技深蓝(#2563EB) + 橙色点缀(#FF7A1A)
         + 浅蓝渐变底 + 立体浮起卡片
   ------------------------------------------------------------
   加载顺序：本文件在 tech-ui.css / lh-clean.css 之后引入，
   通过重定义 CSS 变量 + !important 覆盖实现整体换肤。
   不影响任何业务逻辑（pricing.js 等），仅改视觉。
   ============================================================ */

:root {
  /* —— 浅蓝渐变底（替换原 #F5F7FA 浅灰） —— */
  --tech-bg: linear-gradient(160deg, #E3EDFB 0%, #ECF3FC 55%, #F4F9FF 100%);
  --tech-bg-2: linear-gradient(160deg, #ECF3FC 0%, #F4F9FF 100%);
  --tech-surface: #FFFFFF;
  --tech-surface-hover: #F4F9FF;
  --tech-border: #E6ECF5;
  --tech-border-glow: #2563EB;

  /* —— 强调色：科技深蓝主色 + 橙色点缀 —— */
  --tech-accent: #2563EB;
  --tech-accent-deep: #1D4ED8;
  --tech-accent-light: #3B82F6;
  --tech-orange: #FF7A1A;
  --tech-orange-light: #FFA050;
  --tech-orange-grad: linear-gradient(135deg, #FF8C2E 0%, #FF6B1A 100%);
  --tech-primary-grad: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --tech-primary-orange-grad: linear-gradient(135deg, #2563EB 0%, #FF7A1A 100%);

  /* —— neon-red 复用为橙色点缀（影响箭头 / 下划线 / 徽标 / 强调文字） —— */
  --tech-neon-red: #FF7A1A;
  --tech-gradient: linear-gradient(135deg, #2563EB 0%, #FF7A1A 100%);

  /* —— 立体浮起阴影 —— */
  --mp-shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.06);
  --mp-shadow: 0 10px 28px -10px rgba(37, 99, 235, 0.20), 0 2px 8px rgba(37, 99, 235, 0.06);
  --mp-shadow-lg: 0 18px 42px -12px rgba(37, 99, 235, 0.28), 0 4px 12px rgba(37, 99, 235, 0.08);
}

/* ========== 背景：浅蓝渐变（覆盖原浅灰） ========== */
html, body { background: var(--tech-bg) !important; }
.app, #app, .page-wrap { background: transparent !important; }

/* 科技网格淡化为蓝色细纹，更干净通透 */
#app::before, .app::before {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px) !important;
}

/* 角落柔光装饰，增强“立体光感” */
body::after {
  content: '';
  position: fixed;
  top: -160px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.10) 0%, rgba(255, 122, 26, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========== 卡片：白底 + 立体浮起 ========== */
.card,
.content-box,
.panel,
.modal-box,
.lh-unlock-card,
.lh-qrcode-card,
.clean-section {
  background: var(--tech-surface) !important;
  box-shadow: var(--mp-shadow) !important;
  border: 1px solid var(--tech-border) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover,
.clean-section:hover,
.content-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--mp-shadow-lg) !important;
}

/* ========== 区块标题：橙色点缀下划线 ========== */
.section-title,
.page-title-bar,
.hero-title,
.header-title,
.clean-section-title {
  color: var(--tech-accent-deep) !important;
  border-bottom: 2px solid rgba(255, 122, 26, 0.22);
  padding-bottom: 8px;
}

/* ========== 关键转化按钮 → 橙色（支付 / 解锁 / 提交 / VIP） ========== */
.pay-btn,
.btn-pay,
.btn-pay-confirm,
.submit-btn,
.unlock-btn,
.btn-unlock,
.btn-assess-unlock,
.lh-assess-btn,
.hero-cta,
.gold-btn,
.lh-btn-gold,
.vip-btn,
.btn-vip,
.clean-btn-primary {
  background: var(--tech-orange-grad) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px -6px rgba(255, 122, 26, 0.5) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pay-btn:active,
.btn-pay:active,
.btn-pay-confirm:active,
.submit-btn:active,
.unlock-btn:active,
.btn-unlock:active,
.btn-assess-unlock:active,
.lh-assess-btn:active,
.hero-cta:active,
.gold-btn:active,
.lh-btn-gold:active,
.vip-btn:active,
.btn-vip:active,
.clean-btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px -4px rgba(255, 122, 26, 0.5) !important;
}

/* 通用主按钮保持深蓝渐变（与小程序一致） */
.btn-primary {
  background: var(--tech-primary-grad) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* ========== 首页（lh-clean）专属点缀 ========== */
.clean-brand-title {
  background: linear-gradient(90deg, #2563EB 0%, #FF7A1A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.clean-btn {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.clean-btn:hover,
.clean-btn:active {
  transform: translateY(-2px);
  background: #EAF1FE !important;
  border-color: #2563EB !important;
  color: #2563EB !important;
}
/* 首页“核心功能”内联蓝色按钮也加橙色描边点缀 */
a.clean-btn[style*="165DFF"],
a.clean-btn[style*="165dff"] {
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5) !important;
}