/* ===== 设计变量 ===== */
:root{
  --bg1:#171232; --bg2:#2b1055; --bg3:#41197a;
  --gold1:#ffe27a; --gold2:#ffb347; --gold-ink:#2b1055;
  --purple1:#7b5cff; --purple2:#b14bff;
  --card:rgba(255,255,255,.07);
  --card-br:rgba(255,255,255,.14);
  --text:#fff; --muted:rgba(255,255,255,.62); --accent:#ffd970;
  --radius:18px; --gap:22px;
  --safe-b:env(safe-area-inset-bottom); --safe-t:env(safe-area-inset-top);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; color:var(--text);
  background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 52%,var(--bg3) 100%);
  background-attachment:fixed;
}
img{ -webkit-user-drag:none; user-select:none; }

/* ===== 布局 ===== */
.wrap{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  width:100%; max-width:480px; margin:0 auto;
  padding:26px 22px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:var(--gap);
}
.page3 .wrap, .page4 .wrap{ padding-bottom:124px; } /* 给底部固定 CTA 留位 */

/* ===== 顶栏（各子页统一） ===== */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-t)) 16px 10px;
  background:rgba(15,12,41,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .back{
  font-size:15px; color:var(--muted); text-decoration:none; font-weight:600;
  padding:6px 10px 6px 4px;
}
.topbar .back:active{ color:#fff; }
.topbar .brand{ font-size:12px; letter-spacing:2px; color:var(--muted); }

/* ===== 首屏 ===== */
.page1 .subtitle{ font-size:14px; letter-spacing:5px; color:var(--muted); margin-bottom:16px; }
.page1 h1{ font-size:40px; line-height:1.32; font-weight:800; letter-spacing:1px; text-shadow:0 2px 22px rgba(0,0,0,.3); }
.page1 .sub{ margin-top:14px; font-size:15px; color:var(--muted); line-height:1.6; }
.page1 .hint{ font-size:13px; color:rgba(255,255,255,.5); margin-top:2px; }
.page1 .brand-mark{ margin-top:10px; font-size:12px; letter-spacing:3px; color:rgba(255,255,255,.4); }

/* ===== 选择页 ===== */
.page2 h2{ font-size:25px; font-weight:800; margin-bottom:4px; }
.page2 .lead{ font-size:14px; color:var(--muted); margin-bottom:6px; }

/* ===== 大按钮（含副标题） ===== */
.big-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:100%; min-height:64px; border:none; border-radius:var(--radius);
  font-family:inherit; font-size:21px; font-weight:800; letter-spacing:1px; text-decoration:none;
  cursor:pointer; color:var(--gold-ink);
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  box-shadow:0 10px 26px rgba(255,179,71,.32);
  transition:transform .12s ease, box-shadow .12s ease;
}
.big-btn:active{ transform:scale(.97); box-shadow:0 6px 16px rgba(255,179,71,.3); }
.big-btn .sub{ font-size:13px; font-weight:600; color:rgba(43,16,85,.72); letter-spacing:0; margin-top:3px; }
.big-btn.alt{ color:#fff; background:linear-gradient(135deg,var(--purple1),var(--purple2)); box-shadow:0 10px 26px rgba(140,80,255,.32); }
.big-btn.alt:active{ box-shadow:0 6px 16px rgba(140,80,255,.3); }
.big-btn.alt .sub{ color:rgba(255,255,255,.82); }

.opts{ width:100%; display:flex; flex-direction:column; gap:14px; }

/* 首屏赚钱按钮：呼吸动画更吸睛 */
.page1 .big-btn{ width:82%; min-height:74px; font-size:26px; animation:breathe 1.9s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ transform:scale(1);    box-shadow:0 10px 26px rgba(255,179,71,.32); }
  50%    { transform:scale(1.05); box-shadow:0 14px 38px rgba(255,179,71,.55); }
}

/* ===== 文案卡片 ===== */
.intro{
  width:100%; background:var(--card); border:1px solid var(--card-br); border-radius:16px;
  padding:18px 16px; text-align:left; font-size:16px; line-height:1.75; color:rgba(255,255,255,.92);
}
.intro b{ color:var(--accent); font-weight:800; }
.intro-title{ font-size:19px; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:1px; }
.intro p{ margin:7px 0; }

/* ===== 缩略图（两图同尺寸，点开灯箱） ===== */
.thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.thumb{
  width:100%; height:128px; object-fit:cover; border-radius:12px;
  border:1px solid rgba(255,255,255,.16); display:block; cursor:pointer;
  background:rgba(255,255,255,.05); transition:transform .12s ease;
}
.thumb:active{ transform:scale(.98); }

/* ===== 底部进群 CTA（两深入页统一） ===== */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 18px calc(12px + var(--safe-b));
  background:linear-gradient(180deg,rgba(23,18,50,0),rgba(23,18,50,.92) 46%);
  display:flex; justify-content:center;
}
.cta-inner{ width:100%; max-width:480px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.cta-btn{
  width:100%; height:54px; border:none; border-radius:16px; cursor:pointer;
  font-family:inherit; font-size:18px; font-weight:800; letter-spacing:1px; color:var(--gold-ink);
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  box-shadow:0 8px 22px rgba(255,179,71,.42);
  display:flex; align-items:center; justify-content:center; gap:6px;
  animation:breathe 2.2s ease-in-out infinite;
}
.cta-btn:active{ transform:scale(.98); }
.cta-hint{ font-size:13px; color:var(--muted); text-align:center; line-height:1.5; }

/* ===== 弹框 ===== */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal.open{ display:block; }
.modal-mask{ position:absolute; inset:0; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.modal-box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:87%; max-width:420px; max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#fff; color:var(--gold-ink); border-radius:18px; padding:22px 20px 24px; text-align:left;
  box-shadow:0 20px 50px rgba(0,0,0,.42);
}
.modal-x{
  position:absolute; right:10px; top:6px; width:38px; height:38px; font-size:26px; line-height:1;
  background:none; border:none; color:#b9b9b9; cursor:pointer;
}
.modal-box h3{ font-size:18px; margin:14px 0 6px; color:#7b3fe4; }
.modal-box h3:first-child{ margin-top:0; }
.modal-box ul{ list-style:none; }
.modal-box li{ position:relative; padding:9px 0 9px 18px; border-bottom:1px dashed #ececec; font-size:15px; line-height:1.5; }
.modal-box li:last-child{ border-bottom:none; }
.modal-box li::before{ content:"•"; position:absolute; left:2px; color:var(--gold2); font-weight:800; }
.modal-box li small{ color:#9a9a9a; }

/* 图片弹框（网友的收入 + 通用灯箱） */
.modal-box.image-box{ padding:10px; max-width:96%; background:#171232; max-height:90vh; }
.modal-box.image-box .modal-x{ color:#fff; }
.modal-box.image-box img{ width:100%; height:auto; display:block; border-radius:6px; }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:128px; transform:translateX(-50%) translateY(8px);
  background:rgba(0,0,0,.82); color:#fff; padding:10px 16px; border-radius:999px;
  font-size:14px; z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap; max-width:90vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }