/* ========== 安全连接遮罩（独立组件） ========== */
.mask-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.mask-overlay.show {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.mask-card {
  width: 420px; max-width: 100%; max-height: 90dvh; overflow: auto;
  background: #fff; color: #1e293b; border-radius: 20px;
  padding: 30px 28px 24px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.shield-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #4f6ef7, #7c3aed);
  border-radius: 14px; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(99,102,241,.35), 0 0 0 6px rgba(99,102,241,.1);
}
.shield-icon svg { width: 27px; height: 27px; fill: #fff; }
.channel-label { font-size: 11px; letter-spacing: 3px; color: #94a3b8; margin-bottom: 9px; }
.mask-title { font-size: 21px; font-weight: 750; margin-bottom: 9px; }
.mask-subtitle { font-size: 13px; color: #64748b; margin-bottom: 22px; line-height: 1.7; }
.ring-wrapper { position: relative; width: 82px; height: 82px; margin: 0 auto 20px; }
.ring-wrapper svg { transform: rotate(-90deg); width: 82px; height: 82px; }
.ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 6; }
.ring-progress {
  fill: none; stroke: url(#ringGradient); stroke-width: 6;
  stroke-linecap: round; transition: stroke-dashoffset .2s;
}
.ring-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 17px; font-weight: 750;
}
.linear-bar { height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.linear-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.steps { text-align: left; margin-bottom: 20px; padding-left: 8px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #64748b; margin-bottom: 10px; }
.step:last-child { margin-bottom: 0; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #cbd5e1; }
.step.done { color: #059669; }
.step.done .step-dot { background: #10b981; }
.step.active { color: #2563eb; }
.step.active .step-dot { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.15); }
.footer-tip { font-size: 12px; color: #64748b; margin-bottom: 18px; }
.mask-close-btn {
  display: none; width: 100%; padding: 13px; border: 0; border-radius: 11px;
  background: linear-gradient(100deg, #ffe28b, #ffb52f); color: #06214a;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.mask-close-btn.show { display: block; }

/* 手机端适配 */
@media only screen and (max-width: 480px) {
  .mask-card {
    padding: 24px 18px 18px;
  }
  .mask-title { font-size: 18px; }
}