:root{
    --primary:#a855f7; --primary-rgb:168,85,247; --primary-dark:#9333ea; --primary-dark-rgb:147,51,234;
    --purple-border:rgba(168,85,247,.4);
    --btn-gradient:linear-gradient(135deg,#9333ea,#a855f7);
    --cta-color:#a855f7; --title-color:#a855f7; --desc-color:#c084fc;
    --bg-color:#1a1a1a; --bg-light:#222; --gold:#ffd700; --error-red:#ff4d4d;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg-color);color:#fff;overflow-x:hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  }
  @media (min-width:768px){ body{display:flex;justify-content:center} }

  /* ── 滚动背景 ── */
  .bg-section{position:fixed;top:0;left:0;width:100%;height:200vh;z-index:-1;overflow:hidden}
  .bg-strip{position:absolute;top:0;left:0;width:100%;height:200%;animation:30s linear infinite scrollBackground}
  .bg-img{width:100%;height:50%;background-image:url('/assets/bgv2.webp?v=5');background-size:cover;background-position:center;background-repeat:no-repeat}
  @keyframes scrollBackground{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
  @media (min-width:768px){
    .bg-section{left:50%;transform:translateX(-50%);width:400px}
  }
  .bg-section::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,5,35,.35),rgba(20,5,35,.75));pointer-events:none}

  /* ── 顶部:品牌 + 头像文案 ── */
  /* 顶部留出 18+ 徽标的高度,避免标题压在徽标下面 */
  .container{width:100%;min-height:100vh;padding:44px 15px 15px;display:flex;flex-direction:column;position:relative;z-index:1}
  @media (min-width:768px){ .container{width:400px} }
  .top{margin-top:10px;display:flex;flex-direction:column;gap:18px}
  .brand{
    color:var(--title-color);font-style:italic;font-size:42px;font-weight:900;text-align:center;
    text-shadow:0 4px 8px rgba(0,0,0,.7);letter-spacing:2px;padding-left:20px;
  }
  @media (min-width:768px){ .brand{font-size:48px} }
  .intro{display:flex;align-items:center;gap:14px;padding:0 8px}
  .avatar{width:60px;height:60px;border-radius:8px;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2)}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .intro-text{
    color:#fff;font-size:19px;font-weight:700;line-height:1.4;text-shadow:0 2px 4px rgba(0,0,0,.55);
    font-family:"Comic Sans MS","Comic Sans",cursive;
  }
  @media (min-width:768px){ .intro-text{font-size:16px} }

  /* ── 底部缩略图横滚 ── */
  .thumbnails{position:fixed;bottom:130px;left:0;width:100%;display:flex;gap:6px;z-index:5;overflow:hidden}
  @media (min-width:768px){ .thumbnails{left:50%;transform:translateX(-50%);width:400px} }
  .thumb-strip{display:flex;gap:6px;animation:20s linear infinite scrollThumbs}
  .thumb{width:120px;height:190px;border-radius:16px;object-fit:cover;flex-shrink:0;box-shadow:0 6px 16px rgba(0,0,0,.5)}
  @keyframes scrollThumbs{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

  /* ── 底部大按钮 ── */
  .cta{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;
    background:var(--btn-gradient);border:0;border-radius:30px;cursor:pointer;color:#fff;
    min-width:min(300px,86vw);height:88px;padding:0 20px;word-break:keep-all;white-space:nowrap;
    font-size:clamp(17px,4.9vw,23px);font-weight:900;letter-spacing:.5px;
    box-shadow:0 8px 25px rgba(168,85,247,.45);animation:2s infinite pulse;
    display:flex;align-items:center;justify-content:center;gap:9px;
  }
  @media (min-width:768px){ .cta{min-width:350px;height:80px;font-size:25px} }
  @keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}
  .cta svg{width:28px;height:28px;flex-shrink:0}

  /* ── 弹窗通用 ── */
  .overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;
    display:flex;align-items:center;justify-content:center;padding:18px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .overlay[hidden]{display:none}
  .sheet{
    width:100%;max-width:420px;border-radius:20px;padding:26px 22px;text-align:center;
    background:linear-gradient(135deg,rgba(30,10,60,.92),rgba(60,20,100,.86) 25%,rgba(147,51,234,.45) 60%,rgba(168,85,247,.32));
    border:2px solid var(--purple-border);box-shadow:0 24px 60px rgba(0,0,0,.6);
    animation:pop .28s cubic-bezier(.18,.89,.32,1.28);
  }
  @keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
  .sheet h2{font-size:21px;font-weight:800;margin-bottom:6px}
  .sheet .sub{color:#c9b6e8;font-size:13.5px;margin-bottom:16px;line-height:1.45}

  /* ── 手机号输入(WhatsApp Web 式:国家选择一行 + 区号前缀内嵌) ── */
  .cc-select{
    width:100%;height:52px;margin:14px 0 0;border-radius:12px;border:1.5px solid rgba(var(--primary-rgb),.45);
    background:#2a1740;color:#fff;font-size:15px;padding:0 13px;cursor:pointer;text-align:left;
    display:flex;align-items:center;gap:9px;font-weight:600;
  }
  .cc-select:hover{filter:brightness(1.1)}
  .cc-select .fl{font-size:17px;line-height:1}
  .cc-select .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e9def8}
  .cc-select .cd{color:#c084fc;font-weight:700}
  .cc-select .caret{color:#b39dd8;font-size:11px}
  .phone-field{
    display:flex;align-items:center;height:52px;margin:8px 0 6px;border-radius:12px;
    border:1.5px solid rgba(var(--primary-rgb),.45);background:rgba(255,255,255,.06);overflow:hidden;
  }
  .phone-field:focus-within{border-color:rgb(var(--primary-rgb));box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16)}
  .cc-prefix{padding:0 13px;color:#fff;font-size:16px;font-weight:700;white-space:nowrap}
  .phone-sep{width:1px;height:24px;background:rgba(var(--primary-rgb),.4);flex-shrink:0}
  .cc-panel{
    margin-top:10px;border:1.5px solid rgba(var(--primary-rgb),.45);border-radius:14px;
    background:rgba(20,8,40,.96);overflow:hidden;text-align:left;
  }
  .cc-search{
    width:100%;height:44px;border:0;border-bottom:1px solid rgba(var(--primary-rgb),.3);
    background:transparent;color:#fff;font-size:15px;padding:0 14px;outline:none;
  }
  .cc-search::placeholder{color:#9d86bd}
  .cc-list{max-height:250px;overflow-y:auto}
  .cc-item{
    display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:14.5px;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .cc-item:hover,.cc-item.active{background:rgba(var(--primary-rgb),.18)}
  .cc-item .fl{font-size:17px;width:22px;text-align:center}
  .cc-item .nm{flex:1;color:#e9def8}
  .cc-item .cd{color:var(--desc-color);font-weight:700}
  .cc-empty{padding:14px;color:#9d86bd;font-size:13.5px;text-align:center}
  .phone-input{
    flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font-size:17px;padding:0 14px;outline:none;
  }
  .phone-input::placeholder{color:#9d86bd}
  .phone-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(168,85,247,.22)}
  .primary{
    width:100%;height:54px;margin-top:14px;border:0;border-radius:30px;cursor:pointer;
    background:var(--btn-gradient);color:#fff;font-size:17px;font-weight:800;letter-spacing:.6px;
    box-shadow:0 6px 20px rgba(var(--primary-dark-rgb),.45);
  }
  .primary:disabled{opacity:.55;cursor:not-allowed}
  .primary:hover{filter:brightness(1.06)}
  .ghost{background:transparent;border:1.5px solid var(--purple-border);color:#d9c8f3;
         width:100%;height:48px;margin-top:10px;border-radius:30px;font-size:15px;font-weight:700;cursor:pointer}
  .link{display:inline-block;margin-top:14px;color:var(--desc-color);font-size:13.5px;
        text-decoration:underline;cursor:pointer;background:none;border:0}

  /* ── 配对码 ── */
  .code-row{display:flex;justify-content:center;gap:5px;margin:18px 0 6px;flex-wrap:nowrap}
  .code-char{
    width:clamp(26px,7.6vw,36px);height:clamp(40px,11vw,48px);border:1.5px solid var(--primary);border-radius:8px;
    background:rgba(var(--primary-rgb),.14);display:flex;align-items:center;justify-content:center;
    font-size:clamp(15px,4.4vw,21px);font-weight:800;color:#fff;text-shadow:0 0 6px var(--primary);
    font-family:ui-monospace,Menlo,monospace;flex-shrink:0;
  }
  .code-char.dash{width:10px;border:0;background:transparent;color:#b39dd8;font-size:16px}
  @media (max-width:400px){ .sheet{padding:22px 16px} }
  .hint{color:#c9b6e8;font-size:13px;line-height:1.5;margin-top:12px}
  .status{color:#e9d5ff;font-size:13.5px;margin-top:12px;min-height:18px}
  .status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);
        margin-right:6px;animation:blink 1.4s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
  .tip-img{width:100%;max-width:220px;border-radius:12px;margin:14px auto 0;display:block;border:1px solid rgba(255,255,255,.12)}
  /* 教程页(第二版):号码条 + 绿色闪烁引导按钮 */
  #howto-modal .sheet{max-height:calc(100vh - 36px);overflow-y:auto}
  .num-row{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:16px;
        font-weight:800;letter-spacing:.6px;font-family:ui-monospace,Menlo,monospace}
  .num-row .num-lbl{color:#b39dd8;font-size:12px;font-weight:600;letter-spacing:0;font-family:inherit}
  .openwa{display:block;width:100%;margin-top:16px;padding:15px 12px;border-radius:30px;text-align:center;
        text-decoration:none;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;
        font-weight:800;font-size:14.5px;line-height:1.35;box-shadow:0 8px 24px rgba(37,211,102,.45);
        animation:wapulse 1.15s ease-in-out infinite}
  @keyframes wapulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(37,211,102,.4);opacity:1}
        50%{transform:scale(1.04);box-shadow:0 12px 34px rgba(37,211,102,.85);opacity:.92}}

  /* ── 成功 ── */
  .ok-circle{
    width:78px;height:78px;border-radius:50%;margin:16px auto 12px;
    background:linear-gradient(135deg,#28a745,#20c997);display:flex;align-items:center;justify-content:center;
    font-size:38px;color:#fff;box-shadow:0 8px 24px rgba(40,167,69,.45);
  }

  /* ── 二维码备用 ── */
  .qrbox{width:250px;height:250px;margin:14px auto 0;background:#fff;border-radius:14px;
         display:flex;align-items:center;justify-content:center;overflow:hidden}
  .qrbox img{width:100%;height:100%;object-fit:contain}

  /* ── toast ── */
  #toast{
    position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-220px);opacity:0;
    background:rgba(255,77,77,.96);color:#fff;padding:13px 22px;border-radius:16px;font-size:14px;
    font-weight:600;text-align:center;width:90vw;max-width:420px;z-index:3000;transition:.4s;
    box-shadow:0 6px 18px rgba(0,0,0,.35)
  }
  #toast.show{transform:translateX(-50%) translateY(0);opacity:1}

  /* 音乐开关(可选) */
  .mute{position:fixed;top:16px;right:16px;z-index:20;width:38px;height:38px;border-radius:50%;
        background:rgba(255,255,255,.14);border:0;color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(4px)}