/* qiezi-go landing page styles
 *
 * 两套布局：PC（≥961px）+ H5（<961px），由 landing.js 在 detectDevice 后给
 * <main.landing> 加 data-layout="pc"/"h5"。热区位置按对应 Figma 节点的
 * absoluteBoundingBox 换算为百分比。
 *
 *  - PC：1920×1080（2026-08-01 UI 稿）
 *  - H5：750×1624（2026-08-03 UI 稿）
 * url 加 ?debug=1 可显示热区红框。
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #000; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
img { user-select: none; }

/* 微信 / QQ 等内置浏览器无法稳定下载 APK，覆盖层引导用户改用系统浏览器。 */
.inapp-guide {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 86px 20px 20px;
  color: #fff; background: rgba(3, 4, 16, .92);
}
.inapp-guide[hidden] { display: none; }
.inapp-guide-arrow {
  position: absolute; top: 10px; right: 20px;
  color: #fff; font-size: 62px; line-height: 1;
  transform: rotate(-10deg);
}
.inapp-guide-card {
  width: min(420px, 100%); padding: 24px 22px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 18px;
  text-align: center; background: rgba(23, 16, 57, .96);
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
}
.inapp-guide-card strong { display: block; font-size: 22px; }
.inapp-guide-card p { margin: 12px 0 20px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.7; }
.inapp-guide-card button {
  min-width: 136px; padding: 10px 20px; border: 0; border-radius: 999px;
  color: #25144d; background: linear-gradient(90deg, #7ef7ff, #f9ff8c);
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.landing-toast {
  position: fixed; left: 50%; bottom: 12%; z-index: 1100;
  transform: translateX(-50%); max-width: calc(100vw - 40px);
  padding: 10px 16px; border-radius: 999px;
  color: #fff; background: rgba(0,0,0,.82); font-size: 14px;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.landing-toast[hidden] { display: none; }

.landing { position: fixed; inset: 0; }
.landing[data-layout="pending"] { visibility: hidden; }

.pc-shell, .h5-shell { display: none; position: absolute; inset: 0; overflow: hidden; }
.landing[data-layout="pc"] .pc-shell { display: block; }
.landing[data-layout="h5"] .h5-shell { display: block; }

.pc-bg, .h5-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ========== 热区基础样式 ========== */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 5;
}
.landing.debug-hotspots .hotspot { outline: 2px solid rgba(255,64,64,.6); background: rgba(255,64,64,.08); }

/* ========== PC 热区（1920×1080） ========== */
.landing[data-layout="pc"] .pc-shell {
  inset: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
}
.landing[data-layout="pc"] .pc-bg { object-fit: fill; }

.pc-business {
  top: 5.3704%; left: 74.0625%; width: 10.6771%; height: 5.5556%;
}
.pc-support {
  top: 5.3704%; left: 85.9896%; width: 10.6771%; height: 5.5556%;
}

/* 二维码占位（qrcode.min.js 渲染当前 URL 二维码） */
.pc-qr {
  position: absolute;
  top: 53.7037%; left: 11.7708%;
  width: 7.5521%; aspect-ratio: 145/146;
  background: #fff;
  padding: 2px;
  z-index: 4;
}
.pc-qr canvas, .pc-qr img { width: 100% !important; height: 100% !important; display: block; }

.pc-btn-android-one { top: 46.4815%; left: 25.2604%; width: 13.5938%; height: 11.6667%; border-radius: 999px; }
.pc-btn-android-two { top: 43.7037%; left: 38.8542%; width: 13.5938%; height: 11.6667%; border-radius: 999px; }
.pc-btn-ios         { top: 54.4444%; left: 26.6146%; width: 27.0833%; height: 15%; border-radius: 999px; }

/* ========== H5 热区（750×1624） ========== */
.h5-business {
  top: 3.9409%; left: 47.92%; width: 21.8667%; height: 2.9557%;
}
.h5-support {
  top: 3.9409%; left: 72.3467%; width: 21.8667%; height: 2.9557%;
}
.h5-download-btn {
  top: 80.2340%;
  height: 5.1108%;
  border-radius: min(5.5467vw, 41.6px);
}
.h5-download-btn:active { filter: brightness(.94); }
.h5-btn-android { left: 7.3333%; width: 39.8667%; }
.h5-btn-ios { left: 50.4%; width: 40%; }
.h5-bottom-text { top: 72.7833%; left: 9.0667%; width: 81.8667%; height: 5.1108%; }

/* H5 按设备宽度等比缩放，热区百分比相对图片框保持与 Figma 对齐。 */
.landing[data-layout="h5"] { position: relative; inset: auto; }
.landing[data-layout="h5"] .h5-shell {
  position: relative; inset: auto;
  width: 100%; max-width: 750px; margin: 0 auto;
  overflow: visible;
}
.landing[data-layout="h5"] .h5-bg {
  position: static;
  display: block;
  width: 100%; height: auto;
}
body.landing-h5 { overflow: auto; }

/* 375×667、360×640 等竖屏短设备：仅轻微收窄主视觉，保证下载按钮完整进入首屏。
 * 53.8vh 由按钮底边 1385/750 反推，并预留约 4px 安全距离。 */
@media (max-width: 960px) and (max-height: 720px) and (orientation: portrait) {
  .landing[data-layout="h5"] .h5-shell {
    width: min(100%, 53.8vh);
    width: min(100%, 53.8dvh);
  }
}

/* ========== B 版（视频网格长落地页，Figma node 648:66 → 750×2212 裁后） ========== */
/* B 版是单页长滚动，覆盖默认 body 锁滚 + .landing 固定布局 */
body.b-version { overflow: auto; background: #000; }
.landing.landing-b {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #000;
}
/* B 版移动长页容器：定位上下文 = 图片框，热区 % 相对它对齐。
 * PC 端（landing.js 切 data-layout="pc" 并去掉 .landing-b）隐藏本段、改显 pcShell。*/
.b-shell { position: relative; display: block; }
.landing[data-layout="pc"] .b-shell { display: none; }

.b-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.b-hot {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 5;
}
/* B 版热区（基于 bg-b.jpg 750×2212；精确测自 648:102/648:108/648:101 bbox） */
.b-btn-android { left:  4.00%; top: 91.14%; width: 44.80%; height: 3.71%; border-radius: 999px; }
.b-btn-ios     { left: 51.73%; top: 91.14%; width: 44.80%; height: 3.71%; border-radius: 999px; }
.b-bottom-text { left: 24.53%; top: 96.02%; width: 51.20%; height: 2.89%; }
/* B 版顶部右侧 3 个外链按钮（图标+文案为整块热区；目标与 PC pc-mail/telegram/sw 一致）
 * 商务合作(♥)→官网 t1t1.com、官方社群(✈)→Telegram、官方邮箱(✉)→mailto。
 * 坐标量自 bg-b.jpg 顶部 header（750×2212）。 */
.b-biz   { left: 57.60%; top: 1.18%; width: 14.67%; height: 4.43%; }
.b-group { left: 72.00%; top: 1.18%; width: 13.33%; height: 4.43%; }
.b-mail  { left: 84.93%; top: 1.18%; width: 14.67%; height: 4.43%; }
.landing.landing-b.debug-hotspots .b-hot { outline: 2px solid rgba(255,64,64,.6); background: rgba(255,64,64,.08); }

/* ========== 安卓「安装包报毒解决方案」弹层 ========== */
.android-modal {
  position: fixed; inset: 0;
  background: #f5f5f5;
  color: #222;
  z-index: 100;
  overflow-y: auto;
}
.android-modal[hidden] { display: none; }
.android-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky; top: 0; z-index: 2;
}
.android-modal-back {
  width: 32px; height: 32px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.android-modal-back img { width: 100%; height: 100%; object-fit: contain; }
.android-modal-title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
.android-modal-spacer { width: 32px; }

.android-modal-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.android-modal-cell {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.android-modal-cell img { width: 100%; display: block; }

.android-modal-detail { padding: 12px; }
.android-modal-detail[hidden] { display: none; }
.android-modal-pic { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.android-modal-pic img { width: 100%; display: block; }

/* ========== 浮动广告位（右下） ========== */
.ad-float {
  position: fixed;
  right: 12px;
  bottom: 16px;
  width: min(80px, 22vw);
  aspect-ratio: 1/1;
  z-index: 50;
}
.ad-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.ad-slide.active { opacity: 1; }
.ad-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
}
.ad-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  z-index: 1;
}

@media (min-width: 961px) {
  .ad-float { width: 96px; right: 24px; bottom: 24px; }
}

/* ========== 内容详情分享 H5（/share, /share/my） ========== */
.share-page {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f2f5f7;
  background: linear-gradient(180deg, #2e0034 0%, #040019 88%);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.share-page button,
.share-page a {
  -webkit-tap-highlight-color: transparent;
}
.share-topbar {
  position: relative;
  z-index: 4;
  height: 84px;
  padding: 42px 14px 0;
  display: flex;
  align-items: center;
}
.share-topbar--solid {
  background: #040019;
}
.share-topbar h1 {
  position: absolute;
  left: min(50vw, 187.5px);
  top: 55px;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.share-icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.share-back-icon {
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.share-top-link {
  position: absolute;
  right: 16px;
  top: 55px;
  padding: 8px 2px;
  color: #ffdafb;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.share-hero {
  position: relative;
  padding: 14px 0 0;
}
.share-hero-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 0, 221, .25) 0 90px, transparent 185px),
    linear-gradient(180deg, rgba(78, 13, 52, .96), rgba(9, 0, 30, 0) 48%);
}
.share-hero-bg::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 16px;
  height: 210px;
  background:
    radial-gradient(ellipse at 14% 48%, rgba(0, 0, 0, .92) 0 36px, transparent 38px),
    radial-gradient(ellipse at 35% 42%, rgba(0, 0, 0, .90) 0 42px, transparent 44px),
    radial-gradient(ellipse at 57% 45%, rgba(0, 0, 0, .88) 0 40px, transparent 42px),
    radial-gradient(ellipse at 79% 48%, rgba(0, 0, 0, .88) 0 34px, transparent 36px);
  filter: blur(.2px);
  opacity: .95;
}
.share-hero-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 216px;
  height: 500px;
  background: linear-gradient(180deg, rgba(8, 1, 28, 0) 0%, #08011c 12%, #040019 100%);
}
.share-card {
  position: relative;
  z-index: 2;
  width: min(317px, calc(100vw - 58px));
  margin: 0 auto;
  padding: 16px 22px 20px;
  border-radius: 23px;
  border: 1px solid rgba(255, 218, 251, .25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), 0 24px 70px rgba(0, 0, 0, .45);
  background:
    linear-gradient(135deg, rgba(111, 21, 136, .78), rgba(22, 10, 78, .94)),
    radial-gradient(circle at 76% 10%, rgba(255, 255, 255, .12), transparent 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.share-bot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ad7dff, #3718a6);
  box-shadow: 0 8px 22px rgba(72, 49, 211, .5);
}
.share-bot img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.share-card h1 {
  margin: 12px 0 9px;
  color: #fff;
  font-size: 24px;
  line-height: 1.12;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(85, 52, 153, .5);
}
.share-qr {
  width: min(40vw, 150px);
  min-width: 132px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: #fff;
}
.share-qr canvas,
.share-qr img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.share-code-row {
  margin: 10px 0 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}
.share-code-row strong {
  color: #ff37d7;
  font-size: 16px;
  letter-spacing: .8px;
}
.share-url {
  margin: 5px 0 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}
.share-actions {
  position: relative;
  z-index: 3;
  width: min(317px, calc(100vw - 58px));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-gradient-btn {
  height: 38px;
  border: 0;
  border-radius: 8px;
  color: #ffdafb;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(180deg, #32ade6 0%, #cc00ff 55%, #ff00dd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
}
.share-reward {
  position: relative;
  z-index: 2;
  width: min(345px, calc(100vw - 30px));
  margin: 12px auto max(18px, env(safe-area-inset-bottom));
  min-height: 84px;
  padding: 14px 16px;
  border-radius: 19px;
  text-align: center;
  background: linear-gradient(180deg, rgba(50, 0, 89, .6), rgba(4, 0, 25, .6));
  backdrop-filter: blur(3px);
}
.share-reward h2 {
  margin: 0;
  color: #32ade6;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
.share-reward p {
  margin: 18px 0 0;
  color: rgba(255, 218, 251, .6);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.share-my-page {
  background: linear-gradient(180deg, #31163d 0%, #0b0b13 30%, #05060b 100%);
}
.share-log-list {
  position: absolute;
  left: 17px;
  right: auto;
  top: 100px;
  width: min(340px, calc(100vw - 35px));
}
.share-count-row {
  height: 22px;
  display: flex;
  align-items: center;
  color: #f2f5f7;
  font-size: 16px;
  font-weight: 500;
}
.share-count-row strong {
  color: #ff9500;
  font-size: 16px;
  font-weight: 500;
}
.share-divider,
.share-log-row {
  border-bottom: 1px solid #1d2730;
}
.share-divider {
  height: 17px;
}
.share-log-row {
  min-height: 55px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.share-log-row strong {
  min-width: 0;
  overflow: hidden;
  color: #f2f5f7;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.share-log-row time {
  color: #9aa7ad;
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
}
.share-empty {
  margin: 80px 0 0;
  color: #9aa7ad;
  text-align: center;
  font-size: 14px;
}
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 54px;
  transform: translate(-50%, 12px);
  z-index: 10;
  max-width: 78%;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.share-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 360px) {
  .share-card,
  .share-actions { width: calc(100vw - 48px); }
  .share-reward p { font-size: 11px; }
  .share-log-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-height: 720px) {
  .share-topbar {
    height: 72px;
    padding-top: 34px;
  }
  .share-top-link { top: 47px; }
  .share-hero { padding-top: 8px; }
  .share-card { padding: 12px 20px 14px; }
  .share-bot { width: 44px; height: 44px; }
  .share-bot img { width: 30px; height: 30px; }
  .share-card h1 {
    margin: 8px 0 7px;
    font-size: 23px;
    line-height: 1.06;
  }
  .share-qr {
    width: min(36vw, 136px);
    min-width: 124px;
    padding: 5px;
  }
  .share-code-row { margin-top: 8px; }
  .share-url { margin-top: 4px; }
  .share-actions { margin-top: 10px; }
  .share-gradient-btn { height: 36px; }
  .share-reward {
    min-height: 78px;
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .share-reward p { margin-top: 14px; }
}