:root{
  --bg:#070f0d; --panel:#0d1a16; --line:#1e332c; --line2:#2a453b;
  --tx:#f2ece2; --tx2:#c9d6cf; --tx3:#8fa79e; --tx4:#6d8f82;
  --gold:#f0b13f; --gold2:#ffd694; --teal:#56c4a8; --teal2:#7de5c4; --rose:#e0668f;
  --ok:#7de5c4; --warn:#f0b13f; --err:#e0668f;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:
    radial-gradient(880px 520px at 12% -10%, rgba(240,177,63,.09), transparent 62%),
    radial-gradient(720px 460px at 88% 0%, rgba(86,196,168,.09), transparent 64%),
    var(--bg);
  color:var(--tx);
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.6;overflow:hidden;
}

.app{
  height:100dvh;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;position:relative;
  padding-bottom:var(--safe-bottom);
}

.hidden{display:none !important}

/* ===== 顶部栏 ===== */
.tg{
  height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top)) 14px 0;
  background:rgba(10,18,16,.94);border-bottom:1px solid #1a2c26;
  backdrop-filter:blur(10px);
}
.tg .t{font-size:14.5px;font-weight:600;letter-spacing:.4px;color:var(--tx)}
.tg .ico{
  width:34px;height:34px;border-radius:11px;border:1px solid transparent;background:transparent;
  color:#8fa79e;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.tg .ico:active{background:#132520}

/* ===== 屏 ===== */
.screen{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.screen .scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:12px 0 18px;
  scrollbar-width:none;
}
.screen .scroll::-webkit-scrollbar{display:none}

/* ===== 主标语 ===== */
.slogan{padding:4px 16px 12px}
.slogan h1{
  font-size:24px;font-weight:800;line-height:1.25;letter-spacing:.5px;
  background:linear-gradient(100deg,#fff4e0,#ffd694 42%,#e8a22c 78%,#c8871e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold2);
}
.slogan p{font-size:11.5px;color:var(--tx3);margin-top:6px;letter-spacing:.2px}
.slogan p::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--teal);margin-right:6px;vertical-align:2px;
}

/* ===== 次数卡 ===== */
.quota{
  margin:0 14px 10px;border-radius:var(--r-md);padding:12px 14px;
  background:linear-gradient(120deg,#123028,#0d1a16);
  border:1px solid #2e7a63;
}
.quota.compact{padding:11px 14px}
.quota.warn{background:linear-gradient(120deg,#2a1e0c,#0d1a16);border-color:#7a5416}
.quota .top{display:flex;align-items:center;gap:7px}
.quota .top .lb{font-size:11.5px;color:var(--teal2);letter-spacing:.3px}
.quota.warn .top .lb{color:var(--gold2)}
.quota .top .r{margin-left:auto;font-size:9.5px;color:var(--tx4)}
.quota .num{display:flex;align-items:flex-end;gap:6px;margin-top:6px}
.quota .num b{font-size:30px;line-height:1;font-weight:800;color:var(--gold2);letter-spacing:-.5px}
.quota .num span{font-size:12px;color:var(--tx4);margin-bottom:2px}
.quota .inv{
  margin-left:auto;margin-bottom:3px;font-size:9.5px;padding:3px 8px;border-radius:7px;
  background:rgba(86,196,168,.12);border:1px solid rgba(86,196,168,.3);color:var(--teal2);
}
.quota .inv.off{background:rgba(240,177,63,.1);border-color:rgba(240,177,63,.28);color:var(--gold2)}
.dots{display:flex;gap:4px;margin-top:10px}
.dots i{flex:1;height:5px;border-radius:3px;background:#1a2c26;transition:background .2s}
.dots i.on{background:linear-gradient(90deg,#f0b13f,#ffd694)}
.dots i.used{background:#2a2418}
.quota .hint{font-size:9.5px;color:var(--tx4);margin-top:8px;line-height:1.6}
.quota .hint b{color:var(--gold2);font-weight:600}

/* ===== 区块 ===== */
.blk{
  margin:0 14px 10px;border-radius:var(--r-md);background:var(--panel);
  border:1px solid var(--line);padding:11px 13px;
}
.blk .lb{font-size:11px;color:var(--tx3);letter-spacing:.3px;display:flex;align-items:center;gap:6px;margin-bottom:9px}
.blk .lb b{color:var(--gold2);font-weight:600}
.blk .lb .r{margin-left:auto;font-size:10px;color:#6d7f77;font-weight:400}

.prompt{
  width:100%;min-height:92px;max-height:200px;resize:none;
  border-radius:11px;background:#0a1512;border:1px solid var(--line);
  padding:11px 12px;font-size:13px;line-height:1.8;color:#e6efe9;
  font-family:inherit;outline:none;transition:border-color .18s;
}
.prompt::placeholder{color:#546a5f}
.prompt:focus{border-color:#2e7a63}

/* ===== chips ===== */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.chip{
  padding:6px 13px;border-radius:10px;font-size:11.5px;cursor:pointer;white-space:nowrap;
  background:#0a1512;border:1px solid var(--line);color:var(--tx3);
  font-family:inherit;transition:all .16s;
}
.chip:active{transform:scale(.96)}
.chip.on{background:linear-gradient(150deg,#17453a,#10322a);border-color:#2e7a63;color:var(--gold2);font-weight:700}

/* ===== 参考图 ===== */
.refs{display:flex;flex-wrap:wrap;gap:8px}
.ref{
  flex:0 0 62px;height:80px;border-radius:10px;overflow:hidden;position:relative;
  border:1px solid var(--line2);background:#0a1512;
}
.ref img{width:100%;height:100%;object-fit:cover;display:block}
.ref .no{
  position:absolute;left:4px;bottom:4px;font-size:8.5px;padding:1px 5px;border-radius:4px;
  background:rgba(7,15,13,.84);border:1px solid rgba(255,214,148,.3);color:var(--gold2);
}
.ref .del{
  position:absolute;right:3px;top:3px;width:17px;height:17px;border-radius:50%;
  background:rgba(7,15,13,.88);border:1px solid #3a4a42;color:#b8c8c0;
  font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.ref.add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-style:dashed;cursor:pointer;color:var(--tx4);
}
.ref.add .p{font-size:17px;line-height:1}
.ref.add .t{font-size:8.5px;text-align:center}
.ref.add:active{background:#0f1f1a}
.refhint{font-size:9.5px;color:var(--tx4);margin-top:8px}
.refhint b{color:var(--tx3);font-weight:600}

/* ===== 费用条 ===== */
.costbar{
  display:flex;align-items:center;gap:8px;margin:2px 14px 12px;
  font-size:11.5px;color:var(--tx3);
}
.costbar .hl{font-weight:800;color:var(--ok);font-size:12.5px}
.costbar .rest{margin-left:auto;color:var(--tx4);font-size:10.5px}
.costbar b.ok{color:var(--ok);font-weight:700}

/* ===== CTA ===== */
.cta{display:flex;gap:9px;padding:0 14px 6px;margin-top:auto}
.btn{
  flex:1;height:48px;border-radius:14px;border:1px solid transparent;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .12s,opacity .16s;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{
  background:linear-gradient(140deg,#ffd694,#e8a22c 62%,#b97a12);
  color:#2a1a05;
  box-shadow:0 8px 24px rgba(240,177,63,.22),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.ghost{
  flex:0 0 auto;min-width:88px;padding:0 16px;
  background:#0f1f1a;border-color:var(--line2);color:var(--tx3);
}

/* ===== 结果页 ===== */
.reshead{display:flex;align-items:flex-start;gap:10px;margin:2px 14px 10px}
.reshead h2{font-size:17px;font-weight:800;color:var(--tx);line-height:1.35}
.reshead h2 em{font-style:normal;font-size:11px;color:var(--gold);font-weight:600;margin-left:7px}
.reshead .r{margin-left:auto;text-align:right;font-size:10px;color:var(--tx4);line-height:1.7;white-space:nowrap}

.progress{height:4px;margin:0 14px 12px;border-radius:2px;background:#16271f;overflow:hidden;display:none}
.progress.show{display:block}
.progress i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#56c4a8,#f0b13f);transition:width .5s ease}

.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 14px;margin-bottom:12px}
.rgrid:empty{display:none}
.rc{position:relative;border-radius:12px;overflow:hidden;background:#0a1512;border:1px solid var(--line);aspect-ratio:3/4}
.rc img{width:100%;height:100%;object-fit:cover;display:block}
.rc .tag2{
  position:absolute;left:6px;top:6px;font-size:9px;padding:2px 7px;border-radius:6px;
  background:rgba(7,15,13,.82);border:1px solid rgba(255,214,148,.26);color:var(--gold2);
}
.rc .acts{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:1px;
  background:linear-gradient(180deg,rgba(7,15,13,0),rgba(7,15,13,.94) 42%);
  padding:16px 5px 5px;
}
.rc .acts span{
  flex:1;text-align:center;font-size:9.5px;padding:4px 0;border-radius:6px;
  color:#c9d6cf;background:rgba(20,36,31,.8);cursor:pointer;
}
.rc .acts span:active{background:#1d3a31;color:var(--gold2)}
.rc.skeleton{background:linear-gradient(110deg,#0d1a16 30%,#132620 50%,#0d1a16 70%);background-size:220% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{0%{background-position:120% 0}100%{background-position:-20% 0}}

.errbox{
  margin:0 14px 12px;border-radius:12px;padding:11px 13px;font-size:12px;line-height:1.75;
  background:rgba(224,102,143,.09);border:1px solid rgba(224,102,143,.3);color:#f0a9c0;
}

/* ===== 空态 ===== */
.empty{padding:26px 22px 0;text-align:center}
.empty .ic{
  width:66px;height:66px;margin:0 auto 14px;border-radius:20px;
  background:linear-gradient(150deg,#1e332c,#12211d);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:27px;
}
.empty h2{font-size:19px;font-weight:800;color:var(--tx)}
.empty p{font-size:12px;color:var(--tx3);line-height:1.9;margin-top:9px}
.empty p b{color:var(--gold2)}

.opts{padding:18px 14px 0;display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;align-items:center;gap:11px;border-radius:var(--r-md);padding:12px 13px;
  background:var(--panel);border:1px solid var(--line);text-align:left;
  font-family:inherit;cursor:pointer;width:100%;color:inherit;
}
.opt:active{transform:scale(.99)}
.opt.hot{background:linear-gradient(120deg,#2a1e0c,#0d1a16);border-color:#7a5416}
.opt.teal{background:linear-gradient(120deg,#123028,#0d1a16);border-color:#2e7a63}
.opt .ic{
  width:36px;height:36px;border-radius:11px;background:#1a2c26;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.opt.hot .ic{background:#3a2a14}
.opt.teal .ic{background:#17453a}
.opt .tx{flex:1;min-width:0}
.opt .t1{font-size:12.5px;font-weight:700;color:#e6efe9}
.opt .t2{font-size:10px;color:var(--tx3);margin-top:4px;line-height:1.5}
.opt .t2 b{color:var(--teal2)}
.opt .go{
  margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;padding:5px 11px;
  border-radius:10px;background:#17453a;border:1px solid #2e7a63;color:var(--teal2);
}
.opt.hot .go{background:linear-gradient(120deg,#ffd694,#d99327);border-color:transparent;color:#2a1a05}

.rules{
  margin:14px 14px 0;border-radius:13px;padding:12px 14px;
  background:#0a1512;border:1px solid var(--line);
}
.rules .h{font-size:10.5px;color:var(--tx3);letter-spacing:.3px;margin-bottom:7px}
.rules li{list-style:none;font-size:10.5px;color:var(--tx3);line-height:1.95;padding-left:12px;position:relative}
.rules li:before{content:"·";position:absolute;left:2px;color:#2e7a63;font-weight:800}
.rules li b{color:var(--gold2);font-weight:600}

/* ===== 邀友页 ===== */
.steps{display:flex;flex-direction:column;gap:8px;margin:0 14px 12px}
.step{
  display:flex;align-items:center;gap:11px;border-radius:12px;padding:11px 13px;
  background:#0a1512;border:1px solid var(--line);
}
.step i{
  flex:0 0 24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;font-weight:800;color:#2a1a05;
  background:linear-gradient(140deg,#ffd694,#d99327);
}
.step b{display:block;font-size:12px;color:#e6efe9}
.step small{display:block;font-size:10px;color:var(--tx3);margin-top:2px}
.tiny{font-size:10px;color:var(--tx3);line-height:1.85}
.tiny b{font-weight:600}
.tiny b.ok{color:var(--ok)}
.tiny b.gold{color:var(--gold2)}

/* ===== 阻断 / 加载 ===== */
.blocker{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(7,15,13,.93);backdrop-filter:blur(6px);
}
.blocker .spin{
  width:32px;height:32px;border-radius:50%;
  border:2.5px solid #1e332c;border-top-color:var(--gold);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.blocker .bt{font-size:12.5px;color:var(--tx3);text-align:center;padding:0 24px;line-height:1.7}

/* ===== toast ===== */
.toast{
  position:fixed;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translate(-50%,16px);
  max-width:86vw;padding:10px 16px;border-radius:12px;font-size:12.5px;line-height:1.6;
  background:rgba(20,36,31,.97);border:1px solid var(--line2);color:#e6efe9;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:60;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(224,102,143,.45);color:#f0a9c0}