/* 固定在右下角的圆形按钮 */
.qr-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg,#4a90e2 0%, #6ec6ff 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    border: none;
}

.qr-fab img { width: 28px; height: 28px; pointer-events: none; }

/* 弹出二维码容器（不占满整个屏幕） */
.qr-popup {
    position: fixed;
    right: 20px;
    bottom: 88px; /* 在按钮上方一点 */
    width: 220px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9998;
    display: none; /* 默认隐藏 */
    user-select: none;
}

.qr-popup.visible { display: block; }

.qr-popup .title {
    font-size: 13px;
    margin-bottom: 8px;
    color: #333;
    text-align: center;
}

.qr-popup img.qr-image {
    display: block;
    margin: 0 auto;
    width: 196px;
    height: 196px;
}

/* 小的说明文字 */
.qr-popup .hint { font-size: 12px; color: #666; text-align: center; margin-top:8px }

/* 点击遮罩（透明） — 用于捕获“点击其他地方关闭” */
.qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: transparent; /* 透明但捕获点击 */
    display: none;
}
.qr-overlay.visible { display: block; }

/* 响应式：小屏时缩小二维码 */
@media (max-width: 420px) {
    .qr-popup { width: 170px; right: 14px; bottom: 76px; }
    .qr-popup img.qr-image { width: 150px; height: 150px; }
}