/* ============================================================
   富德生命人寿 ·「微光成炬·善意同行」H5 原型
   Design Contract v1 — 朝霞金蓝 / 暖公益 / 轻中式
   ============================================================ */

:root{
  /* —— 主色：深蓝（金融信任） + 朝霞金（温暖公益）—— */
  --blue-900:#0E2C4E;
  --blue-800:#16406F;
  --blue-700:#1E5490;
  --blue-600:#2B6CAE;
  --blue-300:#8FB7D9;
  --blue-100:#E8F0FA;

  --gold-700:#9A6C2A;
  --gold-600:#B8873C;
  --gold-500:#C99C55;
  --gold-400:#E3B978;
  --gold-200:#F3DCB4;

  --cream-50:#FDF9F2;
  --cream-100:#F8F1E4;
  --cream-200:#F2E8D7;

  --orange-600:#C8642F;
  --orange-500:#E4813C;
  --teal-500:#2FBFB0;

  --ink-900:#241F19;
  --ink-700:#4A443B;
  --ink-500:#8A8377;
  --line:#E9DFCD;

  --white:#fff;

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --radius-xl:28px;

  --shadow-s:0 2px 10px rgba(96,70,36,.06);
  --shadow-m:0 10px 26px -8px rgba(96,70,36,.18);
  --shadow-l:0 22px 54px -16px rgba(70,50,24,.28);

  --font-display:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-num:Georgia,"Times New Roman","Songti SC","STSong",serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:#DCD5C7;
  background-image:radial-gradient(900px 520px at 50% -8%,#F6F1E7 0%,#DCD5C7 62%,#CFC6B5 100%);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:28px 0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

/* ---------------- 手机外框 ---------------- */
.device{
  width:390px;height:844px;
  position:relative;overflow:hidden;
  border-radius:44px;background:var(--cream-50);
  box-shadow:
    0 0 0 11px #171614,
    0 0 0 12px #37332D,
    0 34px 70px -14px rgba(50,38,20,.55);
}
.screen{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  background:var(--cream-50);
  scrollbar-width:none;
  overscroll-behavior:contain;
}
.screen::-webkit-scrollbar{display:none}
.screen[hidden]{display:none}

@media (max-width:520px){
  body{padding:0;display:block;background:var(--cream-50)}
  .device{width:100vw;height:100dvh;border-radius:0;box-shadow:none}
}
/* 笔记本等较矮屏幕：顶部对齐，避免手机框被裁切 */
@media (min-width:521px) and (max-height:920px){
  body{align-items:flex-start;padding:16px 0}
}

/* ---------------- 页面容器 ---------------- */
.page{padding:22px 18px 34px;position:relative}
body[data-hero="1"] .page{margin-top:0;padding-top:0}
/* hero 一律通栏：抵消 .page 的左右内边距 */
.page > .hero{margin-left:-18px;margin-right:-18px}

/* ---------------- Hero 朝霞 ---------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:26px 22px 40px;
  background:linear-gradient(180deg,#0E3059 0%,#16487B 30%,#1F5A90 56%,#2C6BA4 80%,#3F80B6 100%);
}
.hero::after{
  content:"";position:absolute;left:50%;bottom:-215px;width:520px;height:390px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,236,190,.9) 0%,rgba(255,199,120,.5) 40%,rgba(255,186,96,0) 70%);
}
.hero-inner{position:relative;z-index:2}
.screen[data-view="plan"] .hero-inner{display:flex;align-items:flex-end;gap:14px}
.hero-head{flex:1;min-width:0}
.hero-title{
  font-family:var(--font-display);font-size:30px;line-height:1.28;font-weight:800;
  letter-spacing:.06em;margin:14px 0 8px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 2px 0 rgba(8,32,58,.62),
    0 3px 0 rgba(8,32,58,.4),
    0 10px 22px rgba(4,20,38,.45);
}
/* 首页主标题：双行错落 + 白金双色 */
.hero-sub{font-size:13.5px;letter-spacing:.12em;color:rgba(255,255,255,.9);line-height:1.7}

/* 品牌标识 */

/* ---------------- 通用板块 ---------------- */
.section{margin-top:22px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.04em}
.section-title::before{content:"";width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--gold-400),var(--gold-600))}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--white);border-radius:var(--radius-l);
  border:1px solid rgba(201,156,85,.2);
  box-shadow:var(--shadow-s);
  padding:18px;
}
.card + .card{margin-top:12px}
.card--gold{
  background:linear-gradient(168deg,#FFFDF8 0%,#FBF2E1 100%);
  border-color:rgba(201,156,85,.34);
}
.card-text{font-size:13px;line-height:1.85;color:var(--ink-700);margin:0}
.card-note{font-size:11.5px;line-height:1.7;color:var(--ink-500);margin:10px 0 0}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font-size:17px;font-weight:700;letter-spacing:.04em;
  transition:transform .18s ease,box-shadow .22s ease,opacity .2s;
}
.btn svg{width:17px;height:17px}
.btn:active{transform:scale(.975)}
.btn--gold{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFE8B8 0%,#F7CB74 20%,#E3A94F 50%,#C98430 80%,#B7711C 100%);
  color:#3E2A08;
  box-shadow:
    0 14px 26px -12px rgba(160,96,20,.85),
    0 4px 10px -4px rgba(160,96,20,.5),
    inset 0 2px 0 rgba(255,255,255,.72),
    inset 0 -3px 8px rgba(126,64,8,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.32);
}
.btn--gold::after{
  content:"";position:absolute;left:7%;right:7%;top:2px;height:44%;
  border-radius:99px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.18) 62%,rgba(255,255,255,0) 100%);
}
.btn--blue{
  background:linear-gradient(135deg,#3577B8 0%,#1A4880 100%);
  color:#fff;box-shadow:0 10px 22px -8px rgba(26,72,128,.7);
}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
/* 按钮右侧：手指点击提示动效 */
.btn{position:relative}
.btn::before{
  content:"";position:absolute;right:4px;top:50%;width:45px;height:45px;
  background:url("img/huaban-6388477026.png") center/contain no-repeat;background-size:contain;
  pointer-events:none;opacity:0;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
  animation:btn-tap 1.8s ease-in-out infinite;
}
@keyframes btn-tap{
  0%{opacity:0;transform:translateY(-56%) scale(.9)}
  12%{opacity:1;transform:translateY(-52%) scale(1)}
  30%{opacity:1;transform:translateY(-38%) scale(.94)}
  46%{opacity:1;transform:translateY(-52%) scale(1)}
  70%{opacity:1;transform:translateY(-52%) scale(1)}
  84%,100%{opacity:0;transform:translateY(-56%) scale(.9)}
}
@media (prefers-reduced-motion: reduce){
  .btn::before{animation:none;opacity:1;transform:translateY(-52%)}
}

/* ---------------- 双计划卡片 ---------------- */
/* 右侧缺角：贴合右缘的弧形浅色区域，用于承放插画 */
.plan-art svg{display:block;width:100%;height:100%}

/* ---------------- 数据 ---------------- */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat + .stat{position:relative}
.stat-v em{font-style:normal;font-size:12px;font-family:var(--font-body);font-weight:600;color:var(--ink-500);margin-left:1px}

.track > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2FBFB0,#5FDBCB);box-shadow:0 0 12px rgba(47,191,176,.55)}

/* ---------------- 上滑提示 ---------------- */

/* ---------------- 报名表单（下划线行 / 无边框输入） ---------------- */
.page--signup{padding:0;--accent:#1E5490;--accent-ink:#123F6B;
  display:flex;flex-direction:column;min-height:100%;
}
.page--signup .actionbar{margin-top:auto}

.form-hero{
  position:relative;overflow:hidden;color:#fff;
  padding:26px 20px 38px;
  background:linear-gradient(180deg,#0E3059 0%,#16487B 48%,#2A6AA4 100%);
}
.form-hero::after{
  content:"";position:absolute;left:50%;bottom:-118px;width:460px;height:230px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,236,190,.5),rgba(255,199,120,0) 70%);
}
.form-title{
  position:relative;z-index:2;margin:0 0 6px;
  font-family:var(--font-display);font-size:21px;font-weight:900;
  letter-spacing:-.015em;line-height:1.22;color:#fff;
  text-shadow:
    2px 2px 0 rgba(242,195,118,.72),
    0 10px 22px rgba(3,16,30,.5);
}
.form-title::after{
  content:"";display:block;width:64px;height:4px;border-radius:99px;margin-top:8px;
  background:linear-gradient(90deg,#FFE0AC,rgba(255,224,172,0));
}
.form-sub{position:relative;z-index:2;margin:0;font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:rgba(255,255,255,.82)}

.form-card{
  position:relative;z-index:2;margin:-18px 14px 0;padding:2px 16px;
  background:#fff;border-radius:20px;border:1px solid rgba(201,156,85,.18);
  box-shadow:0 20px 36px -24px rgba(70,50,24,.45);
}

.frow{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-height:54px;border-bottom:1px solid rgba(233,223,205,.8)}
.frow:last-child{border-bottom:0}
.frow-k{flex:none;width:116px;font-size:12.5px;font-weight:700;color:#3E3931;letter-spacing:0;white-space:nowrap}
.frow-k .req{color:#D9601F;margin-left:2px;font-size:13px;line-height:1}
.frow-v{
  flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  font-family:inherit;font-size:14px;color:var(--ink-900);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.frow-v.is-ph{color:#BDB3A2}
.frow-input{
  flex:1;min-width:0;height:54px;border:0;background:none;padding:0;outline:none;
  -webkit-appearance:none;appearance:none;
  font-family:inherit;font-size:14px;color:var(--ink-900);letter-spacing:.01em;
}
.frow-input::placeholder{color:#BDB3A2}
.frow-opts{flex:1;display:flex;align-items:center;gap:26px}
.radio{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:4px 0;cursor:pointer;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:14px;color:var(--ink-700)}
.radio i{width:16px;height:16px;border-radius:50%;border:1.4px solid #C9BEA9;transition:.2s}
.radio.is-on{color:var(--accent-ink);font-weight:600}
.radio.is-on i{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3.5px #fff}
.frow-arrow{
  flex:none;width:7px;height:7px;margin-left:2px;
  border-right:1.6px solid #C4BAA8;border-bottom:1.6px solid #C4BAA8;
  transform:rotate(-45deg);
}
.frow-err{display:none;flex-basis:100%;padding:0 0 9px 128px;font-size:11px;color:#C4552F;letter-spacing:.02em}
.frow.is-error{border-bottom-color:rgba(217,119,87,.55)}
.frow.is-error .frow-k,
.frow.is-error .frow-v{color:#C4552F}
.frow.is-error .frow-err{display:block}
.frow-note{display:flex;align-items:center;gap:6px;margin:0;padding:0 0 10px 128px;font-size:11px;color:#9A6C2A;letter-spacing:.02em}
.frow-note svg{width:13px;height:13px;flex:none}
.frow-note b{font-family:var(--font-num);font-size:12px}

.page--signup .privacy{margin:12px 20px 0}
.page--signup .actionbar{margin-left:0;margin-right:0}
/* 报名页主按钮：天蓝渐变 */
.page--signup .btn--gold{
  position:relative;overflow:hidden;color:#fff;letter-spacing:.06em;
  background:linear-gradient(180deg,#7ED0F8 0%,#35A0E8 46%,#1B77C4 100%);
  box-shadow:0 12px 24px -10px rgba(23,110,180,.78),inset 0 -1px 0 rgba(10,70,120,.35);
  text-shadow:0 1px 2px rgba(10,70,120,.3);
}
.page--signup .btn--gold::after{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:40%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
}

/* 选择弹框 */
.picker{
  position:absolute;inset:0;z-index:85;
  visibility:hidden;pointer-events:none;transition:visibility .3s;
}
.picker.is-open{visibility:visible;pointer-events:auto}
.picker-mask{position:absolute;inset:0;background:rgba(26,18,10,.42);opacity:0;transition:opacity .28s}
.picker.is-open .picker-mask{opacity:1}
.picker-panel{
  position:absolute;left:0;right:0;bottom:0;max-height:74%;
  display:flex;flex-direction:column;
  background:#FFFDF9;border-radius:24px 24px 0 0;
  padding:6px 0 calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 44px -22px rgba(40,28,12,.55);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.85,.3,1);
}
.picker.is-open .picker-panel{transform:translateY(0)}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px 10px;border-bottom:1px solid rgba(233,223,205,.8)}
.picker-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--ink-900)}
.picker-close{border:0;background:none;padding:2px 0;font-family:inherit;font-size:13px;color:var(--ink-500);cursor:pointer}
.picker-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 4px;scrollbar-width:none}
.picker-list::-webkit-scrollbar{display:none}
.picker-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 6px;border:0;border-bottom:1px solid rgba(233,223,205,.7);
  background:none;font-family:inherit;text-align:left;cursor:pointer;
}
.picker-item:last-child{border-bottom:0}
.picker-t{display:block;font-size:14.5px;color:var(--ink-900);letter-spacing:.01em}
.picker-s{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-500)}
.picker-r{flex:none;font-size:11.5px;color:var(--gold-700);font-weight:700;white-space:nowrap}
.picker-item.is-on .picker-t{color:var(--accent);font-weight:700}
.picker-tick{flex:none;width:16px;height:16px;color:var(--accent);display:none}
.picker-item.is-on .picker-tick{display:block}
.picker-empty{margin:0;padding:26px 0;text-align:center;font-size:12.5px;color:var(--ink-500)}


/* ---------------- 底部操作条 ---------------- */
.actionbar{
  position:sticky;bottom:0;z-index:30;margin:18px -18px 0;padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(253,249,242,0) 0%,rgba(253,249,242,.94) 34%,#FDF9F2 100%);
}
.privacy{font-size:11px;line-height:1.7;color:var(--ink-500);text-align:center;margin:10px 0 0;letter-spacing:.02em}

/* ---------------- 结果页 ---------------- */

/* ---------------- 底部弹层 / Toast ---------------- */

.toast{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.94);
  background:rgba(26,22,16,.88);color:#fff;padding:11px 20px;border-radius:13px;
  font-size:13px;letter-spacing:.03em;opacity:0;pointer-events:none;transition:.26s;
  z-index:95;max-width:76%;text-align:center;line-height:1.6;
  backdrop-filter:blur(8px);
}
.toast.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------------- 动效 ---------------- */
.reveal{opacity:0;transform:translateY(16px);animation:rise .62s cubic-bezier(.22,.86,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
}

/* ---------------- 标签 ---------------- */

/* ---------------- 计划详情 ---------------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feat{
  background:#fff;border-radius:18px;border:1px solid rgba(201,156,85,.2);
  box-shadow:var(--shadow-s);padding:15px 10px 13px;text-align:center;
}
.feat-ic{
  width:42px;height:42px;margin:0 auto 9px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,#FBF0DA,#F2DFBE);color:var(--gold-700);
}
.feat-ic svg{width:21px;height:21px}
.feat-t{font-size:13px;font-weight:800;letter-spacing:.02em}
.feat-d{
  font-size:10.5px;color:#6B6055;line-height:1.6;margin-top:5px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* 内容分组：大圆角承托 + 暖色渐变 + 大范围投影 */
.panel{
  border-radius:24px;padding:12px;
  background:linear-gradient(168deg,#FFFDF8 0%,#FFF3E1 100%);
  border:1px solid rgba(238,178,112,.32);
  box-shadow:0 28px 46px -26px rgba(170,100,40,.55),0 10px 22px -16px rgba(170,100,40,.3);
}
.panel .feat{box-shadow:none}
.section-head--center{justify-content:center}
.section-head--center .section-title{justify-content:center}

/* ---------------- 河南省点亮地图 ---------------- */

/* ---------------- 结果页新结构 ---------------- */
.screen[data-view="result"] .page{padding-top:18px;padding-bottom:28px}
/* 右上暖色光斑：沿用当前金色调 */

/* ---------------- 海报页 ---------------- */
.poster{position:relative;min-height:100%;display:flex;flex-direction:column;color:#fff;overflow:hidden;
  background:#08203A}
.poster-cover{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* 推广码页：整张海报按原图比例完整铺开，超出屏幕时可上下滑动查看 */
.screen[data-view="promo"] .poster{overflow:visible}
.screen[data-view="promo"] .poster-cover{
  position:relative;inset:auto;width:100%;height:auto;
  object-fit:contain;object-position:top center;
}
.poster-body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:0 20px 22px}

/* 海报页 · 底部卡片：表单 + 按钮 + 版权合成一张卡 */
.poster-panel{
  margin-top:auto;padding:16px 14px 14px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(243,249,255,.94) 100%);
  border:1px solid rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 40px -18px rgba(0,18,40,.6),inset 0 1px 0 rgba(255,255,255,.9);
}
/* 白卡内的表单配色 */
.poster-panel .pf-row{background:#fff;border-color:rgba(22,64,111,.12);box-shadow:0 2px 8px rgba(20,60,110,.06)}
.poster-panel .pf-k{color:#1668B4}
.poster-panel .pf-i{color:#12385C}
.poster-panel .pf-i::placeholder{color:rgba(18,56,92,.42)}
.poster-panel .poster-foot{color:rgba(18,56,92,.48)}

/* 海报页 · 底部推广码表单 */
.poster-form{margin-top:0;padding:0}
.poster-form .pf-row:first-child{margin-top:0}
.pf-row{
  display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 15px;
  border-radius:14px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.pf-k{flex:none;width:58px;font-size:13px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.95)}
.pf-i{
  flex:1;min-width:0;background:none;border:0;outline:0;padding:0;
  font-family:inherit;font-size:14px;letter-spacing:.02em;color:#fff;
}
.pf-i::placeholder{color:rgba(255,255,255,.52)}
.poster-cta{margin-top:14px}

/* ---------- 关于我们页（page3） ---------- */
.about-page{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:transparent;}
.about-bg{position:relative;inset:auto;flex:1 1 auto;min-height:0;width:100%;height:0;object-fit:cover;object-position:top center;display:none;z-index:0}
/* 计划页：品牌视频嵌在背景图三张卡片下方的留白区（随背景图等比定位） */
.plan-video{position:absolute;z-index:2;top:calc(51% - 18px);left:18px;right:18px;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.plan-video-el{width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.35);display:none;object-fit:contain}
.plan-video.has-video .plan-video-el{display:block}
/* 移动端不解码视频，直接展示视频画面截图 */
.plan-video .plan-video-still{display:none;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.35);object-fit:contain}
.plan-video.is-still .plan-video-el{display:none}
.plan-video.is-still .plan-video-still{display:block}
.plan-video.is-still .plan-video-empty{display:none}
.plan-video-empty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.plan-video.has-video .plan-video-empty{display:none}
.plan-video-empty p{font-size:13px;line-height:1.85;color:#2B5B8A;margin:0}
.plan-video-empty b{color:#0D6BB2}
.plan-video-pick span{display:inline-block;padding:9px 22px;border-radius:999px;background:linear-gradient(180deg,#4FAEE6,#0D6BB2);color:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(13,107,178,.4)}
.about-actionbar{position:relative;z-index:2;padding:16px 22px calc(14px + env(safe-area-inset-bottom));margin-top:auto}
/* 按钮下方小字说明 */
.about-tip{
  margin:9px 0 0;text-align:center;font-size:12px;letter-spacing:.1em;
  color:rgba(24,76,124,.82);text-shadow:0 1px 0 rgba(255,255,255,.65);
}

/* 整张背景图即入口：点击进入下一页面 */
.poster-hit{position:absolute;inset:0;z-index:6;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.poster-foot{text-align:center;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.62);margin-top:14px}

.hero-bg{display:none}

/* —— 卡片 / 板块 —— */

/* —— 简介：去掉卡片容器，文字加粗上移 —— */

/* ============================================================
   小海豚计划 · 天蓝主题（计划页 / 报名页的主色调）
   参考：活动页海豚卡天蓝渐变 #8FD3F8 → #48A1E3 → #2068B2
   ============================================================ */
body.theme--dolphin{
  background-color:#D8E9F5;
  background-image:radial-gradient(900px 520px at 50% -8%,#EAF6FF 0%,#D8E9F5 62%,#C6DBEC 100%);
}
.screen[data-view="plan"]{
  background:
    radial-gradient(480px 250px at 50% 0%,rgba(96,180,245,.34) 0%,rgba(96,180,245,0) 72%),
    linear-gradient(180deg,#EDF8FF 0%,#F5FBFF 44%,#FDFEFF 100%);
}
.screen[data-view="plan"] .page{padding-top:0;padding-bottom:0}

/* —— 头图：蓝色调照片 + 渐变大标题 —— */
.screen[data-view="plan"] .hero{
  color:#125E9C;min-height:254px;padding:12px 20px 10px;text-align:left;
  background:linear-gradient(180deg,#E8F6FF 0%,#CFE9FF 60%,#F5FBFF 100%);
}
.screen[data-view="plan"] .hero::after{display:none}
.screen[data-view="plan"] .hero-inner{display:block;text-align:left}
.screen[data-view="plan"] .hero-title{
  font-family:var(--font-display);font-size:42px;font-weight:900;line-height:1.14;letter-spacing:0;margin:0 0 4px;
  background:linear-gradient(180deg,#8FD8FF 0%,#2E93DA 50%,#1268AE 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.95)) drop-shadow(0 6px 14px rgba(20,90,150,.28));
}
.screen[data-view="plan"] .hero-sub{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.18em;color:#2A79B4;margin:0;
}
.screen[data-view="plan"] .hero-bg{
  display:block;position:absolute;inset:0;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.screen[data-view="plan"] .hero-bg::before{
  content:"";position:absolute;inset:0;background:#2E9CDB;mix-blend-mode:color;opacity:.66;
}
.screen[data-view="plan"] .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(232,246,255,.99) 0%,
    rgba(226,243,255,.95) 18%,
    rgba(206,232,255,.5) 32%,
    rgba(232,246,255,.06) 46%,
    rgba(238,249,255,.55) 74%,
    rgba(245,251,255,.96) 90%,
    #F5FBFF 100%);
}

/* —— 卡片 / 面板 —— */
.screen[data-view="plan"] .card{
  background:#FBFEFF;border-color:rgba(90,160,216,.3);
  box-shadow:0 10px 26px -16px rgba(24,96,150,.38);
}
.screen[data-view="plan"] .card--gold{
  background:linear-gradient(168deg,#FBFEFF 0%,#E4F3FF 100%);
  border-color:rgba(90,160,216,.4);
}
.screen[data-view="plan"] .section-title::before{
  background:linear-gradient(180deg,#7FCDF6,#1B72B4);
}
.screen[data-view="plan"] .panel{
  background:linear-gradient(168deg,#F8FDFF 0%,#E2F2FF 100%);
  border-color:rgba(90,160,216,.34);
  box-shadow:0 22px 40px -24px rgba(24,96,150,.5),0 8px 18px -14px rgba(24,96,150,.3);
}
.screen[data-view="plan"] .feat{
  background:#FCFEFF;border-color:rgba(90,160,216,.22);
}
.screen[data-view="plan"] .feat-ic{
  background:linear-gradient(160deg,#DCF1FF,#B3DEFB);color:#1668A8;
}

/* —— 简介：去掉卡片容器，文字加粗上移 —— */
.screen[data-view="plan"] .page > .card--gold{
  margin-top:2px;padding:0 20px;position:relative;z-index:2;
  background:none;border:0;border-radius:0;box-shadow:none;
}
.screen[data-view="plan"] .card-text{
  font-size:12.5px;line-height:1.7;font-weight:700;color:#1A6AA8;
}
.screen[data-view="plan"] .card-note{
  font-size:11px;margin:10px 0 0;color:#4F86AE;
}
.screen[data-view="plan"] .section{margin-top:15px}
.screen[data-view="plan"] .section-head{margin-bottom:9px}
.screen[data-view="plan"] .section-title{font-size:15px}
.screen[data-view="plan"] .panel{padding:11px;border-radius:20px}
.screen[data-view="plan"] .feat-grid{gap:8px}
.screen[data-view="plan"] .feat{
  padding:10px 2px 8px;border:0;border-radius:0;background:none;box-shadow:none;
}
.screen[data-view="plan"] .feat-ic{
  width:34px;height:34px;margin-bottom:6px;border-radius:11px;
}
.screen[data-view="plan"] .feat-ic svg{width:18px;height:18px}
.screen[data-view="plan"] .feat-t{font-size:12.5px}
.screen[data-view="plan"] .feat-d{font-size:9.5px;line-height:1.5;margin-top:3px;color:#55718C}

/* —— 天蓝渐变大按钮（计划页 CTA 与 page3 底部按钮同款） —— */
.screen[data-view="plan"] .btn--gold,
.about-actionbar .btn--blue{
  position:relative;overflow:hidden;color:#fff;letter-spacing:.06em;
  background:linear-gradient(180deg,#7ED0F8 0%,#35A0E8 46%,#1B77C4 100%);
  box-shadow:0 12px 24px -10px rgba(23,110,180,.78),inset 0 -1px 0 rgba(10,70,120,.35);
  text-shadow:0 1px 2px rgba(10,70,120,.3);
}
.screen[data-view="plan"] .btn--gold::after,
.about-actionbar .btn--blue::after{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:40%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
}
.screen[data-view="plan"] .btn--gold:active,
.about-actionbar .btn--blue:active{
  box-shadow:0 6px 14px -8px rgba(23,110,180,.8),inset 0 1px 3px rgba(10,70,120,.4);
}
.screen[data-view="plan"] .actionbar{
  margin-top:auto;
  padding:10px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(245,251,255,0) 0%,rgba(245,251,255,.95) 34%,#F7FDFF 100%);
}
.screen[data-view="plan"] .actionbar .btn{height:46px}

/* ============================================================
   小海豚计划 · 填写信息页（承接天蓝主题）
   ============================================================ */
.screen[data-view="signup"]{
  background:linear-gradient(180deg,#EDF8FF 0%,#F5FBFF 46%,#FDFEFF 100%);
}
.page--signup{--accent:#2E93DA;--accent-ink:#1268AE}
.form-hero{
  color:#125E9C;
  background:linear-gradient(180deg,#EAF7FF 0%,#D2ECFF 56%,#F2FAFF 100%);
}
.form-hero::after{
  background:radial-gradient(ellipse at center,rgba(86,176,240,.4),rgba(86,176,240,0) 72%);
}
.form-title{
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#4FAEE6 0%,#0D6BB2 52%,#063B68 100%);
  -webkit-background-clip:text;background-clip:text;
  font-weight:900;
  -webkit-text-stroke:.6px rgba(5,50,90,.38);
  text-shadow:none;
  filter:drop-shadow(0 3px 9px rgba(8,58,108,.24));
}
.form-title::after{display:none}
.form-sub{color:#2A79B4}
.form-card{
  border-color:rgba(90,160,216,.28);
  box-shadow:0 20px 36px -24px rgba(24,96,150,.45);
}
.frow{border-bottom-color:rgba(198,222,240,.85)}
.frow-k{color:#22313D}
.frow-v.is-ph,
.frow-input::placeholder{color:#A8BDD0}
.frow-note{color:#2A79B4}

/* 表单下方：到场礼横幅（本地 png 素材） */
.form-gift{position:relative;z-index:2;margin:12px auto 0;width:80%}
.form-gift img{display:block;width:100%;height:auto}
.page--signup .privacy{color:#6A8CA6}
.page--signup .actionbar{
  background:linear-gradient(180deg,rgba(245,251,255,0) 0%,rgba(245,251,255,.94) 34%,#F7FDFF 100%);
}

/* ============================================================
   活动页：顶部横幅图片位 + “关于我们”简介（无背景/边框，字号加大）
   ============================================================ */
/* 图片就位后：去掉占位框，按图片原始比例展示（透明底不裁切） */


/* ============================================================
   计划页：本地背景图（盖住原有内容） → 按钮（最上层）
   背景图放到 assets/img/plan-dolphin-bg.png
   ============================================================ */
.screen[data-view="plan"] .page{
  position:relative;
  display:flex;flex-direction:column;min-height:100%;
}
.plan-bg{
  position:absolute;left:0;right:0;top:0;z-index:20;
  pointer-events:none;
}
.plan-bg img{display:block;width:100%;height:auto}

/* 背景图就位后：按钮压在图的上层，操作条本身透明 */
.screen[data-view="plan"].has-bg .actionbar{background:none}

/* 背景图就位后：头图让出画面，标题文字直接浮于背景图之上 */
.screen[data-view="plan"].has-bg .hero{background:transparent}

.screen[data-view="plan"].has-bg .hero-bg{display:none}
.screen[data-view="plan"].has-bg .hero::after{display:none}

/* ---------- 全省公益进度（白卡 + 浅蓝内层） ---------- */

/* ============================================================
   结果页 · 高保真细化（暖光底 / 墨金标题 / 地图柔光）
   ============================================================ */
.screen[data-view="result"]{
  background:
    radial-gradient(320px 220px at 84% -4%,rgba(255,204,138,.55) 0%,rgba(255,204,138,0) 72%),
    radial-gradient(280px 200px at 4% 6%,rgba(255,231,199,.5) 0%,rgba(255,231,199,0) 74%),
    linear-gradient(180deg,#FFFCF6 0%,#FDF7EE 52%,#FAF3E7 100%);
}
.screen[data-view="result"] .page{padding-top:22px}

/* 徽章：暖色光晕 */

/* 标题：墨色渐变，字重更实 */

/* 名次：等宽数字 + 金墨渐变 */

/* 已点亮统计：主数字用暖棕强调 */

/* 地图：底部柔光 + 轮廓投影 */

/* 胶囊条 / 差额卡 / 邀请卡：统一 20px 圆角与柔和投影 */

/* ============================================================
   结果页：直接铺设计图 assets/img/result.png
   ============================================================ */
.screen[data-view="result"]{background:#E9F5FF}
.result-shot{position:absolute;inset:0;overflow:hidden;background:#E9F5FF}
.result-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* ============================================================
   海报页 / 二维码页：金色按钮统一为蓝色按钮样式
   ============================================================ */
.screen[data-view="poster"] .btn--gold,
.screen[data-view="promo"] .btn--gold{
  position:relative;overflow:hidden;color:#fff;letter-spacing:.06em;
  background:linear-gradient(180deg,#7ED0F8 0%,#35A0E8 46%,#1B77C4 100%);
  box-shadow:0 12px 24px -10px rgba(23,110,180,.78),inset 0 -1px 0 rgba(10,70,120,.35);
  text-shadow:0 1px 2px rgba(10,70,120,.3);
}
.screen[data-view="poster"] .btn--gold::after,
.screen[data-view="promo"] .btn--gold::after{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:40%;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
}
.screen[data-view="poster"] .btn--gold:active,
.screen[data-view="promo"] .btn--gold:active{
  box-shadow:0 6px 14px -8px rgba(23,110,180,.8),inset 0 1px 3px rgba(10,70,120,.4);
}

/* 报名页 */
.screen[data-view="signup"]{background:#EDF8FF}

/* 整页背景图：设计图放到 assets/img/signup-bg.png 即生效，缺图时回退上面的浅蓝渐变 */
.signup-bg{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none}
.signup-bg img{display:block;width:100%;height:auto}

/* 有背景图时：表单容器透明化，表单行与按钮浮在图上 */
.screen[data-view="signup"].has-bg .page--signup{z-index:30;position:relative;background:transparent}
.screen[data-view="signup"].has-bg .form-hero{background:transparent;padding-top:50px}
.screen[data-view="signup"].has-bg .form-title,
.screen[data-view="signup"].has-bg .form-sub{display:none}
.screen[data-view="signup"].has-bg .form-card{
  background:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 32px -24px rgba(20,90,145,.45);
  margin:132px 14px 0;padding:0 16px;
}
.screen[data-view="signup"].has-bg .privacy{color:rgba(30,54,82,.78);margin:12px 20px 18px}
.screen[data-view="signup"].has-bg .actionbar{background:none;padding:12px 18px 0;margin-top:0}

/* 背景图就位后：表单行改为透明背景，文字改为深色以覆盖在PSD图上 */
.screen[data-view="signup"].has-bg .frow{border-bottom-color:rgba(30,54,82,.25)}
.screen[data-view="signup"].has-bg .frow-k{color:#1E3652;font-size:13px;font-weight:700}
.screen[data-view="signup"].has-bg .frow-v{color:#12385C}
.screen[data-view="signup"].has-bg .frow-input{color:#12385C}
.screen[data-view="signup"].has-bg .frow-input::placeholder{color:rgba(18,56,92,.5)}
.screen[data-view="signup"].has-bg .frow-v.is-ph{color:rgba(18,56,92,.45)}
.screen[data-view="signup"].has-bg .frow-arrow{border-color:#8AA5BF}
.screen[data-view="signup"].has-bg .frow-opts .radio{color:#1E3652}
.screen[data-view="signup"].has-bg .frow-opts .radio i{border-color:#5A8DB5}

/* 弹框与提示在 signup 有背景图时保持原有白色/深色主题 */
.screen[data-view="signup"].has-bg .picker,
.screen[data-view="signup"].has-bg .toast,
.screen[data-view="signup"].has-bg [data-picker-close]{z-index:100}

/* 手机端图片统一从顶部开始放置，裁切发生在底部 */
@media (max-width: 820px){
  .poster-cover,
  .about-bg{object-position:top center}

  /* 第三页：锁定一屏高度，按钮与说明固定在屏幕最底部，不再被裁切 */
  .screen[data-view="page3"]:not([hidden]){overflow:hidden;display:flex;flex-direction:column}
  .screen[data-view="page3"] .about-page{flex:1;min-height:0}
}