/* ============================================================
         Design Tokens (与 web/css/style.css 完全对齐)
    ============================================================ */
    :root {
      --bg:        #0a1628;
      --bg2:       #060f1d;
      --surface:   #0f1e36;
      --surface2:  #162845;
      --accent:    #00d4ff;
      --accent2:   #0091ff;
      --accent-glow: rgba(0, 212, 255, 0.25);
      --text:      #e2eaf4;
      --text-muted:#7a9ab8;
      --border:    rgba(0, 212, 255, 0.15);
      --border2:   rgba(0, 212, 255, 0.35);
      --warn:      #ff5e5e;
      --warn-glow: rgba(255, 94, 94, 0.35);
      --radius:    12px;
      --radius-lg: 20px;
      --font-display: 'Rajdhani', 'Noto Sans SC', sans-serif;
      --font-body:    'Noto Sans SC', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    html { -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    /* ============================================================
         Background grid + ambient glows (复用落地页)
    ============================================================ */
    .bg-grid {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 100%);
    }
    .bg-orb {
      position: fixed; pointer-events: none; z-index: 0; border-radius: 50%;
    }
    .bg-orb--cyan {
      top: -180px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 480px;
      background: radial-gradient(ellipse, rgba(0, 212, 255, 0.18) 0%, transparent 70%);
    }
    .bg-orb--blue {
      bottom: -200px; right: -150px;
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(0, 145, 255, 0.12) 0%, transparent 70%);
    }
    .bg-orb--blue2 {
      bottom: -100px; left: -150px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(0, 145, 255, 0.08) 0%, transparent 70%);
    }

    /* Floating coordinate rings (落地页 hero 同款) */
    .bg-rings {
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 700px; height: 700px;
      pointer-events: none; opacity: 0.05; z-index: 0;
    }
    .bg-rings circle { fill: none; stroke: var(--accent); stroke-width: 0.5; }

    /* ============================================================
         Navbar (compact)
    ============================================================ */
    .navbar {
      position: sticky; top: 0; z-index: 50;
      padding: 0 20px;
      background: rgba(6, 15, 29, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .navbar-inner {
      max-width: 1180px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 60px;
    }
    .nav-brand {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-display);
      font-size: 20px; font-weight: 700;
      letter-spacing: 0.5px;
    }
    .nav-brand-text { position: relative; }
    .nav-brand .trademark {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      position: absolute;
      top: -2px; right: -10px;
      opacity: 0.85;
    }
    .nav-brand-icon {
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 14px var(--accent-glow);
      flex-shrink: 0;
      overflow: hidden;
    }
    .nav-brand-icon img { width: 100%; height: 100%; object-fit: cover; }
    .back-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 13px; font-weight: 500;
      color: var(--text-muted);
      padding: 6px 12px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
    }
    .back-link:hover { color: var(--accent); background: rgba(0, 212, 255, 0.06); }
    .back-link svg { width: 14px; height: 14px; }

    /* ============================================================
         Page main
    ============================================================ */
    .page-main {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      padding: 32px 20px 48px;
      position: relative; z-index: 1;
    }
    .guide-container {
      width: 100%;
      max-width: 480px;
      position: relative;
    }

    /* ============================================================
         Guide Card (glassmorphism)
    ============================================================ */
    .guide-card {
      position: relative;
      background: linear-gradient(180deg, rgba(15, 30, 54, 0.85), rgba(15, 30, 54, 0.7));
      border: 1px solid var(--border2);
      border-radius: var(--radius-lg);
      padding: 36px 28px 32px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 212, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      animation: cardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .guide-card::before {
      content: '';
      position: absolute;
      top: 0; left: 24px; right: 24px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.6;
    }

    @keyframes cardEnter {
      0% { opacity: 0; transform: translateY(16px) scale(0.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Eyebrow (状态标签) */
    .state-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(0, 212, 255, 0.08);
      border: 1px solid var(--border2);
      border-radius: 100px;
      padding: 5px 12px;
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      animation: fadeIn 0.5s 0.1s ease both;
    }
    .state-eyebrow--warn {
      background: rgba(255, 94, 94, 0.08);
      border-color: rgba(255, 94, 94, 0.4);
      color: var(--warn);
    }
    .state-eyebrow--success {
      background: rgba(0, 212, 255, 0.12);
      border-color: var(--border2);
    }
    .state-eyebrow-dot {
      width: 6px; height: 6px;
      background: currentColor;
      border-radius: 50%;
      animation: pulse-dot 1.8s ease-in-out infinite;
    }

    .state-title {
      font-family: var(--font-display);
      font-size: 30px; font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
      color: var(--text);
      animation: fadeIn 0.5s 0.15s ease both;
    }
    .state-title-accent {
      background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .state-subtitle {
      font-size: 14px; font-weight: 300;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 28px;
      animation: fadeIn 0.5s 0.2s ease both;
    }

    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(6px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ============================================================
         Popup Illustration (WeChat/Alipay 引导示意)
    ============================================================ */
    .popup-illustration {
      position: relative;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), transparent);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 16px 20px;
      margin-bottom: 28px;
      overflow: hidden;
      animation: fadeIn 0.5s 0.25s ease both;
    }
    .popup-illustration::before {
      content: '';
      position: absolute;
      top: -50%; right: -30%;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 70%);
      pointer-events: none;
    }
    .popup-svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

    /* ============================================================
         Step List
    ============================================================ */
    .steps {
      display: flex; flex-direction: column;
      gap: 14px;
      margin-bottom: 24px;
    }
    .step {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 14px;
      background: rgba(15, 30, 54, 0.5);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: border-color 0.25s, transform 0.25s;
    }
    .step:hover { border-color: var(--border2); transform: translateX(2px); }
    .step:nth-child(1) { animation: stepIn 0.5s 0.3s ease both; }
    .step:nth-child(2) { animation: stepIn 0.5s 0.4s ease both; }
    .step:nth-child(3) { animation: stepIn 0.5s 0.5s ease both; }
    @keyframes stepIn {
      0% { opacity: 0; transform: translateX(-12px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    .step-num {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      color: var(--accent);
      line-height: 1;
      min-width: 32px;
      letter-spacing: 0.5px;
    }
    .step-text {
      font-size: 14px; font-weight: 400;
      color: var(--text);
      line-height: 1.5;
      flex: 1;
    }
    .step-text strong {
      color: var(--accent);
      font-weight: 600;
    }

    /* ============================================================
         Divider
    ============================================================ */
    .divider {
      display: flex; align-items: center;
      gap: 12px;
      margin: 22px 0 18px;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }
    .divider-text {
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 2px;
    }

    /* ============================================================
         Buttons
    ============================================================ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px;
      padding: 14px 24px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 15px; font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;
      width: 100%;
    }
    .btn::before {
      content: '';
      position: absolute; inset: 0;
      opacity: 0;
      transition: opacity 0.25s;
    }
    .btn:hover::before { opacity: 1; }
    .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 4px 24px rgba(0, 212, 255, 0.35);
      animation: fadeIn 0.5s 0.4s ease both;
    }
    .btn-primary::before {
      background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0, 212, 255, 0.5);
    }
    .btn-primary:active { transform: translateY(0); }

    .btn-outline {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border2);
      animation: fadeIn 0.5s 0.5s ease both;
    }
    .btn-outline::before {
      background: rgba(0, 212, 255, 0.06);
    }
    .btn-outline:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 212, 255, 0.12);
    }
    .btn-outline:active { transform: translateY(0); }

    .btn-ghost {
      background: rgba(15, 30, 54, 0.4);
      color: var(--text-muted);
      border: 1px solid var(--border);
      font-size: 14px;
      padding: 12px 20px;
      animation: fadeIn 0.5s 0.55s ease both;
    }
    .btn-ghost:hover { color: var(--accent); border-color: var(--border2); }

    /* ============================================================
         Copy hint + Manual link box
    ============================================================ */
    .copy-hint {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      margin-top: 12px;
      min-height: 18px;
      transition: color 0.2s;
    }
    .copy-hint.success { color: var(--accent); }
    .copy-hint.error { color: var(--warn); }

    .manual-link-box {
      display: none;
      margin-top: 16px;
      padding: 14px 12px;
      background: var(--bg2);
      border: 1px dashed var(--border2);
      border-radius: var(--radius);
      animation: fadeIn 0.3s ease both;
    }
    .manual-link-box.show { display: block; }
    .manual-link-label {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .manual-link-value {
      font-family: ui-monospace, 'SF Mono', Consolas, monospace;
      font-size: 13px;
      color: var(--accent);
      word-break: break-all;
      user-select: all;
      -webkit-user-select: all;
    }

    /* ============================================================
         Download animation (mobile state)
    ============================================================ */
    .download-stage {
      display: flex; flex-direction: column; align-items: center;
      padding: 12px 0 28px;
      animation: fadeIn 0.5s 0.2s ease both;
    }
    .download-icon {
      width: 88px; height: 88px;
      position: relative;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%);
      margin-bottom: 8px;
    }
    .download-icon::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 1px solid var(--border2);
      animation: ringPulse 2s ease-out infinite;
    }
    .download-icon::after {
      content: '';
      position: absolute; inset: 8px;
      border-radius: 50%;
      border: 1px solid var(--border);
      animation: ringPulse 2s 0.5s ease-out infinite;
    }
    @keyframes ringPulse {
      0% { transform: scale(0.8); opacity: 0.8; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    .download-icon svg {
      width: 40px; height: 40px;
      color: var(--accent);
      position: relative; z-index: 1;
      animation: arrowBounce 1.6s ease-in-out infinite;
    }
    @keyframes arrowBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }
    .download-progress-text {
      font-family: var(--font-display);
      font-size: 13px; font-weight: 600;
      letter-spacing: 2px;
      color: var(--accent);
      text-transform: uppercase;
      margin-top: 4px;
    }
    .download-progress-text::after {
      content: '...';
      display: inline-block;
      animation: dots 1.5s steps(4) infinite;
      width: 1.2em;
      text-align: left;
    }
    @keyframes dots {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
    }

    /* ============================================================
         QR frame (PC state)
    ============================================================ */
    .qr-stage {
      display: flex; flex-direction: column; align-items: center;
      padding: 8px 0 16px;
      animation: fadeIn 0.5s 0.25s ease both;
    }
    .qr-frame {
      position: relative;
      padding: 16px;
      background: #fff;
      border-radius: 16px;
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(0, 212, 255, 0.15);
      margin-bottom: 16px;
    }
    .qr-frame::before {
      content: '';
      position: absolute; inset: -2px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent));
      z-index: -1;
      opacity: 0.5;
    }
    .qr-image {
      width: 200px; height: 200px;
      display: block;
    }
    .qr-hint {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      letter-spacing: 0.5px;
      max-width: 320px;
      line-height: 1.6;
    }

    /* ============================================================
         iOS state (coming soon)
    ============================================================ */
    .ios-stage {
      display: flex; flex-direction: column; align-items: center;
      padding: 12px 0 24px;
      animation: fadeIn 0.5s 0.2s ease both;
    }
    .ios-badge {
      width: 96px; height: 96px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 145, 255, 0.05));
      border: 1px solid var(--border2);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 8px;
      position: relative;
    }
    .ios-badge svg {
      width: 48px; height: 48px;
      color: var(--accent);
    }
    .ios-badge::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 24px;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%);
      pointer-events: none;
    }
    .ios-text {
      font-family: var(--font-display);
      font-size: 13px; font-weight: 600;
      letter-spacing: 4px;
      color: var(--accent);
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ============================================================
         Footer
    ============================================================ */
    .page-footer {
      padding: 16px 20px 24px;
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      position: relative; z-index: 1;
    }
    .page-footer-link {
      color: var(--accent);
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .page-footer-link:hover { opacity: 1; }

    /* ============================================================
         Responsive tweaks
    ============================================================ */
    @media (max-width: 480px) {
      .page-main { padding: 20px 16px 32px; }
      .guide-card { padding: 28px 22px 26px; }
      .state-title { font-size: 26px; }
      .qr-image { width: 180px; height: 180px; }
    }
    @media (max-height: 700px) {
      .page-main { padding: 16px 20px 24px; }
      .guide-card { padding: 24px 24px 22px; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }