/* ============================================================
   渲染层样式（全局）
   从 index.html <style> 抽离，配合 Tailwind CDN 一起使用。
   主色统一用 --primary（由 js/app.js 从 config.color 设置）。
   ============================================================ */
:root { --primary: #f275aa; }

/* ---------- PC 端整体放大（移动端保持默认 16px） ----------
   Tailwind 尺寸全部基于 rem，放大根字号即可让字号/间距/控件/容器等比变大。 */
@media (min-width: 1024px) { html { font-size: 16.2px; } }
@media (min-width: 1536px) { html { font-size: 17.1px; } }

/* ---------- 在线客服浮窗 ---------- */
.customer-service-button {
  position: fixed; right: 20px; bottom: 24px; z-index: 99999;
  width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000));
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent);
  animation: customerServiceFloat 2.4s ease-in-out infinite;
}
.customer-service-button::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  animation: customerServicePulse 1.8s ease-out infinite;
}
.customer-service-logo { width: 34px; height: 34px; object-fit: contain; display: block; position: relative; z-index: 1; }
.customer-service-window {
  position: fixed; right: 20px; bottom: 88px; z-index: 99998;
  width: 420px; height: 620px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px);
  overflow: hidden; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); display: none;
}
.customer-service-window.active { display: block; }
.customer-service-frame { width: 100%; height: 100%; border: 0; display: block; }
.customer-service-hidden-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; }
@keyframes customerServiceFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes customerServicePulse { 0% { opacity: 0.75; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.25); } }
@media (max-width: 768px) {
  .customer-service-button { right: 14px; bottom: 84px; width: 52px; height: 52px; }
  .customer-service-logo { width: 30px; height: 30px; }
  /* 内容区底部留白（!important 覆盖 Tailwind py-6），保证二维码说明不被底部导航挡 */
  main.view-main { padding-bottom: 80px !important; }
  .customer-service-button.is-hidden-mobile { display: none; }
  .customer-service-window {
    top: 0; left: 0; right: 0; bottom: auto; width: 100vw;
    height: var(--customer-service-height, 100dvh); max-width: none; max-height: none; border-radius: 0;
  }
  .customer-service-hidden-close { top: 8px; right: 8px; width: 48px; height: 48px; }
}

/* ---------- 使用教程 / 知识库（全局，PC 与移动端都生效） ---------- */
/* 分类卡片（每分类一个） */
.know-cat-card { overflow: hidden; }
/* 文章行：左标题 + 右日期，行间细分隔线 */
.know-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid #eef1f5;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.know-row:last-child { border-bottom: 0; }
.know-row:hover { background: #f6f8fb; }
.know-row-title { font-size: 15px; font-weight: 500; color: #1e293b; }
.know-row-date { font-size: 13px; color: #94a3b8; white-space: nowrap; }
.dark .know-row { border-bottom-color: #263349; }
.dark .know-row-title { color: #e2e8f0; }
.dark .know-row:hover { background: #1e293b; }
.article-body img { max-width:100%; border-radius:8px; margin:10px 0; }
.article-body a { color:var(--primary); }
.article-body p,.article-body div { margin:6px 0; }

/* ---------- 圆形图标按钮（Telegram 等） ---------- */
.icon-btn {
  width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  transition: transform 0.2s ease, opacity 0.2s ease; text-decoration: none;
}
.icon-btn:hover { transform: scale(1.08); opacity: 0.92; }
.icon-btn-telegram { background: linear-gradient(135deg, #229ed9, #0088cc); }

/* ---------- 轻提示 toast ---------- */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 999999; padding: 10px 18px; border-radius: 8px; font-size: 14px; color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); max-width: 92vw;
  transition: opacity 0.15s, transform 0.15s; opacity: 0; pointer-events: none;
}
.toast.show { opacity: 1; }
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #0ea5e9; }

/* ---------- 客户端快速导入按钮 ---------- */
.import-btn { transition: transform 0.15s, box-shadow 0.15s; }
.import-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

/* ---------- 顶部导航显隐（未登录隐藏） ---------- */
.nav-hidden { display: none !important; }

/* ---------- 图标字体加载前：图标先占位隐藏（不显示方框），就绪后淡入 ---------- */
.fa { transition: opacity .28s ease; }
.fonts-loading .fa { opacity: 0; }

/* ============ PC 顶部导航 pill（hover 灰、选中粉色块） ============ */
.nav-pill {
  color: #334155;
  transition: background .15s ease, color .15s ease;
}
.nav-pill:hover { background: rgba(15, 23, 42, .06); }
.dark .nav-pill { color: #cbd5e1; }
.dark .nav-pill:hover { background: rgba(255, 255, 255, .08); }
.nav-pill.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* ============ 全部菜单：下拉项（hover 灰、选中粉） ============ */
.dropdown-item { transition: background .12s ease, color .12s ease; }
.dropdown-item:hover { background: rgba(15, 23, 42, .06); }
.dark .dropdown-item:hover { background: rgba(255, 255, 255, .08); }
.dropdown-item.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* 下拉菜单：从上方渐变落下（淡入 + 轻微下移） */
#navMoreDropdown.mega-open {
  transform-origin: top center;
  animation: dropdownIn .2s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============ 个人中心「我的钱包」卡片背景（地址由 config.images.walletBg 注入 --wallet-bg） ============ */
.wallet-card {
  background-image: var(--wallet-bg, url('../img/wallet-bg.webp'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 半透明遮罩：让背景图标变淡、保证文字可读（圆角跟随卡片） */
.wallet-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .74);
  border-radius: inherit;
  z-index: 0;
}
/* 内容浮于遮罩之上 */
.wallet-card > * { position: relative; z-index: 1; }
/* 深色模式：遮罩改为深色，背景图标隐约可见 */
.dark .wallet-card::before { background: rgba(15, 23, 42, .84); }

/* ============ 视图切换：丝滑入场动画 ============ */
.view-enter { animation: viewEnter .36s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
}

/* ============ 顶部加载进度条 ============ */
#appProgress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
#appProgress.active { opacity: 1; }
#appProgressBar {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px var(--primary);
  transition: width .38s cubic-bezier(.22, 1, .36, 1);
}

/* ============ 购买页类型 tab ============ */
.store-type-tab {
  color: #64748b;
  font-weight: 500;
}
.store-type-tab:hover { color: var(--primary); }
.store-type-tab.active {
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.dark .store-type-tab { color: #94a3b8; }
.dark .store-type-tab.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  box-shadow: none;
}