/* 介绍页样式。
   信息卡区域完全复用主站 ../style.css 里的 .card / .card-header / .card-title /
   .card-meta / .download-btn / .card-desc / .tags / .join-count，与主页 100% 一致，
   本文件只负责页面骨架（返回链接、介绍图、底部下载条）和 PC 适配。 */

.app-page {
  width: 100%; max-width: var(--page-w);
  margin: 0 auto;                 /* 主站 body 是普通块级流，页面需自己居中 */
  background: #fff; min-height: 100vh;
  /* 顶部 padding 预留固定顶栏（约60px）+ 原有间距，防止内容被顶栏盖住 */
  padding: 68px 14px calc(86px + env(safe-area-inset-bottom, 0px));
}
/* 返回列表：胶囊按钮样式，带箭头图标和点击反馈 */
.app-back {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 16px;
  padding: 8px 16px 8px 12px;
  background: #fff;
  border: 1px solid #26282c;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.app-back .back-icon { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.app-back:hover { border-color: #000; box-shadow: 0 4px 14px rgba(0,0,0,.16); color: #222; }
.app-back:active { transform: scale(.96); }

/* 顶栏：左边返回按钮，右边紧贴引流域名（复用主页 .title-domain 样式）
   固定吸顶：与底部下载条 .app-dl-bar 完全同款的 fixed 写法（该写法在真实浏览器
   和 IDE 手机预览中均已验证有效），常驻视口顶部不随滚动消失 */
.app-topbar {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px;
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--page-w);
  z-index: 60;
  background: #fff;
  padding: 12px 14px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.app-topbar .app-back { margin-bottom: 0; flex-shrink: 0; }
.app-topbar .title-domain { margin-top: 0; font-size: 15px; }

/* ===== 介绍图 ===== */
/* 小标题（应用截图 / 应用介绍）：收紧上下留白，让手机小屏能多露出正文
   （原来 18/10，实测卡片与圆点之间各空 18px，过于松散） */
.app-sec { font-size: 15px; font-weight: 800; color: #222; margin: 8px 0 6px; }
/* 详情页只有一张卡片（后面紧跟 .app-sec），去掉它的下外边距，
   否则 14px 下边距会与标题的上外边距折叠，标题上方始终留 14px 空白 */
.app-page .card { margin-bottom: 0; }

/* 截图区 tab 行：应用截图 / 用户提现图 同排显示（仿应用市场「详情 / 评价」）
   选中项红字 + 下方短横条，整行一条分隔线 */
.sec-tabs { display: flex; margin: 6px 0 0; border-bottom: 1px solid #f1f1f1; }
.sec-tab {
  flex: 1;                          /* 两个 tab 均分整行 */
  position: relative;
  padding: 9px 0 11px;
  border: 0; background: none;
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  color: #484848;                   /* 未选中：深灰（取自参考图） */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sec-tab.on { color: #f86028; }     /* 选中：橙红（取自参考图） */
.sec-tab.on::after {                /* 选中：下方实色短横条，正好压在分隔线上 */
  content: '';
  position: absolute; left: 50%; bottom: -1px;
  width: 30px; height: 3px; border-radius: 2px;
  transform: translateX(-50%);
  background: #f86028;
}
.gal-pane { padding-top: 6px; }
/* 两组截图区（应用截图 / 用户提现图）：同一时间只显示一组，另一组隐藏 */
.gal-pane[hidden] { display: none; }
/* 「用户提现图」还没放图时的占位；面板里加进图片后由脚本自动隐藏 */
.gal-empty {
  margin: 10px 0 4px;
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: #a0a6b3;
  background: #fafbfc;
  border: 1px dashed #e3e6ec;
  border-radius: 12px;
}
/* 只给屏幕阅读器/搜索引擎看，视觉上不占位（保留本节的小标题语义） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 横向滑动介绍图（应用市场截图页风格：左右滑动 + 吸附 + 分页圆点） */
.app-gallery.swipe {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox 隐藏滚动条 */
  margin: 0 -14px;                /* 解除左右内边距，滑动区贴到屏幕边 */
  padding: 4px 14px;
  cursor: grab;                   /* PC 上提示可拖动 */
}
/* 拖动中：关闭吸附（否则会被强行拽回），光标变抓手 */
.app-gallery.swipe.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.app-gallery.swipe::-webkit-scrollbar { display: none; }
/* 水印已烧进图片本身，这里只负责布局 */
.app-gallery.swipe img {
  flex: 0 0 auto;
  width: 38%;                     /* 一屏约露出 2.5 张 */
  height: auto;                   /* 关键：覆盖 <img> 的 height 属性，按原比例缩放，避免纵向拉伸 */
  scroll-snap-align: center;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
  -webkit-user-drag: none;        /* PC 拖动时不拖图片本身 */
  user-select: none;
}
@media (hover: hover) {
  .app-gallery.swipe img { transition: transform .18s; }
  .app-gallery.swipe img:hover { transform: translateY(-3px); }
}
/* 分页指示点 */
/* 分页指示点：与截图区、下方小标题的间距一并收紧 */
.gallery-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.gallery-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d9dce1;
  transition: width .2s, background .2s;
}
.gallery-dots i.on { width: 18px; border-radius: 3px; background: #ff6a3d; }

/* ===== 图片灯箱（点击截图放大、左右滑动切换） ===== */
.lb {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;                /* 交给脚本处理滑动 */
}
.lb.on { display: flex; }
/* 舞台：把「左箭头 + 图片 + 右箭头」包在一起。
   手机端箭头绝对定位叠在图上；PC 端箭头改为紧贴图片两侧（见下方媒体查询）。 */
.lb-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}
.lb-img {
  max-width: 94vw; max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-drag: none;
  cursor: zoom-out;
}
/* 切换动效：按方向滑入 */
@keyframes lb-in-next { from { opacity: .2; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes lb-in-prev { from { opacity: .2; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.lb-img.lb-in-next { animation: lb-in-next .26s ease; }
.lb-img.lb-in-prev { animation: lb-in-prev .26s ease; }
@media (prefers-reduced-motion: reduce) {
  .lb-img.lb-in-next, .lb-img.lb-in-prev { animation: none; }
}
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);   /* 手机：贴近屏幕两侧（相对视口固定） */
  z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #222;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.lb-nav:hover { background: #f0f0f0; }
.lb-nav:active { background: #e4e4e4; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
/* PC：窗口够宽 + 鼠标设备 → 箭头放到图片左右「外侧」、放大（窄窗口/手机不会命中） */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) {
  .lb-stage { gap: 22px; }
  .lb-nav { position: static; transform: none; width: 78px; height: 78px; }
  .lb-nav svg { width: 40px; height: 40px; }
  .lb-img { max-width: calc(100vw - 224px); }
}
.lb-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #222;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
}
.lb-close:hover { background: #f0f0f0; }
.lb-count {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  color: #222; font-size: 16px; font-weight: 700; letter-spacing: 1px;
  background: #fff;
  padding: 7px 20px; border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
  font-variant-numeric: tabular-nums;
}
body.lb-lock { overflow: hidden; }

/* ===== 应用介绍（文字内容区） ===== */
.app-intro {
  background: #fff;
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}
.app-intro p { margin: 0 0 10px; }
.app-intro p:last-child { margin-bottom: 0; }
.app-intro h3 {
  font-size: 14px; font-weight: 700; color: #222;
  margin: 14px 0 6px;
}
.app-intro h3:first-child { margin-top: 0; }
.app-intro ul { margin: 0; padding-left: 20px; }
.app-intro li { margin-bottom: 5px; }
.app-intro li:last-child { margin-bottom: 0; }
.app-intro .intro-slogan {
  display: inline-block; margin-bottom: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #fff4e8, #ffe2c6);
  color: #8a4b12; font-size: 13px; font-weight: 700;
}

@media (min-width: 900px) {
  .app-intro { padding: 20px 18px; font-size: 15px; }
}

/* ===== 底部固定下载条 ===== */
.app-dl-bar {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--page-w);
  background: #fff;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  z-index: 10;
}
.app-dl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border-radius: 22px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
}
.app-dl:active { transform: translateY(1px); }
.app-dl .btn-icon { flex-shrink: 0; display: block; }

/* ===== PC 适配（宽屏 >=900px，与主页 .container 观感一致） ===== */
@media (min-width: 900px) {
  :root { --page-w: 760px; }

  .app-page {
    padding: 76px 22px calc(96px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,.08);
  }

  .app-topbar { padding: 14px 22px 12px; }

  .app-back { font-size: 15px; }
  .app-sec { font-size: 17px; margin: 24px 0 12px; }
  .sec-tab { font-size: 16px; padding: 11px 0 13px; }

  /* 横向滑动介绍图：PC 上一屏约露出 3 张，并限制单张最大宽度 */
  .app-gallery.swipe { margin: 0 -22px; padding: 4px 22px; }
  .app-gallery.swipe img { width: 30%; max-width: 260px; height: auto; }

  /* 底部固定下载条跟着容器一起居中加宽 */
  .app-dl-bar { padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .app-dl { height: 50px; font-size: 16px; border-radius: 25px; }
  .app-dl:hover { box-shadow: 0 8px 22px rgba(231,76,60,.4); }
}