/* 活动H5 - 深蓝科技风，与主视觉海报呼应 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #030d24;
  color: #eaf2ff;
  line-height: 1.6;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(180deg, #07142e 0%, #0a1c3f 40%, #07142e 100%);
  min-height: 100vh;
  padding-bottom: 96px; /* 给悬浮按钮留位置 */
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
}

/* ① 海报：去边距、贴顶全宽 */
.poster { padding: 0; }
.poster img { width: 100%; display: block; }

/* 通用区块标题 */
section { padding: 28px 16px 8px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.head-left { display: flex; align-items: center; gap: 10px; }
.head-left .bar {
  width: 4px; height: 34px; border-radius: 2px;
  background: linear-gradient(180deg, #ffd37a, #f6a12c);
}
.head-left h2 { font-size: 20px; letter-spacing: 2px; color: #fff; line-height: 1.2; }
.head-left p { font-size: 11px; letter-spacing: 3px; color: #58c7ff; }
.head-right { font-size: 13px; color: #ffd37a; }

/* ③ 活动地址 */
.loc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #123061 0%, #0d2247 100%);
  border: 1px solid rgba(88, 199, 255, .35);
  box-shadow: 0 4px 16px rgba(3, 13, 36, .45);
}
.loc-card:active { transform: scale(.98); }
.loc-icon {
  flex: 0 0 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #58c7ff;
  background: rgba(88, 199, 255, .12);
  border: 1px solid rgba(88, 199, 255, .4);
}
.loc-info { flex: 1; min-width: 0; }
.loc-name { font-size: 16px; font-weight: 700; color: #fff; }
.loc-addr { font-size: 13px; color: #b9c9e8; margin-top: 2px; }
.loc-time { font-size: 12px; color: #ffd37a; margin-top: 4px; }
.loc-nav {
  flex: 0 0 auto;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #04264f;
  background: linear-gradient(90deg, #58c7ff, #37a6ff);
  box-shadow: 0 2px 10px rgba(55, 166, 255, .45);
}
.loc-tip { text-align: center; font-size: 12px; color: #6f83ab; margin-top: 10px; }

/* ④ 报名表单 */
.signup {
  margin: 28px 16px 8px;
  padding: 26px 20px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(246, 184, 60, .12), rgba(255, 255, 255, .04) 45%),
              rgba(255, 255, 255, .04);
  border: 1px solid rgba(246, 184, 60, .35);
}
.signup-title {
  text-align: center;
  font-size: 24px;
  letter-spacing: 3px;
  color: #ffd37a;
  text-shadow: 0 2px 12px rgba(246, 161, 44, .35);
}
.signup-sub { text-align: center; font-size: 12px; color: #9fb3d9; margin: 6px 0 20px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; color: #cfdcf5; margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px; /* 防止 iOS 自动放大 */
  color: #fff;
  background: rgba(3, 13, 36, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #61719a; }
.field input:focus {
  border-color: #58c7ff;
  box-shadow: 0 0 0 3px rgba(88, 199, 255, .18);
}

.submit-btn {
  width: 100%;
  margin-top: 6px;
  padding: 15px 0;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(90deg, #ff7a18 0%, #ffb735 100%);
  box-shadow: 0 6px 18px rgba(255, 122, 24, .4);
  cursor: pointer;
  transition: transform .15s, opacity .2s;
}
.submit-btn:active { transform: scale(.97); }
.submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.footer {
  padding: 26px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #4d5f85;
}

/* 悬浮按钮 */
.float-btn {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 99;
  max-width: calc(100vw - 32px);
  min-width: min(86vw, 460px);
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(90deg, #ff4d4f 0%, #ff9c31 100%);
  box-shadow: 0 6px 20px rgba(255, 77, 79, .5);
  cursor: pointer;
  animation: float-pulse 1.8s ease-in-out infinite;
}
@keyframes float-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* 轻提示 */
.toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 199;
  max-width: 82vw;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  color: #fff;
  background: rgba(10, 25, 55, .92);
  border: 1px solid rgba(88, 199, 255, .4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: rgba(255, 107, 107, .6); }
.toast.success { border-color: rgba(82, 196, 26, .6); }

/* 报名成功弹窗 */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(3, 10, 26, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mask-in .2s ease-out;
}
.modal-mask[hidden] { display: none; }
.modal-card {
  min-width: 264px;
  max-width: 82vw;
  padding: 34px 30px 30px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(165deg, #14315e 0%, #0b1f42 100%);
  border: 1px solid rgba(246, 184, 60, .5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  animation: card-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}
.modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #35c05f, #1ea34a);
  box-shadow: 0 6px 18px rgba(46, 176, 84, .45);
}
.modal-icon svg { width: 34px; height: 34px; }
.modal-card h3 { font-size: 22px; letter-spacing: 3px; color: #ffd37a; margin-bottom: 8px; }
.modal-card p { font-size: 14px; color: #cfdcf5; line-height: 1.7; }
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }