/* ============================================
           VisualFeedback 核心样式（支持全屏 & 局部两种模式）
           ============================================ */
           .rl-loading-overlay {
            /* 默认由 JS 动态设置为 fixed 或 absolute */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 99999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.35s;
            /* 防止 iframe 事件穿透（可选） */
            pointer-events: auto;
        }
        .rl-loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 主题 */
        .rl-loading-overlay.theme-light {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(8px);
        }
        .rl-loading-overlay.theme-dark {
            background: rgba(17, 24, 39, 0.92);
            backdrop-filter: blur(8px);
        }
        .rl-loading-overlay.theme-light .rl-loading-text { color: #111827; }
        .rl-loading-overlay.theme-dark .rl-loading-text { color: #f3f4f6; }
        .rl-loading-overlay.theme-light .rl-loading-subtext { color: #6b7280; }
        .rl-loading-overlay.theme-dark .rl-loading-subtext { color: #9ca3af; }

        /* 动画容器 */
        .rl-anim-box {
            width: 56px; height: 56px;
            position: relative;
            margin-bottom: 4px;
        }

        /* ---- 动画 1: SVG 圆环 ---- */
        .rl-spinner svg {
            width: 100%; height: 100%;
            animation: rl-rotate 1.4s linear infinite;
        }
        .rl-spinner circle {
            fill: none; stroke: #e5e7eb; stroke-width: 4;
        }
        .rl-spinner circle.progress {
            stroke-linecap: round;
            stroke-dasharray: 157; stroke-dashoffset: 39;
            animation: rl-dash 1.4s ease-in-out infinite;
        }
        .theme-dark .rl-spinner circle { stroke: #374151; }

        /* ---- 动画 2: 脉冲点 ---- */
        .rl-pulse {
            display: flex; gap: 8px;
            align-items: center; justify-content: center;
            height: 100%;
        }
        .rl-pulse .dot {
            width: 12px; height: 12px; border-radius: 50%;
            animation: rl-pulse-anim 1.4s ease-in-out infinite;
        }
        .rl-pulse .dot:nth-child(2) { animation-delay: 0.2s; }
        .rl-pulse .dot:nth-child(3) { animation-delay: 0.4s; }

        /* ---- 动画 3: 骨架屏 ---- */
        .rl-skeleton {
            width: 220px;
            display: flex; flex-direction: column; gap: 10px;
            justify-content: center; height: 100%;
        }
        .rl-skeleton .bone {
            height: 10px; border-radius: 5px;
            animation: rl-shimmer 1.6s infinite;
        }
        .rl-skeleton .bone:nth-child(1) { width: 100%; }
        .rl-skeleton .bone:nth-child(2) { width: 85%; animation-delay: 0.1s; }
        .rl-skeleton .bone:nth-child(3) { width: 70%; animation-delay: 0.2s; }
        .rl-skeleton .bone:nth-child(4) { width: 90%; animation-delay: 0.3s; }
        .theme-light .rl-skeleton .bone {
            background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
            background-size: 200% 100%;
        }
        .theme-dark .rl-skeleton .bone {
            background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
            background-size: 200% 100%;
        }

        /* ---- 动画 4: 波纹 ---- */
        .rl-ripple {
            position: relative; width: 100%; height: 100%;
        }
        .rl-ripple::before, .rl-ripple::after {
            content: ''; position: absolute; top: 50%; left: 50%;
            width: 100%; height: 100%; border-radius: 50%; border: 3px solid;
            transform: translate(-50%, -50%);
            animation: rl-ripple-anim 2s ease-out infinite;
            opacity: 0;
        }
        .rl-ripple::after { animation-delay: 1s; }

        /* ---- 动画 5: 方块翻转 ---- */
        .rl-cube {
            width: 36px; height: 36px; border-radius: 4px;
            animation: rl-cubeFlip 1.2s ease-in-out infinite;
            position: absolute; top: 50%; left: 50%;
            margin-top: -18px; margin-left: -18px;
        }

        /* 文字与进度 */
        .rl-loading-text { font-size: 14px; font-weight: 600; margin-top: 14px; letter-spacing: 0.3px; }
        .rl-loading-subtext { font-size: 12px; margin-top: 4px; }
        .rl-progress-box {
            width: 200px; margin-top: 14px;
        }
        .rl-progress-track {
            width: 100%; height: 4px;
            background: rgba(0,0,0,0.06); border-radius: 2px; overflow: hidden;
        }
        .theme-dark .rl-progress-track { background: rgba(255,255,255,0.08); }
        .rl-progress-fill {
            height: 100%; border-radius: 2px; width: 0%;
            transition: width 0.3s ease;
        }
        .rl-progress-label {
            margin-top: 6px; font-size: 12px; font-weight: 600;
            text-align: center; font-variant-numeric: tabular-nums;
        }
        .rl-cancel-btn {
            margin-top: 14px; padding: 6px 16px; border-radius: 6px;
            border: 1px solid; background: transparent; font-size: 12px;
            cursor: pointer; transition: all 0.2s;
        }
        .theme-light .rl-cancel-btn { border-color: #d1d5db; color: #6b7280; }
        .theme-light .rl-cancel-btn:hover { background: #f3f4f6; }
        .theme-dark .rl-cancel-btn { border-color: #4b5563; color: #9ca3af; }
        .theme-dark .rl-cancel-btn:hover { background: #374151; color: #fff; }

        /* 关键帧 */
        @keyframes rl-rotate { to { transform: rotate(360deg); } }
        @keyframes rl-dash {
            0% { stroke-dashoffset: 157; } 50% { stroke-dashoffset: 39; } 100% { stroke-dashoffset: 157; }
        }
        @keyframes rl-pulse-anim {
            0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
            40% { transform: scale(1); opacity: 1; }
        }
        @keyframes rl-shimmer {
            0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
        }
        @keyframes rl-ripple-anim {
            0% { width: 0; height: 0; opacity: 1; }
            100% { width: 100%; height: 100%; opacity: 0; }
        }
        @keyframes rl-cubeFlip {
            0% { transform: perspective(120px) rotateX(0) rotateY(0); }
            50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); }
            100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
        }