/* ============================================
   热门资源领取中心 - 全局样式
   配色 / 版式照参考图还原
   ============================================ */
:root{
  --bg:#f2f3f5;
  --card:#ffffff;
  --text:#1f2329;
  --text-2:#8a9099;
  --text-3:#b4b9c0;
  --line:#eceef1;
  --green:#39b98c;
  --green-dark:#2fa87c;
  --orange:#ff7a45;
  --orange-soft:#fff2e8;
  --blue:#3b7ddd;
  --blue-soft:#eef3ff;
  --gold:#e8b96a;
  --gold-soft:#fdf6e8;
  --yellow-bar:#fff9e6;
  --yellow-line:#f7e3a8;
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 2px 10px rgba(20,30,60,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html,body{max-width:100vw;overflow-x:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button,input,select,textarea{font-family:inherit;font-size:inherit;outline:none;border:none;background:none;color:inherit;}

.app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  padding-bottom:90px;
  position:relative;
  overflow-x:hidden;
}

/* ============ 顶部黄色免责条 ============ */
.disclaimer-bar{
  background:var(--yellow-bar);
  border-bottom:1px solid var(--yellow-line);
  color:#8a6d1f;
  font-size:12px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
  word-break:break-all;
}
.disclaimer-bar .ico{flex:none;}

/* ============ 顶部返回 ============ */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
}
.topbar .back{
  display:inline-flex;align-items:center;gap:2px;
  font-weight:500;font-size:14px;color:var(--text-2);
  cursor:pointer;
}
.topbar .back:active{opacity:.6;}
.topbar-center{position:relative;}
.topbar-title{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:15.5px;font-weight:700;
  white-space:nowrap;
  max-width:62%;
  overflow:hidden;text-overflow:ellipsis;
}

/* ============ 首页 ============ */
.home-hero{
  text-align:center;
  padding:26px 18px 8px;
}
.home-sparkle{font-size:22px;margin-bottom:4px;}
.home-title{
  font-size:24px;
  font-weight:800;
  letter-spacing:1px;
  color:#2b2f36;
}
.home-sub{
  margin-top:12px;
  color:var(--text-2);
  font-size:13px;
}
.home-sub::before,.home-sub::after{content:"⚡";margin:0 6px;font-size:12px;}

.home-count{
  display:inline-flex;align-items:center;gap:4px;
  margin:14px auto 0;
  background:var(--orange-soft);
  color:var(--orange);
  font-size:12.5px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
}

/* 通道卡片 */
.channel-wrap{padding:14px 14px 0;}
.channel-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px 18px;
  margin-bottom:14px;
  border:1px solid var(--line);
}
.channel-card h3{
  text-align:center;
  font-size:19px;
  font-weight:700;
  margin-bottom:6px;
}
.channel-card .desc{
  text-align:center;
  color:var(--text-2);
  font-size:12.5px;
  margin-bottom:16px;
}
.channel-card .desc b{color:var(--orange);font-weight:600;}

/* 按钮 */
.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  height:48px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.btn:active{transform:scale(.985);opacity:.9;}
.btn-normal{
  background:var(--blue-soft);
  color:#2f6fd0;
  border:1px solid #d7e3fb;
}
.btn-gold{
  background:var(--gold-soft);
  color:#c79240;
  border:1px solid #f0dfb8;
}
.btn-primary{background:var(--green);color:#fff;}
.btn-orange{background:var(--orange);color:#fff;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-block{width:100%;}
.btn-ghost{background:#f4f5f7;color:var(--text-2);}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* ============ 列表页顶部 Banner ============ */
.list-banner{
  margin:14px 14px 0;
  border-radius:var(--radius-lg);
  padding:14px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:10px;
  align-items:stretch;
  min-height:156px;
  background:linear-gradient(135deg,#0f5c52 0%,#1b7f6b 55%,#2f9c7d 100%);
  position:relative;
  overflow:hidden;
}
.list-banner::after{
  content:"";
  position:absolute;right:-40px;bottom:-60px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.lb-left{
  min-width:0;
  display:flex;flex-direction:column;
  justify-content:center;
  position:relative;z-index:2;
  overflow:hidden;
}
.lb-title{
  font-size:22px;
  font-weight:800;
  color:#fff;
  letter-spacing:1px;
  line-height:1.15;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
  white-space:nowrap;
}
.lb-sub{
  color:rgba(255,255,255,.8);
  font-size:11.5px;
  margin-top:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:12px;
  width:84px;height:31px;
  border:1.5px solid #7fe0c0;
  border-radius:8px;
  color:#9df0d4;
  font-size:12.5px;font-weight:600;
  background:rgba(0,0,0,.12);
  align-self:flex-start;
  flex:none;
}
.lb-btn:active{opacity:.8;}

.lb-hot{
  background:rgba(10,40,36,.72);
  border:1px solid rgba(127,224,192,.25);
  border-radius:12px;
  padding:8px 7px;
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.lb-hot-head{
  color:#ffd66b;
  font-size:12px;font-weight:700;
  margin-bottom:1px;
  display:flex;align-items:center;gap:3px;
  white-space:nowrap;
  overflow:hidden;
}
.lb-hot-item{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.1);
  border-radius:9px;
  padding:5px 5px;
  min-width:0;
  overflow:hidden;
}
.lb-hot-icon{
  width:24px;height:24px;flex:0 0 24px;
  border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.lb-hot-icon img{width:100%;height:100%;object-fit:cover;}
.lb-hot-name{
  flex:1 1 auto;min-width:0;
  color:#fff;font-size:11px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-hot-tag{
  flex:0 0 auto;
  background:#e64545;color:#fff;
  font-size:9px;
  padding:1px 3px;
  border-radius:4px;
  white-space:nowrap;
  transform:scale(.92);
  transform-origin:right center;
}

/* ============ 资源列表 ============ */
.search-box{
  margin:14px 14px 0;
  background:var(--card);
  border:1.5px solid #d9ede6;
  border-radius:12px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.search-box .s-ico{color:var(--text-3);font-size:15px;}
.search-box input{flex:1;font-size:14px;}
.search-box input::placeholder{color:var(--text-3);}

.cat-scroll{
  display:flex;gap:8px;overflow-x:auto;
  padding:12px 14px;
  scrollbar-width:none;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-chip{
  flex:none;
  padding:7px 16px;
  border-radius:999px;
  background:#eceef1;
  color:#6b7280;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
  transition:.15s;
}
.cat-chip.active{background:#2b2f36;color:#fff;font-weight:600;}

.section-title{
  padding:2px 16px 10px;
  display:flex;align-items:baseline;gap:8px;
}
.section-title h2{font-size:17px;font-weight:700;}
.section-title span{font-size:12px;color:var(--text-2);}

/* 资源卡片 */
.res-list{padding:0 14px;}
.res-item{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:12px;
}
.res-icon{
  width:52px;height:52px;flex:none;
  border-radius:12px;
  object-fit:cover;
  background:#e9ebee;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#9aa1aa;
  overflow:hidden;
}
.res-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.res-info{flex:1;min-width:0;}
.res-name{
  font-size:15px;font-weight:600;
  margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.res-meta{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--text-2);
  flex-wrap:wrap;
}
.res-tag{
  background:#eef1f4;color:#6b7280;
  padding:1px 6px;border-radius:4px;font-size:11px;
}
.res-tag.hot{background:#fff0e8;color:var(--orange);}
.res-star{color:#ffb020;font-size:11px;}
.res-rating{color:#e59400;font-weight:600;}
.res-get{
  flex:none;
  background:var(--green);
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  padding:8px 18px;
  border-radius:9px;
  cursor:pointer;
}
.res-get:active{background:var(--green-dark);}

.empty{
  text-align:center;color:var(--text-3);
  padding:60px 0;font-size:13px;
}

/* ============ 任务页 ============ */
.task-wrap{padding:14px;}
.task-head{
  background:linear-gradient(135deg,#fff5f0,#ffece3);
  border:1px solid #ffd9c7;
  border-radius:var(--radius-lg);
  padding:18px 16px;
  text-align:center;
  margin-bottom:14px;
}
.task-head h2{font-size:16px;font-weight:700;color:#c1440e;margin-bottom:8px;}
.task-head p{font-size:13px;color:#a85a3a;line-height:1.7;}

.step-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:12px;
}
.step-card h3{font-size:15px;font-weight:700;margin-bottom:10px;}
.step-game{
  background:#f7f8fa;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  text-align:center;
  font-size:14px;font-weight:600;
  margin-bottom:12px;
}
.copy-row{display:flex;gap:10px;}
.copy-row .btn{height:44px;font-size:13.5px;border-radius:10px;}
/* 「换一条」按钮：弱化，别抢主按钮的风头 */
.copy-row .btn-ghost{flex:0 0 96px;border:1px solid var(--line);font-weight:500;}
#commentText{min-height:44px;}
.shuffle-ani{animation:shuffleFade .28s ease;}
@keyframes shuffleFade{
  0%  { opacity:.25; transform:translateY(3px); }
  100%{ opacity:1;   transform:translateY(0); }
}

.comment-box{
  background:#f7f8fa;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  font-size:13px;
  color:#333;
  line-height:1.7;
  margin-bottom:12px;
  word-break:break-all;
}
.step-tip{
  text-align:center;
  font-size:12.5px;
  color:#c1440e;
  line-height:1.7;
  margin:12px 0;
}
/* 微信内打开时的「在浏览器打开」引导层 */
.wx-guide{
  position:fixed; inset:0; z-index:99999;
}
.wx-guide-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
}
/* 指向右上角「···」的箭头 */
.wx-guide-arrow{
  position:absolute;
  top:14px; right:26px;
  font-size:46px;
  line-height:1;
  color:#ffd666;
  text-shadow:0 0 12px rgba(255,214,102,.85);
  animation:wxBounce 1.1s ease-in-out infinite;
}
@keyframes wxBounce{
  0%,100%{ transform:translate(0,0); }
  50%    { transform:translate(-6px,6px); }
}
.wx-guide-tip{
  position:absolute;
  top:96px; left:50%;
  transform:translateX(-50%);
  width:82%;
  max-width:330px;
  background:#fff;
  border-radius:14px;
  padding:20px 20px 22px;
  text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.wx-guide-t1{
  font-size:17px;
  font-weight:700;
  color:#1a2233;
  text-align:center;
  margin-bottom:14px;
}
.wx-guide-t2{
  font-size:14px;
  color:#4a5568;
  line-height:2.05;
}
.wx-guide-t2 b{
  color:#c1440e;
  font-size:15px;
}
.step-shot{
  background:#f7f8fa;
  border-radius:10px;
  padding:10px;
  margin:10px 0;
}
.shot-label{
  font-size:12.5px;
  color:#c1440e;
  text-align:center;
  margin-bottom:8px;
  font-weight:600;
}
.shot-img{
  width:100%;
  border-radius:8px;
  display:block;
  cursor:zoom-in;
}

/* ============ 上传页 ============ */
.upload-title{text-align:center;padding:20px 0 6px;}
.upload-title h2{font-size:19px;font-weight:700;}
.upload-title p{color:var(--text-2);font-size:12.5px;margin-top:6px;}

.upload-zone{
  margin:14px;
  background:#fff;
  border:2px dashed #f0c4c8;
  border-radius:var(--radius-lg);
  padding:30px 20px;
  text-align:center;
  cursor:pointer;
}
.upload-zone .plus{
  width:52px;height:52px;line-height:48px;
  margin:0 auto 12px;
  border-radius:50%;
  background:#fdeef0;
  color:#d9717c;
  font-size:28px;font-weight:300;
}
.upload-zone .u-main{font-size:14px;color:#666;margin-bottom:6px;}
.upload-zone .u-sub{font-size:12px;color:var(--text-3);}
.upload-input{display:none;}

.thumb-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:0 14px;
}
.thumb{
  position:relative;aspect-ratio:1;
  border-radius:10px;overflow:hidden;background:#f0f1f3;
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb .del{
  position:absolute;top:4px;right:4px;
  width:20px;height:20px;line-height:19px;text-align:center;
  background:rgba(0,0,0,.55);color:#fff;border-radius:50%;
  font-size:13px;cursor:pointer;
}
.count-line{text-align:right;padding:8px 16px 0;font-size:12px;color:var(--text-3);}

.tip-box{
  margin:14px;
  background:#fff5f5;
  border:1px solid #ffd9d9;
  border-radius:12px;
  padding:14px;
  font-size:12.5px;
  color:#c94a4a;
  line-height:2;
}
.tip-box li{list-style:none;}

.footer-note{
  text-align:center;font-size:11.5px;color:var(--text-3);
  padding:14px;line-height:1.7;
}

/* ============ 土豪通道 ============ */
.vip-title{text-align:center;padding:20px 0 4px;}
.vip-title h2{font-size:20px;font-weight:700;}
.vip-card{
  margin:14px;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px 16px;
  text-align:center;
}
.vip-qr-img{
  width:230px;height:230px;margin:0 auto;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:14px;
}
.vip-qr-ph{
  width:230px;height:230px;margin:0 auto;
  border:1px dashed #e0c9a0;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#c9a86a;font-size:13px;background:var(--gold-soft);
}
.gold-bar{
  background:linear-gradient(90deg,#e8c072,#d9a94e);
  color:#fff;font-size:13px;font-weight:600;
  padding:10px;border-radius:10px;margin:14px 0;
}
.pay-success{
  background:#f7fbf9;border:1px solid #d9ede6;
  border-radius:14px;padding:16px;text-align:center;margin:14px 0;
}
.pay-success .ok{color:var(--green);font-size:13px;font-weight:600;}
.pay-amount{font-size:30px;font-weight:700;margin:8px 0;}

/* ============ 结果页 ============ */
.result-page{padding:0 0 10px;}
.result-head{
  display:flex;align-items:center;gap:12px;
  padding:20px 16px 12px;
}
.result-icon{
  width:70px;height:70px;line-height:70px;
  margin:0 auto 18px;border-radius:50%;
  background:#e8f8f1;color:var(--green);font-size:34px;
  text-align:center;
}
.result-icon.sm{
  width:44px;height:44px;line-height:44px;
  font-size:22px;margin:0;flex:none;
}
.result-head-txt{min-width:0;}
.result-head-txt h2{font-size:18px;font-weight:700;margin-bottom:3px;}
.result-head-txt p{
  color:var(--text-2);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.guide-wrap{padding:6px 14px 0;}
.guide-tip{
  text-align:center;
  color:var(--orange);
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
}
.guide-img{
  width:100%;
  border-radius:14px;
  display:block;
  box-shadow:0 4px 16px rgba(20,30,60,.1);
  cursor:zoom-in;
  background:#0d1117;
}
.guide-ph{
  border:2px dashed #dfe3e8;
  border-radius:14px;
  background:#fafbfc;
  padding:44px 20px;
  text-align:center;
}
.guide-ph-ico{font-size:34px;margin-bottom:10px;}
.guide-ph-t{font-size:14px;color:#8a9099;font-weight:600;margin-bottom:6px;}
.guide-ph-s{font-size:12px;color:#b4b9c0;line-height:1.6;}

.result-extra{padding:16px 14px 0;}
.result-extra-t{
  font-size:12.5px;color:var(--text-2);
  margin-bottom:8px;text-align:center;
}

/* 图片放大查看 */
.img-viewer{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;justify-content:center;
  padding:10px;
  cursor:zoom-out;
}
.img-viewer.show{display:flex;}
.img-viewer img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:8px;
}

.result-wrap{text-align:center;padding:40px 20px;}
.result-icon{
  width:70px;height:70px;line-height:70px;
  margin:0 auto 18px;border-radius:50%;
  background:#e8f8f1;color:var(--green);font-size:34px;
}
.result-wrap h2{font-size:20px;font-weight:700;margin-bottom:10px;}
.result-wrap p{color:var(--text-2);font-size:13px;margin-bottom:20px;}
.link-box{
  background:#f7f8fa;border:1px solid var(--line);
  border-radius:12px;padding:14px;word-break:break-all;
  font-size:13px;color:#2f6fd0;text-align:left;margin-bottom:14px;
}

/* ============ 悬浮客服 ============ */
.cs-float{
  position:fixed;
  right:14px;bottom:24px;
  z-index:60;
  display:flex;align-items:center;gap:6px;
  background:#4a6cf7;
  color:#fff;
  padding:11px 16px;
  border-radius:999px;
  font-size:14px;font-weight:600;
  box-shadow:0 6px 18px rgba(74,108,247,.4);
}
.cs-float:active{transform:scale(.96);}
.cs-ico{font-size:15px;}

/* 侧边竖排客服（任务页用） */
.cs-side{
  position:fixed;right:0;top:50%;
  transform:translateY(-50%);
  z-index:60;
  background:#4a6cf7;color:#fff;
  padding:14px 8px;border-radius:10px 0 0 10px;
  writing-mode:vertical-rl;
  font-size:13px;font-weight:600;
  letter-spacing:2px;
  box-shadow:-2px 0 10px rgba(74,108,247,.3);
}

/* ============ 弹窗 ============ */
.popup-mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
}
.popup-mask.show{display:flex;}
.popup-box{
  background:#fff;
  border-radius:20px;
  padding:26px 22px;
  max-width:340px;width:100%;
  text-align:center;
  animation:pop .22s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.popup-title{
  font-size:19px;font-weight:700;color:#5b6473;
  letter-spacing:2px;margin-bottom:14px;
}
.popup-desc{
  font-size:13.5px;color:#4a5058;
  line-height:1.85;text-align:left;
  white-space:pre-wrap;margin-bottom:18px;
}
.popup-qr{
  width:200px;height:200px;margin:0 auto 16px;
  object-fit:contain;border-radius:12px;
}
.popup-qr.ph{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #d9dde3;color:var(--text-3);
  font-size:13px;text-align:center;line-height:1.6;
}
.popup-btn{
  width:100%;height:48px;
  background:#e07b8b;color:#fff;
  border-radius:12px;font-size:16px;font-weight:600;
  cursor:pointer;
}
.popup-btn:active{opacity:.9;}

/* ============ 滚动播报 ============ */
.toast-ticker{
  position:fixed;left:50%;top:auto;bottom:96px;
  transform:translateX(-50%) translateY(12px);
  z-index:90;
  background:rgba(60,72,90,.94);
  color:#fff;font-size:12.5px;
  padding:9px 18px;border-radius:999px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:.35s;
  max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.toast-ticker.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 加载中 */
.loading{text-align:center;padding:50px 0;color:var(--text-3);font-size:13px;}

/* 通用间距 */
.mt14{margin-top:14px;}
.px14{padding-left:14px;padding-right:14px;}