* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #dfe4ee;
    display: flex; justify-content: center;
    color: #22304d;
    overflow: hidden;
  }
  #app {
    position: relative;
    width: 100%; max-width: 430px; height: 100%;
    max-height: 900px;
    background: #f5f8fc;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,.12);
  }
  .screen { position: absolute; inset: 0; display: none; flex-direction: column; }
  .screen.active { display: flex; }

  /* ===== 封面 ===== */
  .cover-top {
    background: #132962;
    padding: 12px 18px;
    display: flex; justify-content: flex-start;
    flex: none;
  }
  .cover-top img { height: 30px; }
  #coverSvg { width: 100%; height: 56%; display: block; }
  .cover-card {
    flex: 1;
    margin: -30px 20px 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 26px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .cover-card h1 { font-size: 24px; font-weight: 500; letter-spacing: 2px; color: #132962; }
  .cover-card .en { font-size: 12px; color: #8494b3; letter-spacing: 4px; margin-top: 6px; }
  .cover-card p { font-size: 13px; color: #5a6b8c; margin: 13px 0 20px; line-height: 1.7; }
  .btn {
    display: block; width: 100%;
    border: none; border-radius: 999px;
    background: #132962; color: #fff;
    font-size: 16px; font-weight: 500;
    padding: 13px 0; letter-spacing: 2px;
    cursor: pointer;
    font-family: inherit;
  }
  .btn:active { background: #0c1a3f; }
  .btn[disabled] { background: #c3cde0; cursor: default; }
  .cover-note { font-size: 11px; color: #9dabc4; margin-top: 12px; }

  /* 横屏体验弹窗 */
  #rotateModal { align-items: center; }
  #rotateModal .sheet { width: 78%; border-radius: 20px; text-align: center; padding-bottom: 26px; }
  #rotateModal .rot-phone { width: 54px; height: 54px; margin: 6px auto 0; display: block; animation: rotatePhone 2s ease-in-out infinite; }
  @keyframes rotatePhone { 0%, 15% { transform: rotate(0deg); } 55%, 100% { transform: rotate(90deg); } }

  /* 平面图舞台：整页全屏 + 旋转 90°（横握手机即可正看地图） */
  #mapWrap { position: absolute; inset: 0; overflow: hidden; background: #ffffff; }
  #mapStage {
    position: absolute; left: 50%; top: 50%;
    width: 100dvh;
    max-width: calc(100vw * 2033 / 955);
    aspect-ratio: 2033 / 955;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  #mapStage img { width: 100%; height: 100%; display: block; }
  #mapSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
  #mapSvg .cp { cursor: pointer; }

  /* 下一站点击提示：扩散圆环 + 肉色手指 */
  .tap-ring {
    fill: none; stroke: #132962; stroke-width: 3.5;
    opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: tapRipple 1.9s ease-out infinite;
  }
  .tap-ring.d2 { animation-delay: .95s; }
  @keyframes tapRipple {
    0%   { transform: scale(1);   opacity: .85; }
    100% { transform: scale(2.15); opacity: 0; }
  }
  .tap-hand { filter: drop-shadow(0 3px 5px rgba(19,41,98,.3)); }
  .handBob {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: tapTap 1.15s ease-in-out infinite;
  }
  @keyframes tapTap {
    0%, 100% { transform: translateY(-2px) scale(1); }
    45%      { transform: translateY(6px) scale(.97); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tap-ring, .handBob { animation: none; }
  }

  /* 站点对话气泡（横屏地图上，出现在站点正上方） */
  #cpBubble {
    position: absolute; left: 0; top: 0; z-index: 5;
    max-width: calc(var(--u, 1px) * 660);
    padding: calc(var(--u, 1px) * 26) calc(var(--u, 1px) * 30);
    border-radius: calc(var(--u, 1px) * 26);
    background: rgba(19, 41, 98, .74);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; text-align: left;
    box-shadow: 0 10px 30px rgba(19, 41, 98, .28);
    opacity: 0; visibility: hidden;
    transform: translateY(8px) scale(.93);
    transition: opacity .26s ease, transform .32s cubic-bezier(.34,1.35,.5,1), visibility .26s;
    pointer-events: none;
  }
  #cpBubble.show { opacity: 1; visibility: visible; transform: none; }
  #cpBubble .b-name { font-size: calc(var(--u, 1px) * 40); font-weight: 600; letter-spacing: .5px; }
  #cpBubble .b-sub { font-size: calc(var(--u, 1px) * 25); color: rgba(255,255,255,.62); margin-top: calc(var(--u, 1px) * 4); letter-spacing: .4px; }
  #cpBubble .b-desc { font-size: calc(var(--u, 1px) * 31); line-height: 1.62; margin-top: calc(var(--u, 1px) * 12); color: #fff; }
  #cpBubble::after {
    content: ''; position: absolute;
    left: var(--tail, 50%); bottom: calc(var(--u, 1px) * -16);
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: calc(var(--u, 1px) * 15) solid transparent;
    border-right: calc(var(--u, 1px) * 15) solid transparent;
    border-top: calc(var(--u, 1px) * 17) solid rgba(19, 41, 98, .74);
  }
  #cpBubble.below::after {
    bottom: auto; top: calc(var(--u, 1px) * -16);
    border-top: none;
    border-bottom: calc(var(--u, 1px) * 17) solid rgba(19, 41, 98, .74);
  }

  /* 横屏布局适配 */

  /* ===== 音乐按钮（封面一个 + 横屏地图页一个，状态同步） ===== */
  .music-btn {
    position: absolute; z-index: 30;
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; border: 2px solid #132962;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .music-btn svg { width: 30px; height: 30px; overflow: visible; }
  /* 封面页（深蓝横条上）：白色描边 + 白色图标 */
  #musicBtn { top: calc(6px + env(safe-area-inset-top)); right: 12px; border-color: rgba(255,255,255,.9); }
  #musicBtn #noteIcon { stroke: #ffffff; }
  /* 横屏地图页：右上角，浅底 + 蓝色描边 */
  #musicBtnMap {
    top: 12px; right: 12px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(19,41,98,.2);
  }
  #musicBtnMap svg { width: 34px; height: 34px; }
  #noteIcon2 { display: block; }
  .note-spin { animation: spin 2.4s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
  .music-btn.paused .note-spin { animation-play-state: paused; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* 横屏地图页右下角：立即报名 */
  #signupBtn {
    position: absolute; right: 14px; bottom: 14px; z-index: 30;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border: none; border-radius: 999px;
    background: #132962; color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(19,41,98,.32);
    cursor: pointer;
  }
  #signupBtn:active { background: #0c1a3f; }
  #signupBtn svg { width: 15px; height: 15px; }

  /* ===== 地图 ===== */
  #mapSvg { width: 100%; height: 100%; display: block; }

  /* ===== 立即报名页 ===== */
  #screenSignup { background: #f5f8fc; }
  .signup-top {
    flex: none;
    background: #132962;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: space-between;
  }
  .signup-top img { height: 26px; }
  #btnBackMap {
    background: none; border: 1.5px solid rgba(255,255,255,.55);
    color: #fff; font-family: inherit; font-size: 12px;
    border-radius: 999px; padding: 5px 12px; cursor: pointer;
  }
  .signup-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); }
  .signup-body h1 { font-size: 22px; font-weight: 600; color: #132962; letter-spacing: 1px; }
  .signup-body .signup-sub { font-size: 13px; color: #5a6b8c; line-height: 1.75; margin-top: 8px; }

  /* 弹窗 */
  .modal {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(10, 20, 45, .5);
    display: none; align-items: flex-end; justify-content: center;
  }
  .modal.show { display: flex; }
  .sheet {
    width: 100%;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
    animation: up .35s ease;
    max-height: 86%;
    overflow-y: auto;
  }
  @keyframes up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet .badge { font-size: 11px; color: #132962; background: #e7ecf7; border-radius: 999px; padding: 3px 10px; display: inline-block; }
  .sheet .head { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .sheet .head svg { width: 52px; height: 52px; flex: none; }
  .sheet h3 { font-size: 19px; font-weight: 500; color: #132962; }
  .sheet .sub { font-size: 12px; color: #8494b3; margin-top: 2px; }
  .sheet .desc { font-size: 14px; color: #46557a; line-height: 1.8; margin-top: 16px; }

  /* 表单 */
  .field { margin-top: 14px; }
  .field label { display: block; font-size: 13px; color: #46557a; margin-bottom: 6px; }
  .field input, .field select, .field textarea {
    width: 100%; border: 1px solid #d5dcec; border-radius: 10px;
    padding: 11px 12px; font-size: 15px; font-family: inherit;
    background: #f7f9fd; color: #22304d; outline: none;
    -webkit-appearance: none;
  }
  .field textarea { height: 76px; resize: none; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: #132962; }
  .field .err { font-size: 11px; color: #c04a3a; margin-top: 4px; display: none; }
  .field.invalid input { border-color: #c04a3a; }
  .field.invalid .err { display: block; }
  .form-row { display: flex; gap: 12px; }
  .form-row .field { flex: 1; }

  /* 成功页 */
  #successModal .sheet { text-align: center; }
  .suc-logo { height: 26px; display: block; margin: 0 auto 10px; }
  .success-icon { width: 84px; height: 84px; margin: 6px auto 4px; }
  #successModal h3 { margin-top: 6px; }
  #successModal p { font-size: 13px; color: #5a6b8c; line-height: 1.8; margin: 12px 0 20px; }

  /* 地图动画 */
  @keyframes pulse { 0% { r: 36; opacity: .9; } 100% { r: 52; opacity: 0; } }
  @keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
  @media (prefers-reduced-motion: no-preference) {
    #walkerBob { animation: bob .55s ease-in-out infinite alternate; }
  }

.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#fConsent label {font-size:12px;line-height:1.8;}
#fConsent input {width:auto;display:inline;margin-right:5px;}
#deploymentNotice {font-size:12px;line-height:1.8;margin-bottom:12px;color:#5a6b8c;}