/* =========================================================
 *  HSXS 落地页 · 公共设计令牌（暗黑奢华金色风）
 *  与 App 主题一致：金 #FFE300 / 深黑 #0A0A0C
 * ========================================================= */
:root {
  /* 主色 */
  --gold: #FFE300;
  --gold-2: #FFB800;
  --gold-soft: #ffe98a;

  /* 背景层 */
  --bg: #0A0A0C;
  --bg-card: #14141A;
  --bg-active: #1E1E26;
  --bg-nav: #0A0A0A;

  /* 文本 */
  --text: #FFFFFF;
  --text-2: #94A3B8;
  --text-3: #5b6473;

  /* 反馈 */
  --error: #FF6B6B;
  --success: #4CAF50;

  /* 描边 / 投影 */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 227, 0, 0.25);
  --glow: 0 0 40px rgba(255, 227, 0, 0.35);

  /* 渐变 */
  --grad-gold: linear-gradient(135deg, #FFE300 0%, #FFB800 100%);
  --grad-dark: linear-gradient(180deg, #16161C 0%, #0A0A0C 100%);

  --radius: 18px;
  --maxw: 1180px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* 通用金色按钮 */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #1a1400;
  background: var(--grad-gold);
  border-radius: 999px;
  box-shadow: var(--glow);
  transition: transform .15s ease, box-shadow .25s ease;
}
.btn-gold:active { transform: scale(.96); }
.btn-gold:hover { box-shadow: 0 0 56px rgba(255, 227, 0, .5); }

/* ============ 即插即用截图槽 ============
 * 用法：
 * <div class="shot"><div class="shot-css">...CSS拟真界面...</div>
 *   <img class="shot-img" src="../assets/shots/feed.png" alt=""
 *        onload="this.classList.add('ok')" onerror="this.remove()"></div>
 * 有真实截图时自动覆盖 CSS 占位，无截图时显示 CSS 拟真界面，永不裂图。
 */
.shot { position: relative; width: 100%; height: 100%; overflow: hidden; }
.shot-css { position: absolute; inset: 0; }
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.shot-img.ok { opacity: 1; }

/* 安装失败教学链接 */
.help-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-2); font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.help-link:active { color: var(--gold); }

/* 减弱动画（尊重系统无障碍设置） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 客服浮标（5 个版本共用） */
.kefu {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  box-shadow: var(--glow);
  cursor: pointer;
  animation: kefuPulse 2.4s infinite;
}
.kefu svg { width: 28px; height: 28px; }
@keyframes kefuPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.9); }
}