*{box-sizing:border-box}html{background:#f3f4f5}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;color:#222;background:#f3f4f5;-webkit-font-smoothing:antialiased}.phone-shell{max-width:430px;margin:0 auto;background:#f6f6f6;min-height:100vh;padding-bottom:86px}.top-tips{padding:10px 12px 0}.share-tip,.service-tip{border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.4}.share-tip{background:#fff6de;color:#986a18}.service-tip{margin-top:6px;background:#fff;color:#555}.hero-card{margin:10px 12px 0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04)}.cover-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:#e9ecef}.cover-scroll::-webkit-scrollbar{display:none}.cover-img{min-width:100%;height:232px;object-fit:cover;display:block;scroll-snap-align:start;background:#eef2f0}.project-head{display:flex;gap:10px;align-items:flex-start;padding:12px}.project-logo{border-radius:12px;border:1px solid #eef0f1;background:#fff;flex:0 0 auto}.project-title-wrap h1{font-size:18px;line-height:1.35;margin:2px 0 6px;font-weight:700}.project-title-wrap p{margin:0;color:#666;font-size:13px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card{margin:10px 12px 0;background:#fff;border-radius:14px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.035)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.stats-grid b{display:block;font-size:21px;color:#2f9c5b;line-height:1.2}.stats-grid span{display:block;font-size:12px;color:#777;margin-top:4px}.progress-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;color:#666;font-size:13px}.progress-row strong{color:#2f9c5b;font-size:16px}.progress{height:9px;border-radius:99px;background:#edf1ed;overflow:hidden}.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#47bd72,#1aa45a);transition:width .25s ease}.cert-card h2,.detail-card h2,.record-card h2,.spec-card h2,.address-card h2,.product-card h2{font-size:16px;margin:0 0 12px}.cert-line{display:flex;align-items:center;gap:8px;border-top:1px solid #f2f2f2;padding:12px 0 0;margin-top:12px;font-size:14px}.cert-line:first-of-type{border-top:0;padding-top:0;margin-top:0}.cert-line span{color:#999;width:68px;flex:0 0 auto}.cert-line b{font-weight:500;flex:1}.cert-line em,.address-card em{font-style:normal;font-size:11px;color:#2f9c5b;background:#eaf8ef;border-radius:999px;padding:2px 6px}.rich-text{font-size:14px;color:#444;line-height:1.85}.rich-text p{margin:0 0 10px}.detail-images{display:grid;gap:10px}.detail-images img{width:100%;height:auto;min-height:160px;border-radius:10px;background:#eef2f0;object-fit:cover}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-title h2{margin:0}.section-title a,.link-btn{color:#2f9c5b;text-decoration:none;font-size:13px;background:none;border:0}.record-list{list-style:none;margin:0;padding:0}.record-list li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #f4f4f4}.record-list li:first-child{border-top:0}.record-list img{border-radius:50%;background:#f0f0f0}.record-list div{flex:1;min-width:0}.record-list b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-list span{display:block;color:#999;font-size:12px;margin-top:3px}.record-list strong{color:#2f9c5b;font-size:15px}.footer-info{margin:14px 12px 0;padding:10px 0 18px;text-align:center;color:#9a9a9a;font-size:12px;line-height:1.4}.footer-info p{margin:4px 0}.bottom-bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50;display:flex;gap:10px;align-items:center;max-width:430px;width:100%;padding:10px 12px;background:rgba(255,255,255,.96);box-shadow:0 -2px 14px rgba(0,0,0,.08);backdrop-filter:blur(10px)}.safe-bottom{padding-bottom:calc(10px + env(safe-area-inset-bottom))}.share-btn,.donate-btn,.pay-bottom button,.modal-pay-btn,.success-btn{border:0;border-radius:999px;height:44px;font-size:16px;font-weight:700;text-align:center;text-decoration:none}.share-btn{flex:0 0 112px;background:#f2f7f3;color:#2f9c5b}.donate-btn,.pay-bottom button,.modal-pay-btn,.success-btn{flex:1;background:#1fb466;color:white;display:flex;align-items:center;justify-content:center}.toast{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;border-radius:999px;padding:9px 14px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:200}.toast.show{opacity:1}.pay-head{position:sticky;top:0;z-index:20;height:48px;display:flex;align-items:center;justify-content:space-between;background:#fff;padding:0 12px;border-bottom:1px solid #f0f0f0}.pay-head h1{font-size:17px;margin:0}.pay-head a{font-size:32px;line-height:1;color:#333;text-decoration:none}.address-card p{font-size:14px;color:#333;line-height:1.7;margin:6px 0}.donate-for{margin:0 0 10px;color:#666;font-size:14px}.pay-project-card h2{font-size:17px;line-height:1.45;margin-bottom:12px}.price-line{font-size:14px;color:#555}.price-line b{color:#eb5b38;font-size:18px}.current-line{font-size:13px;color:#777;margin-top:8px}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.spec-btn{height:42px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#333;font-weight:600}.spec-btn.active{border-color:#1fb466;color:#1fb466;background:#effaf4}.note{font-size:12px;color:#999;line-height:1.5;margin:12px 0}.custom-kg{display:flex;align-items:center;gap:8px;font-size:14px;color:#555}.custom-kg input{flex:1;height:38px;border:1px solid #e5e5e5;border-radius:8px;padding:0 10px;font-size:16px}.product-card{display:flex;gap:12px;align-items:center}.product-card img{border-radius:10px;background:#f2f4f3;object-fit:cover}.product-card h2{margin:0 0 8px;line-height:1.4}.product-card p{margin:0;color:#888}.product-card b{color:#eb5b38;font-size:18px}.agreement-row{display:flex;align-items:center;gap:4px;padding:12px 14px;font-size:13px;color:#666}.agreement-row input{vertical-align:-2px}.agreement-row button{border:0;background:none;color:#2f9c5b;padding:0}.pay-spacer{height:70px}.pay-bottom{justify-content:space-between}.pay-bottom div{flex:1}.pay-bottom div span{display:block;font-size:12px;color:#888}.pay-bottom div b{display:block;color:#eb5b38;font-size:20px;margin-top:2px}.pay-bottom button{flex:0 0 150px}.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:100;display:flex;align-items:flex-end;justify-content:center}.pay-modal,.protocol-modal{width:100%;max-width:430px;background:#fff;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:slideUp .16s ease}.pay-modal{min-height:230px}.pay-modal h2,.protocol-modal h2{font-size:17px;margin:4px 0 18px;text-align:center}.modal-close{position:absolute;right:18px;margin-top:-4px;border:0;background:none;font-size:24px;color:#999}.wechat-row{height:54px;display:flex;align-items:center;gap:10px;border:1px solid #f0f0f0;border-radius:12px;padding:0 14px;font-size:16px;margin-bottom:18px}.wechat-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#1fb466;color:#fff}.protocol-modal{max-height:78vh;overflow:auto}.protocol-modal article{font-size:14px;color:#444;line-height:1.8}.success-page{padding:54px 20px;text-align:center}.success-icon{margin:0 auto 16px;width:68px;height:68px;border-radius:50%;background:#1fb466;color:#fff;display:flex;align-items:center;justify-content:center;font-size:40px}.success-page h1{font-size:22px;margin:0 0 8px}.success-page p{color:#777;line-height:1.6}.success-card{margin:22px 0;background:#fff;border-radius:16px;padding:14px;text-align:left}.success-card div{display:flex;justify-content:space-between;border-top:1px solid #f2f2f2;padding:12px 0;font-size:14px}.success-card div:first-child{border-top:0}.success-card span{color:#888}.success-card b{max-width:220px;word-break:break-all}.success-btn{height:46px;margin-top:10px}@keyframes slideUp{from{transform:translateY(16px);opacity:.7}to{transform:translateY(0);opacity:1}}@media (max-width:360px){.spec-grid{grid-template-columns:repeat(3,1fr)}.share-btn{flex-basis:92px}.project-title-wrap h1{font-size:17px}}

/* fix: 协议弹窗 hidden 强制隐藏，避免移动端/浏览器兼容问题 */
[hidden] {
  display: none !important;
}
.modal-mask.is-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* 支付成功页：二维码 + 返回首页 */
.pay-success-page {
  min-height: calc(100vh - 20px);
  background: #fff;
  text-align: center;
  padding: 92px 22px 40px;
  box-sizing: border-box;
}

.pay-success-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.pay-success-qr-wrap {
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-success-qr {
  width: 168px;
  height: 168px;
  object-fit: contain;
  display: block;
}

.pay-success-qr-placeholder {
  width: 168px;
  height: 168px;
  border: 2px dashed #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #111;
  background: #fafafa;
}

.pay-success-qr-placeholder b {
  font-size: 24px;
}

.pay-success-qr-placeholder span {
  margin-top: 8px;
  font-size: 13px;
  color: #8a8f98;
}

.pay-success-guide {
  min-width: 116px;
  text-align: left;
}

.pay-success-guide-title {
  color: #b42318;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.pay-success-guide-sub {
  color: #333;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 700;
}

.pay-success-finger {
  font-size: 58px;
  line-height: 1;
  margin-top: 10px;
}

.pay-success-page h1 {
  margin: 8px 0 14px;
  font-size: 24px;
  color: #222;
  font-weight: 900;
}

.pay-success-thanks {
  margin: 0;
  color: #666;
  font-size: 18px;
  font-weight: 500;
}

.pay-success-desc {
  margin: 18px 0 38px;
  color: #b0b0b0;
  font-size: 16px;
}

.pay-success-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f28211, #e96300);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(230, 99, 0, .22);
}

@media (max-width: 380px) {
  .pay-success-page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pay-success-visual {
    gap: 10px;
  }

  .pay-success-qr-wrap,
  .pay-success-qr,
  .pay-success-qr-placeholder {
    width: 148px;
    height: 148px;
  }

  .pay-success-guide-title {
    font-size: 19px;
  }

  .pay-success-home {
    min-width: 200px;
  }
}


/* 捐赠页备注/联系方式 */
.remark-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #1f2937;
}

.remark-card textarea {
  width: 100%;
  min-height: 86px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  background: #fff;
}

.remark-card textarea:focus {
  border-color: #f28211;
  box-shadow: 0 0 0 3px rgba(242, 130, 17, .12);
}

.order-remark {
  max-width: 220px;
  white-space: normal;
  word-break: break-all;
  color: #344054;
}

/* PAY_METHOD_MODAL_V2：支付方式底部弹框 */
#payModal.modal-mask {
  align-items: flex-end;
  background: rgba(0,0,0,.42);
}

#payModal .pay-modal {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 18px 18px 0 0;
  padding: 18px 18px 28px;
  background: #fff;
  box-sizing: border-box;
}

#payModal .pay-modal h2 {
  text-align: center;
  margin: 0 0 18px;
  font-size: 16px;
  color: #1f2937;
}

#payModal .wechat-row {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 15px;
  color: #344054;
}

#payModal .wechat-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#payModal .modal-pay-btn {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 23px;
  margin-top: 24px;
  background: linear-gradient(90deg,#df6536,#f38a37);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

#payModal .modal-close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: #98a2b3;
}