:root{
  --red:#E63329;
  --red-deep:#C1121F;
  --red-soft:#FBE3E0;
  --gold:#F5B942;
  --cream:#FFF7F2;
  --ink:#2B2B2B;
  --ink-soft:#6B6B6B;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 8px 24px rgba(230,51,41,.12);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#f2f2f2;
  -webkit-font-smoothing:antialiased;
}

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:linear-gradient(180deg,#FFF7F2 0%,#FDEEEA 100%);
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:74px; /* tabbar space */
}

/* 顶部栏 */
.topbar{
  background:linear-gradient(90deg,var(--red-deep),var(--red));
  color:#fff;
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  height:52px;display:flex;align-items:center;gap:8px;padding:0 16px;
}
.topbar-logo{width:24px;height:24px;animation:beat 1.4s infinite;}
.topbar-title{font-weight:600;font-size:16px;letter-spacing:1px;}

/* 页面容器 */
.pages{flex:1;position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page{
  display:none;
  padding:20px 18px 24px;
  animation:fade .3s ease;
}
.page.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 第一页 Hero */
.hero{text-align:center;padding:26px 0 14px;}
.heart-pulse{display:inline-block;animation:beat 1.4s infinite;}
.heart-svg{width:64px;height:58px;fill:var(--red);filter:drop-shadow(0 6px 10px rgba(230,51,41,.35));}
@keyframes beat{0%,100%{transform:scale(1);}15%{transform:scale(1.18);}30%{transform:scale(1);}45%{transform:scale(1.12);}}
.hero-title{font-size:26px;margin:18px 0 12px;color:var(--red-deep);font-weight:800;letter-spacing:1px;}
.hero-sub{color:var(--ink-soft);font-size:15px;line-height:1.8;margin:0;padding:0 8px;}

/* 第一页：整体加大纵向间距，避免内容挤在一起显得空荡 */
.page-thanks{padding-top:28px;padding-bottom:32px;}
.page-thanks .card{margin:26px 0;}
.page-thanks .impact{margin-top:6px;}
.page-thanks .quote-card{margin-top:4px;}
.page-thanks .btn-block{margin-top:30px;}

/* 血站 IP 形象 */
.mascot-band{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:18px 0 6px;}
.mascot-card{text-align:center;width:auto;}
.mascot-card img{height:150px;width:auto;border-radius:16px;display:block;box-shadow:var(--shadow);background:#fff;}
.mascot-card span{font-size:12px;color:var(--ink-soft);margin-top:6px;display:block;font-weight:600;}
.mascot-band--bare{margin:18px 0 4px;}
.mascot-band--bare .mascot-card{width:auto;}
/* 第一页感谢页的 IP：缩小并允许换行，避免窄屏出格（与第三页关怀页一致） */
.page-thanks .mascot-band--bare{flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
.page-thanks .mascot-band--bare .mascot-card img{height:auto;width:auto;max-height:96px;max-width:82px;object-fit:contain;}
.mascot-band--small .mascot-card img{height:110px;}
.mascot-tip{font-size:12px;color:var(--ink-soft);margin:8px 0 0;}
.mascot-greet h3{margin:0 0 8px;color:var(--red-deep);font-size:17px;}
.mascot-greet p{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:0 0 14px;}
.mascot-greet .mascot-band{margin-bottom:0;flex-wrap:wrap;gap:8px;}
.mascot-greet .mascot-card img{height:auto;width:auto;max-height:96px;max-width:82px;object-fit:contain;}

/* 问卷入口 */
.survey-entry{text-align:center;padding:22px 18px;}
.survey-entry-ico{font-size:40px;line-height:1;margin-bottom:6px;}
.survey-entry h3{margin:0 0 8px;color:var(--red-deep);font-size:17px;}
.survey-entry p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin:0 0 16px;}
.survey-entry .btn{margin-bottom:8px;}

/* 问卷题目预览 */
.survey-preview{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-top:14px;overflow:hidden;}
.survey-preview summary{font-size:14px;font-weight:700;color:var(--red-deep);padding:14px 18px;cursor:pointer;background:#FFF7F2;}
.survey-preview-body{padding:14px 18px 18px;}
.preview-list{margin:8px 0 16px;padding-left:18px;color:var(--ink-soft);font-size:13.5px;line-height:1.9;}
.preview-list li{margin-bottom:4px;}

/* 卡片通用 */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:16px 0;
}

/* 影响数据 */
.impact{display:flex;align-items:center;text-align:center;}
.impact-item{flex:1;}
.impact-num{font-size:30px;font-weight:800;color:var(--red);line-height:1;}
.impact-num small{font-size:14px;font-weight:600;margin-left:2px;}
.impact-label{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.impact-div{width:1px;height:38px;background:#eee;}

/* 引用卡 */
.quote-card{background:linear-gradient(135deg,#fff,#FFF1EE);border:1px solid var(--red-soft);}
.quote{font-size:15px;line-height:1.8;color:var(--ink);margin:0 0 8px;font-weight:600;}
.quote-from{font-size:12px;color:var(--ink-soft);margin:0;text-align:right;}

/* 按钮 */
.btn{
  border:none;border-radius:999px;font-size:16px;font-weight:700;
  padding:14px 20px;cursor:pointer;transition:transform .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn:active{transform:scale(.97);}
.btn-block{display:flex;width:100%;}
.btn-primary{background:linear-gradient(90deg,var(--red-deep),var(--red));color:#fff;box-shadow:0 6px 16px rgba(230,51,41,.3);}
.btn-outline{background:#fff;color:var(--red);border:2px solid var(--red);box-shadow:none;}
.btn-ghost{background:#FDEEEA;color:var(--red-deep);border:1.5px dashed var(--red);box-shadow:none;}
.btn-ghost:active{background:#FAD9D2;}

/* 区块标题 */
.section-title{font-size:22px;color:var(--red-deep);font-weight:800;margin:4px 0 4px;}
.section-desc{font-size:13px;color:var(--ink-soft);margin:0 0 16px;}

/* 表单行 */
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.form-row input{
  width:100%;border:2px solid var(--red-soft);border-radius:12px;
  padding:12px 14px;font-size:16px;outline:none;background:#fff;color:var(--ink);
}
.form-row input:focus{border-color:var(--red);}

/* 证书 */
.cert-wrap{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px;margin-bottom:14px;
}
#certCanvas{width:100%;height:auto;display:block;border-radius:10px;}

.cert-actions{display:flex;gap:10px;}
.cert-actions .btn{flex:1;font-size:14px;padding:12px 8px;}
.cert-tip{text-align:center;font-size:12px;color:var(--ink-soft);margin:10px 0 0;}

/* 关怀页 */
.care-video{margin:2px 0 16px;position:relative;}
.care-video-el{width:100%;aspect-ratio:9/16;background:#1c1c1e;border-radius:18px;display:block;object-fit:cover;}
.care-video-el:fullscreen{width:100vw;height:100vh;max-width:100vw;max-height:100vh;object-fit:contain;background:#000;border-radius:0;}
.care-fs-btn{position:absolute;right:14px;bottom:34px;z-index:5;background:rgba(230,51,41,.92);color:#fff;border:none;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;}
.care-fs-btn:active{transform:scale(.96);}
.care-video-cap{text-align:center;font-size:13px;color:#b5534d;margin:10px 0 0;}

.care-list{display:flex;flex-direction:column;gap:12px;}
.care-card{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border-radius:16px;padding:14px;box-shadow:var(--shadow);
  border-left:5px solid var(--red);
}
.care-card.dont{border-left-color:#9AA0A6;}
.care-icon{font-size:26px;line-height:1;flex-shrink:0;}
.care-body h3{margin:0 0 4px;font-size:15px;color:var(--ink);}
.care-body p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.6;}

.hotline{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff,#FFF1EE);border:1px solid var(--red-soft);}
.hotline-icon{font-size:28px;}
.hotline-title{font-size:13px;color:var(--ink-soft);}
.hotline-num{font-size:17px;font-weight:800;color:var(--red);}

/* 问卷 */
.survey .q-block{margin-bottom:18px;}
.q-title{font-size:15px;font-weight:700;margin:0 0 10px;}
.part-label{font-size:16px;font-weight:800;color:#E63329;margin:20px 0 4px;padding-left:10px;border-left:4px solid #E63329;}
.part-tip{font-size:13px;color:var(--ink-soft);margin:0 0 12px;}
.part-foot{font-size:12px;color:#b06a64;text-align:center;margin:14px 0 6px;}
.opts{display:flex;flex-direction:column;gap:8px;}
.opt{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #eee;border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.opt:active{background:#FFF1EE;}
.opt input{accent-color:var(--red);width:18px;height:18px;flex-shrink:0;}
.opt span{font-size:14px;color:var(--ink);}
.opt:has(input:checked){border-color:var(--red);background:#FFF1EE;}
.vol-opts{flex-direction:row;gap:10px;}
.vol-opts .opt{flex:1;justify-content:center;}
textarea{
  width:100%;border:2px solid var(--red-soft);border-radius:12px;padding:12px;
  font-size:14px;font-family:inherit;resize:vertical;outline:none;color:var(--ink);
}
textarea:focus{border-color:var(--red);}
.q-other{margin-top:10px;}

/* 第二页：血型选择 → 对应血液小伙伴 */
.bloodtype-card{margin:16px 0;}
.bt-title{font-size:15px;font-weight:700;color:var(--red-deep);margin:0 0 12px;text-align:center;}
.bt-chips{display:flex;gap:8px;justify-content:center;}
.bt-chip{
  flex:1;border:2px solid var(--red-soft);background:#fff;color:var(--red-deep);
  border-radius:14px;padding:12px 0;font-size:16px;font-weight:800;cursor:pointer;transition:.15s;
}
.bt-chip.active{
  background:linear-gradient(90deg,var(--red-deep),var(--red));color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(230,51,41,.3);
}
.bt-reveal{margin-top:14px;text-align:center;}
.bt-mascot{animation:popIn .35s ease;}
.bt-mascot img{height:170px;width:auto;border-radius:16px;display:block;margin:0 auto;box-shadow:var(--shadow);background:#fff;}
@keyframes popIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.bt-caption{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:10px 0 0;}

/* 底部导航 */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:480px;
  display:flex;background:#fff;border-top:1px solid #f0f0f0;
  box-shadow:0 -4px 16px rgba(0,0,0,.05);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:20;
}
.tab{
  flex:1;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 6px;color:#999;font-size:11px;
}
.tab-ico{font-size:20px;line-height:1;filter:grayscale(1);opacity:.6;transition:.2s;}
.tab-txt{transition:.2s;}
.tab.active{color:var(--red);}
.tab.active .tab-ico{filter:none;opacity:1;transform:translateY(-1px);}

/* 遮罩 */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;
}
.overlay[hidden]{display:none;}
.overlay-card{
  background:#fff;border-radius:20px;padding:20px;width:100%;max-width:340px;text-align:center;
}
.overlay-card h3{margin:0 0 6px;color:var(--red-deep);font-size:19px;}
.overlay-tip{font-size:13px;color:var(--ink-soft);margin:0 0 12px;}
.overlay-imgwrap{background:#f6f6f6;border-radius:12px;padding:8px;}
.overlay-imgwrap img{width:100%;border-radius:8px;display:block;}
.overlay-hint{font-size:12px;color:var(--ink-soft);margin:12px 0 14px;}

/* Toast */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.82);color:#fff;padding:14px 22px;border-radius:14px;
  font-size:14px;z-index:60;max-width:80%;text-align:center;line-height:1.6;
}
.toast[hidden]{display:none;}

/* 证书领取核验关卡 / 扫码浮层样式已随功能移除而删除 */

.cert-form[hidden]{display:none;}
.cert-offline{background:#FFF7E6;border:1px solid #FFD591;border-radius:10px;color:#9C6B1E;font-size:12.5px;line-height:1.6;padding:8px 12px;margin:0 0 14px;}
.cert-block{background:#FFF1EE;border:1px solid var(--red-soft);border-radius:16px;padding:30px 22px;text-align:center;color:#9a3b32;font-size:15px;line-height:1.9;margin:18px 0;}
.cert-block strong{color:var(--red-deep);font-weight:800;}