* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; max-width: 100%; background: #0b1f3a; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; overflow: hidden; overflow-x: hidden; overscroll-behavior-x: none; }

/* 加载页 */
.loading { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #1a2c66 0%, #0b1f3a 70%); transition: opacity .6s ease; overflow: hidden; }
.loading.hide { opacity: 0; pointer-events: none; }

/* 旋转光环加载器 */
.loader-ring { position: relative; width: 86px; height: 86px; margin-bottom: 26px; }
.loader-ring span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.loader-ring span:nth-child(1) { border-top-color: #6ee7ff; animation: spin 1.1s linear infinite; }
.loader-ring span:nth-child(2) { inset: 10px; border-right-color: #9b5cff; animation: spin 1.5s linear infinite reverse; }
.loader-ring span:nth-child(3) { inset: 20px; border-bottom-color: #ff5ce0; animation: spin 1.9s linear infinite; }
.loader-core { position: absolute; inset: 33px; border-radius: 50%; background: radial-gradient(circle, #ffe08a, #ffce3d); box-shadow: 0 0 18px #ffce3d, 0 0 36px rgba(255,206,61,.6); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(.8); opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

.loader-title { font-size: 17px; font-weight: 700; letter-spacing: 2px; background: linear-gradient(90deg, #6ee7ff, #ffce3d); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; animation: titleGlow 2s ease-in-out infinite; }
@keyframes titleGlow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.loader-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; margin-bottom: 10px; }
.loader-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #6ee7ff, #9b5cff, #ff5ce0); transition: width .3s ease; }
.loader-tip { font-size: 13px; color: rgba(255,255,255,.65); letter-spacing: 1px; }
.loader-tip em { font-style: normal; color: #ffce3d; }

/* 顶部滚动进度条 */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 40; background: linear-gradient(90deg, #6ee7ff, #9b5cff, #ff5ce0); box-shadow: 0 0 8px rgba(155,92,255,.8); transition: width .1s linear; }

/* 滑动容器：按真实比例完整展示，不裁切 */
.pager { height: 100%; width: 100%; max-width: 100%; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y proximity; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior-x: none; }
.pager.lock { overflow: hidden; }
.pager::-webkit-scrollbar { display: none; }
.page { scroll-snap-align: start; display: block; position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.page img { width: 100%; max-width: 100%; height: auto; display: block; }

/* 进场特效：淡入 + 上浮 + 放大 + 轻微模糊聚焦 */
.page { opacity: 0; transform: translateY(48px) scale(.97); filter: blur(6px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease; will-change: opacity, transform; }
.page.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
/* 图片本身再做一层轻微缩放，增强层次（视差感）*/
.page img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); transform: scale(1.06); }
.page.in img { transform: scale(1); }
/* 第7屏报名页不做图片缩放，避免影响表单对齐 */
.page-form img, .page-form.in img { transform: none !important; transition: none; }

/* 右侧进度圆点 */
.dots { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 9px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all .3s; }
.dots i.active { background: #9b5cff; box-shadow: 0 0 8px #9b5cff; transform: scale(1.4); }

/* 漂浮光点粒子层（覆盖在图片上方，纯装饰，不挡点击） */
.fx-canvas { position: fixed; inset: 0; z-index: 15; pointer-events: none; mix-blend-mode: screen; }

/* ===== 地址导航热区 ===== */
.page-nav1, .page-nav8 { position: relative; }
.nav-hot { position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 16; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.nav-hot:active { background: rgba(110,231,255,.18); }
/* 第1屏：底部地址文字处 */
.page-nav1 .nav-hot { left: 17%; width: 66%; top: 73.5%; height: 4.2%; }
/* 第8屏：地图图片处 */
.page-nav8 .nav-hot { left: 15%; width: 70%; top: 15%; height: 25%; }
/* 轻微呼吸提示，告诉用户可点 */
.nav-hot::after { content: "点击导航"; position: absolute; right: 0; bottom: 100%; font-size: 11px; color: #fff; background: rgba(123,47,247,.85); padding: 2px 8px; border-radius: 10px; white-space: nowrap; opacity: 0; transform: translateY(6px); animation: navHint 3s ease-in-out infinite; pointer-events: none; }
@keyframes navHint { 0%,100% { opacity: 0; transform: translateY(6px); } 30%,60% { opacity: 1; transform: translateY(0); } }

/* 导航选择弹层 */
.nav-sheet { position: fixed; inset: 0; z-index: 150; display: none; }
.nav-sheet.show { display: block; }
.nav-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.nav-card { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: slideUp .3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nav-venue { text-align: center; padding: 6px 4px 10px; border-bottom: 1px solid #eee; }
.nav-venue strong { display: block; font-size: 16px; color: #222; margin-bottom: 4px; }
.nav-venue span { font-size: 13px; color: #888; }
.nav-app { height: 50px; border: 0; border-radius: 12px; font-size: 16px; color: #fff; background: linear-gradient(135deg, #9b5cff, #7b2ff7); }
.nav-app:active { opacity: .85; }
.nav-copy { background: #f0ecff; color: #7b2ff7; }
.nav-cancel { height: 50px; border: 0; border-radius: 12px; font-size: 16px; background: #f4f4f4; color: #666; margin-top: 2px; }

/* ===== 第7屏：报名页（背景图已含全部标签和框，仅叠加透明控件）===== */
.page-form { position: relative; }
.page-form > img { width: 100%; height: auto; display: block; }
.form-hot { position: absolute; inset: 0; }

/* 透明热区控件：平时透明露出图里印好的字，填了才盖白底显示用户输入 */
.form-hot .hot {
  position: absolute;
  margin: 0;
  border: 0;
  background: transparent;
  color: #5b34c4;
  font-size: 3.8vw;
  font-weight: 700;
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .5px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 4.5vw;
  box-sizing: border-box;
  border-radius: 2.6vw;
  line-height: 1;
  transition: background .15s;
}
/* 隐藏自带占位符，让图里印好的"请输入/请选择"露出来 */
.form-hot .hot::placeholder { color: transparent; }
/* 关键：聚焦中 或 已填写 才盖白底，遮住图里的占位字并显示用户输入 */
.form-hot .hot:focus,
.form-hot .hot.is-filled { background: #ffffff; }

/* 下拉：未选时文字透明（露出图里"请选择"），选中后显示紫色值 */
.form-hot select.hot { color: transparent; }
.form-hot select.hot.is-filled { color: #5b34c4; }
.form-hot select.hot option { color: #333; font-weight: 500; }
.form-hot textarea.hot { padding: 2vw 4.5vw; resize: none; line-height: 1.5; font-weight: 600; font-size: 3.4vw; }
/* 下拉箭头：仅选中后(白底)显示，避免压住图里的"请选择" */
.form-hot select.hot.is-filled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237b2ff7' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4.5vw center;
  padding-right: 10vw;
}
/* 提交按钮：透明，仅作点击热区（图里已有"提交"字样） */
.form-hot button.hot { background: transparent; border-radius: 8vw; cursor: pointer; }
.form-hot button.hot:active { background: rgba(123,47,247,.15); }

/* 每个控件的位置（百分比，相对第7屏图片）——由对齐工具实测得出 */
.form-hot [data-box="name"]          { left:31.9%; width:49.5%; top:14.2%; height:4.4%; }
.form-hot [data-box="org"]           { left:38.6%; width:43.0%; top:20.1%; height:4.1%; }
.form-hot [data-box="role"]          { left:20.5%; width:59.1%; top:30.2%; height:3.4%; }
.form-hot [data-box="district"]      { left:20.7%; width:58.8%; top:39.1%; height:4.3%; }
.form-hot [data-box="districtOther"] { left:20.2%; width:59.3%; top:45.0%; height:3.9%; }
.form-hot [data-box="industry"]      { left:20.9%; width:58.6%; top:54.5%; height:4.1%; }
.form-hot [data-box="advice"]        { left:19.8%; width:59.8%; top:68.1%; height:3.9%; }
.form-hot [data-box="submit"]        { left:35.8%; width:29.1%; top:75.6%; height:4.1%; }

/* 调试模式：给 body 加 class="debug-boxes" 即可看到红框，方便对位 */
.debug-boxes .form-hot .hot { outline: 1px solid red; background: rgba(255,0,0,.12); }

/* 上滑提示 */
.scroll-hint { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 20; text-align: center; color: rgba(255,255,255,.85); animation: floatY 1.6s ease-in-out infinite; transition: opacity .4s; }
.scroll-hint.hide { opacity: 0; pointer-events: none; }
.scroll-hint .arrow { display: block; width: 14px; height: 14px; margin: 0 auto 4px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-135deg); }
.scroll-hint small { font-size: 12px; }
@keyframes floatY { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }

/* 音乐按钮 */
.music-btn { position: fixed; top: 16px; right: 16px; z-index: 30; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.music-btn.playing svg { animation: spin 3s linear infinite; }

/* 轻提示 */
.toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 200; background: rgba(0,0,0,.8); color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s; max-width: 80%; text-align: center; }
.toast.show { opacity: 1; }