/* ==================== 问号图标样式 ==================== */
        .help-tip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #c0c5cc;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            font-family: serif;
            /* 使用 serif 字体让问号更美观 */
            cursor: help;
            vertical-align: middle;
            margin: 0 2px;
            line-height: 1;
            user-select: none;
            -webkit-user-select: none;
            transition: background-color 0.2s ease, transform 0.2s ease;
            position: relative;
            /* 确保不会创建新的定位上下文影响tooltip */
            flex-shrink: 0;
            /* 防止在flex容器中被压缩 */;
        }

        .help-tip:hover {
            background: #8b9199;
            transform: scale(1.1);
        }

        .help-tip:active {
            transform: scale(0.95);
        }

        /* 不同尺寸的变体 */
        .help-tip.help-tip--sm {
            width: 16px;
            height: 16px;
            font-size: 10px;
        }

        .help-tip.help-tip--lg {
            width: 26px;
            height: 26px;
            font-size: 16px;
        }

        /* 不同颜色的变体 */
        .help-tip.help-tip--primary {
            background: #4a90d9;
        }
        .help-tip.help-tip--primary:hover {
            background: #357abd;
        }

        .help-tip.help-tip--warning {
            background: #f0a040;
        }
        .help-tip.help-tip--warning:hover {
            background: #d4882e;
        }

        .help-tip.help-tip--danger {
            background: #e05555;
        }
        .help-tip.help-tip--default {
            background: none;
            color: #8c8fa6;
        }
        .help-tip.help-tip--danger:hover {
            background: #c43d3d;
        }

        .help-tip.help-tip--success {
            background: #5cb878;
        }
        .help-tip.help-tip--success:hover {
            background: #449d62;
        }

        /* ==================== 全局 Tooltip 气泡样式 ==================== */
        .help-tooltip {
            position: fixed;
            z-index: 99999;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            background: #3a3f47;
            color: #f5f5f5;
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.55;
            max-width: 320px;
            min-width: 40px;
            text-align: center;
            word-wrap: break-word;
            word-break: break-word;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
            transition:
                opacity 0.2s ease,
                visibility 0.2s ease,
                transform 0.2s ease;
            transform: translateY(4px);
            /* 初始微偏移，出现时有上浮感 */;
        }

        .help-tooltip.help-tooltip--visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        /* Tooltip 箭头（使用伪元素） */
        .help-tooltip::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: #3a3f47;
            transform: rotate(45deg);
            /* 默认箭头位置由JS动态设置 */;
        }

        /* 深色主题的tooltip */
        .help-tooltip.help-tooltip--dark {
            background: #1e2126;
            color: #e8e8e8;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        .help-tooltip.help-tooltip--dark::after {
            background: #1e2126;
        }

        /* 浅色主题的tooltip */
        .help-tooltip.help-tooltip--light {
            background: #fff;
            color: #333;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
            border: 1px solid #e0e0e0;
        }
        .help-tooltip.help-tooltip--light::after {
            background: #fff;
            border: 1px solid #e0e0e0;
            /* 箭头也有边框时需要用更复杂的方式，这里简化处理 */;
        }

        /* 移动端tooltip适配 */
        @media (max-width: 600px) {
            .help-tooltip {
                max-width: 260px;
                font-size: 13px;
                padding: 8px 12px;
                border-radius: 6px;
            }
            .help-tooltip::after {
                width: 8px;
                height: 8px;
            }
        }


        /* ==================== 可选：有tooltip的普通元素样式 ==================== */
        /* 如果用户想给任意元素添加tooltip（不显示问号），可以使用此class */
        .has-help-tooltip {
            cursor: help;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: #999;
            text-underline-offset: 4px;
        }
        .has-help-tooltip:hover {
            text-decoration-color: #555;
        }