:root{
  --brand:#223480;
  --primary-light:rgb(210, 217, 240);          
  --text:#222;
  --sub:#666;
  --bg:#f6f7fb;
  --line:#e8e8ef;
  --content-offset: 180px;  /* 例如 120px，可按需 60~200 调 */
  --qtitle-shift: 4px; 
  /* 新增：页面左右内边距变量 */
  --page-x: 14px;  /* 桌面端保留 14px */
  /* 半圆参数（PC 默认）—— 想整体再大/小只改这三个 */
  --semi-width: 220vw;         /* 半圆宽 */
  --semi-height: 300vh;        /* 半圆高 */
  --semi-top: 250px;            /* 半圆距页面顶部 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 -apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  /* 禁止横向滚动（移动端更稳） */
  position: relative;
  overflow-x: hidden;
}
/* 进一步锁死横向拖动/回弹（对移动端很关键） */
html, body{
  max-width: 100%;
  overscroll-behavior-x: none;
  touch-action: pan-y;  /* 只允许纵向手势滚动 */
}

.survey{
  max-width:760px;width: min(760px, 100%);      /* 永不超出视口，防止撑宽 */
  margin:0 auto;
  padding: calc(12px + var(--content-offset)) var(--page-x) 24px;
  position: relative;
  z-index: 1;
}
/* 手机端缩小左右间距 */
@media (max-width: 768px) {
  :root { --page-x: 14px; }  /* 想更紧就 6px */
}
.header{padding:12px 6px 10px;text-align:center;}
.title{
  font-size:18px;letter-spacing:2px;
  background: linear-gradient(180deg, #223480, #4c6cd6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitle{
  font-size:35px;font-weight:700;
  background: linear-gradient(180deg, #223480, #5a74de);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;margin-top:2px;
}

.card{
  position:relative;
  background:#fff;border-radius:12px;padding:14px 12px;margin:8px 0;
}
/* 标题行：用 flex 让内容垂直居中，并能用 gap 控制竖杠与文字间距 */
.q-title{
  display: flex;
  align-items: center;      /* 文字与竖杠同一中线 */
  gap: 8px;                 /* 竖杠与文字间距 */
  margin: 0 2px 10px;
  padding-top: 8px;        /* ← 想再往下移就调这里 */
  font-size: 16px;
  font-weight: 700;
  color: #333;
  white-space: normal; /* 允许自动换行 */
  word-break: break-word; /* 在长单词/特殊点也能换 */
}

/* 竖杠：不再绝对定位 */
.q-title::before{
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.2em;            /* 高度跟随文字 */
  background-color: var(--brand);
  border-radius: 2px;
}

/* 选项行基础样式（单行卡片） */
.option{
  display:block;
  margin:0px 0;
  padding:6px 0px;
  border-radius:8px;
}
.option input{ display:none; }
.option span{
  display:block;
  position:relative;
  padding:10px 12px 10px 36px;   /* 为左侧圆点预留空间 */
  border:1px solid transparent;
  border-radius:8px;
  line-height:22px;
  transition: border-color .2s ease, background .2s ease;
  font-weight: 350; /* 细字体，可改成 400/500 试效果 */
}

/* 左侧圆点（未选中） */
.option span::before{
  content:"";
  position:absolute;
  left:12px;                     /* 圆点左边距 */
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  box-sizing: border-box;        /* ✅ 修复：包含边框，外径就是 18 */
  border:1px solid #aaa;
  border-radius:50%;
  background:#fff;
  transition:all .2s ease;
}

/* 选中：整行描边=主题色 + 背景浅色 */
.option input[type="radio"]:checked + span,
.option input[type="checkbox"]:checked + span{
  border-color: var(--brand);
  background: transparent;
}

/* 选中：圆点填充主题色，并微缩放以贴近小程序的脉冲感 */
.option input[type="radio"]:checked + span::before,
.option input[type="checkbox"]:checked + span::before{
  border-color: var(--brand);
  background: var(--brand);
  transform: translateY(-50%) scale(1.06);
}

/* 选中：白色小圆，精确居中到紫色圆的中心 */
.option input[type="radio"]:checked + span::after,
.option input[type="checkbox"]:checked + span::after{
  content:"";
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  transform: translate(-50%, -50%); /* ✅ 用 transform 居中，避免像素误差 */
  border-radius:50%;
  background:#fff;
}

/* —— 若你之前为多选设置过方形外观，务必移除/覆盖 —— */
.option.chk span::before{ border-radius:50%; }  /* 强制多选也用圆点 */

/* 文本输入 */
.text-input{
  width:100%;height:42px;padding:0 12px;border:1px solid #dcddee;border-radius:8px;background:#fff;font-size:15px; margin: 4px 0px 0;
}
.text-input.hide{display:none}

/* 省份下拉（相对卡片定位） */
.province-box{position:relative;margin-bottom:12px;}
.dropdown{
  position:absolute;left:0;right:0;top:46px;z-index:20;
  list-style:none;margin:4px 0 0;padding:6px;background:#fff;border:1px solid #e6e6f2;border-radius:8px;max-height:220px;overflow:auto;
  box-shadow:0 8px 20px rgba(10,10,30,.06);
}
.dropdown li{padding:8px 10px;border-radius:8px;cursor:pointer}
.dropdown li:hover{background:#f7f7ff}

.btnbar{
  position:sticky;bottom:0;z-index:5;background:#f6f7fb;display:flex;gap:10px;margin-top:10px;padding:8px 0;padding-bottom: calc(8px + env(safe-area-inset-bottom));

  background: transparent;   /* ✅ 完全透明，没有渐变/白底 */
  backdrop-filter: none;     /* ✅ 取消毛玻璃 */
  box-shadow: none;          /* ✅ 防止有阴影发白 */
  z-index:9999;
}
.btn{
  flex:1;height:46px;border-radius:30px;border:1px solid #fff;background:#223480;color:#fff;font-weight:700;font-size:16px;cursor:pointer
}
.btn.ghost{background:#fff;color:#223480;border:1px solid #223480}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* —— 触屏体验 —— */
html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
* { -webkit-touch-callout: none; } /* 长按不弹出菜单（可按需注释） */

/* 让滚动更像小程序的 iOS 弹性 */
.survey { -webkit-overflow-scrolling: touch; }

/* —— 标题 & 间距微调（接近小程序） —— */
.header .title { font-weight: 600; letter-spacing: .5px; }
.header .subtitle { margin-top: 4px; }

/* —— 选项列表的触摸按压反馈 —— */
.option:active span { background: rgba(0,0,0,.04); }
.option input[type="radio"]:focus-visible + span,
.option input[type="checkbox"]:focus-visible + span {
  outline: 2px solid rgba(0,0,0,.12);
  outline-offset: 2px;
}

/* —— 文本输入的获得焦点边框（小程序常见的浅色描边） —— */
.text-input:focus {
  border-color: var(--primary-light);
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,140,255,.08);
}

/* —— 省份下拉的手势和投影 —— */
.dropdown { will-change: transform; }
.dropdown li:active { background: #dde2ed; }

/* —— 主按钮按压反馈 —— */
.btn:active { transform: translateY(1px); }
/* ① 省份下拉：页面初载时先隐藏，且为空时不占位，避免“局部滚动条”一闪 */
.dropdown { display: none; }          /* 默认隐藏，JS 渲染时会设为 block */
.dropdown:empty { display: none; }    /* 没有候选项时彻底不占位 */

/* ② iOS 聚焦输入框会放大：把表单字体提到 ≥16px 取消缩放 */
.text-input,
input[type="text"], input[type="number"], textarea { font-size: 16px; }

/* —— WeApp 风格：圆点参数化 + 自适应居中 —— */
/* 放在文件最末尾，确保覆盖旧规则 */

.card .option span{
  position: relative;                 /* 确保伪元素定位基准 */
  /* 可调参数 */
  --dot-left: 8px;                   /* 圆点距左 */
  --dot-size: 24px;                  /* 外圈直径（含边框） */
  --dot-border: 1px;                 /* 外圈边框粗细 */
  --inner-size: 8px;                 /* 中心白点直径 */
  --gap: 8px;                        /* 圆点与文字的间距 */

  padding-left: calc(var(--dot-left) + var(--dot-size) + var(--gap));
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color .2s ease, background .2s ease;
}

/* 外圈（未选中） */
.card .option span::before{
  content: "";
  position: absolute;
  top: 50%;
  left: var(--dot-left);
  width: var(--dot-size);
  height: var(--dot-size);
  box-sizing: border-box;
  border: var(--dot-border) solid #aaa;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: all .2s ease;
  z-index: 0;
}

/* 中心白点（未选中隐藏） */
.card .option span::after{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--dot-left) + var(--dot-size) / 2);
  width: var(--inner-size);
  height: var(--inner-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1;
}

/* 选中态 */
.card .option input[type="radio"]:checked + span,
.card .option input[type="checkbox"]:checked + span{ border-color: var(--brand); background: transparent; }
.card .option input[type="radio"]:checked + span::before,
.card .option input[type="checkbox"]:checked + span::before{ border-color: var(--brand); background: var(--brand); transform: translateY(-50%) scale(1.06); }
.card .option input[type="radio"]:checked + span::after,
.card .option input[type="checkbox"]:checked + span::after{ opacity: 1; }

/* 让 body 能承载一个全屏的背景层 */
body{ position: relative; overflow-x: hidden; }

/* 背景层：固定的全屏渐变 */
body::before {
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgb(247, 247, 247) 0%, #2c45a2 100%);
}

/* 半圆层：随页面滚动，水平居中 */
body::after {
  content:"";
  position: absolute;
  top: var(--semi-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--semi-width, 300vw);
  height: var(--semi-height, 250vh);
  z-index: 0;                       /* 在内容下、背景上 */
  pointer-events: none;
  background: linear-gradient(180deg, #eef1f5 0%, #223480 50%, #223480 100%);
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

/* 底部纯色层：圆底以下填充 */
html::after {
  content:"";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height:40vh;
  background: #223480;
  z-index: -1;
  pointer-events: none;
}

/* 顶层：卡片本身（已是白底），正常叠在半圆之上 */
.card{ position: relative; z-index: 3; }
.title { position: relative; z-index: 3; }
.subtitle { position: relative; z-index: 3; }
.card{ overflow: visible; } /* 让卡片不要裁切内部的绝对定位元素 */

/* 下拉层级抬高，盖过下面的卡片 */
.dropdown{ z-index: 1000; }

/* 当卡片内有输入获得焦点时，把整张卡片抬高 */
.card:focus-within{ z-index: 100; }

html{ overflow-x: clip; }

/* 顶部提示：主标题与第一张卡片之间，居中 */
.errors{
  display: none;
  position: relative;
  z-index: 3;
  margin: 14px auto 12px;
  background: transparent;
  border: none;
  color: rgb(90,90,90);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;      
}

/* 错误态高亮 */
.card.error { transition: border-color .2s ease, box-shadow .2s ease; }
.card.error .q-title{ position: relative; display: flex; align-items: center; padding-top: 8px; color: #980203; }
.card.error .q-title::before{ background-color: #980203; }
.card.error .q-title::after{
  content: "";
  position: absolute; left: 0;
  top: calc(50% + var(--qtitle-shift));
  transform: translateY(-50%);
  width: 100%; height: 1.2em;
  background: rgba(232,91,116,0.12);
  border-radius: 3px;
  z-index: -2;
}

/* ================= 顶部横幅（IUPU） ================= */
:root{
  --mast-h: 88px;
  --mast-color: transparent;
  --badge-d: 80px;
  --badge-inner-scale: .92;
  --ring-gap: 8px;
  --ring1-w: 1px; --ring2-w: 1px; --ring3-w: 1px;
  --ring1-color: #980203;
  --ring2-color: #223480;
  --ring3-color: #223480;
}

.mast{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--mast-h);
  background: var(--mast-color);
  color: #fff;
  margin-bottom: calc(var(--badge-d) / 2 + 24px);
}

.mast-title{
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  font-size: 16px; line-height: 1.2; letter-spacing: .5px; text-align: center; color: #223480; padding: 0 16px; white-space: nowrap;
}

.mast-badge{
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 60%);
  width: var(--badge-d); height: var(--badge-d);
  border-radius: 50%; background: transparent; box-sizing: border-box;
  border: var(--ring1-w) solid var(--ring1-color);
}

.mast-badge::before{
  content: "";
  position: absolute; inset: calc(-1 * var(--ring-gap));
  border-radius: 50%; box-sizing: border-box;
  border: var(--ring2-w) solid var(--ring2-color);
}
/* .mast-badge::after{ ... } 可选第三圈 */

.mast-badge img{
  width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover;
  transform: scale(var(--badge-inner-scale)); transform-origin: center;
}

.mast-title { z-index: 20; }
.mast-badge { z-index: 10; }
.mast-badge::after { z-index: 0; }

@media (max-width: 768px){
  :root{ --mast-h: 88px; --badge-d: 70px; --ring-gap: 7px; }
}

/* ==================== 手机端覆盖样式 ==================== */
@media (max-width: 768px) {
  :root {
    --page-x: 12px;
    --semi-top: 170px;
    --semi-width: 400vw;
    --semi-height: 400vh;
    --content-offset: 80px;
  }
  body::after{
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--semi-width); height: var(--semi-height); z-index: 0; pointer-events: none;
    border-radius: 50% 50% 0 0 / 80% 80% 0 0;
    background: linear-gradient(#eef1f5 0%, #223480 45%, #223480 100%);
  }
  html::after { height: 50vh; }
  .card.error .q-title { color: #980203 !important; }
  .card.error .q-title::before { background-color: #980203 !important; }
  .text-input.error { border-color: #980203 !important; box-shadow: 0 0 0 3px rgba(232,91,116,0.12) !important; }
  .errors { margin-left: auto; margin-right: auto; width: fit-content; text-align: center; }
}

/* 默认（桌面端）隐藏换行符，让括号跟在同一行 */
.q8-br { display: none; }

/* 仅手机端显示换行，并调节两行的间距 */
@media (max-width: 480px) {
  .q8-br { display: block; margin-top: 0.32em; }
  .option--q8 span { line-height: 1.6; text-align: left; }
}

/* 仅问卷页：左右对调“清空 / 提交”按钮的顺序 */
body:not(.page--thanks) .btnbar { display: flex; }
body:not(.page--thanks) #resetBtn { order: 1; }
body:not(.page--thanks) #submitBtn { order: 2; }

/* ========== 感谢页：整页不滚动 ========== */
html, body.page--thanks { height:100%; }
body.page--thanks{ height:100dvh; overflow:hidden; }

/* ========== 感谢页纯净版样式 ========== */
body.page--thanks{
  --thanks-hero-h: 15dvh;
  --semi-top: 15dvh;
  --semi-width: 130vw;
  --semi-height: 70vh;

  --btn-w: clamp(220px, 40vw, 420px);
  --btn-h: 46px;
  --btn-radius: 30px;

  --badge-d: 80px;
  --badge-inner-scale: .92;
  --ring-gap: 8px;
  --ring1-w: 1px; --ring2-w: 1px; --ring3-w: 1px;
  --ring1-color: #980203; --ring2-color: #223480; --ring3-color: #223480;
  --iupu-gap: 40px;
}

/* （删除了无效的 :root:has(body.page--thanks) html::after 规则） */

/* 2. 感谢页底部渐变背景（反向） */
html:has(body.page--thanks)::after {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 50vh;
  background: linear-gradient(0deg,rgb(247, 247, 247) 0%, #2c45a2 100%) !important;
  z-index: -1;
  pointer-events: none;
}

/* 3. 顶部色块（hero）：内容垂直居中 */
.page--thanks .thanks-hero{
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important;
  background: #345ab0; height: var(--thanks-hero-h);
  position: relative; z-index: 2; gap: 8px; text-align: center;
}
.page--thanks .thanks-title{font-size:35px;color:#fff;}
.page--thanks .thanks-sub{ color:#FFF; }
.page--thanks .thanks-content{ margin-top: 350px; } /* 文字和按钮下移 */

/* 4. 半圆背景（与紫色块衔接） */
body.page--thanks::after{
  content: ""; position: absolute; top: var(--semi-top); left: 50%; transform: translateX(-50%);
  width: var(--semi-width); height: var(--semi-height); pointer-events: none; z-index: 0;
  background: linear-gradient(0deg, #223480 20%, #345ab0 100%);
  border-radius: 0 0 50% 50% / 0 0 80% 80%;
}

/* 5. 按钮 */
.page--thanks .thanks-hero .btn-hero{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--btn-w); height: var(--btn-h); line-height: var(--btn-h);
  padding: 0 18px; border-radius: var(--btn-radius); border: 1px;
  background: #fff; color: var(--brand); font-weight: 700; font-size: 16px; margin-top: 40px;
}

/* 6. 徽章与同心圆 */
.page--thanks .hero-badge{
  position: absolute; left: 50%;
  top: calc(var(--semi-top) + var(--semi-height));
  transform: translate(-50%, -50%);
  width: var(--badge-d); height: var(--badge-d);
  border-radius: 50%; box-sizing: border-box;
  border: var(--ring1-w) solid var(--ring1-color);
  z-index: 10;
}
.page--thanks .hero-badge::before{
  content: ""; position: absolute; inset: calc(-1 * var(--ring-gap));
  border-radius: 50%; border: var(--ring2-w) solid var(--ring2-color);
}
/* .page--thanks .hero-badge::after { ... } 第三圈可按需开启 */

.page--thanks .hero-badge img{
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; transform: scale(var(--badge-inner-scale));
}

/* 7. 徽章下方文字 */
.page--thanks .iupu-title{
  position: absolute; left: 50%;
  top: calc(var(--semi-top) + var(--semi-height) + var(--badge-d) / 2 + var(--iupu-gap));
  transform: translateX(-50%);
  color: var(--brand); letter-spacing: .5px; white-space: nowrap;
  display: block !important;
  z-index: 3; /* ← 修正笔误：原来是 index:3; */
}

@media (max-width: 768px){
  body.page--thanks{ --semi-width: 180vw; --semi-height: 60vh; }
}

.page--thanks .thanks-sub{ text-align: center; margin: 0 auto; }

/* Intro 页面：文字强制为白色 */
body.page--thanks.page--intro .thanks-hero .thanks-content .intro-text{
  color:#FFF !important; -webkit-text-fill-color:#FFF !important;
}
body.page--thanks.page--intro .thanks-hero .thanks-title{
  color:#FFF !important; -webkit-text-fill-color:#FFF !important;
}
body.page--thanks.page--intro .thanks-hero *{
  color:inherit !important; -webkit-text-fill-color:inherit !important;
}
body.page--thanks.page--intro .thanks-hero .thanks-content .intro-text{
  max-width:70%; margin:0 auto; text-align:center; line-height:1.6; font-size:15px;
}

/* 变量：想下移多少自己改 */
:root { --intro-shift: 80px; }
@media (max-width: 768px){ :root { --intro-shift: 20px; } }

/* 仅 intro 页面：下移“文字+按钮”的容器 */
body.page--thanks.page--intro .thanks-hero { position: relative; }
body.page--thanks.page--intro .thanks-hero .thanks-content{
  transform: translateY(var(--intro-shift)); will-change: transform;
}

/* Intro 页按钮字体颜色覆盖 */
body.page--thanks.page--intro .btn-hero{ color: #223480 !important; }

/* ===== 仅 index 页（不是感谢页）滚动时隐藏底部按钮栏 ===== */
body:not(.page--thanks) .btnbar{ transition: transform .25s ease; will-change: transform; }
body:not(.page--thanks) .btnbar.btnbar--hidden{ transform: translateY(110%); }

/* ===== intro 页也禁止上下滚动（thanks 已有）===== */
html, body.page--intro { height: 100%; }
body.page--intro { height: 100dvh; overflow: hidden; overscroll-behavior: none; }

/* ===== 三页都更强地禁止横向滚动/回弹（再保险）===== */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }

/* 保证 .hero-badge 在感谢页和介绍页位置一致（尺寸/层级与上面保持一致） */
.hero-badge{
  position: absolute; left: 50%;
  transform: translateX(-50%); width: 80px; height: 80px;
  border-radius: 50%; z-index: 10;
}
.hero-badge img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
/* 介绍页：徽章在顶部区块底部 */
body.page--intro .hero-badge{ bottom: -40px; }

/* 让页面高度跟随“动态视口”，利于地址栏折叠 */
@supports (height: 100dvh) { html, body { min-height: 100dvh; height: auto; } }