/* =========================================================
   热门游戏资源站 · UI 复刻
   ========================================================= */
:root{
  --orange:#ff6b35;
  --orange-2:#ff9a56;
  --orange-soft:#ffd9c4;
  --green:#22b86b;
  --green-2:#22e07a;
  --ink:#1a1a2e;
  --ink-2:#5a5f6e;
  --muted:#8a8f9e;
  --faint:#a8adbb;
  --line:rgba(0,0,0,.06);
  --card:rgba(255,255,255,.9);
  --radius:18px;
  --shadow-sm:0 2px 18px rgba(0,0,0,.05);
  --shadow-md:0 8px 28px rgba(255,107,53,.12);
  --grad:linear-gradient(135deg,var(--orange),var(--orange-2));
}

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

html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  min-height:100vh;
  color:var(--ink);
  background:linear-gradient(135deg,#f5f7fa,#fff5ef,#f0f4ff,#fff0f5);
  background-size:300% 300%;
  animation:bgShift 16s ease infinite;
  padding-bottom:calc(50px + env(safe-area-inset-bottom));
  position:relative;
  overflow-x:clip;
}

@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* 背景漂浮光点 */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle 3px at 20% 30%,rgba(255,107,53,.4) 0%,transparent 100%),
    radial-gradient(circle 4px at 80% 60%,rgba(255,180,0,.4) 0%,transparent 100%),
    radial-gradient(circle 2px at 50% 80%,rgba(34,184,107,.4) 0%,transparent 100%);
  background-size:500px 500px,600px 600px,400px 400px;
  animation:floatParticles 8s ease-in-out infinite;
}
@keyframes floatParticles{
  0%,100%{transform:translate(0,0);opacity:.8}
  25%{transform:translate(-20px,15px);opacity:1}
  50%{transform:translate(10px,-10px);opacity:.6}
  75%{transform:translate(-5px,-20px);opacity:.9}
}

body.lock{overflow:hidden}

.page{
  position:relative;
  width:100%;
  max-width:720px;
  margin:0 auto;
}

/* ================= 页面标题 ================= */
.page-title{
  position:relative;z-index:2;
  padding:16px 16px 8px;
  text-align:center;
}
.page-title h1{
  font-size:20px;
  font-weight:800;
  letter-spacing:.5px;
  color:#12121f;
}
.page-title h1 span{
  font-size:15px;
  font-weight:500;
  color:#4b4f5e;
  letter-spacing:0;
}

/* ================= 英雄横幅 ================= */
.hero{
  position:relative;
  z-index:2;
  margin:6px 12px 0;
  border-radius:26px;
  overflow:hidden;
  display:flex;
  gap:14px;
  padding:24px 18px;
  isolation:isolate;
  background:
    radial-gradient(520px 300px at 82% 8%,rgba(30,150,120,.55) 0%,transparent 65%),
    radial-gradient(420px 280px at 8% 96%,rgba(10,80,66,.6) 0%,transparent 70%),
    linear-gradient(140deg,#0b3831 0%,#114a3d 42%,#082a25 100%);
  box-shadow:0 18px 48px rgba(8,42,37,.38),inset 0 0 0 1px rgba(255,255,255,.06);
}

/* 顶部红色环境光 */
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(360px 180px at 58% 62%,rgba(226,58,44,.28) 0%,transparent 70%),
    radial-gradient(240px 160px at 96% 100%,rgba(255,90,60,.16) 0%,transparent 70%);
}

/* 细网格纹理 */
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 72%);
}

/* 人物剪影 */
.hero-figure{
  position:absolute;
  z-index:1;
  right:32%;
  bottom:-6px;
  width:158px;
  height:auto;
  opacity:.46;
  filter:blur(1.6px) drop-shadow(0 0 26px rgba(255,90,60,.22));
  pointer-events:none;
  mix-blend-mode:screen;
}

.hero-main{
  position:relative;z-index:2;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:6px;
}

.hero-badge{
  display:inline-flex;align-items:center;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  padding:5px 12px;
  border-radius:9px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  letter-spacing:.5px;
}

.hero-title-wrap{
  position:relative;
  margin-top:12px;
  width:100%;
}

.hero-title{
  position:relative;z-index:2;
  font-size:clamp(30px,7.6vw,42px);
  line-height:1.08;
  font-weight:800;
  color:#fff;
  letter-spacing:1px;
  text-shadow:0 6px 26px rgba(0,0,0,.45);
  white-space:nowrap;
}

/* 红色 COME 底字 */
.hero-glitch{
  position:absolute;
  z-index:1;
  left:clamp(96px,25vw,142px);
  top:50%;
  transform:translateY(-46%) skewX(-6deg);
  font-size:clamp(30px,8.4vw,46px);
  font-weight:900;
  letter-spacing:2px;
  font-style:italic;
  color:rgba(226,54,44,.62);
  text-shadow:
    2px 0 0 rgba(255,70,50,.32),
    -2px 0 0 rgba(120,0,0,.3),
    0 0 26px rgba(255,60,40,.45);
  pointer-events:none;
  white-space:nowrap;
  mix-blend-mode:screen;
}

.hero-sub{
  margin-top:9px;
  font-size:clamp(13px,3.4vw,16px);
  color:rgba(255,255,255,.8);
  letter-spacing:.6px;
}

.hero-actions{
  position:relative;
  margin-top:20px;
  width:100%;
  display:flex;
  align-items:center;
}

.hero-cta{
  flex:0 0 auto;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:2px;
  color:#0d5c4c;
  background:#fff;
  padding:11px 26px;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.6) inset;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .24s;
}
.hero-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.hero-cta:active{transform:scale(.96)}

.hero-ghost{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:11px;
  pointer-events:none;
}
.hero-ghost span{
  font-size:13px;
  color:rgba(255,255,255,.42);
  letter-spacing:1px;
  text-align:right;
}

/* ---- 本周热门卡片 ---- */
.hot-panel{
  position:relative;z-index:3;
  flex:0 0 44%;
  max-width:270px;
  min-width:0;
  align-self:center;
  background:linear-gradient(160deg,#0a121d 0%,#0d1826 100%);
  border:1px solid rgba(255,77,61,.28);
  border-radius:20px;
  padding:14px 12px;
  box-shadow:
    0 0 0 1px rgba(255,77,61,.07) inset,
    0 0 34px rgba(255,60,40,.14),
    0 18px 40px rgba(0,0,0,.4);
  animation:hotFloat 6s ease-in-out infinite;
}
@keyframes hotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.hot-head{
  display:flex;align-items:center;gap:7px;
  padding:0 2px 10px;
}
.hot-flame{font-size:19px;filter:drop-shadow(0 0 10px rgba(255,110,50,.8))}
.hot-head h3{
  font-size:17px;
  font-weight:800;
  color:#fff;
  letter-spacing:.6px;
}

.hot-list{list-style:none;display:flex;flex-direction:column;gap:9px}

.hot-item{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(28,40,56,.9),rgba(18,27,40,.9));
  border:1px solid rgba(255,77,61,.16);
  border-radius:13px;
  padding:7px 8px;
  cursor:pointer;
  transition:transform .25s,border-color .25s,background .25s;
}
.hot-item:hover{
  transform:translateX(2px);
  border-color:rgba(255,77,61,.5);
  background:linear-gradient(135deg,rgba(38,52,72,.95),rgba(24,34,50,.95));
}

.hot-thumb{
  flex:0 0 auto;
  width:42px;height:42px;
  display:grid;place-items:center;
  font-size:21px;
  border-radius:10px;
  background:linear-gradient(150deg,#f6f3ec,#e6e1d6);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.hot-name{
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  color:#e9eef7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hot-tag{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:600;
  color:#ff6f5a;
  border:1px solid rgba(255,77,61,.55);
  background:rgba(255,77,61,.08);
  padding:4px 9px;
  border-radius:20px;
  white-space:nowrap;
  letter-spacing:.3px;
}

/* ================= 粘性头部 ================= */
.sticky-header{
  position:sticky;
  top:0;
  z-index:100;
  margin-top:14px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}

.search-wrap{padding:10px 16px 6px}

.search-box{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,107,53,.2);
  border-radius:28px;
  padding:4px 6px 4px 14px;
  box-shadow:0 2px 12px rgba(255,107,53,.08);
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.search-box:focus-within{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.12);
  transform:scale(1.01);
}

.search-icon{display:flex;color:var(--faint);flex:0 0 auto}

.search-box input{
  flex:1 1 auto;
  min-width:0;
  border:none;outline:none;background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  padding:9px 2px;
}
.search-box input::placeholder{color:#b7bbc8}

.clear-btn{
  display:none;
  flex:0 0 auto;
  font-size:15px;
  color:var(--faint);
  padding:0 6px;
  cursor:pointer;
  line-height:1;
}
.clear-btn.on{display:block}

.search-btn{
  flex:0 0 auto;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:var(--grad);
  padding:8px 20px;
  border-radius:24px;
  box-shadow:0 4px 14px rgba(255,107,53,.3);
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.search-btn:hover{transform:scale(1.03);box-shadow:0 6px 18px rgba(255,107,53,.4)}
.search-btn:active{transform:scale(.94)}

.tabs{
  display:flex;
  gap:8px;
  padding:8px 16px 12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}

.tab{
  flex-shrink:0;
  font-size:14px;
  font-weight:500;
  color:#666a78;
  background:rgba(255,255,255,.85);
  border:1px solid transparent;
  padding:7px 20px;
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:all .3s;
}
.tab:hover{background:#fff;border-color:var(--orange-soft);transform:translateY(-2px)}
.tab.active{
  color:#fff;
  font-weight:600;
  background:var(--grad);
  box-shadow:0 6px 18px rgba(255,107,53,.35);
  transform:scale(1.02);
}

/* ================= 应用列表 ================= */
.app-list{
  position:relative;z-index:2;
  padding:12px 16px 20px;
}

.app-card{
  position:relative;
  display:flex;
  background:var(--card);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s,border-color .3s;
  animation:cardIn .5s both;
}

@keyframes cardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.app-card::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,107,53,.4),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
.app-card:hover::after{opacity:1}
.app-card:hover{
  transform:translateX(4px) scale(1.01);
  box-shadow:var(--shadow-md);
  border-color:rgba(255,107,53,.2);
}
.app-card:active{transform:scale(.985)}

.app-icon-wrap{
  position:relative;
  flex:0 0 auto;
  width:60px;height:60px;
  margin-right:14px;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  transition:transform .3s;
}
.app-card:hover .app-icon-wrap{transform:scale(1.05) rotate(-3deg)}

.app-icon-wrap .icon{
  font-size:29px;
  line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

/* 图标底色 */
.i0{background:linear-gradient(140deg,#e8f1ff,#cfe0ff)}
.i1{background:linear-gradient(140deg,#ffe9df,#ffd0bb)}
.i2{background:linear-gradient(140deg,#e4f8ec,#c8f0da)}
.i3{background:linear-gradient(140deg,#f2e8ff,#ddc9ff)}
.i4{background:linear-gradient(140deg,#fff4d9,#ffe4a8)}
.i5{background:linear-gradient(140deg,#e6f7fb,#c6ecf6)}

.app-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.app-name{
  font-size:15.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.app-tags{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
}

.tag-hot{
  font-size:10.5px;
  font-weight:600;
  color:#fff;
  background:var(--grad);
  padding:2px 8px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(255,107,53,.3);
}
.tag-cat{
  font-size:10.5px;
  color:#7a7f8f;
  background:rgba(0,0,0,.04);
  padding:2px 8px;
  border-radius:8px;
}

.app-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.app-meta .rating-num{color:#ff8c00;font-weight:600}

.app-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

.app-desc{
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.get-btn{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:var(--grad);
  padding:7px 24px;
  border-radius:22px;
  box-shadow:0 4px 14px rgba(255,107,53,.35);
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.get-btn::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:btnShine 3s infinite;
}
@keyframes btnShine{
  0%{left:-60%}
  55%,100%{left:130%}
}
.get-btn:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(255,107,53,.45)}
.get-btn:active{transform:scale(.94)}

/* 空状态 */
.empty{
  text-align:center;
  padding:56px 20px;
  color:var(--faint);
}
.empty .e-icon{font-size:40px;display:block;margin-bottom:12px;opacity:.55}
.empty p{font-size:14px}
.empty small{display:block;margin-top:6px;font-size:12.5px;color:#c2c6d1}

/* ================= 页脚 ================= */
.footer{
  position:relative;
  z-index:2;
  padding:14px 16px 30px;
  text-align:center;
  font-size:12px;
  color:#b5b9c6;
}
.footer::before{
  content:'';
  display:block;
  max-width:100px;
  height:4px;
  margin:0 auto 10px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--orange),#ffd700,var(--orange));
}
.footer small{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#c8ccd6;
  letter-spacing:.3px;
}

/* ================= 通用弹窗 ================= */
.modal{
  position:fixed;inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,20,35,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
.modal.show{opacity:1;visibility:visible}

/* ---- 获取方式 ---- */
.get-card{
  width:100%;
  max-width:340px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  padding:26px 20px 16px;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.94);
  transition:transform .36s cubic-bezier(.34,1.56,.64,1);
  max-height:90vh;
  overflow-y:auto;
}
.modal.show .get-card{transform:translateY(0) scale(1)}

.get-icon-wrap{
  width:76px;height:76px;
  margin:0 auto 14px;
  border-radius:20px;
  display:grid;place-items:center;
  font-size:36px;
  background:linear-gradient(140deg,#ffe9df,#ffd0bb);
  box-shadow:0 10px 24px rgba(255,107,53,.2);
}
.get-icon-wrap .icon{font-size:36px;line-height:1}

.get-name{
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.get-meta{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:8px;
  font-size:12.5px;
  color:var(--muted);
}
.get-meta b{font-weight:600}
.get-meta .rating-num{color:#ff8c00}
.get-meta .size-num{color:#5a5f6e}

.get-tags{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

.get-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}

.action-btn{
  position:relative;
  overflow:hidden;
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:13px 16px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  transition:transform .2s,box-shadow .2s;
}
.action-btn:active{transform:scale(.97)}

.action-free{
  color:#fff;
  background:var(--grad);
  box-shadow:0 10px 24px rgba(255,107,53,.35);
}
.action-free::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  animation:btnShine 3.4s infinite;
}
.action-vip{
  color:#8a5a12;
  background:linear-gradient(135deg,#fff4d6,#ffe3a8);
  border:1px solid rgba(214,158,46,.35);
  box-shadow:0 8px 20px rgba(214,158,46,.18);
}
.action-title{font-size:15px;font-weight:700}
.action-sub{font-size:11.5px;opacity:.86}

.get-cancel{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:none;
  border-radius:14px;
  background:transparent;
  color:var(--faint);
  font-size:13.5px;
  font-family:inherit;
  cursor:pointer;
}
.get-cancel:hover{color:#7d8291}

/* ---- 公告 ---- */
.announce-modal{
  position:fixed;inset:0;
  z-index:900;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(20,20,35,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .35s,visibility .35s;
}
.announce-modal.show{opacity:1;visibility:visible}

.announce-card{
  position:relative;
  width:100%;
  max-width:360px;
  max-height:90vh;
  overflow-y:auto;
  scrollbar-width:none;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  padding:24px 20px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(30px) scale(.9);
  transition:transform .36s cubic-bezier(.34,1.56,.64,1);
}
.announce-card::-webkit-scrollbar{display:none}
.announce-modal.show .announce-card{transform:translateY(0) scale(1)}

.announce-close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;
  border:none;border-radius:50%;
  background:#f2f4f8;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:background .2s;
}
.announce-close:hover{background:#e6e9f0}

.announce-title{
  text-align:center;
  font-size:22px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:8px;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.announce-subtitle{
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:#e06b2b;
  background:rgba(255,245,239,.9);
  border:1px solid var(--orange-soft);
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:16px;
}

.announce-body{
  background:rgba(248,249,252,.9);
  border-left:4px solid var(--orange);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
}
.announce-body h4{font-size:16px;font-weight:700;margin-bottom:8px}
.announce-body p{font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:6px}
.announce-body p:last-child{margin-bottom:0}
.announce-body em{font-style:normal;font-weight:600;color:var(--orange)}

.announce-btn{
  width:100%;
  padding:14px;
  border:none;border-radius:20px;
  background:var(--grad);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(255,107,53,.35);
  transition:transform .2s;
}
.announce-btn:active{transform:scale(.97)}

/* ================= 悬浮按钮 ================= */
.float-btns{
  position:fixed;
  right:16px;
  bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.recruit-btn{
  position:relative;
  width:56px;height:56px;
  border:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:23px;
  color:#fff;
  font-family:inherit;
  cursor:pointer;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  animation:recruitPulse 2.4s ease-in-out infinite;
  transition:transform .2s;
}
@keyframes recruitPulse{
  0%,100%{box-shadow:0 6px 22px rgba(34,224,122,.4)}
  50%{box-shadow:0 6px 32px rgba(34,224,122,.7)}
}
.recruit-btn:active{transform:scale(.9)}

.recruit-label{
  position:absolute;
  left:-64px;top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:rgba(34,184,107,.95);
  padding:4px 10px;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(34,184,107,.3);
}
.recruit-label::after{
  content:'';
  position:absolute;
  right:-4px;top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:rgba(34,184,107,.95);
}

.service-btn{
  position:relative;
  width:56px;height:56px;
  border:none;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  cursor:pointer;
  background:var(--grad);
  animation:floatPulse 2.4s ease-in-out infinite;
  transition:transform .2s;
}
@keyframes floatPulse{
  0%,100%{box-shadow:0 6px 22px rgba(255,107,53,.4)}
  50%{box-shadow:0 6px 32px rgba(255,107,53,.7)}
}
.service-btn:active{transform:scale(.9)}

.service-btn .dot{
  position:absolute;
  top:3px;right:3px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--green-2);
  border:2px solid #fff;
}

/* ================= 客服聊天 ================= */
.chat-modal{
  position:fixed;inset:0;
  z-index:800;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(20,20,35,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .28s,visibility .28s;
}
.chat-modal.show{opacity:1;visibility:visible}

.chat-panel{
  width:100%;
  max-width:500px;
  max-height:82vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:22px 22px 0 0;
  overflow:hidden;
  box-shadow:0 -18px 50px rgba(0,0,0,.28);
  transform:translateY(24px);
  transition:transform .32s cubic-bezier(.34,1.4,.64,1);
}
.chat-modal.show .chat-panel{transform:translateY(0)}

.chat-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:var(--grad);
  color:#fff;
}
.chat-header .avatar{
  width:38px;height:38px;
  border-radius:12px;
  display:grid;place-items:center;
  font-size:20px;
  background:rgba(255,255,255,.22);
}
.chat-header .head-info{flex:1 1 auto;min-width:0;text-align:left}
.chat-header .head-name{font-size:14.5px;font-weight:700}
.chat-header .head-status{font-size:11px;opacity:.85;margin-top:2px}
.close-btn{
  border:none;background:rgba(255,255,255,.18);
  color:#fff;width:28px;height:28px;
  border-radius:50%;cursor:pointer;font-size:12px;
  flex:0 0 auto;
}

.chat-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px;
  background:#f7f8fb;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:180px;
}

.msg{
  max-width:82%;
  font-size:13px;
  line-height:1.55;
  padding:9px 13px;
  border-radius:14px;
  white-space:pre-wrap;
  word-break:break-word;
  animation:msgIn .3s both;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{
  align-self:flex-start;
  background:#fff;
  color:var(--ink-2);
  border:1px solid rgba(0,0,0,.05);
  border-bottom-left-radius:5px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.msg.me{
  align-self:flex-end;
  color:#fff;
  background:var(--grad);
  border-bottom-right-radius:5px;
  box-shadow:0 4px 14px rgba(255,107,53,.28);
}

.chat-quick{
  display:flex;
  gap:8px;
  padding:10px 14px;
  overflow-x:auto;
  scrollbar-width:none;
  background:#fff;
  border-top:1px solid var(--line);
}
.chat-quick::-webkit-scrollbar{display:none}
.quick-item{
  flex-shrink:0;
  font-size:12px;
  color:#e06b2b;
  background:rgba(255,245,239,.9);
  border:1px solid var(--orange-soft);
  padding:6px 12px;
  border-radius:20px;
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.quick-item:hover{background:#ffeadd;transform:translateY(-1px)}

.chat-input-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid var(--line);
}
.chat-input-bar input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line);
  background:#f7f8fb;
  border-radius:20px;
  padding:10px 14px;
  font-size:13.5px;
  font-family:inherit;
  outline:none;
  color:var(--ink);
}
.chat-input-bar input:focus{border-color:rgba(255,107,53,.4);background:#fff}
.send-btn{
  flex:0 0 auto;
  width:38px;height:38px;
  border:none;border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(255,107,53,.3);
  transition:transform .2s;
}
.send-btn:active{transform:scale(.92)}

/* ================= 顶部领取通知 ================= */
.dl-toast{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  left:50%;
  z-index:500;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:90vw;
  padding:9px 18px 9px 10px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:30px;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-100px) scale(.9);
  transition:all .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.dl-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.dl-toast .dl-icon{
  width:32px;height:32px;
  flex:0 0 auto;
  display:grid;place-items:center;
  font-size:16px;
  border-radius:10px;
  background:var(--grad);
}
.dl-toast .dl-text{
  font-size:12.5px;
  color:#666a78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dl-toast .dl-text b{color:var(--orange);font-weight:600}

/* ================= Toast ================= */
.toast{
  position:fixed;
  left:50%;bottom:96px;
  z-index:950;
  max-width:80vw;
  padding:11px 22px;
  border-radius:24px;
  background:rgba(26,26,46,.92);
  color:#fff;
  font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0;
  transform:translateX(-50%) translateY(10px);
  transition:opacity .28s,transform .28s;
  pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= 响应式 ================= */
@media (max-width:420px){
  .hero{
    padding:20px 14px;
    gap:10px;
    margin:6px 10px 0;
    border-radius:22px;
  }
  .hot-panel{flex:0 0 45%;padding:11px 9px;border-radius:17px}
  .hot-head h3{font-size:15px}
  .hot-flame{font-size:16px}
  .hot-thumb{width:34px;height:34px;font-size:17px;border-radius:9px}
  .hot-name{font-size:11.5px}
  .hot-tag{font-size:9.5px;padding:3px 7px}
  .hot-item{padding:6px;gap:6px;border-radius:11px}
  .hero-figure{right:36%;width:126px;opacity:.5}
  .hero-ghost{display:none}
  .hero-cta{font-size:13.5px;padding:9px 20px;letter-spacing:1px}
  .app-icon-wrap{width:54px;height:54px;margin-right:12px;border-radius:14px}
  .app-icon-wrap .icon{font-size:26px}
  .app-name{font-size:14.5px}
  .app-meta{font-size:11.5px;gap:9px}
  .get-btn{font-size:13px;padding:6px 18px}
}

@media (max-width:340px){
  .hot-tag{display:none}
  .hero-glitch{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* =========================================================
   数据态 / 骨架
   ========================================================= */
.list-state{
  text-align:center;
  padding:52px 24px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
}
.list-state .state-hint{color:#c2c6d1;font-size:12px}

.hot-skeleton{
  min-height:56px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:sk 1.2s linear infinite;
  border-style:dashed;
}
@keyframes sk{0%{background-position:0 0}100%{background-position:-200% 0}}

.app-icon-wrap .icon-fallback{font-size:26px;font-weight:800;color:var(--orange)}
.app-icon-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.get-icon-wrap{position:relative;overflow:hidden}
.get-icon-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* =========================================================
   任务 / 赞赏 / 结果 弹窗
   ========================================================= */
.task-card,
.vip-card{
  width:100%;
  max-width:420px;
  max-height:92vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.96);
  transition:transform .34s cubic-bezier(.34,1.56,.64,1);
}
.modal.show .task-card,
.modal.show .vip-card{transform:translateY(0) scale(1)}

.task-header{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:16px 16px 15px;
  background:var(--grad);
  color:#fff;
  flex:0 0 auto;
}
.task-header .head-icon{
  width:38px;height:38px;
  flex:0 0 auto;
  display:grid;place-items:center;
  font-size:19px;
  border-radius:12px;
  background:rgba(255,255,255,.22);
}
.task-header .head-info{flex:1 1 auto;min-width:0}
.task-header .head-title{font-size:15.5px;font-weight:800;letter-spacing:.5px}
.task-header .head-subtitle{
  font-size:11.5px;
  opacity:.9;
  margin-top:3px;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.task-header .head-close{
  position:absolute;
  top:10px;right:10px;
  width:26px;height:26px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:11px;
  cursor:pointer;
  flex:0 0 auto;
}

.vip-header{background:linear-gradient(135deg,#d9a13b,#f7cf7a);color:#4a3406}
.vip-header .head-icon{background:rgba(255,255,255,.35)}
.vip-header .head-close{background:rgba(0,0,0,.08);color:#5b4415}

.task-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px;
  -webkit-overflow-scrolling:touch;
}

/* 步骤 */
.task-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:14px;
}
.step-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:var(--ink-2);
  background:#f6f7fb;
  border-radius:20px;
  padding:5px 10px;
  white-space:nowrap;
}
.step-num{
  width:16px;height:16px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-size:10px;
  font-weight:700;
}
.step-arrow{color:#cfd3dd;font-size:11px}

/* 文案 */
.task-copy-box{
  position:relative;
  background:#fff8f4;
  border:1px dashed var(--orange-soft);
  border-radius:14px;
  padding:12px 12px 10px;
}
.copy-label{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  color:#e06b2b;
  margin-bottom:7px;
}
.task-copy-text{
  font-size:12.5px;
  line-height:1.6;
  color:#5b4a41;
  word-break:break-all;
  max-height:76px;
  overflow-y:auto;
}
.copy-action-btn{
  margin-top:9px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:var(--grad);
  padding:6px 14px;
  border-radius:20px;
  box-shadow:0 3px 10px rgba(255,107,53,.28);
}

/* 平台按钮 */
.platform-btns{display:flex;gap:9px;margin-top:10px}
.platform-btn{
  flex:1;
  cursor:pointer;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:10px 8px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-2);
  transition:transform .18s,box-shadow .18s;
}
.platform-btn:active{transform:scale(.97)}
.platform-btn.douyin{color:#111;border-color:#e6e8ee}
.platform-btn.xhs{color:#fe2c55;border-color:#ffd9e2;background:#fff7f9}

/* 关键词 */
.search-tip{
  margin-top:12px;
  font-size:12px;
  color:var(--ink-2);
  background:#f6f8fb;
  border-radius:12px;
  padding:9px 12px;
}
.kw-value{color:var(--orange);font-weight:600}

/* 示例图 */
.demo-section-title{
  margin-top:14px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.demo-pic{
  margin-top:8px;
  min-height:110px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fafbfd;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.demo-pic img{width:100%;display:block}
.pic-placeholder{font-size:12px;color:#b8bccb;padding:28px 0}

/* 三图上传 */
.upload-3-title{
  margin-top:16px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.upload-3-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:9px;
}
.upload-slot{
  position:relative;
  aspect-ratio:1;
  border-radius:14px;
  border:1.5px dashed #dfe3ec;
  background:#fafbfd;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s,background .2s;
}
.upload-slot:hover{border-color:var(--orange-soft);background:#fff8f4}
.upload-slot .slot-icon{font-size:19px;color:#c7ccd8;line-height:1}
.upload-slot .slot-text{font-size:11px;color:#b8bccb}
.upload-slot.filled{border-style:solid;border-color:var(--orange-soft);background:#fff}
.upload-slot img{width:100%;height:100%;object-fit:cover}
.slot-del{
  position:absolute;
  top:5px;right:5px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:10px;
}

.upload-tip{
  margin-top:8px;
  font-size:11.5px;
  color:var(--faint);
  text-align:center;
}
.upload-tip.ok{color:var(--green)}

/* 单图上传（付款） */
.upload-one{
  margin-top:9px;
  min-height:96px;
  border-radius:14px;
  border:1.5px dashed #dfe3ec;
  background:#fafbfd;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:border-color .2s,background .2s;
}
.upload-one:hover{border-color:#e8c98a;background:#fffdf6}
.upload-one .pay-icon{font-size:22px}
.upload-one .pay-text{font-size:12px;color:#b0b5c4}
.upload-one.filled{border-style:solid;border-color:#e8c98a;background:#fff}
.upload-one img{width:100%;max-height:210px;object-fit:contain;background:#fff}
.pay-redo{
  position:absolute;
  right:8px;bottom:8px;
  font-size:10.5px;
  color:#fff;
  background:rgba(0,0,0,.5);
  padding:3px 9px;
  border-radius:20px;
}

/* 输入 & 提交 */
.line-input{
  width:100%;
  margin-top:12px;
  border:1px solid var(--line);
  background:#fafbfd;
  border-radius:12px;
  padding:11px 13px;
  font-size:12.5px;
  font-family:inherit;
  color:var(--ink);
  outline:none;
}
.line-input:focus{border-color:rgba(255,107,53,.4);background:#fff}

.submit-btn{
  width:100%;
  margin-top:13px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  color:#fff;
  background:var(--grad);
  padding:14px;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(255,107,53,.32);
  transition:transform .18s,opacity .18s;
}
.submit-btn:active{transform:scale(.98)}
.submit-btn:disabled{opacity:.62;cursor:not-allowed}
.submit-btn.ghost{
  background:#f2f4f8;
  color:var(--ink-2);
  box-shadow:none;
  margin-top:9px;
}

.task-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.6;
  color:var(--faint);
  text-align:center;
}

/* 赞赏 */
.vip-tip{
  font-size:12px;
  line-height:1.65;
  color:var(--ink-2);
  background:#fffaf0;
  border:1px solid #f3e3be;
  border-radius:12px;
  padding:10px 12px;
}
.vip-tip strong{color:#c8892a;font-weight:600}

.vip-step-label{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
}
.vip-step-label span{
  width:17px;height:17px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#d9a13b,#f7cf7a);
  color:#4a3406;
  font-size:10.5px;
  font-weight:700;
}

.qr-wrap{
  margin-top:10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fafbfd;
  min-height:180px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.qr-wrap img{width:100%;max-width:240px;display:block}
.qr-empty{font-size:12px;color:#9aa0b0;text-align:center;line-height:1.9}

.vip-amount{
  margin-top:10px;
  text-align:center;
  font-size:12.5px;
  color:var(--ink-2);
}
.vip-amount b{
  font-size:19px;
  color:#c8892a;
  margin-left:4px;
  font-weight:800;
}
.vip-hint{
  margin-top:4px;
  text-align:center;
  font-size:11px;
  color:var(--faint);
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
  background:linear-gradient(135deg,#fff8f4,#f7f9ff);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 6px;
}
.stat-item{text-align:center}
.stat-item b{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--orange);
  line-height:1.2;
}
.stat-item span{font-size:10.5px;color:var(--faint)}

/* 结果 */
.result-card{
  width:100%;
  max-width:360px;
  background:#fff;
  border-radius:24px;
  padding:26px 20px 18px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.94);
  transition:transform .36s cubic-bezier(.34,1.56,.64,1);
}
.modal.show .result-card{transform:translateY(0) scale(1)}
.result-icon{font-size:40px;line-height:1}
.result-title{
  margin-top:10px;
  font-size:19px;
  font-weight:800;
  color:var(--ink);
}
.result-desc{
  margin-top:8px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}
.code-box{
  margin-top:16px;
  border:1px dashed var(--orange-soft);
  background:#fff8f4;
  border-radius:16px;
  padding:12px;
}
.code-label{
  display:block;
  font-size:11px;
  color:#e06b2b;
  margin-bottom:5px;
}
.code-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:25px;
  font-weight:800;
  letter-spacing:5px;
  color:var(--orange);
}
.result-actions{margin-top:4px}
.result-foot{
  margin-top:12px;
  font-size:11px;
  line-height:1.6;
  color:var(--faint);
}

/* 移动端微调 */
@media (max-width:420px){
  .task-card,.vip-card{max-width:100%;max-height:94vh;border-radius:20px}
  .task-body{padding:14px}
  .code-value{font-size:22px;letter-spacing:4px}
}