/* _content/LEAFBlazorApp25/Components/Account/Pages/ManageUsers.razor.rz.scp.css */
/* ==========全局布局和容器样式========= */
/* 主容器：设置整个用户管理页面的最大宽度、居中对齐和基础内边距 */
.admin-container[b-t7932reki9] {
    max-width: 1800px; /* 限制页面最大宽度为1800px，避免在大屏幕上过宽 */
    margin: 0 auto; /* 水平居中显示 */
    padding: 0 10px; /* 左右内边距10px，避免内容贴边 */
}

/*#region === 卡片组件样式 =============*/
/* 用户管理和角色管理区域的主要卡片容器样式 */
.card[b-t7932reki9] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* 轻微阴影效果，增加层次感 */
    border: 1px solid rgba(0, 0, 0, 0.125); /* 细边框定义卡片边界 */
    margin-bottom: 1.5rem; /* 卡片之间的底部间距，避免拥挤 */
}

/* 卡片头部工具栏：用户管理和角色管理卡片的标题区域样式 */
.card-header-toolbar[b-t7932reki9] {
    padding: 0.2rem 1.0rem; /* 紧凑的内边距，上下0.2rem，左右1.0rem */
}

/* 头部内容容器：卡片标题区域的Flex布局容器 */
.header-content[b-t7932reki9] {
    display: flex; /* 使用Flex布局实现水平排列 */
    justify-content: space-between; /* 左右两端对齐：标题在左，操作区在右 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: nowrap; /* 禁止换行，保持单行布局 */
    gap: 1rem; /* 子元素之间的间距为1rem */
}

/* 标题区域：包含图标、标题文本和用户/角色数量徽章 */
.header-title[b-t7932reki9] {
    display: flex; /* Flex布局使图标和文本水平排列 */
    align-items: center; /* 垂直居中对齐 */
    font-size: 1.25rem; /* 标题字体大小 */
    font-weight: 500; /* 中等字重，突出标题重要性 */
}

/* 操作按钮区域：包含搜索框、过滤器和操作按钮组 */
.header-actions[b-t7932reki9] {
    display: flex; /* Flex布局实现水平排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 0.8rem; /* 操作元素之间的间距 */
    flex-wrap: nowrap; /* 禁止换行 */
}
/*#endregion */

/*#region === 搜索框组件样式 =============*/
/* 用户搜索和角色搜索输入框容器 */
.search-container[b-t7932reki9] {
    min-width: 200px; /* 设置最小宽度，避免搜索框过窄 */
}

/* 搜索组：包含搜索图标和输入框的组合样式 */
.search-group .input-group-text[b-t7932reki9] {
    background-color: rgba(255,255,255,0.1); /* 半透明白色背景，与主色调协调 */
    border-color: rgba(255,255,255,0.2); /* 半透明边框 */
    color: rgba(255,255,255,0.8); /* 半透明白色图标 */
}

/* 搜索输入框：用户输入搜索关键词的表单控件 */
.search-group .form-control[b-t7932reki9] {
    background-color: #f0f0f0; /* 浅灰色背景，与白色区分 */
    border-color: #cccccc; /* 灰色边框 */
    color: #000000; /* 黑色文字，确保可读性 */
    font-weight: normal; /* 正常字重，不加粗 */
    font-size: 13px; /* 小字号，紧凑显示 */
}

    /* 搜索框占位符文字样式 */
    .search-group .form-control[b-t7932reki9]::placeholder {
        color: #000000; /* 黑色占位符文字 */
    }
/*#endregion */

/*#region === 徽章和按钮组样式 =============*/
/* 徽章：用于显示数量、状态等小标签 */
.badge[b-t7932reki9] {
    font-size: 0.75rem; /* 小字号，适合标签显示 */
    font-weight: 500; /* 中等字重，突出显示 */
}

/* 操作按钮组：用户表格中的编辑、删除等按钮容器 */
.btn-group-sm > .btn[b-t7932reki9] {
    padding: 0.1rem 0.3rem 0.1rem 0.1rem; /* 紧凑的内边距，小尺寸按钮 */
    font-size: 12px;
}

/* 操作按钮容器：用户管理和角色管理头部的按钮组 */
.action-buttons[b-t7932reki9] {
    display: flex; /* Flex布局实现按钮水平排列 */
    gap: 0.25rem; /* 按钮之间的微小间距 */
    height: 25px; /* 固定高度，保持整齐 */
}

    /* 操作按钮内部样式：调整按钮内边距实现紧凑布局 */
    .action-buttons .btn[b-t7932reki9] {
        padding-top: 0.1rem; /* 顶部微小内边距 */
        padding-bottom: 0.1rem; /* 底部微小内边距 */
        padding-left: 0.3rem; /* 左侧内边距 */
        padding-right: 0.3rem; /* 右侧内边距 */
    }
/*#endregion */

/*#region === 表格样式 =============*/
/* 表格表头：用户表格和角色表格的标题行 */
.table th[b-t7932reki9] {
    border-top: none; /* 去除上边框，更简洁 */
    font-weight: 600; /* 加粗字体，突出表头 */
    font-size: 0.875rem; /* 小字号表头 */
    text-transform: uppercase; /* 字母大写，规范显示 */
    letter-spacing: 0.5px; /* 字间距，提高可读性 */
    background-color: #343a40; /* 深灰色背景，突出表头 */
    color: white; /* 白色文字，对比明显 */
    text-align: center; /* 居中对齐 */
    border: 2px solid white; /* 白色边框分隔 */
    border-radius: 0.375rem; /* 圆角边框 */
}

/* 分页组件：用户表格底部的分页控件 */
.pagination[b-t7932reki9] {
    font-size: 0.875rem; /* 小字号分页信息 */
}

/* 邮箱单元格：包含邮箱地址和验证状态的特殊单元格 */
.email-cell[b-t7932reki9] {
    display: flex; /* Flex布局使邮箱和图标水平排列 */
    align-items: center; /* 垂直居中对齐 */
}

/* 文字截断：用于长文本（如ID、标记）的截断显示 */
.truncate[b-t7932reki9] {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 120px; /* 最大宽度限制 */
}


/*#endregion */

/*#region === 模态框基础样式 =============*/
/* 模态框背景遮罩：打开模态框时的半透明背景 */
.modal-backdrop[b-t7932reki9] {
    opacity: 0.5; /* 50%不透明度，突出模态框内容 */
}

/* 模态框内容区域：所有模态框的主要容器 */
.modal-content[b-t7932reki9] {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* 显著阴影，突出模态框 */
    border: none; /* 去除默认边框 */
}

/* 角色列表：用户角色管理模态框中的角色选择列表 */
.role-list .form-check[b-t7932reki9] {
    transition: background-color 0.15s ease-in-out; /* 背景色过渡动画 */
}

    /* 角色列表项悬停效果 */
    .role-list .form-check:hover[b-t7932reki9] {
        background-color: rgba(0, 123, 255, 0.05); /* 浅蓝色背景，交互反馈 */
    }

/* 复选框选中状态：表单中复选框的选中样式 */
.form-check-input:checked[b-t7932reki9] {
    background-color: #0d6efd; /* 选中时蓝色背景 */
    border-color: #0d6efd; /* 选中时蓝色边框 */
}
/*#endregion */

/*#region === 用户角色管理模态框样式 =============*/
/* 添加角色区域：用户角色管理中的角色添加部分 */
.add-role-section[b-t7932reki9] {
    background-color: #f8f9fa; /* 浅灰色背景，区分区域 */
    border: 1px solid #e9ecef !important; /* 细边框定义区域边界 */
}

/* 角色标签容器：显示用户当前角色的标签区域 */
.role-tags-container[b-t7932reki9] {
    display: flex; /* Flex布局实现标签排列 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 0.5rem; /* 标签之间的间距 */
    max-height: 200px; /* 最大高度，避免过长 */
    overflow-y: auto; /* 垂直滚动，内容过多时滚动 */
    padding: 0.5rem; /* 内边距 */
    border: 1px solid #e9ecef; /* 边框定义区域 */
    border-radius: 0.375rem; /* 圆角边框 */
    background-color: #fff; /* 白色背景 */
}

/* 单个角色标签：每个角色的显示标签 */
.role-tag[b-t7932reki9] {
    display: inline-flex; /* 内联Flex布局 */
    align-items: center; /* 垂直居中对齐 */
    background-color: #e7f3ff; /* 浅蓝色背景 */
    border: 1px solid #b3d9ff; /* 蓝色边框 */
    border-radius: 1rem; /* 圆形边框，标签样式 */
    padding: 0.25rem 0.5rem; /* 内边距 */
    font-size: 0.875rem; /* 小字号 */
    transition: all 0.2s ease; /* 所有属性的过渡动画 */
}

    /* 角色标签悬停效果 */
    .role-tag:hover[b-t7932reki9] {
        background-color: #d1e7ff; /* 悬停时更深的蓝色背景 */
        border-color: #80bdff; /* 悬停时更深的蓝色边框 */
    }

/* 角色名称：标签中的角色名文本 */
.role-name[b-t7932reki9] {
    margin-right: 0.25rem; /* 右侧间距，与删除按钮分隔 */
    font-weight: 500; /* 中等字重 */
    color: #0066cc; /* 蓝色文字 */
}

/* 移除角色按钮：角色标签中的删除按钮 */
.btn-remove-role[b-t7932reki9] {
    display: inline-flex; /* 内联Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 1.25rem; /* 固定宽度 */
    height: 1.25rem; /* 固定高度，圆形按钮 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: #ff6b6b; /* 红色背景，表示删除操作 */
    color: white; /* 白色图标 */
    font-size: 0.75rem; /* 小字号图标 */
    cursor: pointer; /* 手型光标，可点击提示 */
    transition: all 0.2s ease; /* 过渡动画 */
    padding: 0; /* 无内边距 */
}

    /* 移除角色按钮悬停效果 */
    .btn-remove-role:hover[b-t7932reki9] {
        background-color: #ff5252; /* 悬停时更深的红色 */
        transform: scale(1.1); /* 轻微放大，交互反馈 */
    }

/* 角色统计信息：显示用户角色数量的统计区域 */
.role-stats[b-t7932reki9] {
    font-size: 0.875rem; /* 小字号统计信息 */
}

/* 空状态样式：无数据时的提示信息 */
.text-center.text-muted[b-t7932reki9] {
    color: #6c757d !important; /* 灰色文字，表示无内容状态 */
}
/*#endregion */

/*#region === 用户类型过滤样式 =============*/
/* 用户类型过滤：用户管理头部的类型筛选组件 */
.user-type-filter[b-t7932reki9] {
    min-width: 250px; /* 最小宽度，避免过窄 */
}

    .user-type-filter .input-group[b-t7932reki9] {
        height: 31px; /* 固定高度，与搜索框保持一致 */
    }

    /* 用户类型下拉选择框 */
    .user-type-filter .form-select[b-t7932reki9] {
        font-size: 13px; /* 小字号 */
        background-color: #f0f0f0; /* 浅灰色背景 */
        border-color: #cccccc; /* 灰色边框 */
        color: #000000; /* 黑色文字 */
        font-weight: normal; /* 正常字重 */
    }

    /* 用户类型过滤的输入组文本（图标） */
    .user-type-filter .input-group-text[b-t7932reki9] {
        background-color: rgba(255,255,255,0.1); /* 半透明白色背景 */
        border-color: rgba(255,255,255,0.2); /* 半透明边框 */
        color: rgba(255,255,255,0.8); /* 半透明白色图标 */
        font-size: 13px; /* 小字号图标 */
    }

/* 过滤状态显示：当前过滤条件的提示信息 */
.filter-status[b-t7932reki9] {
    border-top: 1px solid rgba(255,255,255,0.2); /* 顶部边框分隔 */
    padding-top: 0.5rem; /* 顶部内边距 */
}
/*#endregion */

/*#region === 用户管理模态框优化样式 =============*/
/* 中等尺寸模态框：用户添加/编辑模态框的紧凑尺寸 */
.modal-md[b-t7932reki9] {
    max-width: 500px; /* 限制最大宽度，紧凑布局 */
}

/* 模态框内容区域优化 */
.modal-content[b-t7932reki9] {
    border: none; /* 去除边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
    border-radius: 8px; /* 圆角边框 */
    background: #fff; /* 白色背景 */
}

/* 模态框头部：标题和关闭按钮区域 */
.modal-header[b-t7932reki9] {
    border-bottom: 1px solid #e9ecef; /* 底部边框分隔 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
    padding: 0.75rem 1rem; /* 紧凑内边距 */
}

.modal-title[b-t7932reki9] {
    font-size: 1.1rem; /* 标题字号 */
    font-weight: 600; /* 加粗标题 */
    color: #2c3e50; /* 深蓝色标题 */
}

/* 小尺寸关闭按钮 */
.btn-close-sm[b-t7932reki9] {
    padding: 0.25rem; /* 小内边距 */
    margin: -0.25rem -0.25rem -0.25rem auto; /* 负边距调整位置 */
}

/* 模态框主体：表单内容区域 */
.modal-body[b-t7932reki9] {
    padding: 1rem; /* 内边距 */
    background: #fafbfc; /* 浅灰色背景 */
    max-height: 65vh; /* 最大高度限制 */
    overflow-y: auto; /* 垂直滚动 */
}

    .modal-body .row.g-2[b-t7932reki9] {
        margin-bottom: 0.5rem; /* 行底部间距 */
    }

    /* 小尺寸表单控件：紧凑的输入框和下拉菜单 */
    .modal-body .form-control-sm[b-t7932reki9],
    .modal-body .form-select-sm[b-t7932reki9] {
        font-size: 0.8rem; /* 小字号 */
        padding: 0.3rem 0.5rem; /* 紧凑内边距 */
        height: calc(1.8em + 0.5rem); /* 计算高度，保持比例 */
        border: 1px solid #d1d9e0; /* 边框颜色 */
        border-radius: 4px; /* 圆角 */
        background: #fff; /* 白色背景 */
        transition: all 0.2s ease; /* 过渡动画 */
    }

        /* 表单控件焦点状态 */
        .modal-body .form-control-sm:focus[b-t7932reki9],
        .modal-body .form-select-sm:focus[b-t7932reki9] {
            border-color: #4a90e2; /* 焦点时蓝色边框 */
            box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15); /* 蓝色阴影 */
            background: #fff; /* 保持白色背景 */
        }

    /* 小尺寸表单标签 */
    .modal-body .form-label.small[b-t7932reki9] {
        font-size: 0.75rem; /* 小字号标签 */
        font-weight: 600; /* 加粗标签 */
        color: #5a6c7d; /* 深灰色文字 */
        margin-bottom: 0.3rem; /* 底部间距 */
        text-transform: none; /* 无文字转换 */
        letter-spacing: 0; /* 无字间距 */
    }

        /* 特殊标签样式：带颜色的标签 */
        .modal-body .form-label.small.text-muted.fw-bold[b-t7932reki9] {
            color: #4a5568 !important; /* 深灰色强调 */
        }

    /* 开关控件样式 */
    .modal-body .form-check.form-switch[b-t7932reki9] {
        padding-left: 2.8em; /* 左侧内边距，为开关留空间 */
        margin-bottom: 0.4rem; /* 底部间距 */
        min-height: 1.8em; /* 最小高度 */
    }

    .modal-body .form-check-input[b-t7932reki9] {
        width: 2.2em; /* 开关宽度 */
        height: 1.2em; /* 开关高度 */
        margin-left: -2.8em; /* 负边距调整位置 */
        margin-top: 0.1em; /* 顶部边距微调 */
        background-color: #e9ecef; /* 默认灰色背景 */
        border: 1px solid #adb5bd; /* 边框 */
    }

        /* 开关选中状态 */
        .modal-body .form-check-input:checked[b-t7932reki9] {
            background-color: #4a90e2; /* 选中时蓝色背景 */
            border-color: #4a90e2; /* 选中时蓝色边框 */
        }

    /* 开关标签文字 */
    .modal-body .form-check-label.small[b-t7932reki9] {
        font-size: 0.75rem; /* 小字号 */
        color: #6b7280; /* 灰色文字 */
        font-weight: 500; /* 中等字重 */
        margin-top: 0.1em; /* 顶部边距微调 */
    }

/* 模态框底部：取消和保存按钮区域 */
.modal-footer[b-t7932reki9] {
    border-top: 1px solid #e9ecef; /* 顶部边框分隔 */
    background: #f8f9fa; /* 浅灰色背景 */
    padding: 0.75rem 1rem; /* 内边距 */
}

    .modal-footer .btn-sm[b-t7932reki9] {
        padding: 0.4rem 1rem; /* 按钮内边距 */
        font-size: 0.8rem; /* 小字号按钮 */
        font-weight: 500; /* 中等字重 */
        border-radius: 4px; /* 圆角按钮 */
    }

    /* 取消按钮样式 */
    .modal-footer .btn-outline-secondary[b-t7932reki9] {
        border-color: #d1d9e0; /* 边框颜色 */
        color: #6b7280; /* 灰色文字 */
    }

        /* 取消按钮悬停效果 */
        .modal-footer .btn-outline-secondary:hover[b-t7932reki9] {
            background-color: #f8f9fa; /* 悬停背景色 */
            border-color: #adb5bd; /* 悬停边框色 */
            color: #495057; /* 悬停文字色 */
        }

/* 表单说明文字 */
.modal-body .form-text.small[b-t7932reki9] {
    font-size: 0.7rem; /* 极小字号说明 */
    margin-top: 0.2rem; /* 顶部间距 */
    color: #8a94a6; /* 浅灰色文字 */
    line-height: 1.3; /* 行高 */
}

/* 错误信息样式 */
.modal-body .text-danger.small[b-t7932reki9] {
    font-size: 0.7rem; /* 小字号错误信息 */
    margin-top: 0.2rem; /* 顶部间距 */
    font-weight: 500; /* 中等字重，突出错误 */
}

/* 验证摘要信息 */
.modal-body .validation-summary small[b-t7932reki9] {
    font-size: 0.75rem; /* 小字号 */
    background: #fee; /* 浅红色背景，错误提示 */
    border: 1px solid #f5c6cb; /* 红色边框 */
    border-radius: 4px; /* 圆角 */
    padding: 0.5rem; /* 内边距 */
    margin-bottom: 1rem; /* 底部间距 */
}

/* 表单控件悬停效果 */
.modal-body .form-control-sm:hover[b-t7932reki9],
.modal-body .form-select-sm:hover[b-t7932reki9] {
    border-color: #a0aec0; /* 悬停时边框颜色 */
    background: #fff; /* 保持白色背景 */
}

/* 数字输入框特殊样式 */
.modal-body input[type="number"].form-control-sm[b-t7932reki9] {
    text-align: center; /* 数字居中对齐 */
}

/* 密码输入框特殊样式 */
.modal-body input[type="password"].form-control-sm[b-t7932reki9] {
    letter-spacing: 0.05em; /* 字间距，密码字符更清晰 */
}

/* 模态框滚动条美化 */
.modal-body[b-t7932reki9]::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}

.modal-body[b-t7932reki9]::-webkit-scrollbar-track {
    background: #f1f3f4; /* 滚动条轨道背景 */
    border-radius: 3px; /* 圆角轨道 */
}

.modal-body[b-t7932reki9]::-webkit-scrollbar-thumb {
    background: #c1c9d2; /* 滚动条滑块颜色 */
    border-radius: 3px; /* 圆角滑块 */
}

    .modal-body[b-t7932reki9]::-webkit-scrollbar-thumb:hover {
        background: #a8b0b9; /* 悬停时滑块颜色 */
    }

/* 模态框背景优化 */
.modal-backdrop[b-t7932reki9] {
    background-color: rgba(0, 0, 0, 0.4); /* 深色半透明背景 */
    opacity: 1; /* 完全显示 */
}

/* 表单控件焦点状态美化 */
.modal-body .form-control-sm:focus[b-t7932reki9],
.modal-body .form-select-sm:focus[b-t7932reki9] {
    background-color: #fff; /* 保持白色背景 */
    border-color: #4a90e2; /* 蓝色边框 */
    outline: 0; /* 去除默认轮廓 */
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15); /* 蓝色阴影 */
}

/* 紧凑表单辅助类 */
.compact-form .mb-2[b-t7932reki9] {
    margin-bottom: 0.5rem !important; /* 小间距 */
}

.compact-form .mb-3[b-t7932reki9] {
    margin-bottom: 0.75rem !important; /* 中等间距 */
}
/*#endregion */

/*#region === 响应式设计 =============*/
/* 中等屏幕尺寸适配（平板：768px及以下） */
@media (max-width: 768px) {
    .header-content[b-t7932reki9] {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .header-actions[b-t7932reki9] {
        width: 100%; /* 全宽显示 */
        justify-content: space-between; /* 两端对齐 */
    }

    .search-container[b-t7932reki9] {
        min-width: 200px; /* 调整最小宽度 */
        flex-grow: 1; /* 允许扩展填充空间 */
    }

    .table-responsive[b-t7932reki9] {
        font-size: 0.875rem; /* 调整表格字体大小 */
    }

    .btn-group-sm > .btn[b-t7932reki9] {
        padding: 0.2rem 0.4rem; /* 调整按钮内边距 */
    }
}

/* 小屏幕尺寸适配（手机：576px及以下） */
@media (max-width: 576px) {
    .header-actions[b-t7932reki9] {
        flex-direction: column; /* 垂直排列操作元素 */
        gap: 0.5rem; /* 设置间距 */
    }

    .search-container[b-t7932reki9] {
        width: 100%; /* 全宽搜索框 */
    }

    .action-buttons[b-t7932reki9] {
        width: 100%; /* 全宽按钮组 */
        justify-content: space-between; /* 两端对齐按钮 */
    }

    /* 模态框在小屏幕上的适配 */
    .modal-md[b-t7932reki9] {
        margin: 0.5rem; /* 边距 */
        max-width: calc(100vw - 1rem); /* 计算最大宽度，留出边距 */
    }

    .modal-body[b-t7932reki9] {
        padding: 0.75rem; /* 减少内边距 */
    }

        .modal-body .row.g-2 > [class*="col-"][b-t7932reki9] {
            margin-bottom: 0.5rem; /* 列底部间距 */
        }

    .modal-header[b-t7932reki9],
    .modal-footer[b-t7932reki9] {
        padding: 0.5rem 0.75rem; /* 减少头部和底部内边距 */
    }

    .modal-body .form-check.form-switch[b-t7932reki9] {
        padding-left: 2.5em; /* 调整开关控件内边距 */
    }

    /* 用户类型过滤在小屏幕上的适配 */
    .user-type-filter .input-group[b-t7932reki9] {
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .user-type-filter .form-select[b-t7932reki9] {
        font-size: 12px; /* 更小字号 */
    }

    /* 用户角色管理模态框在小屏幕上的适配 */
    .add-role-section .row[b-t7932reki9] {
        flex-direction: column; /* 垂直排列 */
    }

    .add-role-section .col-md-8[b-t7932reki9],
    .add-role-section .col-md-4[b-t7932reki9] {
        width: 100%; /* 全宽列 */
    }

    .role-tags-container[b-t7932reki9] {
        max-height: 150px; /* 减少最大高度 */
    }

    .role-tag[b-t7932reki9] {
        font-size: 0.8rem; /* 更小字号标签 */
        padding: 0.2rem 0.4rem; /* 调整内边距 */
    }
}

/* 大屏幕适配（1200px及以下） */
@media (max-width: 1200px) {
    .header-actions[b-t7932reki9] {
        gap: 0.5rem; /* 减少操作元素间距 */
    }

    .user-type-filter[b-t7932reki9] {
        min-width: 200px; /* 调整最小宽度 */
    }
}

/* 中等大屏幕适配（992px及以下） */
@media (max-width: 992px) {
    .header-actions[b-t7932reki9] {
        flex-wrap: wrap; /* 允许换行 */
    }

    .search-container[b-t7932reki9],
    .user-type-filter[b-t7932reki9] {
        min-width: 180px; /* 调整最小宽度 */
        flex-grow: 1; /* 允许扩展 */
    }

    .action-buttons[b-t7932reki9] {
        width: 100%; /* 全宽按钮组 */
        justify-content: flex-end; /* 右对齐 */
        margin-top: 0.5rem; /* 顶部间距 */
    }
}

/* 平板横屏适配（768px及以下） */
@media (max-width: 768px) {
    .header-content[b-t7932reki9] {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .header-actions[b-t7932reki9] {
        width: 100%; /* 全宽操作区域 */
        flex-direction: column; /* 垂直排列 */
        gap: 0.5rem; /* 设置间距 */
    }

    .search-container[b-t7932reki9],
    .user-type-filter[b-t7932reki9] {
        width: 100%; /* 全宽搜索和过滤区域 */
        min-width: auto; /* 自动最小宽度 */
    }

    .action-buttons[b-t7932reki9] {
        justify-content: space-between; /* 两端对齐按钮 */
    }

    .user-type-filter .input-group[b-t7932reki9] {
        height: auto; /* 自动高度 */
    }
}
/*#endregion */
/* _content/LEAFBlazorApp25/Components/Account/Pages/ManageUsers1022.razor.rz.scp.css */
/* ==========全局布局和容器样式========= */
/* 主容器：设置整个用户管理页面的最大宽度、居中对齐和基础内边距 */
.admin-container[b-5zqlh4ug9e] {
    max-width: 1800px; /* 限制页面最大宽度为1800px，避免在大屏幕上过宽 */
    margin: 0 auto; /* 水平居中显示 */
    padding: 0 10px; /* 左右内边距10px，避免内容贴边 */
}

/*#region === 卡片组件样式 =============*/
/* 用户管理和角色管理区域的主要卡片容器样式 */
.card[b-5zqlh4ug9e] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* 轻微阴影效果，增加层次感 */
    border: 1px solid rgba(0, 0, 0, 0.125); /* 细边框定义卡片边界 */
    margin-bottom: 1.5rem; /* 卡片之间的底部间距，避免拥挤 */
}

/* 卡片头部工具栏：用户管理和角色管理卡片的标题区域样式 */
.card-header-toolbar[b-5zqlh4ug9e] {
    padding: 0.2rem 1.0rem; /* 紧凑的内边距，上下0.2rem，左右1.0rem */
}

/* 头部内容容器：卡片标题区域的Flex布局容器 */
.header-content[b-5zqlh4ug9e] {
    display: flex; /* 使用Flex布局实现水平排列 */
    justify-content: space-between; /* 左右两端对齐：标题在左，操作区在右 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: nowrap; /* 禁止换行，保持单行布局 */
    gap: 1rem; /* 子元素之间的间距为1rem */
}

/* 标题区域：包含图标、标题文本和用户/角色数量徽章 */
.header-title[b-5zqlh4ug9e] {
    display: flex; /* Flex布局使图标和文本水平排列 */
    align-items: center; /* 垂直居中对齐 */
    font-size: 1.25rem; /* 标题字体大小 */
    font-weight: 500; /* 中等字重，突出标题重要性 */
}

/* 操作按钮区域：包含搜索框、过滤器和操作按钮组 */
.header-actions[b-5zqlh4ug9e] {
    display: flex; /* Flex布局实现水平排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 0.8rem; /* 操作元素之间的间距 */
    flex-wrap: nowrap; /* 禁止换行 */
}
/*#endregion */

/*#region === 搜索框组件样式 =============*/
/* 用户搜索和角色搜索输入框容器 */
.search-container[b-5zqlh4ug9e] {
    min-width: 200px; /* 设置最小宽度，避免搜索框过窄 */
}

/* 搜索组：包含搜索图标和输入框的组合样式 */
.search-group .input-group-text[b-5zqlh4ug9e] {
    background-color: rgba(255,255,255,0.1); /* 半透明白色背景，与主色调协调 */
    border-color: rgba(255,255,255,0.2); /* 半透明边框 */
    color: rgba(255,255,255,0.8); /* 半透明白色图标 */
}

/* 搜索输入框：用户输入搜索关键词的表单控件 */
.search-group .form-control[b-5zqlh4ug9e] {
    background-color: #f0f0f0; /* 浅灰色背景，与白色区分 */
    border-color: #cccccc; /* 灰色边框 */
    color: #000000; /* 黑色文字，确保可读性 */
    font-weight: normal; /* 正常字重，不加粗 */
    font-size: 13px; /* 小字号，紧凑显示 */
}

    /* 搜索框占位符文字样式 */
    .search-group .form-control[b-5zqlh4ug9e]::placeholder {
        color: #000000; /* 黑色占位符文字 */
    }
/*#endregion */

/*#region === 徽章和按钮组样式 =============*/
/* 徽章：用于显示数量、状态等小标签 */
.badge[b-5zqlh4ug9e] {
    font-size: 0.75rem; /* 小字号，适合标签显示 */
    font-weight: 500; /* 中等字重，突出显示 */
}

/* 操作按钮组：用户表格中的编辑、删除等按钮容器 */
.btn-group-sm > .btn[b-5zqlh4ug9e] {
    padding: 0.1rem 0.3rem 0.1rem 0.1rem; /* 紧凑的内边距，小尺寸按钮 */
    font-size: 12px;
}

/* 操作按钮容器：用户管理和角色管理头部的按钮组 */
.action-buttons[b-5zqlh4ug9e] {
    display: flex; /* Flex布局实现按钮水平排列 */
    gap: 0.25rem; /* 按钮之间的微小间距 */
    height: 25px; /* 固定高度，保持整齐 */
}

    /* 操作按钮内部样式：调整按钮内边距实现紧凑布局 */
    .action-buttons .btn[b-5zqlh4ug9e] {
        padding-top: 0.1rem; /* 顶部微小内边距 */
        padding-bottom: 0.1rem; /* 底部微小内边距 */
        padding-left: 0.3rem; /* 左侧内边距 */
        padding-right: 0.3rem; /* 右侧内边距 */
    }
/*#endregion */

/*#region === 表格样式 =============*/
/* 表格表头：用户表格和角色表格的标题行 */
.table th[b-5zqlh4ug9e] {
    border-top: none; /* 去除上边框，更简洁 */
    font-weight: 600; /* 加粗字体，突出表头 */
    font-size: 0.875rem; /* 小字号表头 */
    text-transform: uppercase; /* 字母大写，规范显示 */
    letter-spacing: 0.5px; /* 字间距，提高可读性 */
    background-color: #343a40; /* 深灰色背景，突出表头 */
    color: white; /* 白色文字，对比明显 */
    text-align: center; /* 居中对齐 */
    border: 2px solid white; /* 白色边框分隔 */
    border-radius: 0.375rem; /* 圆角边框 */
}

/* 分页组件：用户表格底部的分页控件 */
.pagination[b-5zqlh4ug9e] {
    font-size: 0.875rem; /* 小字号分页信息 */
}

/* 邮箱单元格：包含邮箱地址和验证状态的特殊单元格 */
.email-cell[b-5zqlh4ug9e] {
    display: flex; /* Flex布局使邮箱和图标水平排列 */
    align-items: center; /* 垂直居中对齐 */
}

/* 文字截断：用于长文本（如ID、标记）的截断显示 */
.truncate[b-5zqlh4ug9e] {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 120px; /* 最大宽度限制 */
}


/*#endregion */

/*#region === 模态框基础样式 =============*/
/* 模态框背景遮罩：打开模态框时的半透明背景 */
.modal-backdrop[b-5zqlh4ug9e] {
    opacity: 0.5; /* 50%不透明度，突出模态框内容 */
}

/* 模态框内容区域：所有模态框的主要容器 */
.modal-content[b-5zqlh4ug9e] {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* 显著阴影，突出模态框 */
    border: none; /* 去除默认边框 */
}

/* 角色列表：用户角色管理模态框中的角色选择列表 */
.role-list .form-check[b-5zqlh4ug9e] {
    transition: background-color 0.15s ease-in-out; /* 背景色过渡动画 */
}

    /* 角色列表项悬停效果 */
    .role-list .form-check:hover[b-5zqlh4ug9e] {
        background-color: rgba(0, 123, 255, 0.05); /* 浅蓝色背景，交互反馈 */
    }

/* 复选框选中状态：表单中复选框的选中样式 */
.form-check-input:checked[b-5zqlh4ug9e] {
    background-color: #0d6efd; /* 选中时蓝色背景 */
    border-color: #0d6efd; /* 选中时蓝色边框 */
}
/*#endregion */

/*#region === 用户角色管理模态框样式 =============*/
/* 添加角色区域：用户角色管理中的角色添加部分 */
.add-role-section[b-5zqlh4ug9e] {
    background-color: #f8f9fa; /* 浅灰色背景，区分区域 */
    border: 1px solid #e9ecef !important; /* 细边框定义区域边界 */
}

/* 角色标签容器：显示用户当前角色的标签区域 */
.role-tags-container[b-5zqlh4ug9e] {
    display: flex; /* Flex布局实现标签排列 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 0.5rem; /* 标签之间的间距 */
    max-height: 200px; /* 最大高度，避免过长 */
    overflow-y: auto; /* 垂直滚动，内容过多时滚动 */
    padding: 0.5rem; /* 内边距 */
    border: 1px solid #e9ecef; /* 边框定义区域 */
    border-radius: 0.375rem; /* 圆角边框 */
    background-color: #fff; /* 白色背景 */
}

/* 单个角色标签：每个角色的显示标签 */
.role-tag[b-5zqlh4ug9e] {
    display: inline-flex; /* 内联Flex布局 */
    align-items: center; /* 垂直居中对齐 */
    background-color: #e7f3ff; /* 浅蓝色背景 */
    border: 1px solid #b3d9ff; /* 蓝色边框 */
    border-radius: 1rem; /* 圆形边框，标签样式 */
    padding: 0.25rem 0.5rem; /* 内边距 */
    font-size: 0.875rem; /* 小字号 */
    transition: all 0.2s ease; /* 所有属性的过渡动画 */
}

    /* 角色标签悬停效果 */
    .role-tag:hover[b-5zqlh4ug9e] {
        background-color: #d1e7ff; /* 悬停时更深的蓝色背景 */
        border-color: #80bdff; /* 悬停时更深的蓝色边框 */
    }

/* 角色名称：标签中的角色名文本 */
.role-name[b-5zqlh4ug9e] {
    margin-right: 0.25rem; /* 右侧间距，与删除按钮分隔 */
    font-weight: 500; /* 中等字重 */
    color: #0066cc; /* 蓝色文字 */
}

/* 移除角色按钮：角色标签中的删除按钮 */
.btn-remove-role[b-5zqlh4ug9e] {
    display: inline-flex; /* 内联Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 1.25rem; /* 固定宽度 */
    height: 1.25rem; /* 固定高度，圆形按钮 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: #ff6b6b; /* 红色背景，表示删除操作 */
    color: white; /* 白色图标 */
    font-size: 0.75rem; /* 小字号图标 */
    cursor: pointer; /* 手型光标，可点击提示 */
    transition: all 0.2s ease; /* 过渡动画 */
    padding: 0; /* 无内边距 */
}

    /* 移除角色按钮悬停效果 */
    .btn-remove-role:hover[b-5zqlh4ug9e] {
        background-color: #ff5252; /* 悬停时更深的红色 */
        transform: scale(1.1); /* 轻微放大，交互反馈 */
    }

/* 角色统计信息：显示用户角色数量的统计区域 */
.role-stats[b-5zqlh4ug9e] {
    font-size: 0.875rem; /* 小字号统计信息 */
}

/* 空状态样式：无数据时的提示信息 */
.text-center.text-muted[b-5zqlh4ug9e] {
    color: #6c757d !important; /* 灰色文字，表示无内容状态 */
}
/*#endregion */

/*#region === 用户类型过滤样式 =============*/
/* 用户类型过滤：用户管理头部的类型筛选组件 */
.user-type-filter[b-5zqlh4ug9e] {
    min-width: 250px; /* 最小宽度，避免过窄 */
}

    .user-type-filter .input-group[b-5zqlh4ug9e] {
        height: 31px; /* 固定高度，与搜索框保持一致 */
    }

    /* 用户类型下拉选择框 */
    .user-type-filter .form-select[b-5zqlh4ug9e] {
        font-size: 13px; /* 小字号 */
        background-color: #f0f0f0; /* 浅灰色背景 */
        border-color: #cccccc; /* 灰色边框 */
        color: #000000; /* 黑色文字 */
        font-weight: normal; /* 正常字重 */
    }

    /* 用户类型过滤的输入组文本（图标） */
    .user-type-filter .input-group-text[b-5zqlh4ug9e] {
        background-color: rgba(255,255,255,0.1); /* 半透明白色背景 */
        border-color: rgba(255,255,255,0.2); /* 半透明边框 */
        color: rgba(255,255,255,0.8); /* 半透明白色图标 */
        font-size: 13px; /* 小字号图标 */
    }

/* 过滤状态显示：当前过滤条件的提示信息 */
.filter-status[b-5zqlh4ug9e] {
    border-top: 1px solid rgba(255,255,255,0.2); /* 顶部边框分隔 */
    padding-top: 0.5rem; /* 顶部内边距 */
}
/*#endregion */

/*#region === 用户管理模态框优化样式 =============*/
/* 中等尺寸模态框：用户添加/编辑模态框的紧凑尺寸 */
.modal-md[b-5zqlh4ug9e] {
    max-width: 500px; /* 限制最大宽度，紧凑布局 */
}

/* 模态框内容区域优化 */
.modal-content[b-5zqlh4ug9e] {
    border: none; /* 去除边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
    border-radius: 8px; /* 圆角边框 */
    background: #fff; /* 白色背景 */
}

/* 模态框头部：标题和关闭按钮区域 */
.modal-header[b-5zqlh4ug9e] {
    border-bottom: 1px solid #e9ecef; /* 底部边框分隔 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
    padding: 0.75rem 1rem; /* 紧凑内边距 */
}

.modal-title[b-5zqlh4ug9e] {
    font-size: 1.1rem; /* 标题字号 */
    font-weight: 600; /* 加粗标题 */
    color: #2c3e50; /* 深蓝色标题 */
}

/* 小尺寸关闭按钮 */
.btn-close-sm[b-5zqlh4ug9e] {
    padding: 0.25rem; /* 小内边距 */
    margin: -0.25rem -0.25rem -0.25rem auto; /* 负边距调整位置 */
}

/* 模态框主体：表单内容区域 */
.modal-body[b-5zqlh4ug9e] {
    padding: 1rem; /* 内边距 */
    background: #fafbfc; /* 浅灰色背景 */
    max-height: 65vh; /* 最大高度限制 */
    overflow-y: auto; /* 垂直滚动 */
}

    .modal-body .row.g-2[b-5zqlh4ug9e] {
        margin-bottom: 0.5rem; /* 行底部间距 */
    }

    /* 小尺寸表单控件：紧凑的输入框和下拉菜单 */
    .modal-body .form-control-sm[b-5zqlh4ug9e],
    .modal-body .form-select-sm[b-5zqlh4ug9e] {
        font-size: 0.8rem; /* 小字号 */
        padding: 0.3rem 0.5rem; /* 紧凑内边距 */
        height: calc(1.8em + 0.5rem); /* 计算高度，保持比例 */
        border: 1px solid #d1d9e0; /* 边框颜色 */
        border-radius: 4px; /* 圆角 */
        background: #fff; /* 白色背景 */
        transition: all 0.2s ease; /* 过渡动画 */
    }

        /* 表单控件焦点状态 */
        .modal-body .form-control-sm:focus[b-5zqlh4ug9e],
        .modal-body .form-select-sm:focus[b-5zqlh4ug9e] {
            border-color: #4a90e2; /* 焦点时蓝色边框 */
            box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15); /* 蓝色阴影 */
            background: #fff; /* 保持白色背景 */
        }

    /* 小尺寸表单标签 */
    .modal-body .form-label.small[b-5zqlh4ug9e] {
        font-size: 0.75rem; /* 小字号标签 */
        font-weight: 600; /* 加粗标签 */
        color: #5a6c7d; /* 深灰色文字 */
        margin-bottom: 0.3rem; /* 底部间距 */
        text-transform: none; /* 无文字转换 */
        letter-spacing: 0; /* 无字间距 */
    }

        /* 特殊标签样式：带颜色的标签 */
        .modal-body .form-label.small.text-muted.fw-bold[b-5zqlh4ug9e] {
            color: #4a5568 !important; /* 深灰色强调 */
        }

    /* 开关控件样式 */
    .modal-body .form-check.form-switch[b-5zqlh4ug9e] {
        padding-left: 2.8em; /* 左侧内边距，为开关留空间 */
        margin-bottom: 0.4rem; /* 底部间距 */
        min-height: 1.8em; /* 最小高度 */
    }

    .modal-body .form-check-input[b-5zqlh4ug9e] {
        width: 2.2em; /* 开关宽度 */
        height: 1.2em; /* 开关高度 */
        margin-left: -2.8em; /* 负边距调整位置 */
        margin-top: 0.1em; /* 顶部边距微调 */
        background-color: #e9ecef; /* 默认灰色背景 */
        border: 1px solid #adb5bd; /* 边框 */
    }

        /* 开关选中状态 */
        .modal-body .form-check-input:checked[b-5zqlh4ug9e] {
            background-color: #4a90e2; /* 选中时蓝色背景 */
            border-color: #4a90e2; /* 选中时蓝色边框 */
        }

    /* 开关标签文字 */
    .modal-body .form-check-label.small[b-5zqlh4ug9e] {
        font-size: 0.75rem; /* 小字号 */
        color: #6b7280; /* 灰色文字 */
        font-weight: 500; /* 中等字重 */
        margin-top: 0.1em; /* 顶部边距微调 */
    }

/* 模态框底部：取消和保存按钮区域 */
.modal-footer[b-5zqlh4ug9e] {
    border-top: 1px solid #e9ecef; /* 顶部边框分隔 */
    background: #f8f9fa; /* 浅灰色背景 */
    padding: 0.75rem 1rem; /* 内边距 */
}

    .modal-footer .btn-sm[b-5zqlh4ug9e] {
        padding: 0.4rem 1rem; /* 按钮内边距 */
        font-size: 0.8rem; /* 小字号按钮 */
        font-weight: 500; /* 中等字重 */
        border-radius: 4px; /* 圆角按钮 */
    }

    /* 取消按钮样式 */
    .modal-footer .btn-outline-secondary[b-5zqlh4ug9e] {
        border-color: #d1d9e0; /* 边框颜色 */
        color: #6b7280; /* 灰色文字 */
    }

        /* 取消按钮悬停效果 */
        .modal-footer .btn-outline-secondary:hover[b-5zqlh4ug9e] {
            background-color: #f8f9fa; /* 悬停背景色 */
            border-color: #adb5bd; /* 悬停边框色 */
            color: #495057; /* 悬停文字色 */
        }

/* 表单说明文字 */
.modal-body .form-text.small[b-5zqlh4ug9e] {
    font-size: 0.7rem; /* 极小字号说明 */
    margin-top: 0.2rem; /* 顶部间距 */
    color: #8a94a6; /* 浅灰色文字 */
    line-height: 1.3; /* 行高 */
}

/* 错误信息样式 */
.modal-body .text-danger.small[b-5zqlh4ug9e] {
    font-size: 0.7rem; /* 小字号错误信息 */
    margin-top: 0.2rem; /* 顶部间距 */
    font-weight: 500; /* 中等字重，突出错误 */
}

/* 验证摘要信息 */
.modal-body .validation-summary small[b-5zqlh4ug9e] {
    font-size: 0.75rem; /* 小字号 */
    background: #fee; /* 浅红色背景，错误提示 */
    border: 1px solid #f5c6cb; /* 红色边框 */
    border-radius: 4px; /* 圆角 */
    padding: 0.5rem; /* 内边距 */
    margin-bottom: 1rem; /* 底部间距 */
}

/* 表单控件悬停效果 */
.modal-body .form-control-sm:hover[b-5zqlh4ug9e],
.modal-body .form-select-sm:hover[b-5zqlh4ug9e] {
    border-color: #a0aec0; /* 悬停时边框颜色 */
    background: #fff; /* 保持白色背景 */
}

/* 数字输入框特殊样式 */
.modal-body input[type="number"].form-control-sm[b-5zqlh4ug9e] {
    text-align: center; /* 数字居中对齐 */
}

/* 密码输入框特殊样式 */
.modal-body input[type="password"].form-control-sm[b-5zqlh4ug9e] {
    letter-spacing: 0.05em; /* 字间距，密码字符更清晰 */
}

/* 模态框滚动条美化 */
.modal-body[b-5zqlh4ug9e]::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}

.modal-body[b-5zqlh4ug9e]::-webkit-scrollbar-track {
    background: #f1f3f4; /* 滚动条轨道背景 */
    border-radius: 3px; /* 圆角轨道 */
}

.modal-body[b-5zqlh4ug9e]::-webkit-scrollbar-thumb {
    background: #c1c9d2; /* 滚动条滑块颜色 */
    border-radius: 3px; /* 圆角滑块 */
}

    .modal-body[b-5zqlh4ug9e]::-webkit-scrollbar-thumb:hover {
        background: #a8b0b9; /* 悬停时滑块颜色 */
    }

/* 模态框背景优化 */
.modal-backdrop[b-5zqlh4ug9e] {
    background-color: rgba(0, 0, 0, 0.4); /* 深色半透明背景 */
    opacity: 1; /* 完全显示 */
}

/* 表单控件焦点状态美化 */
.modal-body .form-control-sm:focus[b-5zqlh4ug9e],
.modal-body .form-select-sm:focus[b-5zqlh4ug9e] {
    background-color: #fff; /* 保持白色背景 */
    border-color: #4a90e2; /* 蓝色边框 */
    outline: 0; /* 去除默认轮廓 */
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15); /* 蓝色阴影 */
}

/* 紧凑表单辅助类 */
.compact-form .mb-2[b-5zqlh4ug9e] {
    margin-bottom: 0.5rem !important; /* 小间距 */
}

.compact-form .mb-3[b-5zqlh4ug9e] {
    margin-bottom: 0.75rem !important; /* 中等间距 */
}
/*#endregion */

/*#region === 响应式设计 =============*/
/* 中等屏幕尺寸适配（平板：768px及以下） */
@media (max-width: 768px) {
    .header-content[b-5zqlh4ug9e] {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .header-actions[b-5zqlh4ug9e] {
        width: 100%; /* 全宽显示 */
        justify-content: space-between; /* 两端对齐 */
    }

    .search-container[b-5zqlh4ug9e] {
        min-width: 200px; /* 调整最小宽度 */
        flex-grow: 1; /* 允许扩展填充空间 */
    }

    .table-responsive[b-5zqlh4ug9e] {
        font-size: 0.875rem; /* 调整表格字体大小 */
    }

    .btn-group-sm > .btn[b-5zqlh4ug9e] {
        padding: 0.2rem 0.4rem; /* 调整按钮内边距 */
    }
}

/* 小屏幕尺寸适配（手机：576px及以下） */
@media (max-width: 576px) {
    .header-actions[b-5zqlh4ug9e] {
        flex-direction: column; /* 垂直排列操作元素 */
        gap: 0.5rem; /* 设置间距 */
    }

    .search-container[b-5zqlh4ug9e] {
        width: 100%; /* 全宽搜索框 */
    }

    .action-buttons[b-5zqlh4ug9e] {
        width: 100%; /* 全宽按钮组 */
        justify-content: space-between; /* 两端对齐按钮 */
    }

    /* 模态框在小屏幕上的适配 */
    .modal-md[b-5zqlh4ug9e] {
        margin: 0.5rem; /* 边距 */
        max-width: calc(100vw - 1rem); /* 计算最大宽度，留出边距 */
    }

    .modal-body[b-5zqlh4ug9e] {
        padding: 0.75rem; /* 减少内边距 */
    }

        .modal-body .row.g-2 > [class*="col-"][b-5zqlh4ug9e] {
            margin-bottom: 0.5rem; /* 列底部间距 */
        }

    .modal-header[b-5zqlh4ug9e],
    .modal-footer[b-5zqlh4ug9e] {
        padding: 0.5rem 0.75rem; /* 减少头部和底部内边距 */
    }

    .modal-body .form-check.form-switch[b-5zqlh4ug9e] {
        padding-left: 2.5em; /* 调整开关控件内边距 */
    }

    /* 用户类型过滤在小屏幕上的适配 */
    .user-type-filter .input-group[b-5zqlh4ug9e] {
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .user-type-filter .form-select[b-5zqlh4ug9e] {
        font-size: 12px; /* 更小字号 */
    }

    /* 用户角色管理模态框在小屏幕上的适配 */
    .add-role-section .row[b-5zqlh4ug9e] {
        flex-direction: column; /* 垂直排列 */
    }

    .add-role-section .col-md-8[b-5zqlh4ug9e],
    .add-role-section .col-md-4[b-5zqlh4ug9e] {
        width: 100%; /* 全宽列 */
    }

    .role-tags-container[b-5zqlh4ug9e] {
        max-height: 150px; /* 减少最大高度 */
    }

    .role-tag[b-5zqlh4ug9e] {
        font-size: 0.8rem; /* 更小字号标签 */
        padding: 0.2rem 0.4rem; /* 调整内边距 */
    }
}

/* 大屏幕适配（1200px及以下） */
@media (max-width: 1200px) {
    .header-actions[b-5zqlh4ug9e] {
        gap: 0.5rem; /* 减少操作元素间距 */
    }

    .user-type-filter[b-5zqlh4ug9e] {
        min-width: 200px; /* 调整最小宽度 */
    }
}

/* 中等大屏幕适配（992px及以下） */
@media (max-width: 992px) {
    .header-actions[b-5zqlh4ug9e] {
        flex-wrap: wrap; /* 允许换行 */
    }

    .search-container[b-5zqlh4ug9e],
    .user-type-filter[b-5zqlh4ug9e] {
        min-width: 180px; /* 调整最小宽度 */
        flex-grow: 1; /* 允许扩展 */
    }

    .action-buttons[b-5zqlh4ug9e] {
        width: 100%; /* 全宽按钮组 */
        justify-content: flex-end; /* 右对齐 */
        margin-top: 0.5rem; /* 顶部间距 */
    }
}

/* 平板横屏适配（768px及以下） */
@media (max-width: 768px) {
    .header-content[b-5zqlh4ug9e] {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .header-actions[b-5zqlh4ug9e] {
        width: 100%; /* 全宽操作区域 */
        flex-direction: column; /* 垂直排列 */
        gap: 0.5rem; /* 设置间距 */
    }

    .search-container[b-5zqlh4ug9e],
    .user-type-filter[b-5zqlh4ug9e] {
        width: 100%; /* 全宽搜索和过滤区域 */
        min-width: auto; /* 自动最小宽度 */
    }

    .action-buttons[b-5zqlh4ug9e] {
        justify-content: space-between; /* 两端对齐按钮 */
    }

    .user-type-filter .input-group[b-5zqlh4ug9e] {
        height: auto; /* 自动高度 */
    }
}
/*#endregion */
/* _content/LEAFBlazorApp25/Components/Account/Pages/UserProfilerV2.razor.rz.scp.css */
/* UserProfiler页面样式隔离文件 */

/* 用户头像样式 */
.user-avatar[b-awy7jl1p3w] {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.default-avatar[b-awy7jl1p3w] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.user-type-badge[b-awy7jl1p3w] {
    font-size: 0.75rem;
}

/* 微信相关样式 */
.wechat-avatar[b-awy7jl1p3w] {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.wechat-default-avatar[b-awy7jl1p3w] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-icon-large[b-awy7jl1p3w] {
    font-size: 3rem;
}

.wechat-modal-overlay[b-awy7jl1p3w] {
    background-color: rgba(0,0,0,0.5);
}

.warning-icon[b-awy7jl1p3w] {
    font-size: 3rem;
}

/* 使用统计样式 */
.usage-stats-row[b-awy7jl1p3w] {
    margin: -0.2rem;
}

.stats-item[b-awy7jl1p3w] {
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
}

.stats-icon[b-awy7jl1p3w] {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.stats-label[b-awy7jl1p3w] {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* 表单样式优化 */
.form-text[b-awy7jl1p3w] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .user-avatar[b-awy7jl1p3w],
    .default-avatar[b-awy7jl1p3w] {
        width: 60px;
        height: 60px;
    }

    .wechat-avatar[b-awy7jl1p3w],
    .wechat-default-avatar[b-awy7jl1p3w] {
        width: 50px;
        height: 50px;
    }

    .stats-icon[b-awy7jl1p3w] {
        font-size: 1.25rem;
    }

    .stats-item[b-awy7jl1p3w] {
        min-height: 80px;
        padding: 0.25rem;
    }
}

/* 加载状态样式 */
.spinner-border-sm[b-awy7jl1p3w] {
    width: 1rem;
    height: 1rem;
}
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/AllQuestionsMode.razor.rz.scp.css */
.all-questions-mode[b-grs7fo0p0r] {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.loading[b-grs7fo0p0r] {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.questions-content[b-grs7fo0p0r] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-section[b-grs7fo0p0r] {
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: hidden;
}

.category-header[b-grs7fo0p0r] {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-grs7fo0p0r] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.category-weight[b-grs7fo0p0r] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.questions-list[b-grs7fo0p0r] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-item[b-grs7fo0p0r] {
    padding: 16px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
}

.question-text[b-grs7fo0p0r] {
    margin-bottom: 12px;
    font-weight: 500;
    color: #2c3e50;
}

.question-number[b-grs7fo0p0r] {
    background: #3498db;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.options-grid[b-grs7fo0p0r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-label[b-grs7fo0p0r] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .option-label:hover[b-grs7fo0p0r] {
        border-color: #3498db;
        background: #ebf5fb;
    }

    .option-label input[b-grs7fo0p0r] {
        margin-right: 8px;
    }

.option-text[b-grs7fo0p0r] {
    flex: 1;
}

.option-score[b-grs7fo0p0r] {
    background: #27ae60;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}

.text-answer-input[b-grs7fo0p0r] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

    .text-answer-input:focus[b-grs7fo0p0r] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvalAdminProject.razor.rz.scp.css */
@* wwwroot/css/Admin/EvalAdminProject.css *@
/* ========== 整体容器样式 ========== */
.eval-admin-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 页面头部样式 ========== */
.admin-header[b-cobiqv56h2] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content h1[b-cobiqv56h2] {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-content p[b-cobiqv56h2] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.header-actions[b-cobiqv56h2] {
    display: flex;
    gap: 12px;
}

.btn[b-cobiqv56h2] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

    .btn-primary:hover[b-cobiqv56h2] {
        background: #2980b9;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
    }

.btn-secondary[b-cobiqv56h2] {
    background: #95a5a6;
    color: white;
}

    .btn-secondary:hover[b-cobiqv56h2] {
        background: #7f8c8d;
        transform: translateY(-1px);
    }

/* ========== 主要内容区域样式 ========== */
.admin-main-content[b-cobiqv56h2] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========== 左侧导航样式 ========== */
.admin-sidebar[b-cobiqv56h2] {
    width: 260px;
    background: white;
    border-right: 1px solid #e1e8ed;
    padding: 20px 0;
    overflow-y: auto;
}

.sidebar-section[b-cobiqv56h2] {
    margin-bottom: 24px;
}

    .sidebar-section h3[b-cobiqv56h2] {
        margin: 0 0 12px 16px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #7f8c8d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.nav-list[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
}

.nav-item[b-cobiqv56h2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    color: #5d6d7e;
}

    .nav-item:hover[b-cobiqv56h2] {
        background: #f8f9fa;
        color: #3498db;
    }

    .nav-item.active[b-cobiqv56h2] {
        background: #ebf5fb;
        border-left-color: #3498db;
        color: #3498db;
        font-weight: 500;
    }

    .nav-item i[b-cobiqv56h2] {
        width: 16px;
        text-align: center;
    }

/* ========== 右侧内容区域样式 ========== */
.admin-content-area[b-cobiqv56h2] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: white;
    margin: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content-section[b-cobiqv56h2] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-cobiqv56h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

    .section-header h2[b-cobiqv56h2] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
        font-size: 1.3rem;
    }

.section-actions[b-cobiqv56h2] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box[b-cobiqv56h2] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box input[b-cobiqv56h2] {
        padding: 8px 12px 8px 36px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 0.9rem;
        width: 250px;
        transition: all 0.3s ease;
    }

        .search-box input:focus[b-cobiqv56h2] {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

    .search-box i[b-cobiqv56h2] {
        position: absolute;
        left: 12px;
        color: #7f8c8d;
        font-size: 0.9rem;
    }

/* ========== 数据表格样式 ========== */
.data-table-container[b-cobiqv56h2] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
}

.data-table[b-cobiqv56h2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .data-table th[b-cobiqv56h2] {
        background: #f8f9fa;
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid #e1e8ed;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table td[b-cobiqv56h2] {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: top;
    }

    .data-table tr:hover[b-cobiqv56h2] {
        background: #f8f9fa;
    }

    .data-table tr:last-child td[b-cobiqv56h2] {
        border-bottom: none;
    }

/* ========== 表格单元格样式 ========== */
.code-cell[b-cobiqv56h2] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: #2c3e50;
}

.name-cell strong[b-cobiqv56h2] {
    display: block;
    margin-bottom: 4px;
    color: #2c3e50;
}

.description[b-cobiqv56h2] {
    font-size: 0.8rem;
    color: #7f8c8d;
    line-height: 1.3;
}

/* ========== 徽章样式 ========== */
.badge[b-cobiqv56h2] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.badge-iq[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

.badge-eq[b-cobiqv56h2] {
    background: #e74c3c;
    color: white;
}

.badge-aq[b-cobiqv56h2] {
    background: #f39c12;
    color: white;
}

.badge-business[b-cobiqv56h2] {
    background: #2ecc71;
    color: white;
}

.badge-project[b-cobiqv56h2] {
    background: #9b59b6;
    color: white;
}

.badge-digital[b-cobiqv56h2] {
    background: #1abc9c;
    color: white;
}

.badge-scheduleengineer[b-cobiqv56h2] {
    background: #d35400;
    color: white;
}

.badge-projectschedule[b-cobiqv56h2] {
    background: #34495e;
    color: white;
}

.badge-mode[b-cobiqv56h2] {
    background: #bdc3c7;
    color: white;
}

/* ========== 状态样式 ========== */
.status[b-cobiqv56h2] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

    .status.active[b-cobiqv56h2] {
        background: #d5f4e6;
        color: #27ae60;
    }

    .status.inactive[b-cobiqv56h2] {
        background: #fadbd8;
        color: #e74c3c;
    }

/* ========== 操作按钮样式 ========== */
.actions[b-cobiqv56h2] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.btn-sm[b-cobiqv56h2] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-info[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

    .btn-info:hover[b-cobiqv56h2] {
        background: #2980b9;
    }

.btn-warning[b-cobiqv56h2] {
    background: #f39c12;
    color: white;
}

    .btn-warning:hover[b-cobiqv56h2] {
        background: #e67e22;
    }

.btn-danger[b-cobiqv56h2] {
    background: #e74c3c;
    color: white;
}

    .btn-danger:hover[b-cobiqv56h2] {
        background: #c0392b;
    }

/* ========== 空状态样式 ========== */
.empty-state[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bdc3c7;
    text-align: center;
}

    .empty-state i[b-cobiqv56h2] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .empty-state p[b-cobiqv56h2] {
        margin: 0;
        font-size: 1rem;
    }

/* ========== 模态框样式 ========== */
.modal-overlay[b-cobiqv56h2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-cobiqv56h2] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cobiqv56h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .modal-header h3[b-cobiqv56h2] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }

.btn-close[b-cobiqv56h2] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-cobiqv56h2] {
        color: #e74c3c;
    }

.modal-body[b-cobiqv56h2] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-cobiqv56h2] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ========== 表单样式 ========== */
.form-row[b-cobiqv56h2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-cobiqv56h2] {
    margin-bottom: 16px;
}

    .form-group label[b-cobiqv56h2] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 0.9rem;
    }

.form-control[b-cobiqv56h2] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-cobiqv56h2] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

.form-hint[b-cobiqv56h2] {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 4px;
}

/* ========== 复选框样式 ========== */
.checkbox-label[b-cobiqv56h2] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

    .checkbox-label input[b-cobiqv56h2] {
        display: none;
    }

.checkmark[b-cobiqv56h2] {
    width: 18px;
    height: 18px;
    border: 2px solid #bdc3c7;
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-label input:checked + .checkmark[b-cobiqv56h2] {
    background: #3498db;
    border-color: #3498db;
}

    .checkbox-label input:checked + .checkmark[b-cobiqv56h2]::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .admin-main-content[b-cobiqv56h2] {
        flex-direction: column;
    }

    .admin-sidebar[b-cobiqv56h2] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e1e8ed;
    }

    .nav-list[b-cobiqv56h2] {
        flex-direction: row;
        overflow-x: auto;
    }

    .nav-item[b-cobiqv56h2] {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

        .nav-item.active[b-cobiqv56h2] {
            border-left-color: transparent;
            border-bottom-color: #3498db;
        }
}

/* ========== 占位区域样式 ========== */
.placeholder-section[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    text-align: center;
    color: #7f8c8d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #e1e8ed;
}

    .placeholder-section h3[b-cobiqv56h2] {
        margin-bottom: 12px;
        color: #2c3e50;
    }

    .placeholder-section p[b-cobiqv56h2] {
        margin: 0;
        font-size: 1rem;
    }

@media (max-width: 768px) {
    .admin-header[b-cobiqv56h2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .header-actions[b-cobiqv56h2] {
        justify-content: center;
    }

    .section-header[b-cobiqv56h2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .section-actions[b-cobiqv56h2] {
        justify-content: center;
    }

    .search-box input[b-cobiqv56h2] {
        width: 100%;
    }

    .form-row[b-cobiqv56h2] {
        grid-template-columns: 1fr;
    }

    .data-table[b-cobiqv56h2] {
        font-size: 0.8rem;
    }

    .actions[b-cobiqv56h2] {
        flex-direction: column;
        gap: 4px;
    }

    .btn-sm[b-cobiqv56h2] {
        width: 28px;
        height: 28px;
    }
}

/* ========== 滚动条样式 ========== */
.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-track,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-track,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar-track,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .data-table-container[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .modal-body[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvalCategoryManager.razor.rz.scp.css */
@* Components/Admin/EvalCategoryManager.razor.css *@ .category-manager {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-9pi7injb91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

    .section-header h2[b-9pi7injb91] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
        font-size: 1.3rem;
    }

.section-actions[b-9pi7injb91] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-control[b-9pi7injb91] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 200px;
}

    .form-control.readonly[b-9pi7injb91] {
        background: #f8f9fa;
        color: #6c757d;
        border-color: #e9ecef;
    }

.btn[b-9pi7injb91] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-primary[b-9pi7injb91] {
    background: #3498db;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-9pi7injb91] {
        background: #2980b9;
    }

    .btn-primary:disabled[b-9pi7injb91] {
        background: #bdc3c7;
        cursor: not-allowed;
    }

.data-table-container[b-9pi7injb91] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
}

.data-table[b-9pi7injb91] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .data-table th[b-9pi7injb91] {
        background: #f8f9fa;
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid #e1e8ed;
        position: sticky;
        top: 0;
    }

    .data-table td[b-9pi7injb91] {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: top;
    }

    .data-table tr:hover[b-9pi7injb91] {
        background: #f8f9fa;
    }

.code-cell[b-9pi7injb91] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: #2c3e50;
}

.name-cell strong[b-9pi7injb91] {
    color: #2c3e50;
}

.description[b-9pi7injb91] {
    color: #7f8c8d;
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions[b-9pi7injb91] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.btn-sm[b-9pi7injb91] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-info[b-9pi7injb91] {
    background: #3498db;
    color: white;
}

    .btn-info:hover[b-9pi7injb91] {
        background: #2980b9;
    }

.btn-danger[b-9pi7injb91] {
    background: #e74c3c;
    color: white;
}

    .btn-danger:hover[b-9pi7injb91] {
        background: #c0392b;
    }

.empty-state[b-9pi7injb91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bdc3c7;
    text-align: center;
}

    .empty-state i[b-9pi7injb91] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .empty-state p[b-9pi7injb91] {
        margin: 0;
        font-size: 1rem;
    }

/* 模态框样式（与主页面保持一致） */
.modal-overlay[b-9pi7injb91] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-9pi7injb91] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-9pi7injb91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .modal-header h3[b-9pi7injb91] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }

.btn-close[b-9pi7injb91] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-9pi7injb91] {
        color: #e74c3c;
    }

.modal-body[b-9pi7injb91] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-9pi7injb91] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 表单样式 */
.form-row[b-9pi7injb91] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-9pi7injb91] {
    margin-bottom: 16px;
}

    .form-group label[b-9pi7injb91] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 0.9rem;
    }

.form-control[b-9pi7injb91] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-9pi7injb91] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

.form-hint[b-9pi7injb91] {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 4px;
}

.btn-secondary[b-9pi7injb91] {
    background: #95a5a6;
    color: white;
}

    .btn-secondary:hover[b-9pi7injb91] {
        background: #7f8c8d;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvaluationProject.razor.rz.scp.css */
@* wwwroot/css/EvaluationProject.css *@
/* ========== 整体容器样式 ========== */
.evaluation-project-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 上部区域样式 ========== */
.top-section[b-7hzj66g6gg] {
    background: #ffffff;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    min-height: 80px;
}

.project-selection-area[b-7hzj66g6gg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-header h3[b-7hzj66g6gg] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.project-radio-group[b-7hzj66g6gg] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.project-radio-item[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    min-width: 200px;
}

    .project-radio-item:hover[b-7hzj66g6gg] {
        border-color: #3498db;
        background: #f8f9fa;
    }

    .project-radio-item.selected[b-7hzj66g6gg] {
        border-color: #3498db;
        background: #ebf5fb;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    }

    .project-radio-item input[b-7hzj66g6gg] {
        display: none;
    }

.radio-dot[b-7hzj66g6gg] {
    width: 16px;
    height: 16px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.project-radio-item.selected .radio-dot[b-7hzj66g6gg] {
    border-color: #3498db;
    background: #3498db;
}

    .project-radio-item.selected .radio-dot[b-7hzj66g6gg]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
    }

.project-info[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
}

.project-name[b-7hzj66g6gg] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.project-desc[b-7hzj66g6gg] {
    color: #7f8c8d;
    font-size: 0.8rem;
    margin-top: 2px;
}

.no-projects[b-7hzj66g6gg] {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}

/* ========== 操作按钮区域样式 ========== */
.action-buttons-area[b-7hzj66g6gg] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn[b-7hzj66g6gg] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

    .btn:disabled[b-7hzj66g6gg] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn:hover:not(:disabled)[b-7hzj66g6gg] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

.btn-load[b-7hzj66g6gg] {
    background: #3498db;
    color: white;
}

    .btn-load:hover:not(:disabled)[b-7hzj66g6gg] {
        background: #2980b9;
    }

.btn-submit[b-7hzj66g6gg] {
    background: #27ae60;
    color: white;
}

    .btn-submit:hover:not(:disabled)[b-7hzj66g6gg] {
        background: #229954;
    }

.btn-result[b-7hzj66g6gg] {
    background: #e74c3c;
    color: white;
}

    .btn-result:hover:not(:disabled)[b-7hzj66g6gg] {
        background: #c0392b;
    }

/* ========== 中部区域样式 ========== */
.middle-section[b-7hzj66g6gg] {
    flex: 1;
    background: #ffffff;
    margin: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.initial-prompt[b-7hzj66g6gg], .result-placeholder[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.prompt-icon[b-7hzj66g6gg], .result-icon[b-7hzj66g6gg] {
    font-size: 4rem;
    color: #bdc3c7;
    margin-bottom: 20px;
}

.initial-prompt h3[b-7hzj66g6gg], .result-placeholder h3[b-7hzj66g6gg] {
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 600;
}

.initial-prompt p[b-7hzj66g6gg], .result-placeholder p[b-7hzj66g6gg] {
    color: #7f8c8d;
    font-size: 1rem;
    max-width: 400px;
    line-height: 1.5;
}

.questions-container[b-7hzj66g6gg] {
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* ========== 下部区域样式 ========== */
.bottom-section[b-7hzj66g6gg] {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

    .bottom-section.visible[b-7hzj66g6gg] {
        max-height: 400px;
        margin: 8px;
    }

    .bottom-section.hidden[b-7hzj66g6gg] {
        max-height: 0;
        margin: 0 8px;
    }

.result-container[b-7hzj66g6gg] {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.result-header[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 20px;
}

    .result-header h2[b-7hzj66g6gg] {
        margin: 0 0 8px 0;
        font-weight: 600;
    }

.result-meta[b-7hzj66g6gg] {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.result-content[b-7hzj66g6gg] {
    padding: 20px;
}

.overall-score-card[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.score-circle[b-7hzj66g6gg] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2980b9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.score-value[b-7hzj66g6gg] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.score-label[b-7hzj66g6gg] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.score-assessment[b-7hzj66g6gg] {
    flex: 1;
}

    .score-assessment h3[b-7hzj66g6gg] {
        color: #2c3e50;
        margin: 0 0 8px 0;
        font-size: 1.3rem;
    }

    .score-assessment p[b-7hzj66g6gg] {
        color: #5d6d7e;
        margin: 0;
        line-height: 1.5;
    }

.category-scores h4[b-7hzj66g6gg] {
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.scores-grid[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-score-item[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.category-name[b-7hzj66g6gg] {
    min-width: 120px;
    font-weight: 500;
    color: #2c3e50;
}

.score-bar[b-7hzj66g6gg] {
    flex: 1;
    height: 8px;
    background: #e1e8ed;
    border-radius: 4px;
    overflow: hidden;
}

.score-fill[b-7hzj66g6gg] {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-details[b-7hzj66g6gg] {
    display: flex;
    gap: 15px;
    min-width: 100px;
    justify-content: flex-end;
}

.score-value[b-7hzj66g6gg] {
    font-weight: 600;
    color: #2c3e50;
}

.score-level[b-7hzj66g6gg] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    background: #3498db;
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
    .top-section[b-7hzj66g6gg] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .project-radio-group[b-7hzj66g6gg] {
        flex-direction: column;
    }

    .project-radio-item[b-7hzj66g6gg] {
        min-width: auto;
    }

    .action-buttons-area[b-7hzj66g6gg] {
        justify-content: center;
    }

    .btn[b-7hzj66g6gg] {
        min-width: 100px;
        padding: 8px 16px;
    }

    .overall-score-card[b-7hzj66g6gg] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .category-score-item[b-7hzj66g6gg] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .score-details[b-7hzj66g6gg] {
        justify-content: space-between;
    }
}

/* ========== 滚动条样式 ========== */
.questions-container[b-7hzj66g6gg]::-webkit-scrollbar {
    width: 6px;
}

.questions-container[b-7hzj66g6gg]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.questions-container[b-7hzj66g6gg]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .questions-container[b-7hzj66g6gg]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/SingleQuestionMode.razor.rz.scp.css */
.single-question-mode[b-dhzikn9xrx] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.completion-message[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #27ae60;
}

    .completion-message i[b-dhzikn9xrx] {
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .completion-message h3[b-dhzikn9xrx] {
        margin: 0 0 8px 0;
        font-weight: 600;
    }

    .completion-message p[b-dhzikn9xrx] {
        margin: 0;
        color: #7f8c8d;
    }

.single-question-content[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.progress-info[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.progress-bar[b-dhzikn9xrx] {
    flex: 1;
    height: 6px;
    background: #e1e8ed;
    border-radius: 3px;
    margin: 0 15px;
    overflow: hidden;
}

.progress-fill[b-dhzikn9xrx] {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.question-display[b-dhzikn9xrx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-header[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-badge[b-dhzikn9xrx] {
    background: #9b59b6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.question-text h4[b-dhzikn9xrx] {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
}

.question-desc[b-dhzikn9xrx] {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.options-list[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item[b-dhzikn9xrx] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .option-item:hover[b-dhzikn9xrx] {
        border-color: #3498db;
        background: #f8f9fa;
    }

    .option-item.selected[b-dhzikn9xrx] {
        border-color: #3498db;
        background: #ebf5fb;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    }

.option-radio[b-dhzikn9xrx] {
    margin-right: 12px;
}

.radio-dot[b-dhzikn9xrx] {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.option-item.selected .radio-dot[b-dhzikn9xrx] {
    border-color: #3498db;
    background: #3498db;
}

    .option-item.selected .radio-dot[b-dhzikn9xrx]::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
    }

.option-content[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.option-text[b-dhzikn9xrx] {
    font-weight: 500;
    color: #2c3e50;
}

.option-score[b-dhzikn9xrx] {
    background: #27ae60;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.text-answer-area[b-dhzikn9xrx] {
    flex: 1;
}

.text-answer-input[b-dhzikn9xrx] {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .text-answer-input:focus[b-dhzikn9xrx] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

.question-actions[b-dhzikn9xrx] {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.btn-submit-question[b-dhzikn9xrx] {
    background: #3498db;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-submit-question:hover:not(:disabled)[b-dhzikn9xrx] {
        background: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .btn-submit-question:disabled[b-dhzikn9xrx] {
        background: #bdc3c7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* _content/LEAFBlazorApp25/Components/IChing/Lots/DrawLotsThemeWeb.razor.rz.scp.css */
/* ===== 主题变量定义 ===== */
.iching-container[b-4yvls3sim7] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-secondary-color: #FF9800;
}

    /* 朱砂祥瑞主题 */
    .iching-container.theme-vermillion[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 碧海青天主题 */
    .iching-container.theme-ocean[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 紫气东来主题 */
    .iching-container.theme-purple[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .iching-container.theme-golden[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

/* =====css隔离类： 主容器布局 ===== */
.iching-container[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    transition: all 0.3s ease;
}

/* 垂直面板布局 */
.vertical-panel[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    flex: 1;
}

/* ===== 第一部分：介绍区域 ===== */
.intro-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 8px 16px 4px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.intro-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.header-controls[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 主题选择器样式 */
.theme-selector[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.theme-dropdown[b-4yvls3sim7] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-4yvls3sim7] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-4yvls3sim7] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

.section-title[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0;
    font-weight: 600;
}

.section-title2[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 1.0em;
    margin: 0;
    font-weight: 600;
}

/* ===== 按钮样式 - 新增PDF按钮 ===== */
.btn-compact[b-4yvls3sim7] {
    padding: 5px 15px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* PDF按钮样式 */
.btn-pdf[b-4yvls3sim7] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
}

    .btn-pdf:hover[b-4yvls3sim7] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 - 确保所有按钮宽度一致 */
.fixed-width-btn[b-4yvls3sim7] {
    min-width: 80px;
    flex-shrink: 0;
}

.btn-primary[b-4yvls3sim7] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 15px;
    margin-right:20px;
}

    /*让乾坤运转 悬停时：手势*/
    .btn-primary:hover[b-4yvls3sim7] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        /* 使用滤镜加深背景色 */
        filter: brightness(0.9);
    }

.btn-secondary[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

    .btn-secondary:hover[b-4yvls3sim7] {
        background: rgba(255, 152, 0, 0.2);
    }

.btn-info[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-4yvls3sim7] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}


.header-actions[b-4yvls3sim7] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* 抽签须知网格 - 六列布局 */
.intro-content[b-4yvls3sim7] {
    margin: 0;
}

.guidance-grid[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.guidance-item[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    min-height: 50px;
}

.guidance-icon[b-4yvls3sim7] {
    font-size: 1.1em;
    margin-right: 6px;
    flex-shrink: 0;
}

.guidance-text[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .guidance-text strong[b-4yvls3sim7] {
        color: var(--secondary-text);
        font-size: 0.9em;
        line-height: 1.2;
    }

    .guidance-text span[b-4yvls3sim7] {
        color: var(--secondary-text);
        font-size: 0.8em;
        line-height: 1.4;
        padding-top: 3px;
    }

/* ===== 第二部分：签筒区域 - 关键修改 ===== */
.lots-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* 关键修改：移除固定高度，改为自动高度 */
    height: auto;
    min-height: 250px;
    transition: all 0.3s ease;
}

    /* 展开状态 - 关键修改：使用自动高度 */
    .lots-section.expanded[b-4yvls3sim7] {
        flex: 0 1 auto;
        height: auto;
        min-height: 300px;
        max-height: 70vh;
    }

    /* 小屏幕高度增强 - 新增样式 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 250px;
    }

    /* 收起状态 */
    .lots-section.collapsed[b-4yvls3sim7] {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

        /* 确保收起状态下只显示标题区域 */
        .lots-section.collapsed .problem-category-section[b-4yvls3sim7],
        .lots-section.collapsed .lots-container-scroll[b-4yvls3sim7] {
            display: none;
        }

.section-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-shrink: 0;
    gap: 20px;
}

    .section-header h3[b-4yvls3sim7] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        flex-shrink: 0;
    }

.selection-info[b-4yvls3sim7] {
    font-size: 0.9em;
    flex-shrink: 0;
    text-align: right;
    min-width: 180px;
    margin-left: 20px;
}

.selected-indicator[b-4yvls3sim7] {
    color: var(--primary-light);
    font-weight: 500;
}

    .selected-indicator strong[b-4yvls3sim7] {
        color: var(--primary-color);
    }

.select-prompt[b-4yvls3sim7] {
    color: var(--secondary-text);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
}

/* 问题类别选择区域 - 关键修改：允许内容换行但不固定高度 */
.problem-category-section[b-4yvls3sim7] {
    margin-bottom: 5px;
    padding: 3px 10px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
    height: auto;
    min-height: auto;
}

.category-grid[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}

.category-radio[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--secondary-text);
}

    .category-radio:hover[b-4yvls3sim7] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    .category-radio.selected[b-4yvls3sim7] {
        background: var(--button-primary-bg);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    .category-radio input[type="radio"][b-4yvls3sim7] {
        display: none;
    }

.radio-dot[b-4yvls3sim7] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.category-radio.selected .radio-dot[b-4yvls3sim7] {
    border-color: white;
    background: white;
}

.radio-label[b-4yvls3sim7] {
    flex: 1;
    text-align: center;
    letter-spacing: 6px;
    font-size: 15px;
    /*padding:0px 10px !important;*/
}

/* 签筒容器 - 关键修改：动态高度 */
.lots-container-scroll[b-4yvls3sim7] {
    height: auto;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8f8f8;
    flex: 1 1 auto;
}

.lots-container[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
    padding: 6px;
    min-height: min-content;
    height: fit-content;
}

/* 签筒圆圈 */
.lot-circle[b-4yvls3sim7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.8em;
}

    .lot-circle.available[b-4yvls3sim7] {
        background: #f0f0f0;
        border: 2px solid #d0d0d0;
        color: var(--secondary-text);
    }

        .lot-circle.available:hover[b-4yvls3sim7] {
            background: var(--primary-light);
            color: white;
            transform: scale(1.1);
            border-color: var(--primary-color);
        }

    .lot-circle.selected[b-4yvls3sim7] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-4yvls3sim7 2s infinite;
    }

@keyframes pulse-b-4yvls3sim7 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.lot-number[b-4yvls3sim7] {
    font-size: 1.0em;
    font-weight: normal; /* 确保卦号不加粗 */
}

.fixed-number[b-4yvls3sim7] {
    color: var(--button-info-color);
    font-weight: bold; /* 新增这行 */
}

.lot-dot[b-4yvls3sim7] {
    font-size: 1.2em;
    color: #999;
}

/* ===== 第三部分：签文显示区域 ===== */
.result-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
}

.result-content[b-4yvls3sim7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.result-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

    .result-header h3[b-4yvls3sim7] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

/* 签文详情滚动容器 */
.lot-details-scroll[b-4yvls3sim7] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.lot-details[b-4yvls3sim7] {
    padding: 0;
    min-height: min-content;
}

.lot-header[b-4yvls3sim7] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-bottom: 1px solid #e8f5e9;
}

.lot-meta[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lot-number-badge[b-4yvls3sim7] {
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.lot-title[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.palace-tag[b-4yvls3sim7] {
    background: #E3F2FD;
    color: #1976D2;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
}

.fortune-tag[b-4yvls3sim7] {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.fortune-good[b-4yvls3sim7] {
    background: #E8F5E8;
    color: var(--primary-color);
}

.fortune-medium[b-4yvls3sim7] {
    background: #FFF3E0;
    color: #EF6C00;
}

.fortune-bad[b-4yvls3sim7] {
    background: #FFEBEE;
    color: #C62828;
}

.fortune-unknown[b-4yvls3sim7] {
    background: #F5F5F5;
    color: #757575;
}

/* 签文内容布局 */
.lot-content-vertical[b-4yvls3sim7] {
    padding: 0;
}

.content-item[b-4yvls3sim7] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
}

    .content-item:hover[b-4yvls3sim7] {
        background: #fdf2f2;
    }

    .content-item:last-child[b-4yvls3sim7] {
        border-bottom: none;
    }

.content-header[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.content-icon[b-4yvls3sim7] {
    font-size: 1.1em;
}

.content-header h4[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.content-body[b-4yvls3sim7] {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.poem-text[b-4yvls3sim7] {
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.8;
}

/* 特殊内容项样式 */
.advice-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-left: 4px solid var(--primary-light);
}

    .advice-item .content-header[b-4yvls3sim7] {
        color: var(--primary-color);
    }

.advice-text[b-4yvls3sim7] {
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.7;
}

.category-analysis-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%);
    border-left: 4px solid #FF9800;
}

    .category-analysis-item .content-header[b-4yvls3sim7] {
        color: #EF6C00;
    }

.category-analysis-text[b-4yvls3sim7] {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* 宫位分析样式 */
.palace-analysis-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #f8f8ff 0%, #f0f0ff 100%);
    border-left: 4px solid #7e57c2;
}

    .palace-analysis-item .content-header[b-4yvls3sim7] {
        color: #5e35b1;
    }

/* 宫位信息容器 */
.palace-info-container[b-4yvls3sim7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 12px;
    padding: 5px 10px;
    background: rgba(126, 87, 194, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(126, 87, 194, 0.1);
}

.info-item[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    min-width: 90px;
    max-width: 130px;
    padding: 5px 6px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    font-size: 0.85em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label[b-4yvls3sim7] {
    font-weight: 600;
    color: #5e35b1;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.info-value[b-4yvls3sim7] {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫位建议容器 */
.palace-advice-container[b-4yvls3sim7] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 1.0em;
}

.palace-advantages[b-4yvls3sim7],
.palace-disadvantages[b-4yvls3sim7] {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.palace-advantages[b-4yvls3sim7] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-left: 4px solid var(--primary-light);
}

.palace-disadvantages[b-4yvls3sim7] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
}

    .palace-advantages h5[b-4yvls3sim7],
    .palace-disadvantages h5[b-4yvls3sim7] {
        margin: 0 0 6px 0;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.palace-advantages h5[b-4yvls3sim7] {
    color: var(--primary-color);
}

.palace-disadvantages h5[b-4yvls3sim7] {
    color: #EF6C00;
}

.palace-advantages p[b-4yvls3sim7],
.palace-disadvantages p[b-4yvls3sim7] {
    margin: 0;
    line-height: 1.5;
    color: var(--secondary-text);
    font-size: 0.85em;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* 状态样式 */
.loading-state[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--secondary-text);
    flex: 1;
}

.spinner[b-4yvls3sim7] {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--primary-light);
    border-radius: 50%;
    animation: spin-b-4yvls3sim7 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-4yvls3sim7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*没有抽签时：签词区域显示*/
.empty-state[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
}

.empty-icon[b-4yvls3sim7] {
    font-size: 2.5em;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state h3[b-4yvls3sim7] {
    color: var(--secondary-text);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.empty-state p[b-4yvls3sim7] {
    margin: 0;
    font-size: 0.9em;
}

.empty-state-container[b-4yvls3sim7] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.empty-state-image[b-4yvls3sim7] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
}

/* 带边框的图片容器 - 修改样式 */
.bordered-image[b-4yvls3sim7] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


/* 右侧内容区域 - 修改为 Flex 布局 */
.empty-state-content[b-4yvls3sim7] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 改为从顶部开始 */
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px; /* 添加内边距 */
}

/* ===== txt说明 ===== */
/* 文本内容区域 - 占据剩余空间 */
.remark-content-txt[b-4yvls3sim7] {
    flex: 1; /* 占据剩余所有空间 */
    width: 100%;
    overflow-y: auto; /* 允许垂直滚动 */
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap; /* 保留换行 */
    text-align: left;
    max-height: none; /* 移除固定高度限制 */
}

/* ===== 图片轮播相关样式 - 修改 ===== */
.carousel-container[b-4yvls3sim7] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 修改图片样式 */
.responsive-image[b-4yvls3sim7] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 - 修复布局：三个按钮分开 */
.carousel-controls[b-4yvls3sim7] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-4yvls3sim7],
.carousel-btn-center[b-4yvls3sim7],
.carousel-btn-right[b-4yvls3sim7] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-4yvls3sim7] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

    .carousel-btn:active[b-4yvls3sim7] {
        transform: scale(0.95);
    }

.carousel-toggle[b-4yvls3sim7] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* ===== Split窗口分割相关样式 - 修改 ===== */
.empty-state-container[b-4yvls3sim7] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-4yvls3sim7] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-4yvls3sim7] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-4yvls3sim7] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-4yvls3sim7] {
    background-color: #888;
}

.empty-state-image[b-4yvls3sim7], .empty-state-content[b-4yvls3sim7] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* ===== 模态对话框 ===== */
.modal-overlay[b-4yvls3sim7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.confirmation-dialog[b-4yvls3sim7] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.dialog-icon[b-4yvls3sim7] {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.confirmation-dialog h3[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0 0 6px 0;
    font-size: 1.1em;
}

.confirmation-dialog p[b-4yvls3sim7] {
    color: var(--secondary-text);
    margin: 0 0 16px 0;
    font-size: 0.9em;
}

.confirmation-dialog strong[b-4yvls3sim7] {
    color: var(--primary-color);
}

.dialog-buttons[b-4yvls3sim7] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirm[b-4yvls3sim7], .btn-cancel[b-4yvls3sim7] {
    padding: 6px 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 70px;
}

.btn-confirm[b-4yvls3sim7] {
    background: var(--button-primary-bg);
    color: white;
}

    .btn-confirm:hover[b-4yvls3sim7] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

.btn-cancel[b-4yvls3sim7] {
    background: #f5f5f5;
    color: var(--secondary-text);
    border: 1px solid #e0e0e0;
}

    .btn-cancel:hover[b-4yvls3sim7] {
        background: #eeeeee;
    }

/* ===== 滚动条样式 ===== */
.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar {
    width: 12px;
}

.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-track,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

    .lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb:hover,
    .lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.lots-container-scroll[b-4yvls3sim7],
.lot-details-scroll[b-4yvls3sim7] {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 响应式设计 - 关键修改 ===== */
@media (max-width: 1200px) {
    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(3, 1fr);
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 320px;
        max-height: 65vh;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 350px;
        min-height: 220px;
    }
}

@media (max-width: 1024px) {
    .iching-container[b-4yvls3sim7] {
        padding: 6px;
        height: 100%;
    }

    .vertical-panel[b-4yvls3sim7] {
        gap: 6px;
        min-height: 800px;
    }

    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-actions[b-4yvls3sim7] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header[b-4yvls3sim7] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: left;
    }

    .header-Title[b-4yvls3sim7] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .selection-info[b-4yvls3sim7] {
        text-align: left;
        min-width: auto;
        margin-left: 20px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 400px;
        max-height: 60vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 400px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 300px;
        min-height: 200px;
        flex: 1 1 auto;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 350px;
        flex: 1;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }

    /* 主题选择器在小屏幕上的适配 */
    .header-controls[b-4yvls3sim7] {
        gap: 10px;
    }

    .theme-selector[b-4yvls3sim7] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .theme-label[b-4yvls3sim7] {
        font-size: 0.8em;
    }

    .theme-dropdown[b-4yvls3sim7] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 响应式轮播控制 */
    .carousel-controls[b-4yvls3sim7] {
        width: 180px;
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .empty-state-image[b-4yvls3sim7] {
        min-width: 150px;
    }

    .empty-state-content[b-4yvls3sim7] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .iching-container[b-4yvls3sim7] {
        padding: 4px;
        height: 100%;
    }

    /* 关键修改：确保标题和按钮在一行 */
    .intro-header[b-4yvls3sim7] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: 1fr;
    }

    .guidance-item[b-4yvls3sim7] {
        min-height: 45px;
    }

    .lots-container[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        gap: 4px;
    }

    .lot-circle[b-4yvls3sim7] {
        width: 32px;
        height: 32px;
    }

    .lot-header[b-4yvls3sim7] {
        padding: 10px 12px;
    }

    .lot-meta[b-4yvls3sim7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .content-item[b-4yvls3sim7] {
        padding: 10px 12px;
    }

    .palace-info-container[b-4yvls3sim7] {
        gap: 6px 10px;
    }

    .info-item[b-4yvls3sim7] {
        min-width: 80px;
        max-width: 110px;
        font-size: 0.8em;
        padding: 4px 5px;
    }

    .info-label[b-4yvls3sim7] {
        margin-right: 4px;
        font-size: 0.85em;
    }

    .palace-advice-container[b-4yvls3sim7] {
        flex-direction: column;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
    }

    .category-radio[b-4yvls3sim7] {
        padding: 4px 8px;
        font-size: 0.8em;
    }

    .radio-dot[b-4yvls3sim7] {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 380px;
        max-height: 55vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 420px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 280px;
        min-height: 180px;
        flex: 1 1 auto;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 380px;
        flex: 1;
    }

    .problem-category-section[b-4yvls3sim7] {
        padding: 8px;
    }

    /* 在小屏幕上调整图片轮播布局 */
    .empty-state-container[b-4yvls3sim7] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-4yvls3sim7],
    .empty-state-content[b-4yvls3sim7] {
        flex: 1 1 100%;
        width: 100%;
    }

    .carousel-controls[b-4yvls3sim7] {
        bottom: 5px;
        width: 180px; /* 小屏幕调整宽度 */
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px; /* 小屏幕调整边距 */
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* PDF按钮在小屏幕上的适配 */
    .fixed-width-btn[b-4yvls3sim7] {
        min-width: 70px;
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .lots-container[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    }

    .lot-circle[b-4yvls3sim7] {
        width: 28px;
        height: 28px;
    }

    .palace-info-container[b-4yvls3sim7] {
        gap: 4px 6px;
    }

    .info-item[b-4yvls3sim7] {
        min-width: 70px;
        max-width: 90px;
        font-size: 0.75em;
    }

    .info-label[b-4yvls3sim7] {
        margin-right: 3px;
        font-size: 0.8em;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .problem-category-section[b-4yvls3sim7] {
        padding: 6px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 420px;
        max-height: 60vh;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 460px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 320px;
        min-height: 200px;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 400px;
    }

    .section-header[b-4yvls3sim7] {
        gap: 6px;
    }

    .header-actions[b-4yvls3sim7] {
        justify-content: center;
    }

        .header-actions .btn-compact[b-4yvls3sim7] {
            padding: 3px 8px;
            font-size: 0.75em;
        }

    /* 超小屏幕时确保按钮和标题仍在一行 */
    .intro-header[b-4yvls3sim7] {
        flex-wrap: nowrap;
    }

    .fixed-width-btn[b-4yvls3sim7] {
        min-width: 65px;
        font-size: 0.75em;
        padding: 2px 6px;
    }

    /* 在超小屏幕上隐藏主题标签文字 */
    .theme-label[b-4yvls3sim7] {
        display: none;
    }

    .theme-selector[b-4yvls3sim7] {
        align-items: center;
    }

    .theme-dropdown[b-4yvls3sim7] {
        min-width: 80px;
        font-size: 0.75em;
        padding: 3px 6px;
    }

    /* 超小屏幕轮播控制 */
    .carousel-controls[b-4yvls3sim7] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ----支付模态框 - 整合确认和支付界面：---------- */
.payment-modal[b-4yvls3sim7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.payment-confirm-section[b-4yvls3sim7] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.confirm-icon[b-4yvls3sim7] {
    font-size: 2em;
    margin-bottom: 10px;
}

.confirm-details[b-4yvls3sim7] {
    margin-top: 10px;
}

.amount[b-4yvls3sim7] {
    font-size: 1.1em;
    color: #e74c3c;
    margin: 5px 0;
}

.benefits[b-4yvls3sim7] {
    color: #666;
    font-size: 1.0em;
}

.wechat-pay-section[b-4yvls3sim7] {
    margin: 20px 0;
}

.payment-actions[b-4yvls3sim7] {
    text-align: center;
    margin-top: 15px;
}

.btn-cancel-payment[b-4yvls3sim7] {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel-payment:hover[b-4yvls3sim7] {
        background: #7f8c8d;
    }


/* -----微信支付对话框样式：这部分可能需要删除、因为代码移除了---------- */
.wechat-payment-dialog[b-4yvls3sim7] {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dialog-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

    .dialog-header h3[b-4yvls3sim7] {
        margin: 0;
        color: #333;
    }

.btn-close[b-4yvls3sim7] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

    .btn-close:hover[b-4yvls3sim7] {
        color: #333;
    }

.payment-content[b-4yvls3sim7] {
    padding: 20px;
}

.qr-code-section[b-4yvls3sim7] {
    text-align: center;
    margin-bottom: 20px;
}

.qr-code-img[b-4yvls3sim7] {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    margin: 15px 0;
}

.payment-info[b-4yvls3sim7] {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: left;
}

    .payment-info p[b-4yvls3sim7] {
        margin: 5px 0;
    }

.payment-status[b-4yvls3sim7] {
    margin-top: 15px;
}

.status-loading[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.spinner[b-4yvls3sim7] {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #07C160;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-4yvls3sim7 1s linear infinite;
    margin-right: 10px;
}

.status-message.success[b-4yvls3sim7] {
    color: #07C160;
    background: #f0f9f4;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.status-message.error[b-4yvls3sim7] {
    color: #e74c3c;
    background: #fdf2f2;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.dialog-footer[b-4yvls3sim7] {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-cancel[b-4yvls3sim7] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel:hover[b-4yvls3sim7] {
        background: #5a6268;
    }

@keyframes spin-b-4yvls3sim7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 超小高度设备适配 */
@media (max-height: 700px) {
    .iching-container[b-4yvls3sim7] {
        min-height: 650px;
    }

    .vertical-panel[b-4yvls3sim7] {
        min-height: 600px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 280px;
        max-height: 45vh;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 220px;
        min-height: 160px;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 280px;
    }
}

/* 新增：针对问题类别区域换行的特殊处理 */
@media (max-width: 360px) {
    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-radio[b-4yvls3sim7] {
        padding: 3px 6px;
        font-size: 0.75em;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 450px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        min-height: 220px;
    }
}
/* _content/LEAFBlazorApp25/Components/IChing/Lots/DrawLotsThemeWebB1.razor.rz.scp.css */
/* ===== 主题变量定义 ===== */
.iching-container[b-9wj7ztdh8j] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-secondary-color: #FF9800;
}

    /* 朱砂祥瑞主题 */
    .iching-container.theme-vermillion[b-9wj7ztdh8j] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 碧海青天主题 */
    .iching-container.theme-ocean[b-9wj7ztdh8j] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 紫气东来主题 */
    .iching-container.theme-purple[b-9wj7ztdh8j] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .iching-container.theme-golden[b-9wj7ztdh8j] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

/* =====css隔离类： 主容器布局 ===== */
.iching-container[b-9wj7ztdh8j] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    transition: all 0.3s ease;
}

/* 垂直面板布局 */
.vertical-panel[b-9wj7ztdh8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    flex: 1;
}

/* ===== 第一部分：介绍区域 ===== */
.intro-section[b-9wj7ztdh8j] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 8px 16px 4px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.intro-header[b-9wj7ztdh8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.header-controls[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 主题选择器样式 */
.theme-selector[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label[b-9wj7ztdh8j] {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.theme-dropdown[b-9wj7ztdh8j] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-9wj7ztdh8j] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-9wj7ztdh8j] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

.section-title[b-9wj7ztdh8j] {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0;
    font-weight: 600;
}

.section-title2[b-9wj7ztdh8j] {
    color: var(--primary-color);
    font-size: 1.0em;
    margin: 0;
    font-weight: 600;
}

/* ===== 按钮样式 - 新增PDF按钮 ===== */
.btn-compact[b-9wj7ztdh8j] {
    padding: 5px 15px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* PDF按钮样式 */
.btn-pdf[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
}

    .btn-pdf:hover[b-9wj7ztdh8j] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 - 确保所有按钮宽度一致 */
.fixed-width-btn[b-9wj7ztdh8j] {
    min-width: 80px;
    flex-shrink: 0;
}

.btn-primary[b-9wj7ztdh8j] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 15px;
    margin-right:20px;
}

    /*让乾坤运转 悬停时：手势*/
    .btn-primary:hover[b-9wj7ztdh8j] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        /* 使用滤镜加深背景色 */
        filter: brightness(0.9);
    }

.btn-secondary[b-9wj7ztdh8j] {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

    .btn-secondary:hover[b-9wj7ztdh8j] {
        background: rgba(255, 152, 0, 0.2);
    }

.btn-info[b-9wj7ztdh8j] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-9wj7ztdh8j] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-9wj7ztdh8j] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}


.header-actions[b-9wj7ztdh8j] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* 抽签须知网格 - 六列布局 */
.intro-content[b-9wj7ztdh8j] {
    margin: 0;
}

.guidance-grid[b-9wj7ztdh8j] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.guidance-item[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    min-height: 50px;
}

.guidance-icon[b-9wj7ztdh8j] {
    font-size: 1.1em;
    margin-right: 6px;
    flex-shrink: 0;
}

.guidance-text[b-9wj7ztdh8j] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .guidance-text strong[b-9wj7ztdh8j] {
        color: var(--secondary-text);
        font-size: 0.9em;
        line-height: 1.2;
    }

    .guidance-text span[b-9wj7ztdh8j] {
        color: var(--secondary-text);
        font-size: 0.8em;
        line-height: 1.4;
        padding-top: 3px;
    }

/* ===== 第二部分：签筒区域 - 关键修改 ===== */
.lots-section[b-9wj7ztdh8j] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* 关键修改：移除固定高度，改为自动高度 */
    height: auto;
    min-height: 250px;
    transition: all 0.3s ease;
}

    /* 展开状态 - 关键修改：使用自动高度 */
    .lots-section.expanded[b-9wj7ztdh8j] {
        flex: 0 1 auto;
        height: auto;
        min-height: 300px;
        max-height: 70vh;
    }

    /* 小屏幕高度增强 - 新增样式 */
    .lots-section.enhanced-mobile-height.expanded[b-9wj7ztdh8j] {
        min-height: 250px;
    }

    /* 收起状态 */
    .lots-section.collapsed[b-9wj7ztdh8j] {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

        /* 确保收起状态下只显示标题区域 */
        .lots-section.collapsed .problem-category-section[b-9wj7ztdh8j],
        .lots-section.collapsed .lots-container-scroll[b-9wj7ztdh8j] {
            display: none;
        }

.section-header[b-9wj7ztdh8j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-shrink: 0;
    gap: 20px;
}

    .section-header h3[b-9wj7ztdh8j] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        flex-shrink: 0;
    }

.selection-info[b-9wj7ztdh8j] {
    font-size: 0.9em;
    flex-shrink: 0;
    text-align: right;
    min-width: 180px;
    margin-left: 20px;
}

.selected-indicator[b-9wj7ztdh8j] {
    color: var(--primary-light);
    font-weight: 500;
}

    .selected-indicator strong[b-9wj7ztdh8j] {
        color: var(--primary-color);
    }

.select-prompt[b-9wj7ztdh8j] {
    color: var(--secondary-text);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
}

/* 问题类别选择区域 - 关键修改：允许内容换行但不固定高度 */
.problem-category-section[b-9wj7ztdh8j] {
    margin-bottom: 5px;
    padding: 3px 10px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
    height: auto;
    min-height: auto;
}

.category-grid[b-9wj7ztdh8j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}

.category-radio[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--secondary-text);
}

    .category-radio:hover[b-9wj7ztdh8j] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    .category-radio.selected[b-9wj7ztdh8j] {
        background: var(--button-primary-bg);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    .category-radio input[type="radio"][b-9wj7ztdh8j] {
        display: none;
    }

.radio-dot[b-9wj7ztdh8j] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.category-radio.selected .radio-dot[b-9wj7ztdh8j] {
    border-color: white;
    background: white;
}

.radio-label[b-9wj7ztdh8j] {
    flex: 1;
    text-align: center;
    letter-spacing: 6px;
    font-size: 15px;
    /*padding:0px 10px !important;*/
}

/* 签筒容器 - 关键修改：动态高度 */
.lots-container-scroll[b-9wj7ztdh8j] {
    height: auto;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8f8f8;
    flex: 1 1 auto;
}

.lots-container[b-9wj7ztdh8j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
    padding: 6px;
    min-height: min-content;
    height: fit-content;
}

/* 签筒圆圈 */
.lot-circle[b-9wj7ztdh8j] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.8em;
}

    .lot-circle.available[b-9wj7ztdh8j] {
        background: #f0f0f0;
        border: 2px solid #d0d0d0;
        color: var(--secondary-text);
    }

        .lot-circle.available:hover[b-9wj7ztdh8j] {
            background: var(--primary-light);
            color: white;
            transform: scale(1.1);
            border-color: var(--primary-color);
        }

    .lot-circle.selected[b-9wj7ztdh8j] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-9wj7ztdh8j 2s infinite;
    }

@keyframes pulse-b-9wj7ztdh8j {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.lot-number[b-9wj7ztdh8j] {
    font-size: 1.0em;
    font-weight: normal; /* 确保卦号不加粗 */
}

.fixed-number[b-9wj7ztdh8j] {
    color: var(--button-info-color);
    font-weight: bold; /* 新增这行 */
}

.lot-dot[b-9wj7ztdh8j] {
    font-size: 1.2em;
    color: #999;
}

/* ===== 第三部分：签文显示区域 ===== */
.result-section[b-9wj7ztdh8j] {
    background: var(--section-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
}

.result-content[b-9wj7ztdh8j] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.result-header[b-9wj7ztdh8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

    .result-header h3[b-9wj7ztdh8j] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

/* 签文详情滚动容器 */
.lot-details-scroll[b-9wj7ztdh8j] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.lot-details[b-9wj7ztdh8j] {
    padding: 0;
    min-height: min-content;
}

.lot-header[b-9wj7ztdh8j] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-bottom: 1px solid #e8f5e9;
}

.lot-meta[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lot-number-badge[b-9wj7ztdh8j] {
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.lot-title[b-9wj7ztdh8j] {
    color: var(--primary-color);
    margin: 0 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.palace-tag[b-9wj7ztdh8j] {
    background: #E3F2FD;
    color: #1976D2;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
}

.fortune-tag[b-9wj7ztdh8j] {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.fortune-good[b-9wj7ztdh8j] {
    background: #E8F5E8;
    color: var(--primary-color);
}

.fortune-medium[b-9wj7ztdh8j] {
    background: #FFF3E0;
    color: #EF6C00;
}

.fortune-bad[b-9wj7ztdh8j] {
    background: #FFEBEE;
    color: #C62828;
}

.fortune-unknown[b-9wj7ztdh8j] {
    background: #F5F5F5;
    color: #757575;
}

/* 签文内容布局 */
.lot-content-vertical[b-9wj7ztdh8j] {
    padding: 0;
}

.content-item[b-9wj7ztdh8j] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
}

    .content-item:hover[b-9wj7ztdh8j] {
        background: #fdf2f2;
    }

    .content-item:last-child[b-9wj7ztdh8j] {
        border-bottom: none;
    }

.content-header[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.content-icon[b-9wj7ztdh8j] {
    font-size: 1.1em;
}

.content-header h4[b-9wj7ztdh8j] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.content-body[b-9wj7ztdh8j] {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.poem-text[b-9wj7ztdh8j] {
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.8;
}

/* 特殊内容项样式 */
.advice-item[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-left: 4px solid var(--primary-light);
}

    .advice-item .content-header[b-9wj7ztdh8j] {
        color: var(--primary-color);
    }

.advice-text[b-9wj7ztdh8j] {
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.7;
}

.category-analysis-item[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%);
    border-left: 4px solid #FF9800;
}

    .category-analysis-item .content-header[b-9wj7ztdh8j] {
        color: #EF6C00;
    }

.category-analysis-text[b-9wj7ztdh8j] {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* 宫位分析样式 */
.palace-analysis-item[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, #f8f8ff 0%, #f0f0ff 100%);
    border-left: 4px solid #7e57c2;
}

    .palace-analysis-item .content-header[b-9wj7ztdh8j] {
        color: #5e35b1;
    }

/* 宫位信息容器 */
.palace-info-container[b-9wj7ztdh8j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 12px;
    padding: 5px 10px;
    background: rgba(126, 87, 194, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(126, 87, 194, 0.1);
}

.info-item[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    min-width: 90px;
    max-width: 130px;
    padding: 5px 6px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    font-size: 0.85em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label[b-9wj7ztdh8j] {
    font-weight: 600;
    color: #5e35b1;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.info-value[b-9wj7ztdh8j] {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫位建议容器 */
.palace-advice-container[b-9wj7ztdh8j] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 1.0em;
}

.palace-advantages[b-9wj7ztdh8j],
.palace-disadvantages[b-9wj7ztdh8j] {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.palace-advantages[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-left: 4px solid var(--primary-light);
}

.palace-disadvantages[b-9wj7ztdh8j] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
}

    .palace-advantages h5[b-9wj7ztdh8j],
    .palace-disadvantages h5[b-9wj7ztdh8j] {
        margin: 0 0 6px 0;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.palace-advantages h5[b-9wj7ztdh8j] {
    color: var(--primary-color);
}

.palace-disadvantages h5[b-9wj7ztdh8j] {
    color: #EF6C00;
}

.palace-advantages p[b-9wj7ztdh8j],
.palace-disadvantages p[b-9wj7ztdh8j] {
    margin: 0;
    line-height: 1.5;
    color: var(--secondary-text);
    font-size: 0.85em;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* 状态样式 */
.loading-state[b-9wj7ztdh8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--secondary-text);
    flex: 1;
}

.spinner[b-9wj7ztdh8j] {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--primary-light);
    border-radius: 50%;
    animation: spin-b-9wj7ztdh8j 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-9wj7ztdh8j {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*没有抽签时：签词区域显示*/
.empty-state[b-9wj7ztdh8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
}

.empty-icon[b-9wj7ztdh8j] {
    font-size: 2.5em;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state h3[b-9wj7ztdh8j] {
    color: var(--secondary-text);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.empty-state p[b-9wj7ztdh8j] {
    margin: 0;
    font-size: 0.9em;
}

.empty-state-container[b-9wj7ztdh8j] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.empty-state-image[b-9wj7ztdh8j] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
}

/* 带边框的图片容器 - 修改样式 */
.bordered-image[b-9wj7ztdh8j] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


/* 右侧内容区域 - 修改为 Flex 布局 */
.empty-state-content[b-9wj7ztdh8j] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 改为从顶部开始 */
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px; /* 添加内边距 */
}

/* ===== txt说明 ===== */
/* 文本内容区域 - 占据剩余空间 */
.remark-content-txt[b-9wj7ztdh8j] {
    flex: 1; /* 占据剩余所有空间 */
    width: 100%;
    overflow-y: auto; /* 允许垂直滚动 */
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap; /* 保留换行 */
    text-align: left;
    max-height: none; /* 移除固定高度限制 */
}

/* ===== 图片轮播相关样式 - 修改 ===== */
.carousel-container[b-9wj7ztdh8j] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 修改图片样式 */
.responsive-image[b-9wj7ztdh8j] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 - 修复布局：三个按钮分开 */
.carousel-controls[b-9wj7ztdh8j] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-9wj7ztdh8j],
.carousel-btn-center[b-9wj7ztdh8j],
.carousel-btn-right[b-9wj7ztdh8j] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-9wj7ztdh8j] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

    .carousel-btn:active[b-9wj7ztdh8j] {
        transform: scale(0.95);
    }

.carousel-toggle[b-9wj7ztdh8j] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* ===== Split窗口分割相关样式 - 修改 ===== */
.empty-state-container[b-9wj7ztdh8j] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-9wj7ztdh8j] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-9wj7ztdh8j] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-9wj7ztdh8j] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-9wj7ztdh8j] {
    background-color: #888;
}

.empty-state-image[b-9wj7ztdh8j], .empty-state-content[b-9wj7ztdh8j] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* ===== 模态对话框 ===== */
.modal-overlay[b-9wj7ztdh8j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.confirmation-dialog[b-9wj7ztdh8j] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.dialog-icon[b-9wj7ztdh8j] {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.confirmation-dialog h3[b-9wj7ztdh8j] {
    color: var(--primary-color);
    margin: 0 0 6px 0;
    font-size: 1.1em;
}

.confirmation-dialog p[b-9wj7ztdh8j] {
    color: var(--secondary-text);
    margin: 0 0 16px 0;
    font-size: 0.9em;
}

.confirmation-dialog strong[b-9wj7ztdh8j] {
    color: var(--primary-color);
}

.dialog-buttons[b-9wj7ztdh8j] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirm[b-9wj7ztdh8j], .btn-cancel[b-9wj7ztdh8j] {
    padding: 6px 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 70px;
}

.btn-confirm[b-9wj7ztdh8j] {
    background: var(--button-primary-bg);
    color: white;
}

    .btn-confirm:hover[b-9wj7ztdh8j] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

.btn-cancel[b-9wj7ztdh8j] {
    background: #f5f5f5;
    color: var(--secondary-text);
    border: 1px solid #e0e0e0;
}

    .btn-cancel:hover[b-9wj7ztdh8j] {
        background: #eeeeee;
    }

/* ===== 滚动条样式 ===== */
.lots-container-scroll[b-9wj7ztdh8j]::-webkit-scrollbar,
.lot-details-scroll[b-9wj7ztdh8j]::-webkit-scrollbar {
    width: 12px;
}

.lots-container-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-track,
.lot-details-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.lots-container-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-thumb,
.lot-details-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

    .lots-container-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-thumb:hover,
    .lot-details-scroll[b-9wj7ztdh8j]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.lots-container-scroll[b-9wj7ztdh8j],
.lot-details-scroll[b-9wj7ztdh8j] {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 响应式设计 - 关键修改 ===== */
@media (max-width: 1200px) {
    .guidance-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(3, 1fr);
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 320px;
        max-height: 65vh;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        max-height: 350px;
        min-height: 220px;
    }
}

@media (max-width: 1024px) {
    .iching-container[b-9wj7ztdh8j] {
        padding: 6px;
        height: 100%;
    }

    .vertical-panel[b-9wj7ztdh8j] {
        gap: 6px;
        min-height: 800px;
    }

    .guidance-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-actions[b-9wj7ztdh8j] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header[b-9wj7ztdh8j] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: left;
    }

    .header-Title[b-9wj7ztdh8j] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .selection-info[b-9wj7ztdh8j] {
        text-align: left;
        min-width: auto;
        margin-left: 20px;
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 400px;
        max-height: 60vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-9wj7ztdh8j] {
        min-height: 400px;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        max-height: 300px;
        min-height: 200px;
        flex: 1 1 auto;
    }

    .result-section[b-9wj7ztdh8j] {
        min-height: 350px;
        flex: 1;
    }

    .category-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }

    /* 主题选择器在小屏幕上的适配 */
    .header-controls[b-9wj7ztdh8j] {
        gap: 10px;
    }

    .theme-selector[b-9wj7ztdh8j] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .theme-label[b-9wj7ztdh8j] {
        font-size: 0.8em;
    }

    .theme-dropdown[b-9wj7ztdh8j] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 响应式轮播控制 */
    .carousel-controls[b-9wj7ztdh8j] {
        width: 180px;
    }

    .carousel-btn[b-9wj7ztdh8j] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .carousel-toggle[b-9wj7ztdh8j] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .empty-state-image[b-9wj7ztdh8j] {
        min-width: 150px;
    }

    .empty-state-content[b-9wj7ztdh8j] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .iching-container[b-9wj7ztdh8j] {
        padding: 4px;
        height: 100%;
    }

    /* 关键修改：确保标题和按钮在一行 */
    .intro-header[b-9wj7ztdh8j] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .guidance-grid[b-9wj7ztdh8j] {
        grid-template-columns: 1fr;
    }

    .guidance-item[b-9wj7ztdh8j] {
        min-height: 45px;
    }

    .lots-container[b-9wj7ztdh8j] {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        gap: 4px;
    }

    .lot-circle[b-9wj7ztdh8j] {
        width: 32px;
        height: 32px;
    }

    .lot-header[b-9wj7ztdh8j] {
        padding: 10px 12px;
    }

    .lot-meta[b-9wj7ztdh8j] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .content-item[b-9wj7ztdh8j] {
        padding: 10px 12px;
    }

    .palace-info-container[b-9wj7ztdh8j] {
        gap: 6px 10px;
    }

    .info-item[b-9wj7ztdh8j] {
        min-width: 80px;
        max-width: 110px;
        font-size: 0.8em;
        padding: 4px 5px;
    }

    .info-label[b-9wj7ztdh8j] {
        margin-right: 4px;
        font-size: 0.85em;
    }

    .palace-advice-container[b-9wj7ztdh8j] {
        flex-direction: column;
    }

    .category-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
    }

    .category-radio[b-9wj7ztdh8j] {
        padding: 4px 8px;
        font-size: 0.8em;
    }

    .radio-dot[b-9wj7ztdh8j] {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 380px;
        max-height: 55vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-9wj7ztdh8j] {
        min-height: 420px;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        max-height: 280px;
        min-height: 180px;
        flex: 1 1 auto;
    }

    .result-section[b-9wj7ztdh8j] {
        min-height: 380px;
        flex: 1;
    }

    .problem-category-section[b-9wj7ztdh8j] {
        padding: 8px;
    }

    /* 在小屏幕上调整图片轮播布局 */
    .empty-state-container[b-9wj7ztdh8j] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-9wj7ztdh8j],
    .empty-state-content[b-9wj7ztdh8j] {
        flex: 1 1 100%;
        width: 100%;
    }

    .carousel-controls[b-9wj7ztdh8j] {
        bottom: 5px;
        width: 180px; /* 小屏幕调整宽度 */
    }

    .carousel-btn[b-9wj7ztdh8j] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px; /* 小屏幕调整边距 */
    }

    .carousel-toggle[b-9wj7ztdh8j] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* PDF按钮在小屏幕上的适配 */
    .fixed-width-btn[b-9wj7ztdh8j] {
        min-width: 70px;
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .lots-container[b-9wj7ztdh8j] {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    }

    .lot-circle[b-9wj7ztdh8j] {
        width: 28px;
        height: 28px;
    }

    .palace-info-container[b-9wj7ztdh8j] {
        gap: 4px 6px;
    }

    .info-item[b-9wj7ztdh8j] {
        min-width: 70px;
        max-width: 90px;
        font-size: 0.75em;
    }

    .info-label[b-9wj7ztdh8j] {
        margin-right: 3px;
        font-size: 0.8em;
    }

    .category-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .problem-category-section[b-9wj7ztdh8j] {
        padding: 6px;
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 420px;
        max-height: 60vh;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-9wj7ztdh8j] {
        min-height: 460px;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        max-height: 320px;
        min-height: 200px;
    }

    .result-section[b-9wj7ztdh8j] {
        min-height: 400px;
    }

    .section-header[b-9wj7ztdh8j] {
        gap: 6px;
    }

    .header-actions[b-9wj7ztdh8j] {
        justify-content: center;
    }

        .header-actions .btn-compact[b-9wj7ztdh8j] {
            padding: 3px 8px;
            font-size: 0.75em;
        }

    /* 超小屏幕时确保按钮和标题仍在一行 */
    .intro-header[b-9wj7ztdh8j] {
        flex-wrap: nowrap;
    }

    .fixed-width-btn[b-9wj7ztdh8j] {
        min-width: 65px;
        font-size: 0.75em;
        padding: 2px 6px;
    }

    /* 在超小屏幕上隐藏主题标签文字 */
    .theme-label[b-9wj7ztdh8j] {
        display: none;
    }

    .theme-selector[b-9wj7ztdh8j] {
        align-items: center;
    }

    .theme-dropdown[b-9wj7ztdh8j] {
        min-width: 80px;
        font-size: 0.75em;
        padding: 3px 6px;
    }

    /* 超小屏幕轮播控制 */
    .carousel-controls[b-9wj7ztdh8j] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-9wj7ztdh8j] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-9wj7ztdh8j] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ----支付模态框 - 整合确认和支付界面：---------- */
.payment-modal[b-9wj7ztdh8j] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.payment-confirm-section[b-9wj7ztdh8j] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.confirm-icon[b-9wj7ztdh8j] {
    font-size: 2em;
    margin-bottom: 10px;
}

.confirm-details[b-9wj7ztdh8j] {
    margin-top: 10px;
}

.amount[b-9wj7ztdh8j] {
    font-size: 1.1em;
    color: #e74c3c;
    margin: 5px 0;
}

.benefits[b-9wj7ztdh8j] {
    color: #666;
    font-size: 1.0em;
}

.wechat-pay-section[b-9wj7ztdh8j] {
    margin: 20px 0;
}

.payment-actions[b-9wj7ztdh8j] {
    text-align: center;
    margin-top: 15px;
}

.btn-cancel-payment[b-9wj7ztdh8j] {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel-payment:hover[b-9wj7ztdh8j] {
        background: #7f8c8d;
    }


/* -----微信支付对话框样式：这部分可能需要删除、因为代码移除了---------- */
.wechat-payment-dialog[b-9wj7ztdh8j] {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dialog-header[b-9wj7ztdh8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

    .dialog-header h3[b-9wj7ztdh8j] {
        margin: 0;
        color: #333;
    }

.btn-close[b-9wj7ztdh8j] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

    .btn-close:hover[b-9wj7ztdh8j] {
        color: #333;
    }

.payment-content[b-9wj7ztdh8j] {
    padding: 20px;
}

.qr-code-section[b-9wj7ztdh8j] {
    text-align: center;
    margin-bottom: 20px;
}

.qr-code-img[b-9wj7ztdh8j] {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    margin: 15px 0;
}

.payment-info[b-9wj7ztdh8j] {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: left;
}

    .payment-info p[b-9wj7ztdh8j] {
        margin: 5px 0;
    }

.payment-status[b-9wj7ztdh8j] {
    margin-top: 15px;
}

.status-loading[b-9wj7ztdh8j] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.spinner[b-9wj7ztdh8j] {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #07C160;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-9wj7ztdh8j 1s linear infinite;
    margin-right: 10px;
}

.status-message.success[b-9wj7ztdh8j] {
    color: #07C160;
    background: #f0f9f4;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.status-message.error[b-9wj7ztdh8j] {
    color: #e74c3c;
    background: #fdf2f2;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.dialog-footer[b-9wj7ztdh8j] {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-cancel[b-9wj7ztdh8j] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel:hover[b-9wj7ztdh8j] {
        background: #5a6268;
    }

@keyframes spin-b-9wj7ztdh8j {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 超小高度设备适配 */
@media (max-height: 700px) {
    .iching-container[b-9wj7ztdh8j] {
        min-height: 650px;
    }

    .vertical-panel[b-9wj7ztdh8j] {
        min-height: 600px;
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 280px;
        max-height: 45vh;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        max-height: 220px;
        min-height: 160px;
    }

    .result-section[b-9wj7ztdh8j] {
        min-height: 280px;
    }
}

/* 新增：针对问题类别区域换行的特殊处理 */
@media (max-width: 360px) {
    .category-grid[b-9wj7ztdh8j] {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-radio[b-9wj7ztdh8j] {
        padding: 3px 6px;
        font-size: 0.75em;
    }

    .lots-section.expanded[b-9wj7ztdh8j] {
        min-height: 450px;
    }

    .lots-container-scroll[b-9wj7ztdh8j] {
        min-height: 220px;
    }
}
/* _content/LEAFBlazorApp25/Components/IChing/Lots/DrawLotsThemeZb.razor.rz.scp.css */
/* ===== 主题变量定义 ===== */
.iching-container[b-lpbc661j0f] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-secondary-color: #FF9800;
}

    /* 朱砂祥瑞主题 */
    .iching-container.theme-vermillion[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 碧海青天主题 */
    .iching-container.theme-ocean[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 紫气东来主题 */
    .iching-container.theme-purple[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .iching-container.theme-golden[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

/* ===== 语音设置区域样式 ===== */
.voice-settings-section[b-lpbc661j0f] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    border: 1px solid var(--border-color);
}

.voice-controls-grid[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.voice-test-buttons[b-lpbc661j0f] {
    display: flex;
    gap: 8px;
}

/* 小尺寸按钮 - 测试功能用 */
.btn-small[b-lpbc661j0f] {
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    min-width: 60px !important;
    border: 1px solid rgba(120, 120, 120, 0.3) !important;
}

/* 语音模式选择器 */
.voice-mode-selector[b-lpbc661j0f] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-lpbc661j0f] {
        display: none;
    }

.checkmark[b-lpbc661j0f] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-lpbc661j0f] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-lpbc661j0f]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-lpbc661j0f] {
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.0em;
}

/* 语音参数区域 */
.voice-params[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-dropdown[b-lpbc661j0f] {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    max-width: 350px; /* 新增最大宽度限制 */
    width: auto; /* 自动宽度 */
}

/* 水平排列的滑动条 */
.voice-sliders-horizontal[b-lpbc661j0f] {
    display: flex;
    gap: 12px;
    align-items: center;
}

    .voice-sliders-horizontal .slider-item[b-lpbc661j0f] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9em;
    }

        .voice-sliders-horizontal .slider-item label[b-lpbc661j0f] {
            min-width: 25px;
            color: var(--secondary-text);
            font-size: 0.9em;
        }

        .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f] {
            width: 100px;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            outline: none;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f]::-webkit-slider-thumb {
                appearance: none;
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
            }

            .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f]::-moz-range-thumb {
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
                border: none;
            }

        .voice-sliders-horizontal .slider-item span[b-lpbc661j0f] {
            min-width: 20px;
            text-align: center;
            font-size: 0.9em;
            color: var(--primary-color);
            font-weight: 500;
        }

/* 语音文本输入区域 */
.voice-text-inputs[b-lpbc661j0f] {
    margin-top: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.text-inputs-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px; /* 减少行间距 */
    margin-bottom: 8px;
}

/* 语音文本输入项 */
.text-input-item[b-lpbc661j0f] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px; /* 减少水平间距 */
    margin-bottom: 2px; /* 减少行间距 */
}

    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em;
        color: var(--secondary-text);
        font-weight: 500;
        min-width: 80px;
        white-space: nowrap;
    }

.text-input[b-lpbc661j0f] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    width: 100%;
    box-sizing: border-box;
}

    .text-input:focus[b-lpbc661j0f] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.btn-update[b-lpbc661j0f] {
    width: 180px;
    margin: 0 auto;
    padding: 4px 8px;
    font-size: 0.75em;
    background: var(--button-info-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

    .btn-update:hover[b-lpbc661j0f] {
        background: #1976D2;
        transform: translateY(-1px);
    }

/* ===== 主容器布局 ===== */
.iching-container[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    transition: all 0.3s ease;
}

/* 垂直面板布局 */
.vertical-panel[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    flex: 1;
}

/* ===== 第一部分：介绍区域 ===== */
.intro-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 8px 16px 4px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.intro-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.header-controls[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 主题选择器样式 */
.theme-selector[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.theme-dropdown[b-lpbc661j0f] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-lpbc661j0f] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-lpbc661j0f] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

.section-title[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0;
    font-weight: 600;
}

.section-title2[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 1.0em;
    margin: 0;
    font-weight: 600;
}

/* ===== 按钮样式 - 新增PDF按钮 ===== */
.btn-compact[b-lpbc661j0f] {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* PDF按钮样式 */
.btn-pdf[b-lpbc661j0f] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
}

    .btn-pdf:hover[b-lpbc661j0f] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 - 确保所有按钮宽度一致 */
.fixed-width-btn[b-lpbc661j0f] {
    min-width: 80px;
    flex-shrink: 0;
}

.btn-primary[b-lpbc661j0f] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 14px;
}

    .btn-primary:hover[b-lpbc661j0f] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

.btn-secondary[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

    .btn-secondary:hover[b-lpbc661j0f] {
        background: rgba(255, 152, 0, 0.2);
    }

.btn-info[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-lpbc661j0f] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.header-actions[b-lpbc661j0f] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* 抽签须知网格 - 六列布局 */
.intro-content[b-lpbc661j0f] {
    margin: 0;
}

.guidance-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.guidance-item[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    min-height: 50px;
}

.guidance-icon[b-lpbc661j0f] {
    font-size: 1.1em;
    margin-right: 6px;
    flex-shrink: 0;
}

.guidance-text[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .guidance-text strong[b-lpbc661j0f] {
        color: var(--secondary-text);
        font-size: 0.9em;
        line-height: 1.2;
    }

    .guidance-text span[b-lpbc661j0f] {
        color: var(--secondary-text);
        font-size: 0.8em;
        line-height: 1.4;
        padding-top: 3px;
    }

/* ===== 第二部分：签筒区域 ===== */
.lots-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 250px;
    transition: all 0.3s ease;
}

    /* 展开状态 */
    .lots-section.expanded[b-lpbc661j0f] {
        flex: 0 1 auto;
        height: auto;
        min-height: 300px;
        max-height: 70vh;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 250px;
    }

    /* 收起状态 */
    .lots-section.collapsed[b-lpbc661j0f] {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

        .lots-section.collapsed .problem-category-section[b-lpbc661j0f],
        .lots-section.collapsed .lots-container-scroll[b-lpbc661j0f] {
            display: none;
        }

.section-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-shrink: 0;
    gap: 20px;
}

    .section-header h3[b-lpbc661j0f] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        flex-shrink: 0;
    }

.selection-info[b-lpbc661j0f] {
    font-size: 0.9em;
    flex-shrink: 0;
    text-align: right;
    min-width: 180px;
    margin-left: 20px;
}

.selected-indicator[b-lpbc661j0f] {
    color: var(--primary-light);
    font-weight: 500;
}

    .selected-indicator strong[b-lpbc661j0f] {
        color: var(--primary-color);
    }

.select-prompt[b-lpbc661j0f] {
    color: var(--secondary-text);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
}

/* 问题类别选择区域 */
.problem-category-section[b-lpbc661j0f] {
    margin-bottom: 5px;
    padding: 3px 10px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
    height: auto;
    min-height: auto;
}

.category-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}

.category-radio[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--secondary-text);
}

    .category-radio:hover[b-lpbc661j0f] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    .category-radio.selected[b-lpbc661j0f] {
        background: var(--button-primary-bg);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    .category-radio input[type="radio"][b-lpbc661j0f] {
        display: none;
    }

.radio-dot[b-lpbc661j0f] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.category-radio.selected .radio-dot[b-lpbc661j0f] {
    border-color: white;
    background: white;
}

.radio-label[b-lpbc661j0f] {
    flex: 1;
    text-align: center;
    letter-spacing: 6px;
    font-size: 15px;
}

/* 签筒容器 */
.lots-container-scroll[b-lpbc661j0f] {
    height: auto;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8f8f8;
    flex: 1 1 auto;
}

.lots-container[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
    padding: 6px;
    min-height: min-content;
    height: fit-content;
}

/* 签筒圆圈 */
.lot-circle[b-lpbc661j0f] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.8em;
}

    .lot-circle.available[b-lpbc661j0f] {
        background: #f0f0f0;
        border: 2px solid #d0d0d0;
        color: var(--secondary-text);
    }

        .lot-circle.available:hover[b-lpbc661j0f] {
            background: var(--primary-light);
            color: white;
            transform: scale(1.1);
            border-color: var(--primary-color);
        }

    .lot-circle.selected[b-lpbc661j0f] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-lpbc661j0f 2s infinite;
    }

/* 脉冲动画 */
@keyframes pulse-b-lpbc661j0f {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    }
}

.lot-number[b-lpbc661j0f] {
    font-size: 1.0em;
    font-weight: normal;
}

.fixed-number[b-lpbc661j0f] {
    color: var(--button-info-color);
    font-weight: bold;
}

.lot-dot[b-lpbc661j0f] {
    font-size: 1.2em;
    color: #999;
}

/* ===== 第三部分：签文显示区域 ===== */
.result-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
}

.result-content[b-lpbc661j0f] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.result-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

    .result-header h3[b-lpbc661j0f] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

/* 签文详情滚动容器 */
.lot-details-scroll[b-lpbc661j0f] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.lot-details[b-lpbc661j0f] {
    padding: 0;
    min-height: min-content;
}

.lot-header[b-lpbc661j0f] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-bottom: 1px solid #e8f5e9;
}

.lot-meta[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lot-number-badge[b-lpbc661j0f] {
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.lot-title[b-lpbc661j0f] {
    color: var(--primary-color);
    margin: 0 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.palace-tag[b-lpbc661j0f] {
    background: #E3F2FD;
    color: #1976D2;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
}

.fortune-tag[b-lpbc661j0f] {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.fortune-good[b-lpbc661j0f] {
    background: #E8F5E8;
    color: var(--primary-color);
}

.fortune-medium[b-lpbc661j0f] {
    background: #FFF3E0;
    color: #EF6C00;
}

.fortune-bad[b-lpbc661j0f] {
    background: #FFEBEE;
    color: #C62828;
}

.fortune-unknown[b-lpbc661j0f] {
    background: #F5F5F5;
    color: #757575;
}

/* 签文内容布局 */
.lot-content-vertical[b-lpbc661j0f] {
    padding: 0;
}

.content-item[b-lpbc661j0f] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
}

    .content-item:hover[b-lpbc661j0f] {
        background: #fdf2f2;
    }

    .content-item:last-child[b-lpbc661j0f] {
        border-bottom: none;
    }

.content-header[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.content-icon[b-lpbc661j0f] {
    font-size: 1.1em;
}

.content-header h4[b-lpbc661j0f] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.content-body[b-lpbc661j0f] {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.poem-text[b-lpbc661j0f] {
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.8;
}

/* 特殊内容项样式 */
.advice-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-left: 4px solid var(--primary-light);
}

    .advice-item .content-header[b-lpbc661j0f] {
        color: var(--primary-color);
    }

.advice-text[b-lpbc661j0f] {
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.7;
}

.category-analysis-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%);
    border-left: 4px solid #FF9800;
}

    .category-analysis-item .content-header[b-lpbc661j0f] {
        color: #EF6C00;
    }

.category-analysis-text[b-lpbc661j0f] {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* 宫位分析样式 */
.palace-analysis-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #f8f8ff 0%, #f0f0ff 100%);
    border-left: 4px solid #7e57c2;
}

    .palace-analysis-item .content-header[b-lpbc661j0f] {
        color: #5e35b1;
    }

/* 宫位信息容器 */
.palace-info-container[b-lpbc661j0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 12px;
    padding: 5px 10px;
    background: rgba(126, 87, 194, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(126, 87, 194, 0.1);
}

.info-item[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    min-width: 90px;
    max-width: 130px;
    padding: 5px 6px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    font-size: 0.85em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label[b-lpbc661j0f] {
    font-weight: 600;
    color: #5e35b1;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.info-value[b-lpbc661j0f] {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫位建议容器 */
.palace-advice-container[b-lpbc661j0f] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 1.0em;
}

.palace-advantages[b-lpbc661j0f],
.palace-disadvantages[b-lpbc661j0f] {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.palace-advantages[b-lpbc661j0f] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-left: 4px solid var(--primary-light);
}

.palace-disadvantages[b-lpbc661j0f] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
}

    .palace-advantages h5[b-lpbc661j0f],
    .palace-disadvantages h5[b-lpbc661j0f] {
        margin: 0 0 6px 0;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.palace-advantages h5[b-lpbc661j0f] {
    color: var(--primary-color);
}

.palace-disadvantages h5[b-lpbc661j0f] {
    color: #EF6C00;
}

.palace-advantages p[b-lpbc661j0f],
.palace-disadvantages p[b-lpbc661j0f] {
    margin: 0;
    line-height: 1.5;
    color: var(--secondary-text);
    font-size: 0.85em;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* 状态样式 */
.loading-state[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--secondary-text);
    flex: 1;
}

.spinner[b-lpbc661j0f] {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--primary-light);
    border-radius: 50%;
    animation: spin-b-lpbc661j0f 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-lpbc661j0f {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 没有抽签时：签词区域显示 */
.empty-state[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
}

.empty-icon[b-lpbc661j0f] {
    font-size: 2.5em;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state h3[b-lpbc661j0f] {
    color: var(--secondary-text);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.empty-state p[b-lpbc661j0f] {
    margin: 0;
    font-size: 0.9em;
}

.empty-state-container[b-lpbc661j0f] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.empty-state-image[b-lpbc661j0f] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
}

/* 带边框的图片容器 */
.bordered-image[b-lpbc661j0f] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 右侧内容区域 */
.empty-state-content[b-lpbc661j0f] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
}

/* ===== txt说明 ===== */
.remark-content-txt[b-lpbc661j0f] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: none;
}

/* ===== 图片轮播相关样式 ===== */
.carousel-container[b-lpbc661j0f] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 图片样式 */
.responsive-image[b-lpbc661j0f] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 */
.carousel-controls[b-lpbc661j0f] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-lpbc661j0f],
.carousel-btn-center[b-lpbc661j0f],
.carousel-btn-right[b-lpbc661j0f] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-lpbc661j0f] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

    .carousel-btn:active[b-lpbc661j0f] {
        transform: scale(0.95);
    }

.carousel-toggle[b-lpbc661j0f] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* ===== Split窗口分割相关样式 ===== */
.empty-state-container[b-lpbc661j0f] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-lpbc661j0f] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-lpbc661j0f] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-lpbc661j0f] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-lpbc661j0f] {
    background-color: #888;
}

.empty-state-image[b-lpbc661j0f], .empty-state-content[b-lpbc661j0f] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* ===== 滚动条样式 ===== */
.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar {
    width: 12px;
}

.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-track,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

    .lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb:hover,
    .lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.lots-container-scroll[b-lpbc661j0f],
.lot-details-scroll[b-lpbc661j0f] {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(3, 1fr);
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 320px;
        max-height: 65vh;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 350px;
        min-height: 220px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .iching-container[b-lpbc661j0f] {
        padding: 6px;
        height: 100%;
    }

    .vertical-panel[b-lpbc661j0f] {
        gap: 6px;
        min-height: 800px;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-actions[b-lpbc661j0f] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header[b-lpbc661j0f] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: left;
    }

    .header-Title[b-lpbc661j0f] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .selection-info[b-lpbc661j0f] {
        text-align: left;
        min-width: auto;
        margin-left: 20px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 400px;
        max-height: 60vh;
        flex: 0 1 auto;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 400px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 300px;
        min-height: 200px;
        flex: 1 1 auto;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 350px;
        flex: 1;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }

    /* 主题选择器在小屏幕上的适配 */
    .header-controls[b-lpbc661j0f] {
        gap: 10px;
    }

    .theme-selector[b-lpbc661j0f] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .theme-label[b-lpbc661j0f] {
        font-size: 0.8em;
    }

    .theme-dropdown[b-lpbc661j0f] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 语音设置在小屏幕上的适配 */
    .voice-controls-grid[b-lpbc661j0f] {
        gap: 10px;
    }

    .voice-params[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .voice-sliders-horizontal[b-lpbc661j0f] {
        gap: 8px;
    }

    /* 响应式轮播控制 */
    .carousel-controls[b-lpbc661j0f] {
        width: 180px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .empty-state-image[b-lpbc661j0f] {
        min-width: 150px;
    }

    .empty-state-content[b-lpbc661j0f] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .iching-container[b-lpbc661j0f] {
        padding: 4px;
        height: 100%;
    }

    /* 关键修改：确保标题和按钮在一行 */
    .intro-header[b-lpbc661j0f] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: 1fr;
    }

    .guidance-item[b-lpbc661j0f] {
        min-height: 45px;
    }

    .lots-container[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        gap: 4px;
    }

    .lot-circle[b-lpbc661j0f] {
        width: 32px;
        height: 32px;
    }

    .lot-header[b-lpbc661j0f] {
        padding: 10px 12px;
    }

    .lot-meta[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .content-item[b-lpbc661j0f] {
        padding: 10px 12px;
    }

    .palace-info-container[b-lpbc661j0f] {
        gap: 6px 10px;
    }

    .info-item[b-lpbc661j0f] {
        min-width: 80px;
        max-width: 110px;
        font-size: 0.8em;
        padding: 4px 5px;
    }

    .info-label[b-lpbc661j0f] {
        margin-right: 4px;
        font-size: 0.85em;
    }

    .palace-advice-container[b-lpbc661j0f] {
        flex-direction: column;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
    }

    .category-radio[b-lpbc661j0f] {
        padding: 4px 8px;
        font-size: 0.8em;
    }

    .radio-dot[b-lpbc661j0f] {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 380px;
        max-height: 55vh;
        flex: 0 1 auto;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 420px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 280px;
        min-height: 180px;
        flex: 1 1 auto;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 380px;
        flex: 1;
    }

    .problem-category-section[b-lpbc661j0f] {
        padding: 8px;
    }

    /* 语音设置在小屏幕上隐藏详细设置 */
    .voice-controls-grid[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .voice-test-buttons[b-lpbc661j0f] {
        order: 1;
    }

    .voice-mode-selector[b-lpbc661j0f] {
        order: 2;
    }

    .voice-params[b-lpbc661j0f] {
        order: 3;
        width: 100%;
    }

    .voice-sliders-horizontal[b-lpbc661j0f] {
        width: 100%;
        justify-content: space-between;
    }

        .voice-sliders-horizontal .slider-item[b-lpbc661j0f] {
            flex: 1;
            justify-content: center;
        }

    /* 语音文本输入区域在小屏幕上的适配 */
    .voice-text-inputs[b-lpbc661j0f] {
        padding: 6px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* 小窗体时文字不缩小，保持现状 */
    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em; /* 保持原有大小，不缩小 */
    }

    .text-input[b-lpbc661j0f] {
        font-size: 0.75em; /* 保持原有大小，不缩小 */
        padding: 2px 4px;
    }

    .btn-update[b-lpbc661j0f] {
        font-size: 0.75em; /* 保持原有大小，不缩小 */
        padding: 3px 6px;
    }

    /* 在小屏幕上调整图片轮播布局 */
    .empty-state-container[b-lpbc661j0f] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-lpbc661j0f],
    .empty-state-content[b-lpbc661j0f] {
        flex: 1 1 100%;
        width: 100%;
    }

    .carousel-controls[b-lpbc661j0f] {
        bottom: 5px;
        width: 180px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* PDF按钮在小屏幕上的适配 */
    .fixed-width-btn[b-lpbc661j0f] {
        min-width: 70px;
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .lots-container[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    }

    .lot-circle[b-lpbc661j0f] {
        width: 28px;
        height: 28px;
    }

    .palace-info-container[b-lpbc661j0f] {
        gap: 4px 6px;
    }

    .info-item[b-lpbc661j0f] {
        min-width: 70px;
        max-width: 90px;
        font-size: 0.75em;
    }

    .info-label[b-lpbc661j0f] {
        margin-right: 3px;
        font-size: 0.8em;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .problem-category-section[b-lpbc661j0f] {
        padding: 6px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 420px;
        max-height: 60vh;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 460px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 320px;
        min-height: 200px;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 400px;
    }

    .section-header[b-lpbc661j0f] {
        gap: 6px;
    }

    .header-actions[b-lpbc661j0f] {
        justify-content: center;
    }

        .header-actions .btn-compact[b-lpbc661j0f] {
            padding: 3px 8px;
            font-size: 0.75em;
        }

    /* 超小屏幕时确保按钮和标题仍在一行 */
    .intro-header[b-lpbc661j0f] {
        flex-wrap: nowrap;
    }

    .fixed-width-btn[b-lpbc661j0f] {
        min-width: 65px;
        font-size: 0.75em;
        padding: 2px 6px;
    }

    /* 在超小屏幕上隐藏主题标签文字 */
    .theme-label[b-lpbc661j0f] {
        display: none;
    }

    .theme-selector[b-lpbc661j0f] {
        align-items: center;
    }

    .theme-dropdown[b-lpbc661j0f] {
        min-width: 80px;
        font-size: 0.75em;
        padding: 3px 6px;
    }

    /* 语音设置在超小屏幕上的适配 */
    .voice-settings-section[b-lpbc661j0f] {
        padding: 6px 8px;
    }

    .voice-controls-grid[b-lpbc661j0f] {
        gap: 6px;
    }

    .btn-small[b-lpbc661j0f] {
        min-width: 55px !important;
        font-size: 0.7em !important;
        padding: 1px 6px !important;
    }

    .voice-dropdown[b-lpbc661j0f] {
        min-width: 60px;
        font-size: 0.7em;
    }

    .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f] {
        width: 60px;
    }

    .voice-sliders-horizontal .slider-item span[b-lpbc661j0f] {
        min-width: 18px;
        font-size: 0.6em;
    }

    /* 语音文本输入在超小屏幕上的适配 */
    .voice-text-inputs[b-lpbc661j0f] {
        padding: 4px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        gap: 3px;
    }

    /* 小窗体时文字不缩小，保持现状 */
    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em; /* 保持原有大小，不缩小 */
    }

    .text-input[b-lpbc661j0f] {
        font-size: 0.75em; /* 保持原有大小，不缩小 */
        padding: 1px 3px;
    }

    .btn-update[b-lpbc661j0f] {
        font-size: 0.75em; /* 保持原有大小，不缩小 */
        padding: 2px 4px;
    }

    /* 超小屏幕轮播控制 */
    .carousel-controls[b-lpbc661j0f] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* 超小高度设备适配 */
@media (max-height: 700px) {
    .iching-container[b-lpbc661j0f] {
        min-height: 650px;
    }

    .vertical-panel[b-lpbc661j0f] {
        min-height: 600px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 280px;
        max-height: 45vh;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 220px;
        min-height: 160px;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 280px;
    }
}

/* 新增：针对问题类别区域换行的特殊处理 */
@media (max-width: 360px) {
    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-radio[b-lpbc661j0f] {
        padding: 3px 6px;
        font-size: 0.75em;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 450px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        min-height: 220px;
    }
}
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaTheme.razor.rz.scp.css */
/* ===== 周易卦象组件样式 - 主题系统优化版 ===== */

/* ===== 主题变量定义 ===== */

    /* 竹简清风主题  */
    .zhouyi-container.theme-bamboo[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
        --primary-color: #2E7D32; /* 标题区 - 深绿色 */
        --primary-light: #4CAF50; /* 功能区标题 */
        --primary-lighter: #66BB6A; /* 功能区背景 */
        --secondary-color: #81C784; /* C区 - 绿色 */
        --accent-color: #A5D6A7; /* 强调色 */
        --tertiary-color: #4CAF50; /* D区 - 中绿色 */
        --border-color: #d8e8d8;
        --shadow-color: rgba(46, 125, 50, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50; /* 深色文字确保对比度 */
        --secondary-text: #666;
        --hover-bg: rgba(76, 175, 80, 0.05);
        --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
        --button-secondary-bg: rgba(76, 175, 80, 0.1);
        --button-info-color: #66BB6A;
        --button-secondary-color: #A5D6A7;
        --client-bg: transparent;
        --client-border: #d8e8d8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7f0;
        --interpretation-alt-color: #e8f5e9;
    }

    .zhouyi-container[b-bh177l20zl] {
        /* 默认主题 - 天地玄黄 - 优化版 */
        --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
        --primary-color: #8B4513; /* 标题区 - 深棕色 */
        --primary-light: #A0522D; /* 功能区标题 - 棕色 */
        --primary-lighter: #CD853F; /* 功能区背景 */
        --secondary-color: #D2691E; /* C区 - 橙棕色 */
        --accent-color: #CD853F; /* 混沌爻币 强调色 */
        --tertiary-color: #8B4513; /* D区 - 深棕色 */
        --border-color: #d4c6a8;
        --shadow-color: rgba(139, 69, 19, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037; /* 改为深棕色系，原为 #2c3e50 */
        --secondary-text: #795548; /* 改为棕色系，原为 #666 */
        --hover-bg: rgba(139, 69, 19, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
        --button-secondary-bg: rgba(160, 82, 45, 0.1);
        --button-info-color: #D2691E;
        --button-secondary-color: #CD853F;
        --client-bg: transparent;
        --client-border: #e0d6c0;
        --client-text: var(--text-color);
        /* 新增：解卦区内部分区交替颜色 */
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f6f2;
        --interpretation-alt-color: #e8dfce;
    }


    /* 朱砂祥瑞主题  */
    .zhouyi-container.theme-vermillion[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000; /* 标题区 - 深红色 */
        --primary-light: #A52A2A; /* 功能区标题 */
        --primary-lighter: #CD5C5C; /* 功能区背景 */
        --secondary-color: #B22222; /* C区 - 砖红色 */
        --accent-color: #CD5C5C; /* 强调色 */
        --tertiary-color: #C44545; /* D区 - 暗红色 */
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0; /* 标题区 - 深蓝色 */
        --primary-light: #1976D2; /* 功能区标题 */
        --primary-lighter: #1E88E5; /* 功能区背景 */
        --secondary-color: #2196F3; /* C区 - 蓝色 */
        --accent-color: #42A5F5; /* 强调色 */
        --tertiary-color: #1976D2; /* D区 - 中蓝色 */
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2; /* 标题区 - 深紫色 */
        --primary-light: #8E24AA; /* 功能区标题 */
        --primary-lighter: #9C27B0; /* 功能区背景 */
        --secondary-color: #AB47BC; /* C区 - 紫色 */
        --accent-color: #BA68C8; /* 强调色 */
        --tertiary-color: #8E24AA; /* D区 - 中紫色 */
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 - 优化版 */
    .zhouyi-container.theme-golden[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B; /* 标题区 - 暗金色 */
        --primary-light: #DAA520; /* 功能区标题 */
        --primary-lighter: #F4C430; /* 功能区背景 */
        --secondary-color: #FFC107; /* C区 - 琥珀色 */
        --accent-color: #FFD54F; /* 强调色 */
        --tertiary-color: #DAA520; /* D区 - 金色 */
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037; /* 改为深棕色，确保对比度 */
        --secondary-text: #795548; /* 改为棕色 */
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

        /* 墨韵玄烨黑色主题 - 优化版 */
        .zhouyi-container.theme-dark[b-bh177l20zl] {
            --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            --primary-color: #000000; /* 标题区 - 纯黑 */
            --primary-light: #222222; /* 功能区标题 - 改为更深的黑色 */
            --primary-lighter: #333333; /* 功能区背景 - 改为更深的黑色 */
            --secondary-color: #444444; /* C区 - 改为更深的灰色 */
            --accent-color: #555555; /* 强调色 - 改为更深的灰色 */
            --tertiary-color: #111111; /* D区标题 - 改为更深的黑色 */
            --border-color: #444444;
            --shadow-color: rgba(0, 0, 0, 0.5);
            --section-bg: #f5f5f5; /* 改为淡灰色背景 */
            --text-color: #222222; /* 改为接近黑色的深灰色 */
            --secondary-text: #444444; /* 改为深灰色 */
            --hover-bg: rgba(0, 0, 0, 0.1);
            --button-primary-bg: linear-gradient(135deg, #333333, #555555);
            --button-secondary-bg: rgba(0, 0, 0, 0.1);
            --button-info-color: #666666;
            --button-secondary-color: #777777;
            --client-bg: #2d2d2d; /* 客户信息区背景改为浅黑色 */
            --client-border: #444444;
            --client-text: #e0e0e0; /* 客户信息区文字改为浅色 */
            --interpretation-block-bg-1: #f5f5f5; /* 解卦区背景1 - 淡灰色 */
            --interpretation-block-bg-2: #e8e8e8; /* 解卦区背景2 - 稍深的灰色 */
            --interpretation-alt-color: #dcdcdc; /* 解卦区交替颜色 */
        }

/* ===== 主容器 ===== */
.zhouyi-container[b-bh177l20zl] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

/* ===== 新增响应式布局样式 ===== */

/* A区域：标题区新布局 */
.title-main-group[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    max-width:300px;
}

.title-center-group[b-bh177l20zl] {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 20px;
}

/* C1区域：紧凑网格布局 */
.compact-grid[b-bh177l20zl] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
}

.compact-item[b-bh177l20zl] {
    min-width: 80px;
}

.compact-label[b-bh177l20zl] {
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
    max-width: 70px !important;
}

/* C2区域：响应式摇卦布局 */
.responsive-layout[b-bh177l20zl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.casting-title-group[b-bh177l20zl],
.casting-coins-group[b-bh177l20zl],
.casting-buttons-group[b-bh177l20zl] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

/* 紧凑硬币布局 */
.compact-coins[b-bh177l20zl] {
    gap: 20px !important;
}

    /*设置爻币值大小*/
    .compact-coins .coin[b-bh177l20zl] {
        min-width: 100px !important;
        height: 45px !important;
    }

/* 紧凑按钮布局 */
.compact-buttons[b-bh177l20zl] {
    flex-direction: row !important;
    gap: 15px !important;
    justify-content: center;
}

/* A. 标题区 - 使用主题主色 */
.title-section[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 4px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.title-text[b-bh177l20zl] {
    color: white;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    flex: 1;
    white-space: nowrap; /* 添加这行防止文字换行 */
}

.title-controls[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.title-buttons[b-bh177l20zl] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* 主题选择器样式 */
    .theme-selector[b-bh177l20zl] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-bh177l20zl] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-bh177l20zl] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-bh177l20zl] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-bh177l20zl] {
        background: white;
        color: var(--text-color);
    }

/* B. 客户信息区 - 简化背景 var(--section-bg);var(--client-bg) */
.client-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
    margin: -6px 0px -5px 0px;
    border: 1px solid var(--client-border);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.client-form-scroll[b-bh177l20zl] {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar {
        height: 6px;
    }

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

        .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.form-field-group[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 0px 0px 10px;
    background: var(--client-bg); /* 使用透明背景 */
    border-radius: 6px;
    border: 1px solid var(--client-border);
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    margin-top: 3px;
}

    .form-field-group label[b-bh177l20zl] {
        font-weight: bold;
        color: var(--client-text);
        font-size: 0.85rem;
        min-width: 60px;
        margin: 0;
        white-space: nowrap;
    }

.form-control[b-bh177l20zl] {
    min-width: 150px;
    margin: 0px 0px 0px -25px;
}

.form-control[b-bh177l20zl], .form-control-email[b-bh177l20zl] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--client-border);
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
}

.form-control-email[b-bh177l20zl] {
    min-width: 200px;
    margin-left:-25px;
}

    .form-control:focus[b-bh177l20zl], .form-control-email:focus[b-bh177l20zl] {
        border-color: var(--primary-light);
        outline: none;
        box-shadow: 0 0 0 2px rgba(160, 82, 45, 0.2);
    }

/* ===== C: 起卦区 - 使用次级主题色 ===== */
.casting-main-container[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* C1: 问事选择区 - 使用主浅色 */
.question-section-row[b-bh177l20zl] {
    width: 100%;
}

.function-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
}

/* 问事选择区两列布局 */
.question-section-layout[b-bh177l20zl] {
    display: flex;
    align-items: stretch;
    min-height: 45px;
}

.question-title-column[b-bh177l20zl] {
    flex: 0 0 110px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 5px 4px 5px;
    margin: 4px 0px;
}

.question-options-column[b-bh177l20zl] {
    flex: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-bh177l20zl] {
    color: white;
    padding: 4px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-bh177l20zl] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 2px;
}

/* C1区域：紧凑网格布局 - 固定宽度自动换行 */
.compact-grid[b-bh177l20zl] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start;
}

.compact-item[b-bh177l20zl] {
    flex: 0 0 auto !important; /* 不伸缩，不收缩，自动基础尺寸 */
    width: 80px !important; /* 固定宽度 */
    margin: 2px !important;
}

    .category-item input[type="radio"][b-bh177l20zl] {
        position: absolute;
        opacity: 0;
    }

.category-label[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.8rem;
    max-width: 80px;
    margin: 0 auto;
}

.radio-circle[b-bh177l20zl] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-bh177l20zl]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-bh177l20zl] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-bh177l20zl] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-bh177l20zl]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-bh177l20zl] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* C2: 摇卦区 - 使用次级色 */
.casting-section-row[b-bh177l20zl] {
    width: 100%;
    margin: 0px 0;
}

.casting-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
}

/* 摇卦区四列布局 */
.casting-section-layout[b-bh177l20zl] {
    display: flex;
    align-items: center;
    padding: 0;
}

.casting-title-column[b-bh177l20zl] {
    flex: 0 0 200px;
    background: var(--secondary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 2px;
}

.casting-buttons-column[b-bh177l20zl] {
    flex: 0 0 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-coins-column[b-bh177l20zl] {
    flex: 1;
    padding: 5px 8px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-header[b-bh177l20zl] {
    color: white;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
}

/* 左右边分布 - 已修改 */
.casting-header-content[b-bh177l20zl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* 左右分布 */
    width: 100%;
}

.draw-head[b-bh177l20zl] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.progress-badge[b-bh177l20zl] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 摇卦控制容器 */
.casting-controls-container[b-bh177l20zl] {
    padding: 0;
}

/* 按钮组布局 */
.button-group-left[b-bh177l20zl] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.coins-display-center[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 硬币值显示 */
.coin-values-display[b-bh177l20zl] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -2px 0px 0px 0px;
}

.coin-values-row[b-bh177l20zl] {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.coin-value-badge[b-bh177l20zl] {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

.coin-yang[b-bh177l20zl] {
    background: var(--accent-color);
}

.coin-yin[b-bh177l20zl] {
    background: var(--primary-color);
}

/* 硬币样式 */
.coins-container[b-bh177l20zl] {
    margin-bottom: 0;
}

/* 硬币行布局 - 调整水平间隔 */
.coins-row[b-bh177l20zl] {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* 紧凑硬币布局 - 调整水平间隔 */
.compact-coins[b-bh177l20zl] {
    gap: 40px !important; /* 调整紧凑模式下的间隔 */
}

/* 硬币列样式 */
.coin-column[b-bh177l20zl] {
    text-align: center;
}


.coin-wrapper[b-bh177l20zl] {
    margin-bottom: 6px;
}

.coin[b-bh177l20zl] {
    min-width: 120px;
    height: 50px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
}

.coin-hidden[b-bh177l20zl] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-bh177l20zl] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-bh177l20zl] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-bh177l20zl] {
    cursor: not-allowed;
    opacity: 0.6;
}


.coin:not(.disabled):hover[b-bh177l20zl] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}


.coin-value[b-bh177l20zl] {
    text-align: center;
}

.coin-text[b-bh177l20zl] {
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 2px;
}

.coin-symbol[b-bh177l20zl] {
    font-size: 1.5rem;
    line-height: 1;
}

.coin-hidden .coin-tip[b-bh177l20zl] {
    font-size: 0.9rem;
    margin-top: 2px;
    color: white;
    font-weight: bold;
}

/* 调整硬币之间的间距 */
.casting-coins-column .coins-row[b-bh177l20zl] {
    display: flex;
    justify-content: center;
    gap: 80px;
}

/* 当前爻信息 */
.current-yao-info[b-bh177l20zl] {
    padding: 2px;
    border-radius: 6px;
    font-weight: normal;
    text-align: center;
    font-size: 0.85rem;
    border: 2px solid transparent;
    width: 100%;
    margin: 0;
}

.yang-info[b-bh177l20zl] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}

.yin-info[b-bh177l20zl] {
    background: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

.changing-badge[b-bh177l20zl] {
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    margin-left: 4px;
}

/* C3: 卦象显示区 - 使用强调色 */
.display-section-row[b-bh177l20zl] {
    width: 100%;
}

.display-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
}

.display-header[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 10px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-bh177l20zl] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

.gua-display-container[b-bh177l20zl] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

/* 卦象显示区左右并排布局 */
.gua-display-layout[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    min-height: 120px;
}

.trigram-display-area[b-bh177l20zl] {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid var(--accent-color);
}

.vertical-line[b-bh177l20zl] {
    width: 6px;
    height: 130px; /*设置垂直线高度*/
    background-color: #ccc;
    margin: 0 20px; /* 左右间距 */
}

/* 上挂和下挂内部两列布局 - 已修改 */
.trigram-two-column-layout[b-bh177l20zl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.trigram-label-column[b-bh177l20zl] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yao-symbols-column[b-bh177l20zl] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.upper-trigram-area[b-bh177l20zl] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-bh177l20zl] {
    border-left: 1px solid var(--border-color);
}

.trigram-label[b-bh177l20zl] {
    text-align: center;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 15px;
    font-size: 1.2rem;
    display: inline-block;
    color: white;
    min-width: 80px;
}

.upper-label[b-bh177l20zl] {
    background: var(--primary-light);
}

.lower-label[b-bh177l20zl] {
    background: var(--tertiary-color);
}

/* 水平爻列表 */
.yao-list-horizontal[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.yao-item-horizontal[b-bh177l20zl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: 160px;
}

    .yao-item-horizontal.yang[b-bh177l20zl] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-bh177l20zl] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-bh177l20zl] {
        animation: pulse-b-bh177l20zl 2s infinite;
        border: 2px solid var(--accent-color);
    }

.yao-position-horizontal[b-bh177l20zl] {
    width: 35px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.75rem;
    text-align: center;
}

.yao-symbol-horizontal[b-bh177l20zl] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yang-line-horizontal[b-bh177l20zl] {
    width: 60px;
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-bh177l20zl] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.yin-segment-horizontal[b-bh177l20zl] {
    width: 20px;
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-bh177l20zl] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.empty-line-horizontal[b-bh177l20zl] {
    width: 60px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}

/* 卦名显示 */
.gua-info-display[b-bh177l20zl] {
    text-align: center;
    padding: 15px;
    background: #fff9e6;
    border: 2px solid #FFD700;
    border-radius: 8px;
}

    .gua-info-display h4[b-bh177l20zl] {
        color: #2c3e50;
        margin-bottom: 6px;
        font-size: 1.2rem;
    }

.gua-symbol[b-bh177l20zl] {
    font-size: 25rem;
    font-weight: bold;
    margin: 8px 0;
    line-height: 1.2;
    letter-spacing: 4px;
}

.gua-trigrams[b-bh177l20zl] {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.moving-yao-info[b-bh177l20zl] {
    margin-top: 8px;
}

.moving-badge[b-bh177l20zl] {
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.loading-display[b-bh177l20zl] {
    text-align: center;
    padding: 20px;
    color: #7f8c8d;
}

/* ===== D: 解卦区 - 使用第三级主题色 ===== */
.interpretation-card[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-bh177l20zl] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

.interpretation-header[b-bh177l20zl] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 3px 6px 6px 3px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
}

    .interpretation-header h5[b-bh177l20zl] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
    }

.interpretation-content[b-bh177l20zl] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-bh177l20zl] {
    padding: 4px;
}

    /* 解卦区内部分区交替配色 */
    .interpretation-sections .section-block:nth-child(odd)[b-bh177l20zl] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-bh177l20zl] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-bh177l20zl] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-bh177l20zl] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 带切换按钮的标题布局 */
.section-header-with-toggle[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-bh177l20zl] {
    /* 调整尺寸 */
    width: 50px;
    height: 10px;
    padding: 10px;
    /* 调整颜色 */
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    /* 调整圆角 */
    border-radius: 8px;
    /* 确保图标居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

    .toggle-btn:hover[b-bh177l20zl] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-bh177l20zl] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-bh177l20zl] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

/* 专项解读标题颜色 */
.section-subtitle.category-title[b-bh177l20zl] {
    color: var(--tertiary-color); /* 柔和的绿色 */
}

/* 爻辞详解标题颜色 */
.section-subtitle.yao-title[b-bh177l20zl] {
    color: var(--accent-color); /* 柔和的橙色 */
}

/* 变卦关系标题颜色 */
.section-subtitle.transformation-title[b-bh177l20zl] {
    color: var(--primary-lighter); /* 柔和的紫色 */
}

/* 卦变关系标题颜色 */
.section-subtitle.gua-transformation-title[b-bh177l20zl] {
    color: var(--secondary-color); /* 柔和的蓝色 */
}

.section-subtitle[b-bh177l20zl] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
}

.section-subtitle-Remark[b-bh177l20zl] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
}

.classic-text[b-bh177l20zl] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

/* 基本信息网格 - 使用CSS变量 */
.gua-basic-info[b-bh177l20zl] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-bh177l20zl] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-bh177l20zl] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
}

/* 爻辞详解区域 - 两列布局 */
.yao-ci-container[b-bh177l20zl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-bh177l20zl] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-bh177l20zl] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-bh177l20zl] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
}

.yao-type-badge[b-bh177l20zl] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.yang-badge[b-bh177l20zl] {
    background: var(--primary-light);
}

.yin-badge[b-bh177l20zl] {
    background: var(--tertiary-color);
}

.yao-position[b-bh177l20zl] {
    color: var(--secondary-text);
    font-size: 0.75rem;
}

.yao-content[b-bh177l20zl] {
    font-size: 0.85rem;
}

.yao-ci-text[b-bh177l20zl] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-bh177l20zl], .changing-meaning[b-bh177l20zl] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

/* 专项解读特殊样式 */
.category-interpretation[b-bh177l20zl] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-bh177l20zl] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-bh177l20zl] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-bh177l20zl] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-bh177l20zl] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .interpretation-section p[b-bh177l20zl] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-bh177l20zl] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* 吉凶等级 */
.luck-level2[b-bh177l20zl], .trend-badge[b-bh177l20zl] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

.luck-level[b-bh177l20zl], .trend-badge[b-bh177l20zl] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

    .luck-daji[b-bh177l20zl], .trend-badge.luck-daji[b-bh177l20zl] {
        background: #27ae60;
    }

    .luck-ji[b-bh177l20zl], .trend-badge.luck-ji[b-bh177l20zl] {
        background: #2ecc71;
    }

    .luck-zhongji[b-bh177l20zl], .trend-badge.luck-zhongji[b-bh177l20zl] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-bh177l20zl], .trend-badge.luck-xiaoji[b-bh177l20zl] {
        background: #e67e22;
    }

    .luck-ping[b-bh177l20zl], .trend-badge.luck-ping[b-bh177l20zl] {
        background: #95a5a6;
    }

    .luck-xiong[b-bh177l20zl], .trend-badge.luck-xiong[b-bh177l20zl] {
        background: #e74c3c;
    }

    .luck-daxiong[b-bh177l20zl], .trend-badge.luck-daxiong[b-bh177l20zl] {
        background: #c0392b;
    }

/* 运势趋势 */
.trend-badge-Trend[b-bh177l20zl] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
}

/* 加载状态 */
.loading-content[b-bh177l20zl] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-bh177l20zl] {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-bh177l20zl 1s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin-b-bh177l20zl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-content[b-bh177l20zl] {
    text-align: center;
    padding: 40px 20px;
    color: var(--secondary-text);
}

    .empty-content i[b-bh177l20zl] {
        font-size: 3rem;
        color: var(--accent-color);
        margin-bottom: 12px;
        opacity: 0.7;
    }

    .empty-content h5[b-bh177l20zl] {
        color: var(--text-color);
        margin-bottom: 8px;
    }

    .empty-content p[b-bh177l20zl] {
        color: var(--secondary-text);
    }

/* 卦变关系 */
.transformations-container[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-bh177l20zl] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-bh177l20zl] {
    flex: 0 0 auto;
}

.transformation-badge[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.transformation-content[b-bh177l20zl] {
    flex: 1;
}

.transformation-gua[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-bh177l20zl] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-bh177l20zl] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-bh177l20zl] {
    margin-top: 4px;
}

/* 所有类别解读 */
.all-interpretations-container[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.interpretation-category-item[b-bh177l20zl] {
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--primary-light);
}

.category-title[b-bh177l20zl] {
    color: var(--primary-light);
    margin-bottom: 0px;
    font-size: 1.0rem;
    font-weight: bold;
}

.category-content[b-bh177l20zl] {
    margin-bottom: 4px;
    font-size: 1.0rem;
    line-height: 1.0;
}

/* 按钮样式 */
.btn[b-bh177l20zl] {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-hongmeng[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 6px;
    padding: 4px 14px;
    font-weight: 700;
}

.btn-jieguo[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 6px;
    padding: 4px 14px;
    font-weight: 700;
}

.btn-PDF[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    padding: 4px 10px 4px 5px;
    font-weight: 500;
}

.btn-touzi[b-bh177l20zl] {
    background: var(--tertiary-color);
   
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    letter-spacing: 4px;
}

.btn-info-small[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 4px 8px !important;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.btn:hover:not(:disabled)[b-bh177l20zl] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn:disabled[b-bh177l20zl] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== 响应式设计优化 ===== */
@media (max-width: 1200px) {
    .title-section[b-bh177l20zl] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .title-main-group[b-bh177l20zl] {
        flex: 1;
        justify-content: flex-start;
    }

    .title-center-group[b-bh177l20zl] {
        flex: 2;
        justify-content: center;
    }

    .responsive-layout[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
    }

    .casting-title-group[b-bh177l20zl],
    .casting-coins-group[b-bh177l20zl],
    .casting-buttons-group[b-bh177l20zl] {
        min-width: 100%;
        justify-content: center;
    }

    .coins-row[b-bh177l20zl] {
        flex-direction: row;
        gap: 15px;
    }

    .category-grid[b-bh177l20zl] {
        grid-template-columns: repeat(3, 1fr);
    }

    .yao-ci-container[b-bh177l20zl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .title-section[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
    }

    .title-main-group[b-bh177l20zl] {
        justify-content: center;
        width: 100%;
    }

    .title-center-group[b-bh177l20zl] {
        width: 100%;
    }

    .compact-grid[b-bh177l20zl] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .question-section-layout[b-bh177l20zl],
    .casting-section-layout[b-bh177l20zl],
    .gua-display-layout[b-bh177l20zl] {
        flex-direction: column;
    }

    .question-title-column[b-bh177l20zl],
    .casting-title-column[b-bh177l20zl],
    .casting-buttons-column[b-bh177l20zl],
    .casting-coins-column[b-bh177l20zl] {
        flex: 1;
        width: 100%;
        text-align: center;
        padding: 8px;
    }

    .casting-title-column[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
    }

    .casting-header-content[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
    }

    .button-group-left[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .compact-buttons[b-bh177l20zl] {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .compact-coins[b-bh177l20zl] {
        gap: 15px !important;
    }

    .upper-trigram-area[b-bh177l20zl] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .lower-trigram-area[b-bh177l20zl] {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .category-grid[b-bh177l20zl] {
        grid-template-columns: 1fr 1fr;
    }

    .coin[b-bh177l20zl] {
        width: 60px;
        height: 60px;
    }

    .yang-line-horizontal[b-bh177l20zl], .yin-line-horizontal[b-bh177l20zl] {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .zhouyi-container[b-bh177l20zl] {
        padding: 6px;
        gap: 10px;
    }

    .compact-grid[b-bh177l20zl] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .compact-label[b-bh177l20zl] {
        padding: 3px 4px !important;
        font-size: 0.7rem !important;
        max-width: 60px !important;
    }

    .compact-coins .coin[b-bh177l20zl] {
        min-width: 80px !important;
        height: 40px !important;
    }

    .coin-text[b-bh177l20zl] {
        font-size: 0.65rem !important;
    }

    .coin-symbol[b-bh177l20zl] {
        font-size: 1.2rem !important;
    }

    .compact-buttons .btn[b-bh177l20zl] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }

    .form-field-group[b-bh177l20zl] {
        min-width: 180px;
    }

    .coin[b-bh177l20zl] {
        width: 70px;
        height: 70px;
    }

    .yang-line-horizontal[b-bh177l20zl] {
        width: 60px;
    }

    .yin-line-horizontal[b-bh177l20zl] {
        gap: 20px;
    }

    .yin-segment-horizontal[b-bh177l20zl] {
        width: 20px;
    }

    .yao-item-horizontal[b-bh177l20zl] {
        width: 160px;
    }

    .casting-section-layout[b-bh177l20zl] {
        gap: 10px;
    }

    .theme-dropdown[b-bh177l20zl] {
        min-width: 100px;
        font-size: 0.8em;
    }
}

/* 动画效果 */
@keyframes pulse-b-bh177l20zl {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}

/*========= PDF打印区域设置 ========================*/
/* PDF导出优化样式 */
.pdf-exporting[b-bh177l20zl] {
    /* 确保所有内容可见 */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* 打印和PDF专用样式 */
@media print, .pdf-exporting {
    /* 隐藏不需要打印的元素 */
    .no-print[b-bh177l20zl],
    .btn[b-bh177l20zl],
    .theme-selector[b-bh177l20zl] {
        display: none !important;
    }

    /* 确保布局适合A4纸 */
    .zhouyi-container[b-bh177l20zl] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    /* 优化字体大小和间距 */
    .title-text[b-bh177l20zl] {
        font-size: 24pt !important;
    }

    .section-title[b-bh177l20zl] {
        font-size: 16pt !important;
    }

    .classic-text[b-bh177l20zl] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    /* 确保颜色对比度 */
    .theme-dark .interpretation-content[b-bh177l20zl],
    .theme-dark .section-block[b-bh177l20zl] {
        background: white !important;
        color: black !important;
    }

    /* 分页控制 */
    .zhouyi-page-break-before[b-bh177l20zl] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-bh177l20zl] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-bh177l20zl] {
        page-break-inside: avoid;
    }
}

/* PDF按钮样式 */
.btn-pdf-full[b-bh177l20zl] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
}

    .btn-pdf-full:hover[b-bh177l20zl] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }


/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaThemeZb.razor.rz.scp.css */
/* ===== 周易卦象组件样式 - 主题系统优化版 ===== */

/* ===== 主题变量定义 ===== */

/* 竹简清风主题  */
.zhouyi-container.theme-bamboo[b-74j7eelao0] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32; /* 标题区 - 深绿色 */
    --primary-light: #4CAF50; /* 功能区标题 */
    --primary-lighter: #66BB6A; /* 功能区背景 */
    --secondary-color: #81C784; /* C区 - 绿色 */
    --accent-color: #A5D6A7; /* 强调色 */
    --tertiary-color: #4CAF50; /* D区 - 中绿色 */
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: #ffffff;
    --text-color: #2c3e50; /* 深色文字确保对比度 */
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(76, 175, 80, 0.1);
    --button-info-color: #66BB6A;
    --button-secondary-color: #A5D6A7;
    --client-bg: transparent;
    --client-border: #d8e8d8;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f0f7f0;
    --interpretation-alt-color: #e8f5e9;
}

.zhouyi-container[b-74j7eelao0] {
    /* 默认主题 - 天地玄黄 - 优化版 */
    --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
    --primary-color: #8B4513; /* 标题区 - 深棕色 */
    --primary-light: #A0522D; /* 功能区标题 - 棕色 */
    --primary-lighter: #CD853F; /* 功能区背景 */
    --secondary-color: #D2691E; /* C区 - 橙棕色 */
    --accent-color: #CD853F; /* 混沌爻币 强调色 */
    --tertiary-color: #8B4513; /* D区 - 深棕色 */
    --border-color: #d4c6a8;
    --shadow-color: rgba(139, 69, 19, 0.08);
    --section-bg: #ffffff;
    --text-color: #5D4037; /* 改为深棕色系，原为 #2c3e50 */
    --secondary-text: #795548; /* 改为棕色系，原为 #666 */
    --hover-bg: rgba(139, 69, 19, 0.05);
    --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
    --button-secondary-bg: rgba(160, 82, 45, 0.1);
    --button-info-color: #D2691E;
    --button-secondary-color: #CD853F;
    --client-bg: transparent;
    --client-border: #e0d6c0;
    --client-text: var(--text-color);
    /* 新增：解卦区内部分区交替颜色 */
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f8f6f2;
    --interpretation-alt-color: #e8dfce;
}

    /* 朱砂祥瑞主题  */
    .zhouyi-container.theme-vermillion[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000; /* 标题区 - 深红色 */
        --primary-light: #A52A2A; /* 功能区标题 */
        --primary-lighter: #CD5C5C; /* 功能区背景 */
        --secondary-color: #B22222; /* C区 - 砖红色 */
        --accent-color: #CD5C5C; /* 强调色 */
        --tertiary-color: #C44545; /* D区 - 暗红色 */
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0; /* 标题区 - 深蓝色 */
        --primary-light: #1976D2; /* 功能区标题 */
        --primary-lighter: #1E88E5; /* 功能区背景 */
        --secondary-color: #2196F3; /* C区 - 蓝色 */
        --accent-color: #42A5F5; /* 强调色 */
        --tertiary-color: #1976D2; /* D区 - 中蓝色 */
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2; /* 标题区 - 深紫色 */
        --primary-light: #8E24AA; /* 功能区标题 */
        --primary-lighter: #9C27B0; /* 功能区背景 */
        --secondary-color: #AB47BC; /* C区 - 紫色 */
        --accent-color: #BA68C8; /* 强调色 */
        --tertiary-color: #8E24AA; /* D区 - 中紫色 */
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 - 优化版 */
    .zhouyi-container.theme-golden[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B; /* 标题区 - 暗金色 */
        --primary-light: #DAA520; /* 功能区标题 */
        --primary-lighter: #F4C430; /* 功能区背景 */
        --secondary-color: #FFC107; /* C区 - 琥珀色 */
        --accent-color: #FFD54F; /* 强调色 */
        --tertiary-color: #DAA520; /* D区 - 金色 */
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037; /* 改为深棕色，确保对比度 */
        --secondary-text: #795548; /* 改为棕色 */
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

    /* 墨韵玄烨黑色主题 - 优化版 */
    .zhouyi-container.theme-dark[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        --primary-color: #000000; /* 标题区 - 纯黑 */
        --primary-light: #222222; /* 功能区标题 - 改为更深的黑色 */
        --primary-lighter: #333333; /* 功能区背景 - 改为更深的黑色 */
        --secondary-color: #444444; /* C区 - 改为更深的灰色 */
        --accent-color: #555555; /* 强调色 - 改为更深的灰色 */
        --tertiary-color: #111111; /* D区标题 - 改为更深的黑色 */
        --border-color: #444444;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --section-bg: #f5f5f5; /* 改为淡灰色背景 */
        --text-color: #222222; /* 改为接近黑色的深灰色 */
        --secondary-text: #444444; /* 改为深灰色 */
        --hover-bg: rgba(0, 0, 0, 0.1);
        --button-primary-bg: linear-gradient(135deg, #333333, #555555);
        --button-secondary-bg: rgba(0, 0, 0, 0.1);
        --button-info-color: #666666;
        --button-secondary-color: #777777;
        --client-bg: #2d2d2d; /* 客户信息区背景改为浅黑色 */
        --client-border: #444444;
        --client-text: #e0e0e0; /* 客户信息区文字改为浅色 */
        --interpretation-block-bg-1: #f5f5f5; /* 解卦区背景1 - 淡灰色 */
        --interpretation-block-bg-2: #e8e8e8; /* 解卦区背景2 - 稍深的灰色 */
        --interpretation-alt-color: #dcdcdc; /* 解卦区交替颜色 */
    }

/* ===== 主容器 ===== */
.zhouyi-container[b-74j7eelao0] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

/* ===== A: 标题区样式 ===== */
.title-section[b-74j7eelao0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 4px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 10px;
}

.title-text[b-74j7eelao0] {
    color: white;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    flex: 1;
    white-space: nowrap;
}

.title-main-group[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    max-width: 300px;
}

.title-center-group[b-74j7eelao0] {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 20px;
}

.header-controls[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: flex-end;
}

.title-buttons[b-74j7eelao0] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* ===== 按钮样式优化 - 【需求】所有btn内部文本，不自动换行。固定宽度和高度 ===== */
.btn[b-74j7eelao0] {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* 不自动换行 */
    min-width: 100px; /* 固定最小宽度 */
    height: 40px; /* 固定高度 */
    box-sizing: border-box;
}

.btn-hongmeng[b-74j7eelao0] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 6px;
    padding: 4px 10px;
    font-weight: 600;
    min-width: 140px;
}

.btn-jieguo[b-74j7eelao0] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 0.95rem;
    letter-spacing: 2px;
    padding: 4px 8px 4px 2px;
    font-weight: 600;
    min-width: 120px;
}

.btn-touzi[b-74j7eelao0] {
    background: var(--tertiary-color);
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    letter-spacing: 4px;
    min-width: 130px;
}

.btn-info-small[b-74j7eelao0] {
    background: var(--accent-color);
    color: white;
    padding: 4px 8px !important;
    font-size: 0.9rem;
    letter-spacing: 2px;
    min-width: 100px;
    height: 35px;
}

/* 紧凑按钮样式 */
.btn-compact[b-74j7eelao0] {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 32px;
}

.btn-compact-voice[b-74j7eelao0] {
    padding: 2px 8px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 30px;
}

/* PDF按钮样式 */
.btn-pdf[b-74j7eelao0] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    padding: 4px 8px !important;
    max-width: 50px !important;
    min-width: 50px !important;
}

    .btn-pdf:hover[b-74j7eelao0] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 - 确保所有按钮宽度一致 */
.fixed-width-btn[b-74j7eelao0] {
    min-width: 80px;
    flex-shrink: 0;
}

.fontColor-voice[b-74j7eelao0] {
    color: white !important;
    font-size: 13px !important;
    padding: 0px !important;
}

.btn-toggle[b-74j7eelao0] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.btn:hover:not(:disabled)[b-74j7eelao0] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn:disabled[b-74j7eelao0] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 主题选择器样式 */
.theme-selector[b-74j7eelao0] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-74j7eelao0] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-74j7eelao0] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-74j7eelao0] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-74j7eelao0] {
        background: white;
        color: var(--text-color);
    }

/* ===== 语音设置区域样式 ===== */
.voice-settings-section[b-74j7eelao0] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.voice-controls-grid[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* 语音模式选择器 */
.voice-mode-selector[b-74j7eelao0] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-74j7eelao0] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-74j7eelao0] {
        display: none;
    }

.checkmark[b-74j7eelao0] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-74j7eelao0] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-74j7eelao0]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-74j7eelao0] {
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.0em;
}

/* 语音参数区域 - 【需求】窗体宽度变小、选择框和滑动条同比宽度缩小，语速 等文字不换行；尽量使他们在一行 */
.voice-params[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.voice-dropdown[b-74j7eelao0] {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    max-width: 350px;
    width: auto;
    min-width: 120px;
    flex-shrink: 1;
}

/* 水平排列的滑动条 */
.voice-sliders-horizontal[b-74j7eelao0] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .voice-sliders-horizontal .slider-item[b-74j7eelao0] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9em;
        white-space: nowrap;
        flex-shrink: 0;
    }

        .voice-sliders-horizontal .slider-item label[b-74j7eelao0] {
            min-width: 25px;
            color: var(--secondary-text);
            font-size: 0.9em;
            white-space: nowrap;
        }

        .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0] {
            width: 80px;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            outline: none;
            flex-shrink: 1;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0]::-webkit-slider-thumb {
                appearance: none;
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
            }

            .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0]::-moz-range-thumb {
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
                border: none;
            }

        .voice-sliders-horizontal .slider-item span[b-74j7eelao0] {
            min-width: 20px;
            text-align: center;
            font-size: 0.9em;
            color: var(--primary-color);
            font-weight: 500;
            white-space: nowrap;
        }

/* 语音文本输入区域 */
.voice-text-inputs[b-74j7eelao0] {
    margin-top: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.text-inputs-grid[b-74j7eelao0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.text-input-item[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

    .text-input-item label[b-74j7eelao0] {
        font-size: 0.8em;
        color: var(--secondary-text);
        font-weight: 500;
        min-width: 80px;
        white-space: nowrap;
    }

.text-input[b-74j7eelao0] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    width: 100%;
    box-sizing: border-box;
}

    .text-input:focus[b-74j7eelao0] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.btn-update[b-74j7eelao0] {
    width: 180px;
    margin: 0 auto;
    padding: 4px 8px;
    font-size: 0.75em;
    background: var(--button-info-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    white-space: nowrap;
}

    .btn-update:hover[b-74j7eelao0] {
        background: #1976D2;
        transform: translateY(-1px);
    }

/* ===== B: 客户信息区样式 ===== */
.client-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
    margin: -6px 0px -5px 0px;
    border: 1px solid var(--client-border);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.client-form-scroll[b-74j7eelao0] {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

    .client-form-scroll[b-74j7eelao0]::-webkit-scrollbar {
        height: 6px;
    }

    .client-form-scroll[b-74j7eelao0]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .client-form-scroll[b-74j7eelao0]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

        .client-form-scroll[b-74j7eelao0]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.form-field-group[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 0px 0px 10px;
    background: var(--client-bg);
    border-radius: 6px;
    border: 1px solid var(--client-border);
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    margin-top: 3px;
}

    .form-field-group label[b-74j7eelao0] {
        font-weight: bold;
        color: var(--client-text);
        font-size: 0.85rem;
        min-width: 60px;
        margin: 0;
        white-space: nowrap;
    }

.form-control[b-74j7eelao0] {
    min-width: 150px;
    margin: 0px 0px 0px -25px;
}

.form-control[b-74j7eelao0], .form-control-email[b-74j7eelao0] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--client-border);
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
}

.form-control-email[b-74j7eelao0] {
    min-width: 200px;
    margin-left: -25px;
}

    .form-control:focus[b-74j7eelao0], .form-control-email:focus[b-74j7eelao0] {
        border-color: var(--primary-light);
        outline: none;
        box-shadow: 0 0 0 2px rgba(160, 82, 45, 0.2);
    }

/* ===== C: 起卦区样式 ===== */
.casting-main-container[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* C1: 问事选择区 - 使用主浅色 */
.question-section-row[b-74j7eelao0] {
    width: 100%;
}

.function-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
}

/* 问事选择区两列布局 */
.question-section-layout[b-74j7eelao0] {
    display: flex;
    align-items: stretch;
    min-height: 45px;
}

.question-title-column[b-74j7eelao0] {
    flex: 0 0 110px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 5px 4px 5px;
    margin: 4px 0px;
}

.question-options-column[b-74j7eelao0] {
    flex: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-74j7eelao0] {
    color: white;
    padding: 4px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-74j7eelao0] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 2px;
}

/* C1区域：紧凑网格布局 - 固定宽度自动换行 */
.compact-grid[b-74j7eelao0] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start;
}

.compact-item[b-74j7eelao0] {
    flex: 0 0 auto !important;
    width: 80px !important;
    margin: 2px !important;
}

.category-item input[type="radio"][b-74j7eelao0] {
    position: absolute;
    opacity: 0;
}

.category-label[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.8rem;
    max-width: 80px;
    margin: 0 auto;
    white-space: nowrap;
}

.radio-circle[b-74j7eelao0] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-74j7eelao0]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-74j7eelao0] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-74j7eelao0] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-74j7eelao0]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-74j7eelao0] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* C2: 摇卦区 - 使用次级色 */
.casting-section-row[b-74j7eelao0] {
    width: 100%;
    margin: 0px 0;
}

.casting-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
}

/* 摇卦区四列布局 */
.casting-section-layout[b-74j7eelao0] {
    display: flex;
    align-items: center;
    padding: 0;
    flex-wrap: wrap;
}

.casting-title-group[b-74j7eelao0],
.casting-coins-group[b-74j7eelao0],
.casting-buttons-group[b-74j7eelao0] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.casting-title-column[b-74j7eelao0] {
    flex: 0 0 200px;
    background: var(--secondary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 2px;
}

.casting-buttons-column[b-74j7eelao0] {
    flex: 0 0 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-coins-column[b-74j7eelao0] {
    flex: 1;
    padding: 5px 8px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-header[b-74j7eelao0] {
    color: white;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
}

/* 【需求】起卦标题和 第几爻，保存一行。小屏幕不换行 */
.casting-header-content[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    white-space: nowrap;
}

.draw-head[b-74j7eelao0] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
}

.progress-badge[b-74j7eelao0] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 摇卦控制容器 */
.casting-controls-container[b-74j7eelao0] {
    padding: 0;
}

/* 按钮组布局 */
.button-group-left[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.coins-display-center[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 硬币值显示 */
.coin-values-display[b-74j7eelao0] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -2px 0px 0px 0px;
}

.coin-values-row[b-74j7eelao0] {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.coin-value-badge[b-74j7eelao0] {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
}

.coin-yang[b-74j7eelao0] {
    background: var(--accent-color);
}

.coin-yin[b-74j7eelao0] {
    background: var(--primary-color);
}

/* 硬币样式 */
.coins-container[b-74j7eelao0] {
    margin-bottom: 0;
}

/* 硬币行布局 - 调整水平间隔 */
.coins-row[b-74j7eelao0] {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* 紧凑硬币布局 - 调整水平间隔 */
.compact-coins[b-74j7eelao0] {
    gap: 40px !important;
}

/* 硬币列样式 */
.coin-column[b-74j7eelao0] {
    text-align: center;
}

.coin-wrapper[b-74j7eelao0] {
    margin-bottom: 6px;
}

.coin[b-74j7eelao0] {
    min-width: 120px;
    height: 50px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
}

.coin-hidden[b-74j7eelao0] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-74j7eelao0] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-74j7eelao0] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-74j7eelao0] {
    cursor: not-allowed;
    opacity: 0.6;
}

.coin:not(.disabled):hover[b-74j7eelao0] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}

.coin-value[b-74j7eelao0] {
    text-align: center;
}

.coin-text[b-74j7eelao0] {
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

.coin-symbol[b-74j7eelao0] {
    font-size: 1.5rem;
    line-height: 1;
}

.coin-hidden .coin-tip[b-74j7eelao0] {
    font-size: 0.9rem;
    margin-top: 2px;
    color: white;
    font-weight: bold;
    white-space: nowrap;
}

/* 调整硬币之间的间距 */
.casting-coins-column .coins-row[b-74j7eelao0] {
    display: flex;
    justify-content: center;
    gap: 80px;
}

/* 当前爻信息 */
.current-yao-info[b-74j7eelao0] {
    padding: 2px;
    border-radius: 6px;
    font-weight: normal;
    text-align: center;
    font-size: 0.85rem;
    border: 2px solid transparent;
    width: 100%;
    margin: 0;
    white-space: nowrap;
}

.yang-info[b-74j7eelao0] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}

.yin-info[b-74j7eelao0] {
    background: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

.changing-badge[b-74j7eelao0] {
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    margin-left: 4px;
    white-space: nowrap;
}

/* C3: 卦象显示区 - 使用强调色 */
.display-section-row[b-74j7eelao0] {
    width: 100%;
}

.display-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
}

.display-header[b-74j7eelao0] {
    background: var(--accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-74j7eelao0] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        white-space: nowrap;
    }

.gua-display-container[b-74j7eelao0] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

/* 卦象显示区左右并排布局 */
.gua-display-layout[b-74j7eelao0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    min-height: 120px;
}

.trigram-display-area[b-74j7eelao0] {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid var(--accent-color);
}

.vertical-line[b-74j7eelao0] {
    width: 6px;
    height: 130px;
    background-color: #ccc;
    margin: 0 20px;
}

/* 上挂和下挂内部两列布局 - 已修改 */
.trigram-two-column-layout[b-74j7eelao0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.trigram-label-column[b-74j7eelao0] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yao-symbols-column[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.upper-trigram-area[b-74j7eelao0] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-74j7eelao0] {
    border-left: 1px solid var(--border-color);
}

.trigram-label[b-74j7eelao0] {
    text-align: center;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 1.0rem;
    display: inline-block;
    color: white;
    min-width: 80px;
    white-space: nowrap;
}

.upper-label[b-74j7eelao0] {
    background: var(--primary-light);
}

.lower-label[b-74j7eelao0] {
    background: var(--tertiary-color);
}

/* 水平爻列表 */
.yao-list-horizontal[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.yao-item-horizontal[b-74j7eelao0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: 160px;
}

    .yao-item-horizontal.yang[b-74j7eelao0] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-74j7eelao0] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-74j7eelao0] {
        animation: pulse-b-74j7eelao0 2s infinite;
        border: 2px solid var(--accent-color);
    }

.yao-position-horizontal[b-74j7eelao0] {
    width: 35px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
}

.yao-symbol-horizontal[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yang-line-horizontal[b-74j7eelao0] {
    width: 60px;
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-74j7eelao0] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.yin-segment-horizontal[b-74j7eelao0] {
    width: 20px;
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-74j7eelao0] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.empty-line-horizontal[b-74j7eelao0] {
    width: 60px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}

/* 卦名显示 */
.gua-info-display[b-74j7eelao0] {
    text-align: center;
    padding: 15px;
    background: #fff9e6;
    border: 2px solid #FFD700;
    border-radius: 8px;
}

    .gua-info-display h4[b-74j7eelao0] {
        color: #2c3e50;
        margin-bottom: 6px;
        font-size: 1.2rem;
    }

.gua-symbol[b-74j7eelao0] {
    font-size: 25rem;
    font-weight: bold;
    margin: 8px 0;
    line-height: 1.2;
    letter-spacing: 4px;
}

.gua-trigrams[b-74j7eelao0] {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.moving-yao-info[b-74j7eelao0] {
    margin-top: 8px;
}

.moving-badge[b-74j7eelao0] {
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
}

.loading-display[b-74j7eelao0] {
    text-align: center;
    padding: 20px;
    color: #7f8c8d;
}

/* ===== D: 解卦区样式 ===== */
.interpretation-card[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-74j7eelao0] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

.interpretation-header[b-74j7eelao0] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 6px 6px 8px 3px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
}

    .interpretation-header h5[b-74j7eelao0] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
        white-space: nowrap;
    }

.interpretation-content[b-74j7eelao0] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-74j7eelao0] {
    padding: 4px;
}

    /* 解卦区内部分区交替配色 */
    .interpretation-sections .section-block:nth-child(odd)[b-74j7eelao0] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-74j7eelao0] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-74j7eelao0] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-74j7eelao0] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
}

/* 带切换按钮的标题布局 */
.section-header-with-toggle[b-74j7eelao0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-74j7eelao0] {
    width: 50px;
    height: 10px;
    padding: 10px;
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
}

    .toggle-btn:hover[b-74j7eelao0] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-74j7eelao0] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-74j7eelao0] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

/* 专项解读标题颜色 */
.section-subtitle.category-title[b-74j7eelao0] {
    color: var(--tertiary-color);
}

/* 爻辞详解标题颜色 */
.section-subtitle.yao-title[b-74j7eelao0] {
    color: var(--accent-color);
}

/* 变卦关系标题颜色 */
.section-subtitle.transformation-title[b-74j7eelao0] {
    color: var(--primary-lighter);
}

/* 卦变关系标题颜色 */
.section-subtitle.gua-transformation-title[b-74j7eelao0] {
    color: var(--secondary-color);
}

.section-subtitle[b-74j7eelao0] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.section-subtitle-Remark[b-74j7eelao0] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
    white-space: normal;
}

.classic-text[b-74j7eelao0] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

/* 基本信息网格 - 使用CSS变量 */
.gua-basic-info[b-74j7eelao0] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-74j7eelao0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-74j7eelao0] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
    white-space: nowrap;
}

/* 爻辞详解区域 - 两列布局 */
.yao-ci-container[b-74j7eelao0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-74j7eelao0] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-74j7eelao0] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-74j7eelao0] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
    white-space: nowrap;
}

.yao-type-badge[b-74j7eelao0] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.yang-badge[b-74j7eelao0] {
    background: var(--primary-light);
}

.yin-badge[b-74j7eelao0] {
    background: var(--tertiary-color);
}

.yao-position[b-74j7eelao0] {
    color: var(--secondary-text);
    font-size: 0.75rem;
    white-space: nowrap;
}

.yao-content[b-74j7eelao0] {
    font-size: 0.85rem;
}

.yao-ci-text[b-74j7eelao0] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-74j7eelao0], .changing-meaning[b-74j7eelao0] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

/* 专项解读特殊样式 */
.category-interpretation[b-74j7eelao0] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-74j7eelao0] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-74j7eelao0] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-74j7eelao0] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-74j7eelao0] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .interpretation-section p[b-74j7eelao0] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-74j7eelao0] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* 吉凶等级 */
.luck-level2[b-74j7eelao0], .trend-badge[b-74j7eelao0] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

.luck-level[b-74j7eelao0], .trend-badge[b-74j7eelao0] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

    .luck-daji[b-74j7eelao0], .trend-badge.luck-daji[b-74j7eelao0] {
        background: #27ae60;
    }

    .luck-ji[b-74j7eelao0], .trend-badge.luck-ji[b-74j7eelao0] {
        background: #2ecc71;
    }

    .luck-zhongji[b-74j7eelao0], .trend-badge.luck-zhongji[b-74j7eelao0] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-74j7eelao0], .trend-badge.luck-xiaoji[b-74j7eelao0] {
        background: #e67e22;
    }

    .luck-ping[b-74j7eelao0], .trend-badge.luck-ping[b-74j7eelao0] {
        background: #95a5a6;
    }

    .luck-xiong[b-74j7eelao0], .trend-badge.luck-xiong[b-74j7eelao0] {
        background: #e74c3c;
    }

    .luck-daxiong[b-74j7eelao0], .trend-badge.luck-daxiong[b-74j7eelao0] {
        background: #c0392b;
    }

/* 运势趋势 */
.trend-badge-Trend[b-74j7eelao0] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
    white-space: nowrap;
}

/* 加载状态 */
.loading-content[b-74j7eelao0] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-74j7eelao0] {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-74j7eelao0 1s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin-b-74j7eelao0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-content[b-74j7eelao0] {
    text-align: center;
    padding: 40px 20px;
    color: var(--secondary-text);
}

    .empty-content i[b-74j7eelao0] {
        font-size: 3rem;
        color: var(--accent-color);
        margin-bottom: 12px;
        opacity: 0.7;
    }

    .empty-content h5[b-74j7eelao0] {
        color: var(--text-color);
        margin-bottom: 8px;
    }

    .empty-content p[b-74j7eelao0] {
        color: var(--secondary-text);
    }

/* ===== 空状态样式 - 【需求】空区域的高度占满屏幕的剩余高度，但是最小高度120px ===== */
.empty-state[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px; /* 最小高度120px */
    max-height: 400px;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
    overflow: hidden; /* 防止外部滚动条 */
}

.empty-state-container[b-74j7eelao0] {
    display: flex;
    width: 100%;
    align-items: stretch; /* 改为stretch让子元素撑满高度 */
    gap: 5px;
    height: 100%;
    overflow: hidden; /* 防止容器滚动条 */
}

/* 【需求】图片根据宽高比缩放，充满父控件 */
.empty-state-image[b-74j7eelao0] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
    overflow: hidden; /* 防止图片区域滚动条 */
}

/* 带边框的图片容器 */
.bordered-image[b-74j7eelao0] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 右侧内容区域 - 优化高度和滚动 */
.empty-state-content[b-74j7eelao0] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 均匀分布内容 */
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
    overflow: hidden; /* 防止内容区域滚动条 */
}

/* ===== txt说明区域 - 优化高度和滚动 ===== */
.remark-content-txt[b-74j7eelao0] {
    flex: 1; /* 占据剩余空间 */
    width: 100%;
    overflow-y: auto; /* 允许文本内容滚动 */
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: calc(100% - 50px); /* 为图标留出空间 */
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

    .remark-content-txt[b-74j7eelao0]::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

.empty-icon[b-74j7eelao0] {
    font-size: 2.5em;
    margin-top: 10px;
    opacity: 0.9;
    flex-shrink: 0; /* 防止图标被压缩 */
}

/* ===== 图片轮播相关样式 - 优化高度 ===== */
.carousel-container[b-74j7eelao0] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 防止轮播容器滚动条 */
}

/* 图片样式 - 【需求】图片根据宽高比缩放，充满父控件 */
.responsive-image[b-74j7eelao0] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* 保持宽高比缩放 */
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 */
.carousel-controls[b-74j7eelao0] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-74j7eelao0],
.carousel-btn-center[b-74j7eelao0],
.carousel-btn-right[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-74j7eelao0] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

    .carousel-btn:active[b-74j7eelao0] {
        transform: scale(0.95);
    }

.carousel-toggle[b-74j7eelao0] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* ===== Split窗口分割相关样式 ===== */
.empty-state-container[b-74j7eelao0] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-74j7eelao0] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-74j7eelao0] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-74j7eelao0] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-74j7eelao0] {
    background-color: #888;
}

.empty-state-image[b-74j7eelao0], .empty-state-content[b-74j7eelao0] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* 卦变关系 */
.transformations-container[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-74j7eelao0] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-74j7eelao0] {
    flex: 0 0 auto;
}

.transformation-badge[b-74j7eelao0] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.transformation-content[b-74j7eelao0] {
    flex: 1;
}

.transformation-gua[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-74j7eelao0] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-74j7eelao0] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-74j7eelao0] {
    margin-top: 4px;
}

/* 所有类别解读 */
.all-interpretations-container[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.interpretation-category-item[b-74j7eelao0] {
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--primary-light);
}

.category-title[b-74j7eelao0] {
    color: var(--primary-light);
    margin-bottom: 0px;
    font-size: 1.0rem;
    font-weight: bold;
    white-space: nowrap;
}

.category-content[b-74j7eelao0] {
    margin-bottom: 4px;
    font-size: 1.0rem;
    line-height: 1.0;
}

/* ===== 响应式设计优化 ===== */
@media (max-width: 1200px) {
    .title-section[b-74j7eelao0] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .title-main-group[b-74j7eelao0] {
        flex: 1;
        justify-content: flex-start;
    }

    .title-center-group[b-74j7eelao0] {
        flex: 2;
        justify-content: center;
    }

    .responsive-layout[b-74j7eelao0] {
        flex-direction: column;
        gap: 8px;
    }

    .casting-title-group[b-74j7eelao0],
    .casting-coins-group[b-74j7eelao0],
    .casting-buttons-group[b-74j7eelao0] {
        min-width: 100%;
        justify-content: center;
    }

    .coins-row[b-74j7eelao0] {
        flex-direction: row;
        gap: 15px;
    }

    .category-grid[b-74j7eelao0] {
        grid-template-columns: repeat(3, 1fr);
    }

    .yao-ci-container[b-74j7eelao0] {
        grid-template-columns: 1fr;
    }

    .text-inputs-grid[b-74j7eelao0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .title-section[b-74j7eelao0] {
        flex-direction: column;
        gap: 8px;
    }

    .title-main-group[b-74j7eelao0] {
        justify-content: center;
        width: 100%;
    }

    .title-center-group[b-74j7eelao0] {
        width: 100%;
    }

    .compact-grid[b-74j7eelao0] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .question-section-layout[b-74j7eelao0],
    .casting-section-layout[b-74j7eelao0],
    .gua-display-layout[b-74j7eelao0] {
        flex-direction: column;
    }

    .question-title-column[b-74j7eelao0],
    .casting-title-column[b-74j7eelao0],
    .casting-buttons-column[b-74j7eelao0],
    .casting-coins-column[b-74j7eelao0] {
        flex: 1;
        width: 100%;
        text-align: center;
        padding: 8px;
    }

    .casting-title-column[b-74j7eelao0] {
        flex-direction: column;
        gap: 8px;
    }

    .casting-header-content[b-74j7eelao0] {
        flex-direction: column;
        gap: 8px;
    }

    .button-group-left[b-74j7eelao0] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .compact-buttons[b-74j7eelao0] {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .compact-coins[b-74j7eelao0] {
        gap: 15px !important;
    }

    .upper-trigram-area[b-74j7eelao0] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .lower-trigram-area[b-74j7eelao0] {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .category-grid[b-74j7eelao0] {
        grid-template-columns: 1fr 1fr;
    }

    .coin[b-74j7eelao0] {
        width: 60px;
        height: 60px;
    }

    .yang-line-horizontal[b-74j7eelao0], .yin-line-horizontal[b-74j7eelao0] {
        width: 50px;
    }

    /* 语音设置在小屏幕上的适配 */
    .voice-controls-grid[b-74j7eelao0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .voice-params[b-74j7eelao0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .voice-sliders-horizontal[b-74j7eelao0] {
        width: 100%;
        justify-content: space-between;
    }

    /* 在小屏幕上调整图片轮播布局 */
    .empty-state-container[b-74j7eelao0] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-74j7eelao0],
    .empty-state-content[b-74j7eelao0] {
        flex: 1 1 100%;
        width: 100%;
        min-height: 200px; /* 移动端最小高度 */
    }

    .remark-content-txt[b-74j7eelao0] {
        max-height: calc(100% - 40px); /* 移动端调整最大高度 */
    }

    .carousel-controls[b-74j7eelao0] {
        bottom: 5px;
        width: 180px;
    }

    .carousel-btn[b-74j7eelao0] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px;
    }

    .carousel-toggle[b-74j7eelao0] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .zhouyi-container[b-74j7eelao0] {
        padding: 6px;
        gap: 10px;
    }

    .compact-grid[b-74j7eelao0] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .compact-label[b-74j7eelao0] {
        padding: 3px 4px !important;
        font-size: 0.7rem !important;
        max-width: 60px !important;
    }

    .compact-coins .coin[b-74j7eelao0] {
        min-width: 80px !important;
        height: 40px !important;
    }

    .coin-text[b-74j7eelao0] {
        font-size: 0.65rem !important;
    }

    .coin-symbol[b-74j7eelao0] {
        font-size: 1.2rem !important;
    }

    .compact-buttons .btn[b-74j7eelao0] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }

    .form-field-group[b-74j7eelao0] {
        min-width: 180px;
    }

    .coin[b-74j7eelao0] {
        width: 70px;
        height: 70px;
    }

    .yang-line-horizontal[b-74j7eelao0] {
        width: 60px;
    }

    .yin-line-horizontal[b-74j7eelao0] {
        gap: 20px;
    }

    .yin-segment-horizontal[b-74j7eelao0] {
        width: 20px;
    }

    .yao-item-horizontal[b-74j7eelao0] {
        width: 160px;
    }

    .casting-section-layout[b-74j7eelao0] {
        gap: 10px;
    }

    .theme-dropdown[b-74j7eelao0] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 语音设置在超小屏幕上的适配 */
    .voice-settings-section[b-74j7eelao0] {
        padding: 6px 8px;
    }

    .voice-controls-grid[b-74j7eelao0] {
        gap: 6px;
    }

    .voice-dropdown[b-74j7eelao0] {
        min-width: 60px;
        font-size: 0.7em;
    }

    .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0] {
        width: 60px;
    }

    .voice-sliders-horizontal .slider-item span[b-74j7eelao0] {
        min-width: 18px;
        font-size: 0.6em;
    }

    /* 超小屏幕轮播控制 */
    .carousel-controls[b-74j7eelao0] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-74j7eelao0] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-74j7eelao0] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* 空状态区域在超小屏幕上的优化 */
    .empty-state[b-74j7eelao0] {
        min-height: 150px; /* 超小屏幕增加最小高度 */
    }

    .empty-state-image[b-74j7eelao0],
    .empty-state-content[b-74j7eelao0] {
        min-height: 180px;
    }

    .remark-content-txt[b-74j7eelao0] {
        font-size: 0.9em;
        padding: 6px;
    }

    .empty-icon[b-74j7eelao0] {
        font-size: 2em;
        margin-top: 5px;
    }
}

/* 动画效果 */
@keyframes pulse-b-74j7eelao0 {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}

/*========= PDF打印区域设置 ========================*/
/* PDF导出优化样式 */
.pdf-exporting[b-74j7eelao0] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* 打印和PDF专用样式 */
@media print, .pdf-exporting {
    .no-print[b-74j7eelao0],
    .btn[b-74j7eelao0],
    .theme-selector[b-74j7eelao0] {
        display: none !important;
    }

    .zhouyi-container[b-74j7eelao0] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .title-text[b-74j7eelao0] {
        font-size: 24pt !important;
    }

    .section-title[b-74j7eelao0] {
        font-size: 16pt !important;
    }

    .classic-text[b-74j7eelao0] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    .theme-dark .interpretation-content[b-74j7eelao0],
    .theme-dark .section-block[b-74j7eelao0] {
        background: white !important;
        color: black !important;
    }

    .zhouyi-page-break-before[b-74j7eelao0] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-74j7eelao0] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-74j7eelao0] {
        page-break-inside: avoid;
    }
}

/* PDF按钮样式 */
.btn-pdf-full[b-74j7eelao0] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
    min-width: 140px;
}

    .btn-pdf-full:hover[b-74j7eelao0] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZyGuaCountAnl.razor.rz.scp.css */
/* 总体布局 */
.gua-count-analysis[b-ty9cnc3iby] {
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    font-family: 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 标题样式 */
.section-title[b-ty9cnc3iby] {
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.page-title[b-ty9cnc3iby] {
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 700;
    color: #2c3e50;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 1.3rem;
}

/* 表格区域样式 */
.table-section[b-ty9cnc3iby] {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 重要：允许内部滚动 */
}

.table-container[b-ty9cnc3iby] {
    overflow: auto;
    flex: 1;
}

    /* 自定义滚动条 */
    .table-container[b-ty9cnc3iby]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .table-container[b-ty9cnc3iby]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    .table-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 6px;
    }

        .table-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

.data-table[b-ty9cnc3iby] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

    .data-table th[b-ty9cnc3iby] {
        background: #2c3e50;
        color: white;
        padding: 0.4rem 0.3rem;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 10;
        font-weight: 600;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .data-table td[b-ty9cnc3iby] {
        padding: 0.3rem 0.2rem;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
        font-family: 'SimSun', '宋体', serif;
    }

    .data-table tr:nth-child(even)[b-ty9cnc3iby] {
        background-color: #f8f9fa;
    }

    .data-table tr:hover[b-ty9cnc3iby] {
        background-color: #e3f2fd;
    }

.summary-row[b-ty9cnc3iby] {
    background-color: #e8f5e8 !important;
    font-weight: 600;
    font-family: 'Microsoft YaHei', sans-serif;
}

/* 紧凑的列宽 */
.col-sequence[b-ty9cnc3iby] {
    width: 60px;
}

.col-name[b-ty9cnc3iby] {
    width: 80px;
}

.col-symbol[b-ty9cnc3iby] {
    width: 70px;
}

.col-unicode[b-ty9cnc3iby] {
    width: 80px;
}

.col-count[b-ty9cnc3iby] {
    width: 70px;
}

.col-count-pct[b-ty9cnc3iby] {
    width: 70px;
}

.col-use-count[b-ty9cnc3iby] {
    width: 90px;
}

.col-use-count-pct[b-ty9cnc3iby] {
    width: 70px;
}

/* 图表区域样式 */
.chart-section[b-ty9cnc3iby] {
    height: 35%; /* 页面高度的四分之一 */
    min-height: 200px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
}

.chart-container[b-ty9cnc3iby] {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.chart-bars-container[b-ty9cnc3iby] {
    min-width: 1200px; /* 确保有足够宽度显示所有柱子 */
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    /* 修改底部padding为50px，为下移的标签留出空间，同时Y轴的bottom也要同步修改 */
    padding: 0 0.5rem 50px 40px; /* 底部留空间给X轴标签 - 从30px增加到50px */
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    position: relative;
}

.chart-bar[b-ty9cnc3iby] {
    flex: 1;
    background: linear-gradient(to top, #4CAF50, #8BC34A);
    position: relative;
    transition: all 0.3s ease;
    min-width: 10px;
    max-width: 20px;
}

    .chart-bar:hover[b-ty9cnc3iby] {
        background: linear-gradient(to top, #2196F3, #64B5F6);
        transform: scale(1.05);
    }

.bar-label[b-ty9cnc3iby] {
    position: absolute;
    bottom: -45px; /* 增加与柱子的间距 */
    left: -5%; /* 向左移动 */
    transform: translateX(-50%) rotate(-45deg);
    font-size: 0.75rem;
    white-space: nowrap;
    color: #333;
    font-family: 'SimSun', '宋体', serif;
    font-weight: normal; /* 不加粗 */
    transform-origin: top left;
}

.bar-value[b-ty9cnc3iby] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: normal; /* 不加粗 */
    color: #333;
    font-family: 'SimSun', '宋体', serif;
}

.y-axis[b-ty9cnc3iby] {
    position: absolute;
    left: 0;
    top: 0;
    /* 同步修改：Y轴底部位置与chart-bars-container的padding-bottom保持一致 */
    bottom: 50px; /* 从40px增加到50px，与padding-bottom同步 */
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 5px;
}

.y-tick[b-ty9cnc3iby] {
    font-size: 0.7rem;
    color: #666;
    text-align: right;
    font-family: 'SimSun', '宋体', serif;
}

/* 水平滚动条样式 */
.chart-container[b-ty9cnc3iby]::-webkit-scrollbar {
    height: 10px;
}

.chart-container[b-ty9cnc3iby]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.chart-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

    .chart-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 加载状态 */
.loading[b-ty9cnc3iby] {
    text-align: center;
    padding: 1rem;
    color: #666;
    font-family: 'Microsoft YaHei', sans-serif;
}

.error[b-ty9cnc3iby] {
    color: #d32f2f;
    text-align: center;
    padding: 1rem;
    background: #ffebee;
    border-radius: 4px;
    margin: 0.5rem 0;
    font-family: 'Microsoft YaHei', sans-serif;
}
/* _content/LEAFBlazorApp25/Components/Layout/MainLayout.razor.rz.scp.css */


/*#region ===== Page �����ֲ� ���� ======== */

/* ---��.page�� ҳ���������ʽ --------------- */
/* ���ã���������ҳ��IJ��ַ�ʽΪ�����в��֣���Ϊ�������ݵ����� */
.page[b-h9f3kgv5lw] {
    position: relative; /* ��Զ�λ��Ϊ��Ԫ�صľ��Զ�λ�ṩ�ο� */
    display: flex; /* ʹ�õ��Բ��� */
    flex-direction: column; /* ��ֱ����������Ԫ�� */
    height: 100vh; /* ������ȷ���������߶�Ϊ�ӿڸ߶� */
    overflow: hidden; /* ���������ظ�������� */
}

/*---��.sidebar NavMenu�� - �������ʽ -----------------------*/
/* ���ã����ò�����ı���������ɫ��������ɫ������ɫ */
.sidebar[b-h9f3kgv5lw] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    height: 100vh; /* �����������ȫ�߶� */
    overflow-y: hidden; /* �޸ģ����ش�ֱ������ */
    overflow-x: hidden; /* ����ˮƽ���� */
}

    /* ���ã�ȷ��NavMenu����ڲ���������������������ʾ�ⲿ������ */
    .sidebar[b-h9f3kgv5lw]  .scroll-container {
        height: 100vh; /* �ڲ�����ȫ�߶� */
        overflow-y: auto; /* �����ڲ����� */
        overflow-x: hidden; /* ����ˮƽ���� */
    }



/*---��main ��- ������������ʽ --------------------*/
/* ���ã�������Ҫ��������ռ��ʣ�����п��ÿռ� */
main[b-h9f3kgv5lw] {
    flex: 1; /* ��������Ϊ1��ռ��ʣ��ռ� */
}

/* ���ã�ȷ��������ռ�������ӿڸ߶� */
.main-container[b-h9f3kgv5lw] {
    height: 100vh; /* ȫ�ӿڸ߶� */
    position: relative;
    overflow: hidden; /* ������������������� */
}

/* ===��article body ��=== */
/* ���ã�Ϊ�̶�ҳüҳ��Ԥ��ռ䣬�������ݱ��ڵ� */
.scrollable-content[b-h9f3kgv5lw] {
    /*margin-top: var(--header-height) !important;*/ /* Ϊ�̶�ҳüԤ��ռ� - ʹ�ò��� */
    margin-bottom: var(--footer-height) !important;  /*Ϊ�̶�ҳ��Ԥ��ռ� - ʹ�ò��� */
    height: calc(100vh - (var(--header-height) + var(--footer-height))) !important; /* ��ȷ������ø߶ȣ��ӿڸ߶ȼ�ȥҳüҳ�� - ʹ�ò��� */
    overflow-y: auto; /* ȷ��ֻ������������� */
    overflow-x: hidden; /* ����������ˮƽ���� */
}

/*#endregion ----------------- */



/*#region === ҳü ҳ�� */

/* ��ҳüͨ�á�.top-row -  */
/* ���ã����嶥������������ۣ���������ɫ���߿򡢸߶ȺͶ��뷽ʽ */
.top-row[b-h9f3kgv5lw] {
    background-color: #f7f7f7; /* dz��ɫ���� */
    border-bottom: 1px solid #d6d5d5; /* �ײ��߿��� */
    justify-content: flex-end; /* ���ݿ��Ҷ��� */
    height: 3.5rem; /* �̶��߶� */
    display: flex; /* ���Բ��� */
    align-items: center; /* ��ֱ���ж��� */
}

    /* .top-row �ڲ������ӺͰ�ť������ʽ */
    /* ���ã����ö���������������Ԫ�صĻ�����ʽ */
    .top-row[b-h9f3kgv5lw]  a, .top-row[b-h9f3kgv5lw]  .btn-link {
        white-space: nowrap; /* ��ֹ���ֻ��� */
        margin-left: 1.5rem; /* �����߾� */
        text-decoration: none; /* ȥ���»��� */
    }

        /* .top-row ���ӵ���ͣЧ�� */
        /* ���ã��������ͣ��������ʱ��ʾ�»��ߣ��ṩ�Ӿ����� */
        .top-row[b-h9f3kgv5lw]  a:hover, .top-row[b-h9f3kgv5lw]  .btn-link:hover {
            text-decoration: underline; /* ��ʾ�»��� */
        }

        /* .top-row ��һ�����ӵ����⴦�� */
        /* ���ã��Ե�һ�����ӽ���������ʽ�������ֹ������� */
        .top-row[b-h9f3kgv5lw]  a:first-child {
            overflow: hidden; /* ����������� */
            text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
        }



/* === ���̶�ҳü��ȷ��λ�� === */
/* ���ã�ȷ��ҳü�ڹ���ʱ���̶ֹ�λ�� */
.fixed-header[b-h9f3kgv5lw] {
    position: fixed; /* �̶���λ */
    top: 0; /* �������� */
    left: 220px; /* �������� */
    right: 0; /* �Ҳ���� */
    z-index: 1000; /* ȷ�������ϲ� */
    height: var(--header-height); /* �̶��߶� - ʹ�ò��� */
    pointer-events: none; /* ��������͸���·����� */
}

    /* ȷ��ҳü�ڵ����ֿ��Խ��� */
    .fixed-header .HeadText-Move[b-h9f3kgv5lw] {
        pointer-events: auto; /* �ָ���������Ľ��� */
    }

/* === �����ԭ��ҳü������ʽ === */
/* ���ã�Ӧ������ɫ��������������ͬʱ���ֱ���ͼƬЧ�� */
.main-header[b-h9f3kgv5lw] {
    background-color: var(--theme-header-bg) !important; /* ʹ������ͷ������ɫ */
    /* ���ر���������ͼƬ + ����ɫ������Ϊ���� */
    background-image: url('/Logo/HeadAI.jpg'), linear-gradient(var(--theme-header-bg), var(--theme-header-bg)) !important;
    background-size: auto var(--header-height), cover !important; /* ����ͼ�̶��߶ȣ�����ȫ���� - ʹ�ò��� */
    background-position: 0 0, 0 0 !important; /* ����λ�ö��� */
    background-repeat: repeat, no-repeat !important; /* ����ͼ�ظ������䲻�ظ� */
    background-blend-mode: overlay; /* ���ģʽ�����ӣ��ںϱ���ͼ������ɫ */
}

/* === ����ѡ����ҳü��ʽ === */
/* ���ã���ȷ���ƶ����������IJ��֡��ߴ�Ͷ��ر���Ч�� */
.top-row.px-4.main-header[b-h9f3kgv5lw] {
    display: flex; /* ���Բ��� */
    justify-content: space-between; /* �������˶��� */
    align-items: center; /* ��ֱ���ж��� */
    flex-wrap: wrap; /* �������ݻ��� */
    height: var(--header-height); /* �̶��߶� - ʹ�ò��� */
    /* ���ر�����ʵ�֣�����ɫ + Logo����ͼ */
    background-image: var(--theme-header-bg), /* ��һ�㣺���ⱳ��ɫ/���� */
    url('/Logo/HeadAI.jpg'); /* �ڶ��㣺Logo����ͼƬ */
    /* �����ߴ����� */
    background-size: cover, /* ���ⱳ������ȫ���� */
    /* auto 58px; /* Logo�������߶ȹ̶�58px���������Ӧ */ */ auto var(--header-image-height); /* Logo�������߶ȹ̶����������Ӧ - ʹ�ò��� */
    /* ����λ�ö��� */
    background-position: 0 0, /* ���ⱳ�������ϽǶ��� */
    0 0; /* Logo���������ϽǶ��� */
    /* �����ظ����� */
    background-repeat: no-repeat, /* ���ⱳ�������ظ� */
    repeat; /* Logo�������ظ�ƽ�� */
    /* �������ģʽ */
    background-blend-mode: overlay; /* ���ӻ�ϣ��ں����㱳�� */
}

/* === �����ҳü������ʽ === */
/* ���ã�ȷ��ҳü�����ڸ��ӱ����������ɼ������������ֲ��� */
.HeadText-Move[b-h9f3kgv5lw] {
    width: 100%; /* ռ������������� */
    overflow: hidden; /* ���س������������� */
    white-space: normal; /* ���������Զ����У�ɾ��nowrap�� */

    flex: 1; /* ������չ��ռ�ݿ��ÿռ� */
    text-align: center; /* ���־��ж��� */
    padding: 0 20px; /* �����ڱ߾� */
    /* ʹ����Ӧʽ�����С :�Ƴ��˹̶���font-size�����ö�̬�������ʽ*/
    /* font-size: clamp(12px, 2vw, 20px); /* ��С16px�����25px�������ӿڿ������Ӧ */ */
    /* ȷ����ɫ������ȷӦ�� */
    color: var(--theme-header-text, #FFD700) !important; /* ʹ������������ɫ����ӻ���ֵ��!important */
    font-family: 'Microsoft YaHei'; /* ���壺΢���ź� */
    font-weight: normal; /* bold; �����ϸ������ */
    position: relative; /* ��Զ�λ��Ϊz-index�ṩ������ */
    z-index: 1; /* �ѵ�˳��ȷ�������ڱ���֮�� */
    /* ȷ���ı���ȫ�������� */
    word-wrap: break-word; /* ��������ʻ��� */
    overflow-wrap: break-word; /* �ִ�������Ļ������� */
    line-height: 1.4; /* ���ʵ��и� */
    /* max-height: 30px; /* ���߶�������һ�� */ */ max-height: var(--header-height); /* ���߶�������һ�� - ʹ�ò��� */
    display: flex; /* ʹ��flex���־����ı� */
    align-items: center; /* ��ֱ���� */
    justify-content: center; /* ˮƽ���� */
}


/* === ��ҳ�ž�ȷ��λ ��=== */
/* ���ã�ȷ��ҳ�Ź̶���λ�Ҳ�Ӱ�첼�� */
.app-footer[b-h9f3kgv5lw] {
    position: fixed; /* ���̶ֹ���λ */
    bottom: 0; /* �ײ����� */
    left: 0px; /* �������� 220*/
    right: 0; /* �Ҳ���� */
    height: var(--footer-height); /* �̶��߶� - ʹ�ò��� */
    z-index: 1000; /* ȷ�������ϲ� */
    background-color: var(--theme-footer-bg) !important; /* ʹ������ҳ�ű���ɫ */
    font-size: 12px;
    color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    pointer-events: none; /* ��������͸���·����� */

    border-top: 1px solid var(--theme-section-border) !important; /* ʹ������߿�ɫ */
}

    /* �޸ģ�ȷ��ҳ���ڵ����ӿ��Խ��� */
    .app-footer a[b-h9f3kgv5lw], .app-footer i[b-h9f3kgv5lw], .app-footer span[b-h9f3kgv5lw] {
        pointer-events: auto; /* �ָ�����Ԫ�صĵ�� */
    }



/*#endregion ----------- */


/*#region ----r������ʾ������ʽ ---------- */

/* ���ã���BlazorӦ�÷���δ�������ʱ��ʾ�Ĵ������ */
#blazor-error-ui[b-h9f3kgv5lw] {
    background: lightyellow; /* dz��ɫ��������Ŀ��ʾ */
    bottom: 0; /* �ײ����� */
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); /* ������ӰЧ�� */
    display: none; /* Ĭ������ */
    left: 0; /* ������ */
    padding: 0.6rem 1.25rem 0.7rem 1.25rem; /* �ڱ߾� */
    position: fixed; /* �̶���λ��ʼ�տɼ� */
    width: 100%; /* ȫ��� */
    z-index: 1000; /* �߶ѵ�˳��ȷ�������ϲ� */
}

    /* ������ʾ����Ĺرհ�ť��ʽ */
    /* ���ã�������ʾ�������ϽǵĹرհ�ť */
    #blazor-error-ui .dismiss[b-h9f3kgv5lw] {
        cursor: pointer; /* ���ָ��Ϊ���ͣ���ʾ�ɵ�� */
        position: absolute; /* ���Զ�λ */
        right: 0.75rem; /* �����Ҳ�λ�� */
        top: 0.5rem; /* ���붥��λ�� */
    }

/*#endregion  --------------*/



/*#region ��ͬ��Ļ����Ӧʽ�� */

/* �ƶ�����Ӧʽ��ʽ (��Ļ��� <= 640.98px) */
@media (max-width: 640px) {
    /* �����岼�֡��ƶ��˲��ֵ��� */
    .page[b-h9f3kgv5lw] {
        height: 100vh;
        overflow: hidden;
    }

    /*��NavMenu �����ࡿ��������- Page���*/
    .sidebar[b-h9f3kgv5lw] {
        width: 100% !important; /* �ƶ��˲����ȫ���  */
        height: auto; /* ��������Ϊ�̶�ֵ�����򵼺���ť�޷����ظ�����*/
        /* ����ʾ������ auto��<div class="nav-scrollable �Դ�������
             max-height: 30vh;  ���߶�Ϊ�ӿڸ߶ȵ�30%���������������϶��ס�������Լ */
        overflow-y: hidden;
    }

    /*.top-row.px-4.main-header �޸��˿ؼ���Ӧ��������������*/
    .top-row[b-h9f3kgv5lw] {
        display: none !important; /* ���ֻ���Ļ�������������� */
    }
}


/* �������Ӧʽ��ʽ (��Ļ��� >= 641px) */
/* ���ã��ڽϴ���Ļ�ϵ������岼��Ϊˮƽ���� */
@media (min-width: 641px) {
    .page[b-h9f3kgv5lw] {
        height: 100vh; /* ȷ�������Ҳ��ȫ�߶� */
        overflow: hidden; /* ȷ�������������� */
        flex-direction: row; /* ��Ϊˮƽ�������� */
    }

    /*��NavMenu �����ࡿ��������- Page���*/
    .sidebar[b-h9f3kgv5lw] {
        width: 220px; /* �̶���� */
        height: 100vh; /* ȫ�ӿڸ߶� */
        position: sticky; /* ճ�Զ�λ */
        top: 0; /* �������� */
        overflow-y: hidden; /* ��������ع����� */
    }

    /*��NavMenu �� ��������<div class="top-row ps-3 navbar navbar-dark admin-header-area" style="height: 63px;" >*/
    /* �������⣺������˵Ĺ̶���λ */
    .top-row[b-h9f3kgv5lw] {
        position: sticky; /* ճ�Զ�λ */
        top: 0; /* �������� */
        z-index: 1; /* �ѵ�˳��ȷ������������֮�� */
    }

    /* ͬʱѡ������Ԫ�أ�����˵������ڱ߾���� */
    .top-row[b-h9f3kgv5lw], article[b-h9f3kgv5lw] {
        padding-left: 2rem !important; /* ����ڱ߾� */
        padding-right: 1.5rem !important; /* �Ҳ��ڱ߾� */
    }
}

/*#endregion */
/* _content/LEAFBlazorApp25/Components/Layout/NavMenu.razor.rz.scp.css */
/*#region 微软既有 CSS */

/* 导航栏切换按钮样式 - 用于移动端展开/收起导航菜单 */
.navbar-toggler[b-h5067sct3h] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: gray;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    /* 导航栏切换按钮选中状态样式 */
    .navbar-toggler:checked[b-h5067sct3h] {
        background-color: rgba(255, 255, 255, 0.5);
    }

/* 顶部导航栏样式 - 包含品牌标题和切换按钮 */
.top-row[b-h5067sct3h] {
    height: 3.5rem;
    background-color: var(--theme-primary) !important; /* 使用主题色 */
}

/* 导航栏品牌标题样式 - 显示应用名称 */
.navbar-brand[b-h5067sct3h] {
    font-size: 1.1rem;
    /*color: var(--theme-nav-text) !important;*/
}

/* Bootstrap Icons 基础样式 - 设置图标通用属性 */
.bi[b-h5067sct3h] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* 导航菜单容器样式 - 可滚动区域，移动端默认隐藏 */
.nav-scrollable[b-h5067sct3h] {
    background-color: var(--theme-primary);
    display: none;
}

/* 导航项基础样式 - 设置字体大小和底部间距 */
.nav-item[b-h5067sct3h] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    /* 第一个导航项顶部间距 */
    .nav-item:first-of-type[b-h5067sct3h] {
        padding-top: 0.5rem;
    }

    /* 最后一个导航项底部间距 */
    .nav-item:last-of-type[b-h5067sct3h] {
        padding-bottom: 0.5rem;
    }

    /* 导航链接基础样式 - 文本颜色、背景、圆角等 ：修改值*/
    .nav-item[b-h5067sct3h]  .nav-link {
        color: var(--theme-nav-text) !important;
        background: none !important;
        border: none !important;
        border-radius: 4px;
        height: 2rem;
        display: flex;
        align-items: center;
        line-height: 2rem;
        width: 100%;
        transition: color 0.3s ease;
    }

        /* 激活状态导航链接样式 - 高亮显示当前页面：建议修改为 */
        .nav-item[b-h5067sct3h]  .nav-link.active {
            background-color: var(--theme-active) !important;
            color: var(--theme-nav-text-hover) !important; /* 使用变量而不是固定白色 */
            font-weight: 600;
        }

        /* 【优化】删除重复的激活状态定义，保留上面的 .nav-link.active */

        /* 导航链接悬停状态样式 */
        .nav-item[b-h5067sct3h]  .nav-link:hover {
            background-color: var(--theme-active) !important;
            color: var(--theme-nav-text-hover) !important;
            transform: translateX(4px);
        }

        /* 焦点状态（可访问性） */
        .nav-item[b-h5067sct3h]  .nav-link:focus {
            outline: 2px solid var(--theme-active);
            outline-offset: 2px;
        }

/* 移动端：切换按钮选中时显示导航菜单 */
.navbar-toggler:checked ~ .nav-scrollable[b-h5067sct3h] {
    display: block;
}
/*#endregion ----微软既有----*/


/*#region  响应式设计 - 宽屏设备样式  架构源码 */

/* ===== 响应式设计 - 移动端样式 (max-width: 640px) ===== */
@media (max-width: 640px) {
    /* 【NavLink 容器 div】 */
    .nav-item[b-h5067sct3h] {
        font-size: 1rem;
        padding-bottom: 0.75rem;
    }

        /* 【NavLink 导航链接】 */
        .nav-item[b-h5067sct3h]  .nav-link {
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1rem;
        }

        /* 第一个导航项：图表 */
        .nav-item:first-of-type[b-h5067sct3h] {
            padding-top: 0.75rem;
        }

        /* 最后一个导航项：文本
            :last-of-type 是一个伪类，表示选择在其父元素内同类型（标签名）的兄弟元素中的最后一个 */
        .nav-item:last-of-type[b-h5067sct3h] {
            padding-bottom: 0.75rem;
        }

    /*  这是一个复合选择器：当具有 navbar-toggler 类的复选框被选中时，选择它后面所有具有 nav-scrollable 类的兄弟元素
        .navbar-toggler - 导航菜单开关（通常是隐藏的复选框） :checked - CSS伪类，匹配被选中的表单元素
        ~ - 通用兄弟组合器，选择后面的所有同级元素.nav-scrollable - 可滚动的导航菜单容器 */
    .navbar-toggler:checked ~ .nav-scrollable[b-h5067sct3h] {
        display: block;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ===== 响应式设计 - 宽屏设备样式 (min-width: 641px) ===== */
@media (min-width: 641px) {
    /* 宽屏下隐藏【切换按钮】 */
    .navbar-toggler[b-h5067sct3h] {
        display: none;
    }

    /* <div class="nav-scrollable fs-150" onclick="document.querySelector('.navbar-toggler').click()">
        宽屏下始终显示导航菜单，设置滚动区域 */
    .nav-scrollable[b-h5067sct3h] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    /* 宽屏下导航项悬停效果优化 */
    .nav-item[b-h5067sct3h]  .nav-link:hover {
        transform: translateX(8px);
    }
}

/*#endregion */


/*#region == 主题选择器 样式 ===== */

/* 主题选择器容器样式 - 设置最小宽度 */
.theme-selector[b-h5067sct3h] {
    min-width: 120px;
}

    /* 主题选择下拉框样式 */
    .theme-selector .theme-select[b-h5067sct3h] {
        font-size: 0.7rem;
        padding: 1px 8px;
        height: 24px;
        line-height: 1.2;
        background-color: transparent;
        color: white;
        border: 1px solid white;
        border-radius: 4px;
    }

        /* 主题选择下拉框焦点状态 */
        .theme-selector .theme-select:focus[b-h5067sct3h] {
            box-shadow: none;
            border-color: white;
            outline: none;
        }

        /* 下拉框选项样式 */
        .theme-selector .theme-select option[b-h5067sct3h] {
            background-color: #2d2d2d;
            color: white;
        }

/*#endregion -- 主题选择器样式 */


/*#region name 按钮样式 */
/* 这些样式必须放在CSS文件的最后，确保最高优先级 */

/* 强制覆盖整个导航菜单的根元素背景色 */
.navbar-toggler:checked ~ .nav-scrollable[b-h5067sct3h],
.nav-scrollable[b-h5067sct3h] {
    background-color: var(--theme-primary) !important;
}

/* 强制覆盖顶部导航栏 - 左上角标题区使用新的主题变量 */
.top-row.ps-3.navbar.navbar-dark[b-h5067sct3h] {
    background-color: var(--theme-admin-header-bg) !important;
    color: var(--theme-admin-header-text) !important;
}

/* 主要按钮使用主题次要色 */
.btn-primary[b-h5067sct3h] {
    background-color: var(--theme-secondary);
    border-color: var(--theme-secondary);
}

/* 强制覆盖所有导航项和链接状态 */
.nav-item[b-h5067sct3h]  a.nav-link {
    color: #d7d7d7 !important;
    background: none !important;
    border: none !important;
}

    /* 强制覆盖激活状态导航链接 */
    .nav-item[b-h5067sct3h]  a.nav-link.active {
        background-color: var(--theme-active) !important;
        color: white !important;
    }

    /* 强制覆盖悬停状态导航链接 */
    .nav-item[b-h5067sct3h]  a.nav-link:hover {
        background-color: var(--theme-hover) !important;
        color: white !important;
    }

/* 强制覆盖分区样式 */
.nav-scrollable .nav-section[b-h5067sct3h] {
    background-color: var(--theme-section-bg) !important;
    border: 1px solid var(--theme-section-border) !important;
}

/* 强制覆盖分区标题样式 */
.nav-scrollable .nav-section-header[b-h5067sct3h] {
    background-color: var(--theme-section-header-bg) !important;
    color: var(--theme-section-text) !important; /* 【优化】使用CSS变量 */
}

    /* 强制覆盖分区标题悬停状态 */
    .nav-scrollable .nav-section-header:hover[b-h5067sct3h] {
        background-color: var(--theme-hover) !important;
    }

/* 强制覆盖主要按钮样式 */
.btn.btn-sm.btn-primary[b-h5067sct3h] {
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
}

/* 强制覆盖轮廓按钮样式 */
.btn.btn-sm.btn-outline-light[b-h5067sct3h] {
    border-color: var(--theme-section-border) !important;
    color: #d7d7d7 !important;
}

    /* 强制覆盖轮廓按钮悬停状态 */
    .btn.btn-sm.btn-outline-light:hover[b-h5067sct3h] {
        background-color: var(--theme-hover) !important;
        color: white !important;
    }

/* 强制覆盖主题选择器样式 */
.theme-selector .theme-select[b-h5067sct3h] {
    background-color: var(--theme-section-header-bg) !important;
    color: #d7d7d7 !important;
    border: 1px solid var(--theme-section-border) !important;
}

    /* 强制覆盖主题选择器焦点状态 */
    .theme-selector .theme-select:focus[b-h5067sct3h] {
        background-color: var(--theme-section-header-bg) !important;
        color: #d7d7d7 !important;
        border-color: var(--theme-secondary) !important;
    }

/*#endregion */


/*#region 标题区 + 页眉 + 页脚  */

/* 强制覆盖页眉使用新的主题变量 */
.main-header[b-h5067sct3h] {
    background-color: var(--theme-header-bg) !important;
    background-image: url('/Logo/HeadAI.jpg'), linear-gradient(var(--theme-header-bg), var(--theme-header-bg)) !important;
    background-size: auto 58px, cover !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: repeat, no-repeat !important;
    background-blend-mode: overlay !important;
}

/* 强制覆盖页脚使用新的主题变量 */
.app-footer[b-h5067sct3h] {
    background-color: var(--theme-footer-bg) !important;
    border-top: 1px solid var(--theme-section-border) !important;
}

/* 直接选择器覆盖，确保最高优先级 */
div.top-row.px-4.main-header[b-h5067sct3h] {
    background-color: var(--theme-header-bg) !important;
}

footer.app-footer[b-h5067sct3h] {
    background-color: var(--theme-footer-bg) !important;
}

/* 页眉文字颜色使用主题变量 */
.HeadText-Move[b-h5067sct3h] {
    color: var(--theme-admin-header-text) !important;
}

/* 左上角标题区专用样式 - 使用新的主题变量 */
.admin-header-area[b-h5067sct3h] {
    background-color: var(--theme-admin-header-bg) !important;
    color: var(--theme-admin-header-text) !important;
}

    /* 左上角标题区内的品牌文字颜色 */
    .admin-header-area .navbar-brand[b-h5067sct3h],
    .admin-header-area .HeadText-Move[b-h5067sct3h] {
        color: var(--theme-admin-header-text) !important;
    }

    /* 左上角标题区内的按钮样式适配 */
    .admin-header-area .btn[b-h5067sct3h] {
        border-color: var(--theme-admin-header-text) !important;
        color: var(--theme-admin-footer-text) !important;
    }

    /* 左上角标题区内主要按钮样式 */
    .admin-header-area .btn-primary[b-h5067sct3h] {
        background-color: var(--theme-admin-header-text) !important;
        color: var(--theme-admin-footer-bg) !important;
    }

    /* 左上角标题区内轮廓按钮样式 */
    .admin-header-area .btn-outline-light[b-h5067sct3h] {
        background-color: transparent !important;
        color: var(--theme-admin-footer-text) !important;
    }

        /* 左上角标题区内轮廓按钮悬停状态 */
        .admin-header-area .btn-outline-light:hover[b-h5067sct3h] {
            background-color: var(--theme-admin-header-text) !important;
            color: var(--theme-admin-footer-bg) !important;
        }

    /* 左上角标题区内的主题选择器样式适配 */
    .admin-header-area .theme-select[b-h5067sct3h] {
        background-color: var(--theme-admin-header-bg) !important;
        color: var(--theme-admin-footer-text) !important;
        border-color: var(--theme-admin-footer-text) !important;
    }

        /* 左上角标题区内主题选择器选项样式 */
        .admin-header-area .theme-select option[b-h5067sct3h] {
            background-color: var(--theme-admin-header-bg) !important;
            color: var(--theme-admin-footer-text) !important;
        }

/*#endregion */


/*#region 功能分区  ----- */
/* 分区通用样式 - 用于分组导航项 */
.nav-section[b-h5067sct3h] {
    border: 1px solid var(--theme-section-border);
    border-radius: 6px;
    background-color: var(--theme-section-bg);
    margin-top: var(--nav-section-margin-top);
    padding-top: var(--nav-section-padding-top);
    padding-bottom: var(--nav-section-padding-bottom);
}

/* 分区标题样式 - 可点击展开/收起 */
.nav-section-header[b-h5067sct3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--theme-section-text) !important; /* 【优化】使用CSS变量 */
    cursor: pointer;
    font-weight: bold;
    background-color: var(--theme-section-header-bg);
    margin: 0 0.5rem;
    border-radius: 4px;
    line-height: var(--nav-section-line-height);
}

    /* 分区标题悬停状态 */
    .nav-section-header:hover[b-h5067sct3h] {
        background-color: var(--theme-hover);
    }

/* 分区标题文字样式、字色 */
.nav-section-title[b-h5067sct3h] {
    color: var(--theme-section-text) !important;
    font-size: 0.9rem;
}

/* 分区切换图标样式 */
.nav-section-toggle[b-h5067sct3h] {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* 分区内容区域样式 - 包含展开动画 */
.nav-section-content[b-h5067sct3h] {
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    color: var(--theme-section-text) !important; /* 【优化】确保分区内容使用主题文字颜色 */
}

    /* 【优化】分区内导航链接样式 */
    .nav-section-content .nav-item[b-h5067sct3h]  .nav-link {
        color: var(--theme-section-text) !important;
    }

        .nav-section-content .nav-item[b-h5067sct3h]  .nav-link.active {
            color: var(--theme-nav-text-hover) !important;
        }

        .nav-section-content .nav-item[b-h5067sct3h]  .nav-link:hover {
            color: var(--theme-nav-text-hover) !important;
        }

/* 分区标题使用主题次要色 */
.nav-section-header[b-h5067sct3h] {
    background-color: var(--theme-secondary);
}

/*#endregion -- -- */


/*#region == 多语言按钮 样式 ===== */

/* 语言切换按钮容器样式 - 水平排列 */
.language-switcher[b-h5067sct3h] {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

/* 语言按钮基础样式 */
.language-btn[b-h5067sct3h] {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* 激活状态语言按钮样式 */
.language-btn-active[b-h5067sct3h] {
    background-color: #0d6efd;
    color: white;
    font-weight: bold;
}

/* 非激活状态语言按钮样式 */
.language-btn-inactive[b-h5067sct3h] {
    background-color: #f8f9fa;
    color: #6c757d;
}

    /* 非激活状态语言按钮悬停效果 */
    .language-btn-inactive:hover[b-h5067sct3h] {
        background-color: #e9ecef;
        color: #495057;
    }

/* 确保语言按钮在NavLink样式下正常显示 */
.language-btn.nav-link[b-h5067sct3h] {
    margin: 0;
    border-radius: 0;
}

/*#endregion --------------------------*/


/*#region == 放置最后、增强导航链接样式优先级：NavLink文本颜色 === */

.nav-scrollable .nav-item[b-h5067sct3h]  a.nav-link {
    color: var(--theme-nav-text) !important;
}

    .nav-scrollable .nav-item[b-h5067sct3h]  a.nav-link.active {
        background: var(--theme-active) !important;
        color: var(--theme-nav-text-hover) !important;
    }

    .nav-scrollable .nav-item[b-h5067sct3h]  a.nav-link:hover {
        background: var(--theme-hover) !important;
        color: var(--theme-nav-text-hover) !important;
    }

/* 修复下拉菜单背景色 */
/*[data-theme="purple-fantasy"] .theme-selector .theme-select {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #5D4FA0 !important;
}*/

/*修复下拉选项背景色*/
/*[data-theme="purple-fantasy"] .theme-selector .theme-select option {
        background-color: #4B0082 !important;
        color: white !important;
    }*/

/*#endregion */


/*#region Bootstrap Icons：bi 类的图标。在CSS文件中，使用的是SVG数据URI */
/*使用 SVG 数据 URI 的背景图像；所有图标都是白色填充，尺寸为 16x16 像素使用时只需在 HTML 元素上添加对应的 class 名称*/

/* 主页/房屋图标（填充样式）- 用于导航菜单主页项 */
.bi-house-door-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

/* 加号方块图标（填充样式）- 通常用于添加/新建功能 */
.bi-plus-square-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

/* 嵌套列表图标 - 用于显示层级结构或菜单列表 */
.bi-list-nested-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 .5 7h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 .5 3h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* 锁图标 - 用于安全、权限或隐私相关功能 */
.bi-lock-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-lock' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

/* 人物图标（轮廓样式）- 用于用户资料或个人设置 */
.bi-person-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

/* 人物徽章图标 - 用于员工、会员或身份验证 */
.bi-person-badge-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

/* 人物图标（填充样式）- 用于用户相关的功能 */
.bi-person-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

/* 基础链接图标 */
.bi-link-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-link' viewBox='0 0 16 16'%3E%3Cpath d='M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z'/%3E%3Cpath d='M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z'/%3E%3C/svg%3E");
}

/* 左箭头条图标 - 用于返回、折叠或导航到上一级 */
.bi-arrow-bar-left-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

/* 用户设置 - person-workspace */
.bi-person-workspace-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-workspace' viewBox='0 0 16 16'%3E%3Cpath d='M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H4Zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3Cpath d='M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.373 5.373 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2H2Z'/%3E%3C/svg%3E");
}

/* 项目仪表盘 - speedometer2 */
.bi-speedometer2-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 0 1-1 0l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3C/svg%3E");
}

/* 视频 - camera-reels */
.bi-camera-reels-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-camera-reels' viewBox='0 0 16 16'%3E%3Cpath d='M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z'/%3E%3Cpath d='M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z'/%3E%3Cpath d='M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z'/%3E%3C/svg%3E");
}

/* 招聘 - person-plus */
.bi-person-plus-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-plus' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3Cpath fill-rule='evenodd' d='M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}

/* 软件下载 - download */
.bi-download-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-download' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E");
}

/* 报告 - clipboard-data */
.bi-clipboard-data-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-clipboard-data' viewBox='0 0 16 16'%3E%3Cpath d='M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

/* 任务跟踪 - list-check */
.bi-list-check-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* AI - cpu */
.bi-cpu-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-cpu' viewBox='0 0 16 16'%3E%3Cpath d='M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z'/%3E%3C/svg%3E");
}

/* 智能体 - robot白色 */
.bi-robot-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-robot' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3Cpath d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3C/svg%3E");
}

/* 蓝色主题机器人 */
.bi-robot-blue[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234186f4' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='%233366cc' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}
/* 多彩机器人 - 身体蓝色，细节黄色 */
.bi-robot-colorful[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234186f4' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='%23FFD700' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Z'/%3E%3Cpath fill='%23FF6B6B' d='M4.542 7.235a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}
/* 渐变色彩色机器人 */
.bi-robot-gradient[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%234186f4;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%239C27B0;stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF9800;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FF5722;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23grad1)' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='url(%23grad2)' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}
/* 科技感银色机器人 */
.bi-robot-tech[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23B0BEC5' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='%23796C6C' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}
/* 白色身体黄色细节的机器人图标 */
.bi-robot-white-yellow[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='%23FFD700' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}



/* 中文语言图标 - 用于语言切换菜单 */
.bi-chinese-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ctext x='50%25' y='60%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial, sans-serif' font-size='12'%3E中%3C/text%3E%3C/svg%3E");
}

/* 英文语言图标 - 用于语言切换菜单 */
.bi-english-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ctext x='50%25' y='60%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial, sans-serif' font-size='10'%3EEN%3C/text%3E%3C/svg%3E");
}

/* 地球/国际化图标（填充样式）- 用于语言切换功能 */
.bi-globe-fill-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-globe' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H11.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.611.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z'/%3E%3C/svg%3E");
}


/*下载 */
.bi-download-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-download' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E");
}

/*联系我们 */
.bi-chat-left-text-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chat-left-text' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/*跟踪 (位置) */
.bi-geo-alt-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-geo-alt' viewBox='0 0 16 16'%3E%3Cpath d='M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z'/%3E%3Cpath d='M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E");
}


/*产品 */
.bi-box-seam-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-seam' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
}

/*手机短信 */
.bi-chat-text-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chat-text' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z'/%3E%3Cpath d='M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/*微信 */
.bi-wechat-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-wechat' viewBox='0 0 16 16'%3E%3Cpath d='M11.186 1.113a.5.5 0 0 0-.745.041L8 5.09 5.559 1.154a.5.5 0 0 0-.745-.041 12.97 12.97 0 0 0-2.18 9.334c.881 3.148 4.02 5.483 7.366 5.483a7.11 7.11 0 0 0 2.77-.585l.034.023c.268.178.593.286.912.286.63 0 1.127-.414 1.284-1.016.569-2.102.866-4.163.866-6.258 0-3.844-2.33-7.227-5.834-8.83zm-.182 13.95a6.09 6.09 0 0 1-2.255-.434c-2.941-1.011-5.078-3.705-5.078-6.8 0-2.689 1.394-5.135 3.642-6.542l.02.013c1.522.888 3.672 1.438 5.93 1.438 2.257 0 4.407-.55 5.93-1.438l.02-.013c2.248 1.407 3.642 3.853 3.642 6.542 0 2.689-1.394 5.135-3.642 6.542l-.02-.013a10.27 10.27 0 0 1-1.09.452z'/%3E%3Cpath d='M6.5 7a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm3 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM5.495 9.851a.5.5 0 0 1 .631.333c.037.134.077.266.12.395a.5.5 0 0 1-.941.339 4.9 4.9 0 0 1-.106-.311.5.5 0 0 1 .296-.756zm4.59 0a.5.5 0 0 1 .296.756 4.9 4.9 0 0 1-.106.311.5.5 0 1 1-.941-.339c.043-.129.083-.261.12-.395a.5.5 0 0 1 .631-.333z'/%3E%3C/svg%3E");
}

/*邮箱 */
.bi-envelope-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}


/*聊天图标：白色*/
/* 人员管理图标 */
.bi-people-fill-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

/* 设置/管理图标 */
.bi-gear-fill-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* 人员管理图标 - 金黄色 */
.bi-people-fill-gold[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFD700' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

/*====周易 测评系统图标=========================*/

/* 设置/管理图标 - 金黄色 */
.bi-gear-fill-gold[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFD700' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* 签筒图标 - 白色主体金色细节 */
.bi-lot-vessel[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1v5a1 1 0 0 1-2 0V6H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V2a1 1 0 0 1 1-1z'/%3E%3Cpath fill='%23FFD700' d='M3 12h10v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1zm1-1v-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4z'/%3E%3C/svg%3E");
}
/* 黑白太极图 */
.bi-taiji-black-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle fill='white' cx='8' cy='8' r='8'/%3E%3Ccircle fill='black' cx='8' cy='8' r='3.2'/%3E%3C/svg%3E");
}


/* 白色奖杯图标 */
.bi-ability-award-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z'/%3E%3Cpath d='M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z'/%3E%3C/svg%3E");
}

.bi-stairs-3-white[b-h5067sct3h] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 14h10V8H8V4H4V2H2v12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -0.125em;
}



/* 产品管理图标 - 白色为主，金色点缀 */
.bi-box-seam-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3Cpath fill='%23FFD700' d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: -0.125em;
    filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.3));
}

/* 统计分析图标 - 白色为主，金色点缀 */
.bi-bar-chart-line-nav-menu[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z'/%3E%3Cpath fill='%23FFD700' d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: -0.125em;
    filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.3));
}
/*#endregion  Bootstrap Icons */



/* _content/LEAFBlazorApp25/Components/Pages/ContacWe.razor.rz.scp.css */
/* ===== 联系我们页面样式 - 紧凑版本 ===== */

/* 页面容器 - 移除了头部区域，调整整体高度 */
.contact-page[b-9f1xcvvcl2] {
    min-height: calc(100vh - 100px); /* 减少高度，因为移除了头部区域 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem 0; /* 减少上下内边距 */
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 主要内容区域 - 调整上边距 */
.contact-main[b-9f1xcvvcl2] {
    padding: 0;
    width: 100%;
}

/* 联系卡片样式 */
.contact-card[b-9f1xcvvcl2] {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0 auto; /* 水平居中 */
}

    .contact-card:hover[b-9f1xcvvcl2] {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
    }

    .contact-card .card-header[b-9f1xcvvcl2] {
        border-bottom: none;
        padding: 1rem 1.5rem;
    }

    .contact-card .card-body[b-9f1xcvvcl2] {
        background: white;
        padding: 1.5rem; /* 减少内边距，使内容更紧凑 */
    }

/* 紧凑表单组样式 - 新增类减少元素间距 */
.compact-form-group[b-9f1xcvvcl2] {
    margin-bottom: 0.75rem !important; /* 显著减少表单项之间的间距 */
}

.form-group[b-9f1xcvvcl2] {
    margin-bottom: 1rem; /* 保持原有样式作为后备 */
}

/* 表单标签样式 */
.form-label[b-9f1xcvvcl2] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem !important; /* 减少标签与输入框的间距 */
    font-size: 0.9rem;
}

/* 表单控件样式 */
.form-control[b-9f1xcvvcl2], .form-select[b-9f1xcvvcl2] {
    border: 1.5px solid #e9ecef;
    border-radius: 6px; /* 稍微减小圆角 */
    padding: 0.5rem 0.75rem; /* 减少内边距 */
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .form-control:focus[b-9f1xcvvcl2], .form-select:focus[b-9f1xcvvcl2] {
        border-color: var(--theme-primary);
        box-shadow: 0 0 0 0.2rem rgba(34, 139, 34, 0.15);
        outline: none;
    }

/* 按钮样式 */
.btn[b-9f1xcvvcl2] {
    border-radius: 6px;
    padding: 0.5rem 1.25rem; /* 减少按钮内边距 */
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary[b-9f1xcvvcl2] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
}

    .btn-primary:hover:not(:disabled)[b-9f1xcvvcl2] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
    }

    .btn-primary:disabled[b-9f1xcvvcl2] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-9f1xcvvcl2] {
    background: #6c757d;
}

    .btn-secondary:hover[b-9f1xcvvcl2] {
        background: #5a6268;
        transform: translateY(-1px);
    }

/* 表单验证样式 */
.text-danger[b-9f1xcvvcl2] {
    font-size: 0.75rem; /* 减小错误提示字体 */
    margin-top: 0.125rem; /* 减少上边距 */
}

/* 加载状态 */
.loading-overlay[b-9f1xcvvcl2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 成功提示 */
.alert-success[b-9f1xcvvcl2] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #28a745;
}

/* 管理员面板样式 */
.admin-panel .card[b-9f1xcvvcl2] {
    border: 2px solid #ffc107;
}

.admin-panel .card-header[b-9f1xcvvcl2] {
    background: linear-gradient(135deg, #ffc107, #ffb300) !important;
    color: #212529;
    font-weight: 600;
}

.admin-panel .form-control[b-9f1xcvvcl2] {
    font-size: 0.875rem;
}

.admin-panel .btn-sm[b-9f1xcvvcl2] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.admin-panel .btn-success[b-9f1xcvvcl2] {
    background: #198754;
    border: none;
}

.admin-panel .btn-danger[b-9f1xcvvcl2] {
    background: #dc3545;
    border: none;
}

/* ===== 响应式设计 ===== */

/* 平板设备 */
@media (max-width: 992px) {
    .contact-card .card-body[b-9f1xcvvcl2] {
        padding: 1.25rem; /* 平板设备上进一步减少内边距 */
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .contact-page[b-9f1xcvvcl2] {
        min-height: calc(100vh - 80px);
        padding: 0.5rem 0;
    }

    .contact-card .card-body[b-9f1xcvvcl2] {
        padding: 1rem;
    }

    .btn[b-9f1xcvvcl2] {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }

    .form-control[b-9f1xcvvcl2], .form-select[b-9f1xcvvcl2] {
        padding: 0.4rem 0.6rem;
    }

    .compact-form-group[b-9f1xcvvcl2] {
        margin-bottom: 0.5rem !important;
    }

    /* 管理员面板在移动端的调整 */
    .admin-panel .row[b-9f1xcvvcl2] {
        margin-bottom: 0.5rem;
    }

    .admin-panel .col-5[b-9f1xcvvcl2],
    .admin-panel .col-2[b-9f1xcvvcl2] {
        margin-bottom: 0.5rem;
    }
}

/* 小屏手机 */
@media (max-width: 576px) {
    .contact-card .card-body[b-9f1xcvvcl2] {
        padding: 0.75rem;
    }

    .btn[b-9f1xcvvcl2] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

        .btn.me-2[b-9f1xcvvcl2] {
            margin-right: 0 !important;
        }

    /* 管理员面板在小屏手机的调整 */
    .admin-panel .card-body[b-9f1xcvvcl2] {
        padding: 0.75rem;
    }
}

/* ===== 动画效果 ===== */

/* 淡入向上动画 */
@keyframes fadeInUp-b-9f1xcvvcl2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-card[b-9f1xcvvcl2] {
    animation: fadeInUp-b-9f1xcvvcl2 0.5s ease-out;
}

/* 按钮点击效果 */
.btn:active[b-9f1xcvvcl2] {
    transform: scale(0.98);
}

/* 输入框聚焦动画 */
.form-control:focus[b-9f1xcvvcl2], .form-select:focus[b-9f1xcvvcl2] {
    transform: translateY(-1px);
}

/* 管理员面板动画 */
.admin-panel .card[b-9f1xcvvcl2] {
    animation: fadeInUp-b-9f1xcvvcl2 0.4s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Pages/ContacWe1.razor.rz.scp.css */
/* ===== 联系我们页面样式 - 紧凑版本 ===== */

/* 页面容器 - 移除了头部区域，调整整体高度 */
.contact-page[b-vif0s08fdt] {
    min-height: calc(100vh - 100px); /* 减少高度，因为移除了头部区域 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem 0; /* 减少上下内边距 */
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 主要内容区域 - 调整上边距 */
.contact-main[b-vif0s08fdt] {
    padding: 0;
    width: 100%;
}

/* 联系卡片样式 */
.contact-card[b-vif0s08fdt] {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0 auto; /* 水平居中 */
}

    .contact-card:hover[b-vif0s08fdt] {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
    }

    .contact-card .card-header[b-vif0s08fdt] {
        border-bottom: none;
        padding: 1rem 1.5rem;
    }

    .contact-card .card-body[b-vif0s08fdt] {
        background: white;
        padding: 1.5rem; /* 减少内边距，使内容更紧凑 */
    }

/* 紧凑表单组样式 - 新增类减少元素间距 */
.compact-form-group[b-vif0s08fdt] {
    margin-bottom: 0.75rem !important; /* 显著减少表单项之间的间距 */
}

.form-group[b-vif0s08fdt] {
    margin-bottom: 1rem; /* 保持原有样式作为后备 */
}

/* 表单标签样式 */
.form-label[b-vif0s08fdt] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem !important; /* 减少标签与输入框的间距 */
    font-size: 0.9rem;
}

/* 表单控件样式 */
.form-control[b-vif0s08fdt], .form-select[b-vif0s08fdt] {
    border: 1.5px solid #e9ecef;
    border-radius: 6px; /* 稍微减小圆角 */
    padding: 0.5rem 0.75rem; /* 减少内边距 */
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .form-control:focus[b-vif0s08fdt], .form-select:focus[b-vif0s08fdt] {
        border-color: var(--theme-primary);
        box-shadow: 0 0 0 0.2rem rgba(34, 139, 34, 0.15);
        outline: none;
    }

/* 按钮样式 */
.btn[b-vif0s08fdt] {
    border-radius: 6px;
    padding: 0.5rem 1.25rem; /* 减少按钮内边距 */
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary[b-vif0s08fdt] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
}

    .btn-primary:hover:not(:disabled)[b-vif0s08fdt] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
    }

    .btn-primary:disabled[b-vif0s08fdt] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-vif0s08fdt] {
    background: #6c757d;
}

    .btn-secondary:hover[b-vif0s08fdt] {
        background: #5a6268;
        transform: translateY(-1px);
    }

/* 表单验证样式 */
.text-danger[b-vif0s08fdt] {
    font-size: 0.75rem; /* 减小错误提示字体 */
    margin-top: 0.125rem; /* 减少上边距 */
}

/* 加载状态 */
.loading-overlay[b-vif0s08fdt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 成功提示 */
.alert-success[b-vif0s08fdt] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #28a745;
}

/* ===== 响应式设计 ===== */

/* 平板设备 */
@media (max-width: 992px) {
    .contact-card .card-body[b-vif0s08fdt] {
        padding: 1.25rem; /* 平板设备上进一步减少内边距 */
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .contact-page[b-vif0s08fdt] {
        min-height: calc(100vh - 80px);
        padding: 0.5rem 0;
    }

    .contact-card .card-body[b-vif0s08fdt] {
        padding: 1rem;
    }

    .btn[b-vif0s08fdt] {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }

    .form-control[b-vif0s08fdt], .form-select[b-vif0s08fdt] {
        padding: 0.4rem 0.6rem;
    }

    .compact-form-group[b-vif0s08fdt] {
        margin-bottom: 0.5rem !important;
    }
}

/* 小屏手机 */
@media (max-width: 576px) {
    .contact-card .card-body[b-vif0s08fdt] {
        padding: 0.75rem;
    }

    .btn[b-vif0s08fdt] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

        .btn.me-2[b-vif0s08fdt] {
            margin-right: 0 !important;
        }
}

/* ===== 动画效果 ===== */

/* 淡入向上动画 */
@keyframes fadeInUp-b-vif0s08fdt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-card[b-vif0s08fdt] {
    animation: fadeInUp-b-vif0s08fdt 0.5s ease-out;
}

/* 按钮点击效果 */
.btn:active[b-vif0s08fdt] {
    transform: scale(0.98);
}

/* 输入框聚焦动画 */
.form-control:focus[b-vif0s08fdt], .form-select:focus[b-vif0s08fdt] {
    transform: translateY(-1px);
}
/* _content/LEAFBlazorApp25/Components/Pages/DownloadSoft.razor.rz.scp.css */
/* 紧凑布局容器 */
.download-container[b-fmdwud3fr3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
}

/* 管理员面板样式 */
.admin-panel[b-fmdwud3fr3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: -10px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    padding: 10px 20px 5px 20px;
}


/* 管理员标题区域布局 */
.admin-title[b-fmdwud3fr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.title-left[b-fmdwud3fr3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* 操作按钮容器 */
.form-actions[b-fmdwud3fr3] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

/* 紧凑按钮样式 */
.upload-btn.compact[b-fmdwud3fr3], .cancel-btn.compact[b-fmdwud3fr3] {
    width: auto;
    min-width: 100px;
    padding: 6px 12px;
    white-space: nowrap;
    height: 36px;
    font-size: 0.85rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cancel-btn.compact[b-fmdwud3fr3] {
    min-width: 60px;
}

/* 上传按钮特定样式 */
.upload-btn.compact[b-fmdwud3fr3] {
    background: rgba(40, 167, 69, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .upload-btn.compact:hover:not(:disabled)[b-fmdwud3fr3] {
        background: #28a745;
        transform: translateY(-1px);
    }

    .upload-btn.compact:disabled[b-fmdwud3fr3] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .upload-btn.compact.uploading[b-fmdwud3fr3] {
        background: #6c757d;
    }

/* 取消按钮特定样式 */
.cancel-btn.compact[b-fmdwud3fr3] {
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .cancel-btn.compact:hover[b-fmdwud3fr3] {
        background: #5a6268;
    }

.admin-icon[b-fmdwud3fr3] {
    font-size: 1.3rem;
}

/* 状态消息 */
.status-message[b-fmdwud3fr3] {
    padding: 10px 15px;
    margin: 8px 0 12px 0;
    border-radius: 6px;
    font-weight: 500;
    border-left: 4px solid;
    font-size: 0.9rem;
}

    .status-message.success[b-fmdwud3fr3] {
        background: rgba(212, 237, 218, 0.9);
        color: #155724;
        border-left-color: #28a745;
    }

    .status-message.error[b-fmdwud3fr3] {
        background: rgba(248, 215, 218, 0.9);
        color: #721c24;
        border-left-color: #dc3545;
    }

/* 紧凑表单样式 */
.compact-form .form-row[b-fmdwud3fr3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.compact-form .form-group.compact[b-fmdwud3fr3] {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

/* 文件选择按钮样式 */
.file-select-btn[b-fmdwud3fr3] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #495057;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .file-select-btn:hover[b-fmdwud3fr3] {
        background: white;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

.file-input-hidden[b-fmdwud3fr3] {
    display: none;
}

.description-input[b-fmdwud3fr3] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 50px;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.3s ease;
    color: #495057;
}

    .description-input:focus[b-fmdwud3fr3] {
        border-color: white;
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

.char-count[b-fmdwud3fr3] {
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

.form-actions[b-fmdwud3fr3] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.upload-btn.compact[b-fmdwud3fr3] {
    padding: 10px 16px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

    .upload-btn.compact:hover:not(:disabled)[b-fmdwud3fr3] {
        background: #28a745;
        transform: translateY(-1px);
    }

    .upload-btn.compact:disabled[b-fmdwud3fr3] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .upload-btn.compact.uploading[b-fmdwud3fr3] {
        background: #6c757d;
    }

.cancel-btn.compact[b-fmdwud3fr3] {
    padding: 10px 16px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    flex: 1;
}

    .cancel-btn.compact:hover[b-fmdwud3fr3] {
        background: #5a6268;
    }

.file-info[b-fmdwud3fr3] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* 分区头部样式 */
.section-header[b-fmdwud3fr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 5px;
}

.section-title[b-fmdwud3fr3] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
}

.download-title[b-fmdwud3fr3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.recruitment-title[b-fmdwud3fr3] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.software-count[b-fmdwud3fr3] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: normal;
}

.section-controls[b-fmdwud3fr3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.columns-selector[b-fmdwud3fr3] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

.columns-dropdown[b-fmdwud3fr3] {
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.85rem;
}

.section-icon[b-fmdwud3fr3] {
    font-size: 1.6rem;
}

/* 加载和空状态 */
.loading[b-fmdwud3fr3], .empty-state[b-fmdwud3fr3] {
    text-align: center;
    padding: 50px 20px;
    color: #6c757d;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading[b-fmdwud3fr3] {
    flex-direction: row;
    justify-content: center;
}

.empty-icon[b-fmdwud3fr3] {
    font-size: 2.5rem;
    opacity: 0.7;
}

/* 软件网格布局 */
.software-grid[b-fmdwud3fr3] {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

/* 软件卡片样式 */
.software-card[b-fmdwud3fr3] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #e9ecef;
}

    .software-card:hover[b-fmdwud3fr3] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

/* 软件图片区域 - 移除点击功能 */
.software-image[b-fmdwud3fr3] {
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .software-image img[b-fmdwud3fr3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.software-card:hover .software-image img[b-fmdwud3fr3] {
    transform: scale(1.05);
}

.software-placeholder[b-fmdwud3fr3] {
    font-size: 2rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 软件内容区域 */
.software-content[b-fmdwud3fr3] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.software-header[b-fmdwud3fr3] {
    margin-bottom: 8px;
    text-align: center;
}

.software-name[b-fmdwud3fr3] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    word-break: break-word;
}

.software-meta[b-fmdwud3fr3] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #6c757d;
    flex-wrap: wrap;
    justify-content: center;
}

.file-size[b-fmdwud3fr3], .file-date[b-fmdwud3fr3] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 软件描述 */
.software-description-section[b-fmdwud3fr3] {
    margin-bottom: 12px;
    flex-grow: 1;
}

.software-description[b-fmdwud3fr3] {
    color: #555;
    line-height: 1.4;
    margin: 0;
    font-size: 0.9rem;
    word-break: break-word;
}

/* 管理员编辑区域 */
.admin-edit-section[b-fmdwud3fr3] {
    margin-bottom: 12px;
    flex-grow: 1;
}

.admin-description[b-fmdwud3fr3] {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    margin-bottom: 8px;
    resize: vertical;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

    .admin-description:focus[b-fmdwud3fr3] {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

.admin-actions[b-fmdwud3fr3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.btn-update[b-fmdwud3fr3], .btn-delete[b-fmdwud3fr3] {
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 500;
}

.btn-update[b-fmdwud3fr3] {
    background: #28a745;
    color: white;
}

    .btn-update:hover[b-fmdwud3fr3] {
        background: #218838;
        transform: translateY(-1px);
    }

.btn-delete[b-fmdwud3fr3] {
    background: #dc3545;
    color: white;
}

    .btn-delete:hover[b-fmdwud3fr3] {
        background: #c82333;
        transform: translateY(-1px);
    }

/*#region 下载单行 容器  */

/* 下载按钮容器 - 单行布局 */
.download-button-container[b-fmdwud3fr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

/* 下载按钮样式调整 */
.download-button[b-fmdwud3fr3] {
    flex: 1;
    min-width: 0;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

    .download-button:hover[b-fmdwud3fr3] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

/* 文件信息样式 */
.file-size-info[b-fmdwud3fr3] {
    white-space: nowrap;
    color: #6c757d;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.download-text[b-fmdwud3fr3] {
    flex: 1;
    text-align: center;
}


/* 响应式调整 */
@media (max-width: 576px) {
    .download-button-container[b-fmdwud3fr3] {
        flex-direction: column;
        gap: 8px;
    }

    .file-size-info[b-fmdwud3fr3] {
        align-self: flex-end;
    }
}

/*#endregion */

/* 招聘区域 */
.recruitment-section[b-fmdwud3fr3] {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 2px solid #e9ecef;
}

.iframe-container[b-fmdwud3fr3] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.recruitment-iframe[b-fmdwud3fr3] {
    width: 100%;
    height: 400px; /* 减少高度 */
    border: none;
    background: white;
}

.iframe-overlay[b-fmdwud3fr3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .iframe-overlay.loading[b-fmdwud3fr3] {
        opacity: 1;
        pointer-events: all;
    }

.iframe-loading[b-fmdwud3fr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6c757d;
}

/* 模态对话框 */
.modal-overlay[b-fmdwud3fr3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 15px;
}

.modal-content[b-fmdwud3fr3] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-fmdwud3fr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

    .modal-header h3[b-fmdwud3fr3] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.2rem;
    }

.modal-close[b-fmdwud3fr3] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .modal-close:hover[b-fmdwud3fr3] {
        background: #f8f9fa;
        color: #495057;
    }

.modal-body[b-fmdwud3fr3] {
    padding: 20px;
}

.modal-actions[b-fmdwud3fr3] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

.file-preview[b-fmdwud3fr3] {
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* 加载动画 */
.spinner[b-fmdwud3fr3] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-fmdwud3fr3 1s linear infinite;
}

@keyframes spin-b-fmdwud3fr3 {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .software-grid[b-fmdwud3fr3] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .software-grid[b-fmdwud3fr3] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .download-container[b-fmdwud3fr3] {
        padding: 12px;
    }

    .section-header[b-fmdwud3fr3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-controls[b-fmdwud3fr3] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .software-grid[b-fmdwud3fr3] {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .compact-form .form-row[b-fmdwud3fr3] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-actions[b-fmdwud3fr3] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-fmdwud3fr3] {
        margin: 10px;
        max-width: none;
    }

    .recruitment-iframe[b-fmdwud3fr3] {
        height: 350px;
    }

    .form-actions[b-fmdwud3fr3] {
        flex-direction: column;
    }

    .upload-btn.compact[b-fmdwud3fr3], .cancel-btn.compact[b-fmdwud3fr3] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .download-container[b-fmdwud3fr3] {
        padding: 10px;
    }

    .software-image[b-fmdwud3fr3] {
        height: 140px;
    }

    .software-content[b-fmdwud3fr3] {
        padding: 12px;
    }

    .download-button[b-fmdwud3fr3] {
        padding: 8px;
        font-size: 0.85rem;
    }

    .section-title[b-fmdwud3fr3] {
        font-size: 1.2rem;
    }

    .admin-panel[b-fmdwud3fr3] {
        padding: 12px;
    }

    .admin-title[b-fmdwud3fr3] {
        font-size: 1.1rem;
    }
}

/* 打印样式 */
@media print {
    .admin-panel[b-fmdwud3fr3],
    .admin-actions[b-fmdwud3fr3],
    .section-controls[b-fmdwud3fr3] {
        display: none !important;
    }

    .software-card[b-fmdwud3fr3] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .download-button[b-fmdwud3fr3] {
        background: #666 !important;
        color: white !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/Home.razor.rz.scp.css */
/* 
 * 图片索引页面样式 - 紧凑布局与主题支持
 * 主题配色通过PictureThemeService动态生成，此处为基础布局样式
 */

/* ===== 基础布局样式 ===== */
.compact-controls-container[b-dfns2srr2t] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.control-label[b-dfns2srr2t] {
    font-size: 0.9rem;
    font-weight: 500;
}

.control-group[b-dfns2srr2t] {
    display: flex;
    align-items: center;
}

/* ===== 紧凑分类卡片 ===== */
.compact-category-card[b-dfns2srr2t] {
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .compact-category-card:hover[b-dfns2srr2t] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

.category-header[b-dfns2srr2t] {
    border-bottom: 1px solid;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.category-content[b-dfns2srr2t] {
    padding: 0.25rem;
}

/* ===== 紧凑文件夹卡片 ===== */
.compact-folder-card[b-dfns2srr2t] {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .compact-folder-card:hover[b-dfns2srr2t] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #dee2e6;
    }

.folder-header[b-dfns2srr2t] {
    border-bottom: 1px solid #e9ecef;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.folder-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
}

.folder-description[b-dfns2srr2t] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
}

.folder-actions .btn[b-dfns2srr2t] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.folder-footer[b-dfns2srr2t] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    text-align: center;
}

/* ===== 紧凑轮播样式 ===== */
.compact-carousel-container[b-dfns2srr2t] {
    overflow: hidden;
    border-radius: 0.25rem;
    position: relative;
    /* 移除固定高度，由内容决定 */
    border: 1px solid #e9ecef;
}

.compact-carousel-track[b-dfns2srr2t] {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
    width: 100%;
}

.compact-carousel-slide[b-dfns2srr2t] {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 新增：图片容器，用于控制图片显示区域 */
.image-container[b-dfns2srr2t] {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.compact-carousel-image[b-dfns2srr2t] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 填充整个区域 */
    display: block;
}

/* 图片信息区域样式 - 修改为透明背景和灰色文字 */
.compact-image-info[b-dfns2srr2t] {
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important; /* 修改为白色 */
    /*color: #6c757d !important;*/
    padding: 0.3rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border: none !important;
    box-shadow: none !important;
    /* 移除所有可能的背景 */
    background-image: none !important;
}

/*.image-name {
    font-weight: 500;
    color: #6c757d !important;*/ /* 灰色文字 */
/*}*/

/* 同时需要修改图片名称的颜色 */
.image-name[b-dfns2srr2t] {
    font-weight: 500;
    color: #ffffff !important; /* 修改为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 图片名称也添加阴影 */
    text-align: left;
}
/*最后一个按钮靠右*/
.compact-image-info > :last-child[b-dfns2srr2t] {
    margin-left: auto;
}

.compact-carousel-btn[b-dfns2srr2t] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.9;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    background-color: rgba(128, 128, 128, 0.8) !important;
    color: white !important;
}

    .compact-carousel-btn:hover[b-dfns2srr2t] {
        opacity: 1;
        background-color: rgba(96, 96, 96, 0.9) !important;
    }

    .compact-carousel-btn.prev[b-dfns2srr2t] {
        left: 0.3rem;
    }

    .compact-carousel-btn.next[b-dfns2srr2t] {
        right: 0.3rem;
    }

.compact-carousel-indicators[b-dfns2srr2t] {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    z-index: 10;
}

.compact-carousel-indicator[b-dfns2srr2t] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

    .compact-carousel-indicator.active[b-dfns2srr2t] {
        transform: scale(1.2);
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

    .compact-carousel-indicator:hover[b-dfns2srr2t] {
        opacity: 0.8;
        background-color: rgba(255, 255, 255, 0.7) !important;
    }

/* ===== 管理员面板 ===== */
.admin-panel[b-dfns2srr2t] {
    border-left: 3px solid;
}

    .admin-panel h6[b-dfns2srr2t] {
        font-weight: 600;
        font-size: 1rem;
    }

/* ===== 无图片占位符 ===== */
.no-images-placeholder[b-dfns2srr2t] {
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #e9ecef;
    min-height: 120px; /* 最小高度 */
}

/* ===== 徽章样式 ===== */
.badge[b-dfns2srr2t] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ===== 按钮样式优化 ===== */
.btn[b-dfns2srr2t] {
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

    .btn:hover[b-dfns2srr2t] {
        transform: translateY(-1px);
    }

.btn-sm[b-dfns2srr2t] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-outline-secondary[b-dfns2srr2t] {
    color: #6c757d; /* 减小按钮的颜色 */
    border-color: #6c757d;
}

    .btn-outline-secondary:hover[b-dfns2srr2t] {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

/* ===== 模态框优化 ===== */
.modal-content[b-dfns2srr2t] {
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header[b-dfns2srr2t] {
    border-bottom: 1px solid;
}

.modal-footer[b-dfns2srr2t] {
    border-top: 1px solid;
}

.modal-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 1rem;
}

/* ===== 表单控件优化 ===== */
.form-control[b-dfns2srr2t], .form-select[b-dfns2srr2t] {
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

    .form-control:focus[b-dfns2srr2t], .form-select:focus[b-dfns2srr2t] {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        border-color: #007bff;
    }

.form-label[b-dfns2srr2t] {
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== 自定义5列布局 ===== */
.col-lg-2-4[b-dfns2srr2t] {
    flex: 0 0 auto;
    width: 20%;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .compact-controls-container[b-dfns2srr2t] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .control-group[b-dfns2srr2t] {
        width: 100%;
        justify-content: space-between;
    }

    .col-lg-2-4[b-dfns2srr2t] {
        width: 50%;
    }

    .folder-actions .btn[b-dfns2srr2t] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .col-lg-2-4[b-dfns2srr2t] {
        width: 100%;
    }

    .folder-actions[b-dfns2srr2t] {
        flex-direction: column;
        gap: 0.2rem;
    }

        .folder-actions .btn[b-dfns2srr2t] {
            font-size: 0.75rem;
        }
}

/* ===== 动画效果 ===== */
@keyframes fadeIn-b-dfns2srr2t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compact-folder-card[b-dfns2srr2t] {
    animation: fadeIn-b-dfns2srr2t 0.3s ease;
}

/* ===== 滚动条优化 ===== */
[b-dfns2srr2t]::-webkit-scrollbar {
    width: 6px;
}

[b-dfns2srr2t]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

[b-dfns2srr2t]::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 3px;
}

    [b-dfns2srr2t]::-webkit-scrollbar-thumb:hover {
        background: #495057;
    }

/* ===== 主题选择器 ===== */
.theme-selector-container[b-dfns2srr2t] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: inline-block;
    border: 1px solid #e9ecef;
}

/* ===== 链接按钮样式 ===== */
.btn-link[b-dfns2srr2t] {
    font-size: 0.9rem;
}

/* ===== 上传预览样式 ===== */
.upload-preview[b-dfns2srr2t] {
    border: 1px dashed #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

    .upload-preview ul[b-dfns2srr2t] {
        margin: 0;
        padding-left: 1rem;
    }

/*#region --动态公司介绍 iframe */
/* 公司介绍区域样式 */
.company-profile-section[b-dfns2srr2t] {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0; /* 修改：移除上下外边距，消除与周围元素的间隔 */
    padding: 0; /* 修改：移除内边距，消除内部间隔 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden;
    /*box-shadow: none;*/ /* 修改：移除阴影效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: transparent; /* 新增：设置背景透明 */
}

    .company-profile-section iframe[b-dfns2srr2t] {
        width: 100%;
        height: 200px; /* 可根据需要调整高度 */
        border: none; /* 确保无边框 */
        display: block;
        margin: 0; /* 移除iframe外边距 */
        padding: 0; /* 移除iframe内边距 */
        background: transparent; /* 设置iframe背景透明 */
    }

/* 加载遮罩层 */
.loading-overlay[b-dfns2srr2t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(240, 240, 240, 0.9); /* 使用浅灰色背景，符合注释要求 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

    .loading-overlay .spinner[b-dfns2srr2t] {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #007bff;
        border-radius: 50%;
        animation: spin-b-dfns2srr2t 1s linear infinite;
        margin-bottom: 1rem;
    }

    .loading-overlay span[b-dfns2srr2t] {
        color: #666;
        font-size: 0.9rem;
    }

@keyframes spin-b-dfns2srr2t {
    0% {
        transform: rotate(0deg);
    }
    /* 调试：动画起始状态 */
    100% {
        transform: rotate(360deg);
    }
    /* 调试：动画结束状态，确保完整循环 */
}

/*#endregion------------ */



/* _content/LEAFBlazorApp25/Components/Pages/LFAgent.razor.rz.scp.css */
/* ============================================================================
   LFAgent 组件专用样式 - 优化版本
   ============================================================================ */

/* 主容器和全局样式 */
.lfagent-container[b-zc2oqdqyii] {
    padding: 8px; /* 内边距：元素内容与边框之间的间距 */
    height: 100% !important; /* 高度：继承父容器高度 */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: auto; /* 溢出处理：隐藏超出容器范围的内容 hidden 、此时不能出现滚动条*/
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
    gap: 8px; /* 子元素间距：减少行间距 */
}

/* 通用标题样式 */
.section-title[b-zc2oqdqyii] {
    display: flex;
    align-items: center;
    gap: 12px; /* 减少间距 */
    margin-bottom: 12px; /* 减少底部间距 */
}

.title-indicator[b-zc2oqdqyii] {
    width: 6px; /* 减小宽度 */
    height: 24px; /* 减小高度 */
    border-radius: 3px; /* 调整圆角 */
    flex-shrink: 0;
}

.section-title h3[b-zc2oqdqyii] {
    color: #2d3748;
    margin: 0;
    font-weight: 700;
    font-size: 16px; /* 减小字体 */
    line-height: 1.2;
}

/* 不同区域的柱子颜色 */
.work-options-section .title-indicator[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.work-area-section .title-indicator[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.description-section .title-indicator[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

/* 工作选项区样式 */
.work-options-section[b-zc2oqdqyii] {
    border: 1px solid #e1e8ed;
    border-radius: 8px; /* 减小圆角 */
    padding: 12px; /* 减少内边距 */
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); /* 减小阴影 */
    margin: 4px; /* 减少外边距 */
    flex-shrink: 0;
}

.section-header[b-zc2oqdqyii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-controls[b-zc2oqdqyii] {
    display: flex;
    align-items: center;
    gap: 8px; /* 减少间距 */
    font-size: 13px; /* 减小字体 */
    color: #718096;
}

.column-select[b-zc2oqdqyii] {
    padding: 4px 8px; /* 减少内边距 */
    border: 1px solid #e2e8f0;
    border-radius: 4px; /* 减小圆角 */
    background: white;
    font-size: 13px; /* 减小字体 */
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .column-select:focus[b-zc2oqdqyii] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

/* 工作选项网格布局 */
.work-options-grid[b-zc2oqdqyii] {
    display: grid;
    gap: 8px; /* 减少间距 */
    transition: grid-template-columns 0.3s ease;
}

/* 工作选项卡片样式 */
.work-option-card[b-zc2oqdqyii] {
    border: 2px solid #e2e8f0;
    border-radius: 8px; /* 减小圆角 */
    padding: 12px; /* 减少内边距 */
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .work-option-card[b-zc2oqdqyii]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px; /* 减小高度 */
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .work-option-card.selected[b-zc2oqdqyii]::before {
        transform: scaleX(1);
    }

    .work-option-card:hover[b-zc2oqdqyii] {
        transform: translateY(-1px); /* 减小悬停移动距离 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 减小阴影 */
        border-color: #cbd5e0;
    }

    .work-option-card.selected[b-zc2oqdqyii] {
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); /* 减小阴影 */
    }

/* 选项头部区域 */
.work-option-header[b-zc2oqdqyii] {
    display: flex;
    align-items: center;
    gap: 10px; /* 减少间距 */
    margin-bottom: 8px; /* 减少底部间距 */
    cursor: pointer;
    padding: 4px; /* 减少内边距 */
    border-radius: 4px; /* 减小圆角 */
    transition: background-color 0.2s ease;
}

    .work-option-header:hover[b-zc2oqdqyii] {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* 单选指示器样式 */
.radio-indicator[b-zc2oqdqyii] {
    width: 18px; /* 减小尺寸 */
    height: 18px; /* 减小尺寸 */
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-circle[b-zc2oqdqyii] {
    width: 8px; /* 减小尺寸 */
    height: 8px; /* 减小尺寸 */
    border-radius: 50%;
    background: #667eea;
    transform: scale(0);
    transition: transform 0.3s ease;
}

    .radio-circle.active[b-zc2oqdqyii] {
        transform: scale(1);
    }

.work-option-card.selected .radio-indicator[b-zc2oqdqyii] {
    border-color: #667eea;
}

/* 工作标题样式 */
.work-title[b-zc2oqdqyii] {
    font-weight: 600;
    font-size: 14px; /* 减小字体 */
    line-height: 1.4;
    color: #2d3748;
    flex: 1;
}

/* 选项内容区域 */
.work-option-content[b-zc2oqdqyii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px; /* 减少顶部间距 */
}

/* 类型徽章样式 - 使用融合色 */
.work-type-badge[b-zc2oqdqyii] {
    padding: 4px 10px; /* 减少内边距 */
    border-radius: 12px; /* 调整圆角 */
    color: white;
    font-size: 12px; /* 减小字体 */
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 价格信息样式 */
.price-info[b-zc2oqdqyii] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px; /* 减少间距 */
}

.price[b-zc2oqdqyii] {
    font-size: 13px; /* 减小字体，非粗体 */
    font-weight: 400; /* 改为中等粗细 500 */
    color: #2d3748;
}

.unit[b-zc2oqdqyii] {
    font-size: 11px; /* 再小1号 */
    color: #718096;
}

/* 工作区样式 */
.work-area-section[b-zc2oqdqyii] {
    border: 3px solid #b9dfbb; /* 减小边框宽度 */
    border-radius: 8px; /* 减小圆角 */
    padding: 12px; /* 减少内边距 */
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* 减小阴影 */
    margin: 4px; /* 减少外边距 */
    flex-shrink: 0;
}

/* 工作控制网格布局 */
.work-controls-grid[b-zc2oqdqyii] {
    display: grid;
    grid-template-columns: 1fr auto auto auto; /* 状态信息 + 3个按钮 */
    gap: 50px; /* 减少间距 */
    align-items: center;
    margin-bottom: 8px; /* 减少底部间距 */
}

/* 测试控制网格布局 */
.test-controls-grid[b-zc2oqdqyii] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; /* 减少间距 */
    align-items: center;
}

/* 状态信息容器 */
.state-info-container[b-zc2oqdqyii] {
    grid-column: 1;
}

.state-info[b-zc2oqdqyii] {
    padding: 8px 12px; /* 减少内边距 */
    border-radius: 6px; /* 减小圆角 */
    font-size: 13px; /* 减小字体 */
    display: flex;
    align-items: center;
    gap: 8px; /* 减少间距 */
    min-height: 36px; /* 减小高度 */
}

.state-default[b-zc2oqdqyii] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #718096;
}

.state-info[b-zc2oqdqyii] {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #3182ce;
}

.state-warning[b-zc2oqdqyii] {
    background: #fffaf0;
    border: 1px solid #fed7d7;
    color: #dd6b20;
}

.state-processing[b-zc2oqdqyii] {
    background: #f0fff4;
    border: 1px solid #c6f6d5;
    color: #38a169;
}

.state-success[b-zc2oqdqyii] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}

/* 按钮基础样式优化 */
.btn[b-zc2oqdqyii] {
    padding: 6px 12px; /* 减少内边距 */
    border: none;
    border-radius: 6px; /* 减小圆角 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px; /* 减小字体 */
    min-height: 36px; /* 减小高度 */
    text-decoration: none;
    white-space: nowrap;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

    .btn:disabled[b-zc2oqdqyii] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        background: #a0aec0 !important; /* 禁用时使用灰色 */
    }

    .btn:hover:not(:disabled)[b-zc2oqdqyii] {
        transform: translateY(-1px); /* 减小悬停移动距离 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 减小阴影 */
        filter: brightness(1.1);
    }

/* 按钮颜色变体 - 使用工作选项区的深色设计 */
.btn-primary[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #217346 0%, #107C41 50%, #0A6B38 100%) !important; /* Excel绿色系 */
    border: 1px solid #0A6B38;
}

.btn-processing[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #2B579A 0%, #1B4D9A 50%, #0F3D8C 100%) !important; /* Word蓝色系 */
    border: 1px solid #0F3D8C;
}

.btn-testing[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #D83B01 0%, #CA5010 50%, #B3470D 100%) !important; /* Project橙色系 */
    border: 1px solid #B3470D;
}

.btn-complete[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #D24726 0%, #BC3F1D 50%, #A53615 100%) !important; /* PPT红色系 */
    border: 1px solid #A53615;
}

.btn-success[b-zc2oqdqyii] {
    background: linear-gradient(135deg, #F40F02 0%, #D5100A 50%, #B80E08 100%) !important; /* PDF深红色系 */
    border: 1px solid #B80E08;
}

/* 说明区样式 */
.description-section[b-zc2oqdqyii] {
    border: 1px solid #e1e8ed;
    border-radius: 8px; /* 减小圆角 */
    padding: 12px; /* 减少内边距 */
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* 减小阴影 */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px; /* 最小高度300px */
    margin: 4px; /* 减少外边距 */
    height: 0; /* 允许flex填充 */
}

.description-content[b-zc2oqdqyii] {
    display: flex;
    gap: 12px; /* 减少间距 */
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧文字区 */
.description-text-container[b-zc2oqdqyii] {
    flex: 0 0 30%; /* 占据50%宽度 */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.description-text-scroll[b-zc2oqdqyii] {
    overflow-y: auto;
    padding-right: 10px; /* 减少内边距 */
    flex: 1;
    max-height: 100%;
}

    .description-text-scroll h4[b-zc2oqdqyii] {
        color: #2d3748;
        margin: 0 0 8px 0; /* 减少底部间距 */
        font-weight: 700;
        font-size: 14px; /* 减小字体 */
    }

    .description-text-scroll p[b-zc2oqdqyii] {
        line-height: 1.6; /* 调整行高 */
        color: #4a5568;
        margin: 0 0 12px 0; /* 减少底部间距 */
        font-size: 13px; /* 减小字体 */
    }

/* 右侧图片区 */
.description-image-container[b-zc2oqdqyii] {
    flex: 0 0 70%; /* 占据50%宽度 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7fafc;
    border-radius: 6px; /* 减小圆角 */
    overflow: hidden;
    min-height: 200px; /* 减小最小高度 */
    max-height: 100%;
    border: 1px solid #e2e8f0;
}

.description-image[b-zc2oqdqyii] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 按比例缩放填充容器 */
    border-radius: 4px; /* 减小圆角 */
}

/* 查看大图按钮 */
.btn-view-large[b-zc2oqdqyii] {
    padding: 3px 6px 3px 3px; /* 减少内边距 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px; /* 减小圆角 */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px; /* 减小字体 */
    font-weight: 300;
}

    .btn-view-large:hover[b-zc2oqdqyii] {
        transform: translateY(-1px); /* 减小悬停移动距离 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 减小阴影 */
    }

/* 大图模态窗口样式 */
.modal-overlay[b-zc2oqdqyii] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-zc2oqdqyii] {
    background: white;
    border-radius: 8px; /* 减小圆角 */
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* 调整阴影 */
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
}

.modal-header[b-zc2oqdqyii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px; /* 减少内边距 */
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
}

    .modal-header h5[b-zc2oqdqyii] {
        margin: 0;
        color: #2d3748;
        font-size: 14px; /* 减小字体 */
    }

.modal-controls[b-zc2oqdqyii] {
    display: flex;
    gap: 6px; /* 减少间距 */
}

.modal-btn[b-zc2oqdqyii] {
    width: 28px; /* 减小尺寸 */
    height: 28px; /* 减小尺寸 */
    border: none;
    border-radius: 4px; /* 减小圆角 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    background: transparent;
    color: #4a5568;
    font-size: 12px; /* 减小字体 */
}

    .modal-btn:hover[b-zc2oqdqyii] {
        background: #e2e8f0;
    }

.modal-close:hover[b-zc2oqdqyii] {
    background: #e53e3e;
    color: white;
}

.modal-body[b-zc2oqdqyii] {
    flex: 1;
    padding: 12px; /* 减少内边距 */
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-image[b-zc2oqdqyii] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 图片拉伸填充区域 */
    border-radius: 4px; /* 减小圆角 */
    transition: all 0.3s ease;
}

    .large-image.maximized[b-zc2oqdqyii] {
        max-width: 100vw;
        max-height: 100vh;
    }

/* 响应式设计 */
@media (max-width: 767px) {
    .lfagent-container[b-zc2oqdqyii] {
        height: auto;
        min-height: 100vh;
        padding: 6px;
        gap: 6px;
    }

    .description-content[b-zc2oqdqyii] {
        flex-direction: column;
    }

    .description-image-container[b-zc2oqdqyii],
    .description-text-container[b-zc2oqdqyii] {
        flex: none;
    }

    .description-image-container[b-zc2oqdqyii] {
        min-height: 200px;
        max-height: 250px;
    }

    .section-header[b-zc2oqdqyii] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .work-options-grid[b-zc2oqdqyii] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .work-controls-grid[b-zc2oqdqyii] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .btn[b-zc2oqdqyii] {
        max-width: none;
        font-size: 12px;
        padding: 6px 10px;
    }

    .section-title[b-zc2oqdqyii] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .title-indicator[b-zc2oqdqyii] {
        width: 100%;
        height: 4px;
    }
}

@media (max-width: 480px) {
    .work-options-grid[b-zc2oqdqyii] {
        grid-template-columns: 1fr !important;
    }

    .work-controls-grid[b-zc2oqdqyii] {
        grid-template-columns: 1fr;
    }

    .work-options-section[b-zc2oqdqyii],
    .work-area-section[b-zc2oqdqyii],
    .description-section[b-zc2oqdqyii] {
        padding: 10px;
        margin: 2px;
    }

    .btn[b-zc2oqdqyii] {
        font-size: 12px;
        padding: 7px 10px;
        max-width: none;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/LFAgent1Old.razor.rz.scp.css */
/* ============================================================================
   主容器和全局样式
   ============================================================================ */
.lfagent-container[b-ql93z6wzhg] {
    padding: 8px;
    max-width: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - 20px);
    background: #ffffff; /* 页面背景白色 */
    min-height: 600px;
    overflow: hidden;
}

/* ============================================================================
   通用标题样式 - 统一粗竖柱子和字体放大
   ============================================================================ */
.section-title[b-ql93z6wzhg] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.title-indicator[b-ql93z6wzhg] {
    width: 8px; /* 加粗柱子 */
    height: 28px; /* 加高柱子 */
    border-radius: 4px;
    flex-shrink: 0;
}

.section-title h3[b-ql93z6wzhg] {
    color: #2d3748;
    margin: 0;
    font-weight: 700; /* 字体加粗 */
    font-size: 18px; /* 字体放大 */
    line-height: 1.2;
}

/* 不同区域的柱子颜色 */
.work-options-section .title-indicator[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #667eea, #764ba2); /* 紫色 */
}

.work-area-section .title-indicator[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #48bb78, #38a169); /* 绿色 */
}

.description-section .title-indicator[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #ed8936, #dd6b20); /* 橙色 */
}

/* ============================================================================
   工作选项区样式
   ============================================================================ */
.work-options-section[b-ql93z6wzhg] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 16px;
    background: #f8f9fa; /* 浅灰色背景 */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    margin: 4px;
    flex-shrink: 0;
}

/* 分区头部样式 */
.section-header[b-ql93z6wzhg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 列数控制样式 */
.column-controls[b-ql93z6wzhg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px; /* 字体放大 */
    color: #718096;
}

.column-select[b-ql93z6wzhg] {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 14px; /* 字体放大 */
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .column-select:focus[b-ql93z6wzhg] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

/* 工作选项网格布局 */
.work-options-grid[b-ql93z6wzhg] {
    display: grid;
    gap: 12px;
    transition: grid-template-columns 0.3s ease;
}

/* 工作选项卡片样式 */
.work-option-card[b-ql93z6wzhg] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .work-option-card[b-ql93z6wzhg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .work-option-card.selected[b-ql93z6wzhg]::before {
        transform: scaleX(1);
    }

    .work-option-card:hover[b-ql93z6wzhg] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        border-color: #cbd5e0;
    }

    .work-option-card.selected[b-ql93z6wzhg] {
        border-color: #667eea;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
    }

/* 选项头部区域 */
.work-option-header[b-ql93z6wzhg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .work-option-header:hover[b-ql93z6wzhg] {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* 单选指示器样式 */
.radio-indicator[b-ql93z6wzhg] {
    width: 20px; /* 放大 */
    height: 20px; /* 放大 */
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-circle[b-ql93z6wzhg] {
    width: 10px; /* 放大 */
    height: 10px; /* 放大 */
    border-radius: 50%;
    background: #667eea;
    transform: scale(0);
    transition: transform 0.3s ease;
}

    .radio-circle.active[b-ql93z6wzhg] {
        transform: scale(1);
    }

.work-option-card.selected .radio-indicator[b-ql93z6wzhg] {
    border-color: #667eea;
}

/* 工作标题样式 */
.work-title[b-ql93z6wzhg] {
    font-weight: 600;
    font-size: 15px; /* 字体放大 */
    line-height: 1.4;
    color: #2d3748;
    flex: 1;
}

/* 选项内容区域 */
.work-option-content[b-ql93z6wzhg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* 类型徽章样式 */
.work-type-badge[b-ql93z6wzhg] {
    padding: 5px 14px;
    border-radius: 14px;
    color: white;
    font-size: 13px; /* 字体放大 */
    font-weight: 600; /* 字体加粗 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 价格信息样式 */
.price-info[b-ql93z6wzhg] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.price[b-ql93z6wzhg] {
    font-size: 15px; /* 字体放大 */
    font-weight: 700; /* 字体加粗 */
    color: #2d3748;
}

.unit[b-ql93z6wzhg] {
    font-size: 13px; /* 字体放大 */
    color: #718096;
}

/* ============================================================================
   工作区样式
   ============================================================================ */
.work-area-section[b-ql93z6wzhg] {
    border: 2px solid #b9dfbb;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa; /* 浅灰色背景 */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    margin: 8px;
    flex-shrink: 0;
}

/* 工作控制网格布局 */
.work-controls-grid[b-ql93z6wzhg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: start;
}

/* 按钮基础样式优化 */
.btn[b-ql93z6wzhg] {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px; /* 字体放大 */
    min-height: 38px;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    /* 提高文字对比度 */
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

    .btn:disabled[b-ql93z6wzhg] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn:hover:not(:disabled)[b-ql93z6wzhg] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        filter: brightness(1.1);
    }

/* 按钮颜色变体 */
.btn-primary[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #5a67d8 0%, #4c51bf 100%) !important;
    border: 1px solid #4c51bf;
}

.btn-warning[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    border: 1px solid #dd6b20;
}

.btn-processing[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    border: 1px solid #3182ce;
}

.btn-testing[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
    border: 1px solid #2f855a;
}

.btn-success[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
    border: 1px solid #c53030;
}

/* 文件信息样式 */
.file-info[b-ql93z6wzhg] {
    padding: 10px 14px;
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px; /* 字体放大 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    grid-column: 1 / -1;
    max-width: 320px;
    margin: 0 auto;
}

.file-name[b-ql93z6wzhg] {
    font-weight: 600; /* 字体加粗 */
    color: #2d3748;
}

.file-size[b-ql93z6wzhg] {
    color: #718096;
    font-style: italic;
}

/* 状态消息样式 */
.status-message[b-ql93z6wzhg] {
    margin-top: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    color: #2d3748;
    font-size: 14px; /* 字体放大 */
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
}

/* ============================================================================
   说明区样式
   ============================================================================ */
.description-section[b-ql93z6wzhg] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa; /* 浅灰色背景 */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 4px;
    height: 0;
}

/* 说明内容布局 */
.description-content[b-ql93z6wzhg] {
    display: flex;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 图片区域 */
.description-image[b-ql93z6wzhg] {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7fafc;
    border-radius: 10px;
    overflow: hidden;
    min-height: 340px;
    max-height: 100%;
    border: 1px solid #e2e8f0;
}

    .description-image img[b-ql93z6wzhg] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

/* 文本区域 */
.description-text[b-ql93z6wzhg] {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.description-scroll[b-ql93z6wzhg] {
    overflow-y: auto;
    padding-right: 14px;
    flex: 1;
    max-height: 100%;
}

    .description-scroll h4[b-ql93z6wzhg] {
        color: #2d3748;
        margin: 0 0 10px 0;
        font-weight: 700; /* 字体加粗 */
        font-size: 16px; /* 字体放大 */
    }

    .description-scroll p[b-ql93z6wzhg] {
        line-height: 1.7;
        color: #4a5568;
        margin: 0 0 18px 0;
        font-size: 15px; /* 字体放大 */
    }

/* 工作统计信息 */
.work-stats[b-ql93z6wzhg] {
    margin-top: 18px;
    padding: 14px;
    background: linear-gradient(135deg, #e8f6f3 0%, #e2e8f0 100%);
    border-radius: 10px;
    border-left: 4px solid #48bb78;
}

.stat-item[b-ql93z6wzhg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 15px; /* 字体放大 */
    color: #2d3748;
}

    .stat-item:last-child[b-ql93z6wzhg] {
        margin-bottom: 0;
    }

    .stat-item i[b-ql93z6wzhg] {
        color: #48bb78;
        width: 16px;
        text-align: center;
        font-size: 16px; /* 图标放大 */
    }

/* ============================================================================
   工作类型徽章颜色序列
   ============================================================================ */
.work-option-card:nth-child(1) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.work-option-card:nth-child(2) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.work-option-card:nth-child(3) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.work-option-card:nth-child(4) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.work-option-card:nth-child(5) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.work-option-card:nth-child(6) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.work-option-card:nth-child(7) .work-type-badge[b-ql93z6wzhg] {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

/* ============================================================================
   响应式设计
   ============================================================================ */

/* 平板设备 (768px 及以上) */
@media (min-width: 768px) {
    .lfagent-container[b-ql93z6wzhg] {
        padding: 12px;
        gap: 16px;
    }

    .work-controls-grid[b-ql93z6wzhg] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .work-options-section[b-ql93z6wzhg],
    .work-area-section[b-ql93z6wzhg],
    .description-section[b-ql93z6wzhg] {
        margin: 8px 16px;
    }

    .btn[b-ql93z6wzhg] {
        padding: 9px 16px;
        font-size: 14px;
        max-width: 190px;
    }
}

/* 桌面设备 (1024px 及以上) */
@media (min-width: 1024px) {
    .work-controls-grid[b-ql93z6wzhg] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
    }

    .description-content[b-ql93z6wzhg] {
        gap: 22px;
    }

    .description-image[b-ql93z6wzhg] {
        flex: 0 0 65%;
        min-height: 380px;
    }

    .description-text[b-ql93z6wzhg] {
        flex: 0 0 35%;
    }

    .btn[b-ql93z6wzhg] {
        padding: 10px 18px;
        font-size: 15px;
        max-width: 200px;
    }
}

/* 大桌面设备 (1200px 及以上) */
@media (min-width: 1200px) {
    .work-controls-grid[b-ql93z6wzhg] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .work-options-section[b-ql93z6wzhg],
    .work-area-section[b-ql93z6wzhg],
    .description-section[b-ql93z6wzhg] {
        margin: 8px 20px;
    }
}

/* 小屏幕设备 (768px 以下) */
@media (max-width: 767px) {
    .lfagent-container[b-ql93z6wzhg] {
        height: auto;
        min-height: 100vh;
        padding: 8px;
        gap: 10px;
    }

    .description-content[b-ql93z6wzhg] {
        flex-direction: column;
    }

    .description-image[b-ql93z6wzhg],
    .description-text[b-ql93z6wzhg] {
        flex: none;
    }

    .description-image[b-ql93z6wzhg] {
        min-height: 260px;
        max-height: 320px;
    }

    .section-header[b-ql93z6wzhg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .work-options-grid[b-ql93z6wzhg] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .work-controls-grid[b-ql93z6wzhg] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .btn[b-ql93z6wzhg] {
        max-width: none;
        font-size: 13px;
        padding: 8px 10px;
    }

    .file-info[b-ql93z6wzhg] {
        grid-column: 1 / -1;
        max-width: none;
    }

    .section-title[b-ql93z6wzhg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .title-indicator[b-ql93z6wzhg] {
        width: 100%;
        height: 6px;
    }
}

/* 超小屏幕设备 (480px 以下) */
@media (max-width: 480px) {
    .work-options-grid[b-ql93z6wzhg] {
        grid-template-columns: 1fr !important;
    }

    .work-controls-grid[b-ql93z6wzhg] {
        grid-template-columns: 1fr;
    }

    .work-options-section[b-ql93z6wzhg],
    .work-area-section[b-ql93z6wzhg],
    .description-section[b-ql93z6wzhg] {
        padding: 14px;
        margin: 4px;
    }

    .btn[b-ql93z6wzhg] {
        font-size: 13px;
        padding: 9px 12px;
        max-width: none;
    }
}

/* ============================================================================
   辅助类和工具样式
   ============================================================================ */

/* 焦点状态管理 */
.btn:focus[b-ql93z6wzhg],
.column-select:focus[b-ql93z6wzhg] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* 平滑滚动 */
.description-scroll[b-ql93z6wzhg] {
    scroll-behavior: smooth;
}

/* 选择文本颜色优化 */
[b-ql93z6wzhg]::selection {
    background-color: rgba(102, 126, 234, 0.25);
    color: #2d3748;
}

/* 滚动条样式优化 */
.description-scroll[b-ql93z6wzhg]::-webkit-scrollbar {
    width: 8px;
}

.description-scroll[b-ql93z6wzhg]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.description-scroll[b-ql93z6wzhg]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .description-scroll[b-ql93z6wzhg]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Pages/LFAgentB1.razor.rz.scp.css */
/* ============================================================================
   LFAgent 组件专用样式 - 从V3版移植
   ============================================================================ */

/* 主容器和全局样式 */
.lfagent-container[b-fmn3y3s39r] {
    padding: 8px;
    max-width: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - 20px);
    background: #ffffff;
    min-height: 600px;
    overflow: hidden;
}

/* 通用标题样式 */
.section-title[b-fmn3y3s39r] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.title-indicator[b-fmn3y3s39r] {
    width: 8px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
}

.section-title h3[b-fmn3y3s39r] {
    color: #2d3748;
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}

/* 不同区域的柱子颜色 */
.work-options-section .title-indicator[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.work-area-section .title-indicator[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.description-section .title-indicator[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

/* 工作选项区样式 */
.work-options-section[b-fmn3y3s39r] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 16px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    margin: 4px;
    flex-shrink: 0;
}

.section-header[b-fmn3y3s39r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-controls[b-fmn3y3s39r] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #718096;
}

.column-select[b-fmn3y3s39r] {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .column-select:focus[b-fmn3y3s39r] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

/* 工作选项网格布局 */
.work-options-grid[b-fmn3y3s39r] {
    display: grid;
    gap: 12px;
    transition: grid-template-columns 0.3s ease;
}

/* 工作选项卡片样式 */
.work-option-card[b-fmn3y3s39r] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .work-option-card[b-fmn3y3s39r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .work-option-card.selected[b-fmn3y3s39r]::before {
        transform: scaleX(1);
    }

    .work-option-card:hover[b-fmn3y3s39r] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        border-color: #cbd5e0;
    }

    .work-option-card.selected[b-fmn3y3s39r] {
        border-color: #667eea;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
    }

/* 选项头部区域 */
.work-option-header[b-fmn3y3s39r] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .work-option-header:hover[b-fmn3y3s39r] {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* 单选指示器样式 */
.radio-indicator[b-fmn3y3s39r] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-circle[b-fmn3y3s39r] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #667eea;
    transform: scale(0);
    transition: transform 0.3s ease;
}

    .radio-circle.active[b-fmn3y3s39r] {
        transform: scale(1);
    }

.work-option-card.selected .radio-indicator[b-fmn3y3s39r] {
    border-color: #667eea;
}

/* 工作标题样式 */
.work-title[b-fmn3y3s39r] {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #2d3748;
    flex: 1;
}

/* 选项内容区域 */
.work-option-content[b-fmn3y3s39r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* 类型徽章样式 */
.work-type-badge[b-fmn3y3s39r] {
    padding: 5px 14px;
    border-radius: 14px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 价格信息样式 */
.price-info[b-fmn3y3s39r] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.price[b-fmn3y3s39r] {
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
}

.unit[b-fmn3y3s39r] {
    font-size: 13px;
    color: #718096;
}

/* 工作区样式 */
.work-area-section[b-fmn3y3s39r] {
    border: 2px solid #b9dfbb;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    margin: 8px;
    flex-shrink: 0;
}

/* 工作控制网格布局 */
.work-controls-grid[b-fmn3y3s39r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: start;
}

/* 按钮基础样式优化 */
.btn[b-fmn3y3s39r] {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    min-height: 38px;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

    .btn:disabled[b-fmn3y3s39r] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn:hover:not(:disabled)[b-fmn3y3s39r] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        filter: brightness(1.1);
    }

/* 按钮颜色变体 */
.btn-primary[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #5a67d8 0%, #4c51bf 100%) !important;
    border: 1px solid #4c51bf;
}

.btn-warning[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    border: 1px solid #dd6b20;
}

.btn-processing[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    border: 1px solid #3182ce;
}

.btn-testing[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
    border: 1px solid #2f855a;
}

.btn-success[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
    border: 1px solid #c53030;
}

/* 文件信息样式 */
.file-info[b-fmn3y3s39r] {
    padding: 10px 14px;
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    grid-column: 1 / -1;
    max-width: 320px;
    margin: 0 auto;
}

.file-name[b-fmn3y3s39r] {
    font-weight: 600;
    color: #2d3748;
}

.file-size[b-fmn3y3s39r] {
    color: #718096;
    font-style: italic;
}

/* 状态消息样式 */
.status-message[b-fmn3y3s39r] {
    margin-top: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    color: #2d3748;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
}

/* 说明区样式 */
.description-section[b-fmn3y3s39r] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 4px;
    height: 0;
}

.description-content[b-fmn3y3s39r] {
    display: flex;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.description-image-container[b-fmn3y3s39r] {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7fafc;
    border-radius: 10px;
    overflow: hidden;
    min-height: 340px;
    max-height: 100%;
    border: 1px solid #e2e8f0;
}

.description-image[b-fmn3y3s39r] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.description-text-container[b-fmn3y3s39r] {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.description-text-scroll[b-fmn3y3s39r] {
    overflow-y: auto;
    padding-right: 14px;
    flex: 1;
    max-height: 100%;
}

    .description-text-scroll h4[b-fmn3y3s39r] {
        color: #2d3748;
        margin: 0 0 10px 0;
        font-weight: 700;
        font-size: 16px;
    }

    .description-text-scroll p[b-fmn3y3s39r] {
        line-height: 1.7;
        color: #4a5568;
        margin: 0 0 18px 0;
        font-size: 15px;
    }

/* 工作统计信息 */
.work-stats[b-fmn3y3s39r] {
    margin-top: 18px;
    padding: 14px;
    background: linear-gradient(135deg, #e8f6f3 0%, #e2e8f0 100%);
    border-radius: 10px;
    border-left: 4px solid #48bb78;
}

.stat-item[b-fmn3y3s39r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #2d3748;
}

    .stat-item:last-child[b-fmn3y3s39r] {
        margin-bottom: 0;
    }

    .stat-item i[b-fmn3y3s39r] {
        color: #48bb78;
        width: 16px;
        text-align: center;
        font-size: 16px;
    }

/* 查看大图按钮 */
.btn-view-large[b-fmn3y3s39r] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

    .btn-view-large:hover[b-fmn3y3s39r] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* 大图模态窗口样式 */
.modal-overlay[b-fmn3y3s39r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-fmn3y3s39r] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
}

.modal-header[b-fmn3y3s39r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
}

    .modal-header h5[b-fmn3y3s39r] {
        margin: 0;
        color: #2d3748;
    }

.modal-controls[b-fmn3y3s39r] {
    display: flex;
    gap: 8px;
}

.modal-btn[b-fmn3y3s39r] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    background: transparent;
    color: #4a5568;
}

    .modal-btn:hover[b-fmn3y3s39r] {
        background: #e2e8f0;
    }

.modal-close:hover[b-fmn3y3s39r] {
    background: #e53e3e;
    color: white;
}

.modal-body[b-fmn3y3s39r] {
    flex: 1;
    padding: 16px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-image[b-fmn3y3s39r] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .large-image.maximized[b-fmn3y3s39r] {
        max-width: 100vw;
        max-height: 100vh;
    }

/* 工作类型徽章颜色序列 */
.work-option-card:nth-child(1) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.work-option-card:nth-child(2) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.work-option-card:nth-child(3) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.work-option-card:nth-child(4) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.work-option-card:nth-child(5) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.work-option-card:nth-child(6) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.work-option-card:nth-child(7) .work-type-badge[b-fmn3y3s39r] {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

/* 响应式设计 */
@media (max-width: 767px) {
    .lfagent-container[b-fmn3y3s39r] {
        height: auto;
        min-height: 100vh;
        padding: 8px;
        gap: 10px;
    }

    .description-content[b-fmn3y3s39r] {
        flex-direction: column;
    }

    .description-image-container[b-fmn3y3s39r],
    .description-text-container[b-fmn3y3s39r] {
        flex: none;
    }

    .description-image-container[b-fmn3y3s39r] {
        min-height: 260px;
        max-height: 320px;
    }

    .section-header[b-fmn3y3s39r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .work-options-grid[b-fmn3y3s39r] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .work-controls-grid[b-fmn3y3s39r] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .btn[b-fmn3y3s39r] {
        max-width: none;
        font-size: 13px;
        padding: 8px 10px;
    }

    .file-info[b-fmn3y3s39r] {
        grid-column: 1 / -1;
        max-width: none;
    }

    .section-title[b-fmn3y3s39r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .title-indicator[b-fmn3y3s39r] {
        width: 100%;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .work-options-grid[b-fmn3y3s39r] {
        grid-template-columns: 1fr !important;
    }

    .work-controls-grid[b-fmn3y3s39r] {
        grid-template-columns: 1fr;
    }

    .work-options-section[b-fmn3y3s39r],
    .work-area-section[b-fmn3y3s39r],
    .description-section[b-fmn3y3s39r] {
        padding: 14px;
        margin: 4px;
    }

    .btn[b-fmn3y3s39r] {
        font-size: 13px;
        padding: 9px 12px;
        max-width: none;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/LFAgentBZ.razor.rz.scp.css */
/* ============================================================================
   LFAgent 组件专用样式 - 从V3版移植
   ============================================================================ */

/* 主容器和全局样式 */
.lfagent-container[b-g4x7rxsyfb] {
    padding: 4px; /* 内边距：元素内容与边框之间的间距，4px表示上下左右相同 */
    height: 100% !important; /* 高度：继承父容器高度（原100vh是屏幕高度，会超出父容器） */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: hidden; /* 溢出处理：隐藏超出容器范围的内容 */
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
    gap: 12px;
}

/* 通用标题样式 */
.section-title[b-g4x7rxsyfb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.title-indicator[b-g4x7rxsyfb] {
    width: 8px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
}

.section-title h3[b-g4x7rxsyfb] {
    color: #2d3748;
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}

/* 不同区域的柱子颜色 */
.work-options-section .title-indicator[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.work-area-section .title-indicator[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.description-section .title-indicator[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

/* 工作选项区样式 */
.work-options-section[b-g4x7rxsyfb] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 16px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    margin: 4px;
    flex-shrink: 0;
}

.section-header[b-g4x7rxsyfb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-controls[b-g4x7rxsyfb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #718096;
}

.column-select[b-g4x7rxsyfb] {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .column-select:focus[b-g4x7rxsyfb] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

/* 工作选项网格布局 */
.work-options-grid[b-g4x7rxsyfb] {
    display: grid;
    gap: 12px;
    transition: grid-template-columns 0.3s ease;
}

/* 工作选项卡片样式 */
.work-option-card[b-g4x7rxsyfb] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .work-option-card[b-g4x7rxsyfb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .work-option-card.selected[b-g4x7rxsyfb]::before {
        transform: scaleX(1);
    }

    .work-option-card:hover[b-g4x7rxsyfb] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        border-color: #cbd5e0;
    }

    .work-option-card.selected[b-g4x7rxsyfb] {
        border-color: #667eea;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
    }

/* 选项头部区域 */
.work-option-header[b-g4x7rxsyfb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .work-option-header:hover[b-g4x7rxsyfb] {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* 单选指示器样式 */
.radio-indicator[b-g4x7rxsyfb] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-circle[b-g4x7rxsyfb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #667eea;
    transform: scale(0);
    transition: transform 0.3s ease;
}

    .radio-circle.active[b-g4x7rxsyfb] {
        transform: scale(1);
    }

.work-option-card.selected .radio-indicator[b-g4x7rxsyfb] {
    border-color: #667eea;
}

/* 工作标题样式 */
.work-title[b-g4x7rxsyfb] {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #2d3748;
    flex: 1;
}

/* 选项内容区域 */
.work-option-content[b-g4x7rxsyfb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* 类型徽章样式 */
.work-type-badge[b-g4x7rxsyfb] {
    padding: 5px 14px;
    border-radius: 14px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 价格信息样式 */
.price-info[b-g4x7rxsyfb] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.price[b-g4x7rxsyfb] {
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
}

.unit[b-g4x7rxsyfb] {
    font-size: 13px;
    color: #718096;
}

/* 工作区样式 */
.work-area-section[b-g4x7rxsyfb] {
    border: 2px solid #b9dfbb;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    margin: 8px;
    flex-shrink: 0;
}

/* 工作控制网格布局 */
.work-controls-grid[b-g4x7rxsyfb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: start;
}

/* 按钮基础样式优化 */
.btn[b-g4x7rxsyfb] {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    min-height: 38px;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

    .btn:disabled[b-g4x7rxsyfb] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn:hover:not(:disabled)[b-g4x7rxsyfb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        filter: brightness(1.1);
    }

/* 按钮颜色变体 */
.btn-primary[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #5a67d8 0%, #4c51bf 100%) !important;
    border: 1px solid #4c51bf;
}

.btn-warning[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    border: 1px solid #dd6b20;
}

.btn-processing[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    border: 1px solid #3182ce;
}

.btn-testing[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
    border: 1px solid #2f855a;
}

.btn-success[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
    border: 1px solid #c53030;
}

/* 文件信息样式 */
.file-info[b-g4x7rxsyfb] {
    padding: 10px 14px;
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    grid-column: 1 / -1;
    max-width: 320px;
    margin: 0 auto;
}

.file-name[b-g4x7rxsyfb] {
    font-weight: 600;
    color: #2d3748;
}

.file-size[b-g4x7rxsyfb] {
    color: #718096;
    font-style: italic;
}

/* 状态消息样式 */
.status-message[b-g4x7rxsyfb] {
    margin-top: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    color: #2d3748;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
}

/* 说明区样式 */
.description-section[b-g4x7rxsyfb] {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 18px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 4px;
    height: 0;
}

.description-content[b-g4x7rxsyfb] {
    display: flex;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.description-image-container[b-g4x7rxsyfb] {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7fafc;
    border-radius: 10px;
    overflow: hidden;
    min-height: 340px;
    max-height: 100%;
    border: 1px solid #e2e8f0;
}

.description-image[b-g4x7rxsyfb] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.description-text-container[b-g4x7rxsyfb] {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.description-text-scroll[b-g4x7rxsyfb] {
    overflow-y: auto;
    padding-right: 14px;
    flex: 1;
    max-height: 100%;
}

    .description-text-scroll h4[b-g4x7rxsyfb] {
        color: #2d3748;
        margin: 0 0 10px 0;
        font-weight: 700;
        font-size: 16px;
    }

    .description-text-scroll p[b-g4x7rxsyfb] {
        line-height: 1.7;
        color: #4a5568;
        margin: 0 0 18px 0;
        font-size: 15px;
    }

/* 工作统计信息 */
.work-stats[b-g4x7rxsyfb] {
    margin-top: 18px;
    padding: 14px;
    background: linear-gradient(135deg, #e8f6f3 0%, #e2e8f0 100%);
    border-radius: 10px;
    border-left: 4px solid #48bb78;
}

.stat-item[b-g4x7rxsyfb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #2d3748;
}

    .stat-item:last-child[b-g4x7rxsyfb] {
        margin-bottom: 0;
    }

    .stat-item i[b-g4x7rxsyfb] {
        color: #48bb78;
        width: 16px;
        text-align: center;
        font-size: 16px;
    }

/* 查看大图按钮 */
.btn-view-large[b-g4x7rxsyfb] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

    .btn-view-large:hover[b-g4x7rxsyfb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* 大图模态窗口样式 */
.modal-overlay[b-g4x7rxsyfb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-g4x7rxsyfb] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
}

.modal-header[b-g4x7rxsyfb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
}

    .modal-header h5[b-g4x7rxsyfb] {
        margin: 0;
        color: #2d3748;
    }

.modal-controls[b-g4x7rxsyfb] {
    display: flex;
    gap: 8px;
}

.modal-btn[b-g4x7rxsyfb] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    background: transparent;
    color: #4a5568;
}

    .modal-btn:hover[b-g4x7rxsyfb] {
        background: #e2e8f0;
    }

.modal-close:hover[b-g4x7rxsyfb] {
    background: #e53e3e;
    color: white;
}

.modal-body[b-g4x7rxsyfb] {
    flex: 1;
    padding: 16px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-image[b-g4x7rxsyfb] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .large-image.maximized[b-g4x7rxsyfb] {
        max-width: 100vw;
        max-height: 100vh;
    }

/* 工作类型徽章颜色序列 */
.work-option-card:nth-child(1) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.work-option-card:nth-child(2) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.work-option-card:nth-child(3) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.work-option-card:nth-child(4) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.work-option-card:nth-child(5) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.work-option-card:nth-child(6) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.work-option-card:nth-child(7) .work-type-badge[b-g4x7rxsyfb] {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

/* 响应式设计 */
@media (max-width: 767px) {
    .lfagent-container[b-g4x7rxsyfb] {
        height: auto;
        min-height: 100vh;
        padding: 8px;
        gap: 10px;
    }

    .description-content[b-g4x7rxsyfb] {
        flex-direction: column;
    }

    .description-image-container[b-g4x7rxsyfb],
    .description-text-container[b-g4x7rxsyfb] {
        flex: none;
    }

    .description-image-container[b-g4x7rxsyfb] {
        min-height: 260px;
        max-height: 320px;
    }

    .section-header[b-g4x7rxsyfb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .work-options-grid[b-g4x7rxsyfb] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .work-controls-grid[b-g4x7rxsyfb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .btn[b-g4x7rxsyfb] {
        max-width: none;
        font-size: 13px;
        padding: 8px 10px;
    }

    .file-info[b-g4x7rxsyfb] {
        grid-column: 1 / -1;
        max-width: none;
    }

    .section-title[b-g4x7rxsyfb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .title-indicator[b-g4x7rxsyfb] {
        width: 100%;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .work-options-grid[b-g4x7rxsyfb] {
        grid-template-columns: 1fr !important;
    }

    .work-controls-grid[b-g4x7rxsyfb] {
        grid-template-columns: 1fr;
    }

    .work-options-section[b-g4x7rxsyfb],
    .work-area-section[b-g4x7rxsyfb],
    .description-section[b-g4x7rxsyfb] {
        padding: 14px;
        margin: 4px;
    }

    .btn[b-g4x7rxsyfb] {
        font-size: 13px;
        padding: 9px 12px;
        max-width: none;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/LFAgentManage.razor.rz.scp.css */
/* ============================================================================
   Main container styles - Full parent container
   ============================================================================ */
.lfagent-manage-container[b-l842evpn09] {
    padding: 4px; /* 内边距：元素内容与边框之间的间距，4px表示上下左右相同 */
    height: 100% !important; /* 高度：继承父容器高度（原100vh是屏幕高度，会超出父容器） */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: hidden; /* 溢出处理：隐藏超出容器范围的内容 */
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
}
/* ============================================================================
   Edit controls section - Compact layout
   ============================================================================ */
/* 调整子元素间距 */
.edit-controls-section[b-l842evpn09] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 8px 8px 8px 8px; /*上右下左*/
    background: #f8f9fa;
    margin: 4px 4px 4px 4px; /* 调整外边距 */
    flex-shrink: 0;    /*表示不压缩，高度由内容决定*/
}

.controls-header[b-l842evpn09] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .controls-header h3[b-l842evpn09] {
        color: #2d3748;
        margin: 0;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
    }

.control-buttons[b-l842evpn09] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   Data grid section - Compact layout
   ============================================================================ */
.data-grid-section[b-l842evpn09] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    margin: 0 4px 4px 4px; /* 调整外边距 */
    flex: 1; /* 关键：占据剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* ============================================================================
   Table container - Horizontal scrolling
   ============================================================================ */
.table-container[b-l842evpn09] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
}

.data-table[b-l842evpn09] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1400px;
}

    /* ============================================================================
   Table header styles - Compact design
   ============================================================================ */
    .data-table thead[b-l842evpn09] {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table th[b-l842evpn09] {
        color: white;
        font-weight: 600;
        border: none;
        padding: 6px 4px;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

/* ============================================================================
   Column width definitions - Optimized layout
   ============================================================================ */
.col-id[b-l842evpn09] {
    width: 40px;
    min-width: 40px;
}

.col-code[b-l842evpn09] {
    width: 100px;
    min-width: 100px;
}

.col-name[b-l842evpn09] {
    width: 120px;
    min-width: 120px;
}

.col-type[b-l842evpn09] {
    width: 70px;
    min-width: 70px;
}

.col-unit[b-l842evpn09] {
    width: 60px;
    min-width: 60px;
}

.col-price[b-l842evpn09] {
    width: 70px;
    min-width: 70px;
}

.col-total-price[b-l842evpn09] {
    width: 70px;
    min-width: 70px;
}

.col-count[b-l842evpn09] {
    width: 60px;
    min-width: 60px;
}

.col-order[b-l842evpn09] {
    width: 70px;
    min-width: 70px;
}

.col-status[b-l842evpn09] {
    width: 50px;
    min-width: 50px;
}

.col-remark[b-l842evpn09] {
    width: 150px;
    min-width: 150px;
}

.col-picture[b-l842evpn09] {
    width: 120px;
    min-width: 120px;
}

.col-actions[b-l842evpn09] {
    width: 100px;
    min-width: 100px;
}

/* ============================================================================
   Table data row styles - Compact design with small row spacing
   ============================================================================ */
.data-table td[b-l842evpn09] {
    padding: 3px 2px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 12px;
}

.data-table tbody tr[b-l842evpn09] {
    transition: background-color 0.2s ease;
    height: 40px;
}

    .data-table tbody tr:hover[b-l842evpn09] {
        background-color: #f7fafc;
    }

.readonly-cell[b-l842evpn09] {
    background-color: #f8f9fa;
    color: #718096;
    font-weight: 500;
}

/* ============================================================================
   Form control styles - Compact design
   ============================================================================ */
.form-input[b-l842evpn09] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 28px;
}

    .form-input:focus[b-l842evpn09] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.form-select[b-l842evpn09] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
    height: 28px;
}

    .form-select:focus[b-l842evpn09] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.number-input[b-l842evpn09] {
    text-align: right;
}

.form-textarea[b-l842evpn09] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    resize: vertical;
    min-height: 35px;
    box-sizing: border-box;
    font-family: inherit;
}

    .form-textarea:focus[b-l842evpn09] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

/* ============================================================================
   Picture cell styles - Small font and compact layout
   ============================================================================ */
.picture-cell[b-l842evpn09] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picture-input[b-l842evpn09] {
    font-size: 10px !important;
    height: 24px;
    width: 100%;
}

.picture-buttons[b-l842evpn09] {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.btn-pic-upload[b-l842evpn09], .btn-pic-preview[b-l842evpn09] {
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 8px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

    .btn-pic-upload:hover[b-l842evpn09] {
        background: #e9ecef;
    }

.btn-pic-preview[b-l842evpn09] {
    background: #e3f2fd;
    border-color: #90caf9;
}

    .btn-pic-preview:hover[b-l842evpn09] {
        background: #bbdefb;
    }

/* ============================================================================
   Action buttons styles - Two rows layout
   ============================================================================ */
.action-buttons[b-l842evpn09] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.btn-save[b-l842evpn09], .btn-delete[b-l842evpn09] {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    height: 20px;
    gap: 2px;
}

.btn-save[b-l842evpn09] {
    background: #bdc3c7;
    color: white;
}

.btn-save-modified[b-l842evpn09] {
    background: #3498db !important;
}

.btn-save:hover:not(:disabled)[b-l842evpn09] {
    background: #2980b9;
    transform: translateY(-1px);
}

.btn-save:disabled[b-l842evpn09] {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none !important;
}

.btn-delete[b-l842evpn09] {
    background: #e74c3c;
    color: white;
}

    .btn-delete:hover[b-l842evpn09] {
        background: #c0392b;
        transform: translateY(-1px);
    }

/* ============================================================================
   Checkbox styles
   ============================================================================ */
.checkbox-label[b-l842evpn09] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-input[b-l842evpn09] {
    display: none;
}

.checkmark[b-l842evpn09] {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-input:checked + .checkmark[b-l842evpn09] {
    background: #27ae60;
    border-color: #27ae60;
}

    .checkbox-input:checked + .checkmark[b-l842evpn09]::after {
        content: '✓';
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

/* ============================================================================
   Button styles
   ============================================================================ */
.btn[b-l842evpn09] {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    min-height: 28px;
    white-space: nowrap;
}

    .btn:hover[b-l842evpn09] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

.btn-success[b-l842evpn09] {
    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
    color: white;
}

.btn-secondary[b-l842evpn09] {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.btn:disabled[b-l842evpn09] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================================
   No data styles
   ============================================================================ */
.no-data[b-l842evpn09] {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
    font-style: italic;
    background: white;
    border-radius: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .no-data i[b-l842evpn09] {
        font-size: 36px;
        margin-bottom: 12px;
        color: #cbd5e0;
    }

    .no-data p[b-l842evpn09] {
        font-size: 16px;
        margin: 0;
    }

/* ============================================================================
   Scrollbar styles
   ============================================================================ */
.table-container[b-l842evpn09]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-container[b-l842evpn09]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-container[b-l842evpn09]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .table-container[b-l842evpn09]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Pages/LFAgentManage1021.razor.rz.scp.css */
/* ============================================================================
   Main container styles - Full parent container
   ============================================================================ */
.lfagent-manage-container[b-ikm7zpf504] {
    padding: 4px; /* 内边距：元素内容与边框之间的间距，4px表示上下左右相同 */
    height: 100% !important; /* 高度：继承父容器高度（原100vh是屏幕高度，会超出父容器） */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: hidden; /* 溢出处理：隐藏超出容器范围的内容 */
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
}
/* ============================================================================
   Edit controls section - Compact layout
   ============================================================================ */
/* 调整子元素间距 */
.edit-controls-section[b-ikm7zpf504] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 8px 8px 8px 8px; /*上右下左*/
    background: #f8f9fa;
    margin: 4px 4px 4px 4px; /* 调整外边距 */
    flex-shrink: 0;    /*表示不压缩，高度由内容决定*/
}

.controls-header[b-ikm7zpf504] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .controls-header h3[b-ikm7zpf504] {
        color: #2d3748;
        margin: 0;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
    }

.control-buttons[b-ikm7zpf504] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   Data grid section - Compact layout
   ============================================================================ */
.data-grid-section[b-ikm7zpf504] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    margin: 0 4px 4px 4px; /* 调整外边距 */
    flex: 1; /* 关键：占据剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* ============================================================================
   Table container - Horizontal scrolling
   ============================================================================ */
.table-container[b-ikm7zpf504] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
}

.data-table[b-ikm7zpf504] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1400px;
}

    /* ============================================================================
   Table header styles - Compact design
   ============================================================================ */
    .data-table thead[b-ikm7zpf504] {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table th[b-ikm7zpf504] {
        color: white;
        font-weight: 600;
        border: none;
        padding: 6px 4px;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

/* ============================================================================
   Column width definitions - Optimized layout
   ============================================================================ */
.col-id[b-ikm7zpf504] {
    width: 40px;
    min-width: 40px;
}

.col-code[b-ikm7zpf504] {
    width: 100px;
    min-width: 100px;
}

.col-name[b-ikm7zpf504] {
    width: 120px;
    min-width: 120px;
}

.col-type[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-unit[b-ikm7zpf504] {
    width: 60px;
    min-width: 60px;
}

.col-price[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-total-price[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-count[b-ikm7zpf504] {
    width: 60px;
    min-width: 60px;
}

.col-order[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-status[b-ikm7zpf504] {
    width: 50px;
    min-width: 50px;
}

.col-remark[b-ikm7zpf504] {
    width: 150px;
    min-width: 150px;
}

.col-picture[b-ikm7zpf504] {
    width: 120px;
    min-width: 120px;
}

.col-actions[b-ikm7zpf504] {
    width: 100px;
    min-width: 100px;
}

/* ============================================================================
   Table data row styles - Compact design with small row spacing
   ============================================================================ */
.data-table td[b-ikm7zpf504] {
    padding: 3px 2px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 12px;
}

.data-table tbody tr[b-ikm7zpf504] {
    transition: background-color 0.2s ease;
    height: 40px;
}

    .data-table tbody tr:hover[b-ikm7zpf504] {
        background-color: #f7fafc;
    }

.readonly-cell[b-ikm7zpf504] {
    background-color: #f8f9fa;
    color: #718096;
    font-weight: 500;
}

/* ============================================================================
   Form control styles - Compact design
   ============================================================================ */
.form-input[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 28px;
}

    .form-input:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.form-select[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
    height: 28px;
}

    .form-select:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.number-input[b-ikm7zpf504] {
    text-align: right;
}

.form-textarea[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    resize: vertical;
    min-height: 35px;
    box-sizing: border-box;
    font-family: inherit;
}

    .form-textarea:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

/* ============================================================================
   Picture cell styles - Small font and compact layout
   ============================================================================ */
.picture-cell[b-ikm7zpf504] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picture-input[b-ikm7zpf504] {
    font-size: 10px !important;
    height: 24px;
    width: 100%;
}

.picture-buttons[b-ikm7zpf504] {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.btn-pic-upload[b-ikm7zpf504], .btn-pic-preview[b-ikm7zpf504] {
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 8px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

    .btn-pic-upload:hover[b-ikm7zpf504] {
        background: #e9ecef;
    }

.btn-pic-preview[b-ikm7zpf504] {
    background: #e3f2fd;
    border-color: #90caf9;
}

    .btn-pic-preview:hover[b-ikm7zpf504] {
        background: #bbdefb;
    }

/* ============================================================================
   Action buttons styles - Two rows layout
   ============================================================================ */
.action-buttons[b-ikm7zpf504] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.btn-save[b-ikm7zpf504], .btn-delete[b-ikm7zpf504] {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    height: 20px;
    gap: 2px;
}

.btn-save[b-ikm7zpf504] {
    background: #bdc3c7;
    color: white;
}

.btn-save-modified[b-ikm7zpf504] {
    background: #3498db !important;
}

.btn-save:hover:not(:disabled)[b-ikm7zpf504] {
    background: #2980b9;
    transform: translateY(-1px);
}

.btn-save:disabled[b-ikm7zpf504] {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none !important;
}

.btn-delete[b-ikm7zpf504] {
    background: #e74c3c;
    color: white;
}

    .btn-delete:hover[b-ikm7zpf504] {
        background: #c0392b;
        transform: translateY(-1px);
    }

/* ============================================================================
   Checkbox styles
   ============================================================================ */
.checkbox-label[b-ikm7zpf504] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-input[b-ikm7zpf504] {
    display: none;
}

.checkmark[b-ikm7zpf504] {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-input:checked + .checkmark[b-ikm7zpf504] {
    background: #27ae60;
    border-color: #27ae60;
}

    .checkbox-input:checked + .checkmark[b-ikm7zpf504]::after {
        content: '✓';
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

/* ============================================================================
   Button styles
   ============================================================================ */
.btn[b-ikm7zpf504] {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    min-height: 28px;
    white-space: nowrap;
}

    .btn:hover[b-ikm7zpf504] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

.btn-success[b-ikm7zpf504] {
    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
    color: white;
}

.btn-secondary[b-ikm7zpf504] {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.btn:disabled[b-ikm7zpf504] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================================
   No data styles
   ============================================================================ */
.no-data[b-ikm7zpf504] {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
    font-style: italic;
    background: white;
    border-radius: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .no-data i[b-ikm7zpf504] {
        font-size: 36px;
        margin-bottom: 12px;
        color: #cbd5e0;
    }

    .no-data p[b-ikm7zpf504] {
        font-size: 16px;
        margin: 0;
    }

/* ============================================================================
   Scrollbar styles
   ============================================================================ */
.table-container[b-ikm7zpf504]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-container[b-ikm7zpf504]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-container[b-ikm7zpf504]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .table-container[b-ikm7zpf504]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Pages/PictureTheme.razor.rz.scp.css */
/* 
 * 图片索引页面样式 - 紧凑布局与主题支持
 * 主题配色通过PictureThemeService动态生成，此处为基础布局样式
 */

/* ===== 基础布局样式 ===== */
.compact-controls-container[b-cf2gw8d60m] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.control-label[b-cf2gw8d60m] {
    font-size: 0.9rem;
    font-weight: 500;
}

.control-group[b-cf2gw8d60m] {
    display: flex;
    align-items: center;
}

/* ===== 紧凑分类卡片 ===== */
.compact-category-card[b-cf2gw8d60m] {
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .compact-category-card:hover[b-cf2gw8d60m] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

.category-header[b-cf2gw8d60m] {
    border-bottom: 1px solid;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-cf2gw8d60m] {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.category-content[b-cf2gw8d60m] {
    padding: 0.25rem;
}

/* ===== 紧凑文件夹卡片 ===== */
.compact-folder-card[b-cf2gw8d60m] {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .compact-folder-card:hover[b-cf2gw8d60m] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #dee2e6;
    }

.folder-header[b-cf2gw8d60m] {
    border-bottom: 1px solid #e9ecef;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.folder-title[b-cf2gw8d60m] {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
}

.folder-description[b-cf2gw8d60m] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
}

.folder-actions .btn[b-cf2gw8d60m] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.folder-footer[b-cf2gw8d60m] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    text-align: center;
}

/* ===== 紧凑轮播样式 ===== */
.compact-carousel-container[b-cf2gw8d60m] {
    overflow: hidden;
    border-radius: 0.25rem;
    position: relative;
    /* 移除固定高度，由内容决定 */
    border: 1px solid #e9ecef;
}

.compact-carousel-track[b-cf2gw8d60m] {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
    width: 100%;
}

.compact-carousel-slide[b-cf2gw8d60m] {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 新增：图片容器，用于控制图片显示区域 */
.image-container[b-cf2gw8d60m] {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.compact-carousel-image[b-cf2gw8d60m] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 填充整个区域 */
    display: block;
}

/* 图片信息区域样式 - 修改为透明背景和灰色文字 */
.compact-image-info[b-cf2gw8d60m] {
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important; /* 修改为白色 */
    /*color: #6c757d !important;*/
    padding: 0.3rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border: none !important;
    box-shadow: none !important;
    /* 移除所有可能的背景 */
    background-image: none !important;
}

/*.image-name {
    font-weight: 500;
    color: #6c757d !important;*/ /* 灰色文字 */
/*}*/

/* 同时需要修改图片名称的颜色 */
.image-name[b-cf2gw8d60m] {
    font-weight: 500;
    color: #ffffff !important; /* 修改为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 图片名称也添加阴影 */
    text-align: left;
}
/*最后一个按钮靠右*/
.compact-image-info > :last-child[b-cf2gw8d60m] {
    margin-left: auto;
}

.compact-carousel-btn[b-cf2gw8d60m] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.9;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    background-color: rgba(128, 128, 128, 0.8) !important;
    color: white !important;
}

    .compact-carousel-btn:hover[b-cf2gw8d60m] {
        opacity: 1;
        background-color: rgba(96, 96, 96, 0.9) !important;
    }

    .compact-carousel-btn.prev[b-cf2gw8d60m] {
        left: 0.3rem;
    }

    .compact-carousel-btn.next[b-cf2gw8d60m] {
        right: 0.3rem;
    }

.compact-carousel-indicators[b-cf2gw8d60m] {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    z-index: 10;
}

.compact-carousel-indicator[b-cf2gw8d60m] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

    .compact-carousel-indicator.active[b-cf2gw8d60m] {
        transform: scale(1.2);
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

    .compact-carousel-indicator:hover[b-cf2gw8d60m] {
        opacity: 0.8;
        background-color: rgba(255, 255, 255, 0.7) !important;
    }

/* ===== 管理员面板 ===== */
.admin-panel[b-cf2gw8d60m] {
    border-left: 3px solid;
}

    .admin-panel h6[b-cf2gw8d60m] {
        font-weight: 600;
        font-size: 1rem;
    }

/* ===== 无图片占位符 ===== */
.no-images-placeholder[b-cf2gw8d60m] {
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #e9ecef;
    min-height: 120px; /* 最小高度 */
}

/* ===== 徽章样式 ===== */
.badge[b-cf2gw8d60m] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ===== 按钮样式优化 ===== */
.btn[b-cf2gw8d60m] {
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

    .btn:hover[b-cf2gw8d60m] {
        transform: translateY(-1px);
    }

.btn-sm[b-cf2gw8d60m] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-outline-secondary[b-cf2gw8d60m] {
    color: #6c757d; /* 减小按钮的颜色 */
    border-color: #6c757d;
}

    .btn-outline-secondary:hover[b-cf2gw8d60m] {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

/* ===== 模态框优化 ===== */
.modal-content[b-cf2gw8d60m] {
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header[b-cf2gw8d60m] {
    border-bottom: 1px solid;
}

.modal-footer[b-cf2gw8d60m] {
    border-top: 1px solid;
}

.modal-title[b-cf2gw8d60m] {
    font-weight: 600;
    font-size: 1rem;
}

/* ===== 表单控件优化 ===== */
.form-control[b-cf2gw8d60m], .form-select[b-cf2gw8d60m] {
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

    .form-control:focus[b-cf2gw8d60m], .form-select:focus[b-cf2gw8d60m] {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        border-color: #007bff;
    }

.form-label[b-cf2gw8d60m] {
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== 自定义5列布局 ===== */
.col-lg-2-4[b-cf2gw8d60m] {
    flex: 0 0 auto;
    width: 20%;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .compact-controls-container[b-cf2gw8d60m] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .control-group[b-cf2gw8d60m] {
        width: 100%;
        justify-content: space-between;
    }

    .col-lg-2-4[b-cf2gw8d60m] {
        width: 50%;
    }

    .folder-actions .btn[b-cf2gw8d60m] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .col-lg-2-4[b-cf2gw8d60m] {
        width: 100%;
    }

    .folder-actions[b-cf2gw8d60m] {
        flex-direction: column;
        gap: 0.2rem;
    }

        .folder-actions .btn[b-cf2gw8d60m] {
            font-size: 0.75rem;
        }
}

/* ===== 动画效果 ===== */
@keyframes fadeIn-b-cf2gw8d60m {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compact-folder-card[b-cf2gw8d60m] {
    animation: fadeIn-b-cf2gw8d60m 0.3s ease;
}

/* ===== 滚动条优化 ===== */
[b-cf2gw8d60m]::-webkit-scrollbar {
    width: 6px;
}

[b-cf2gw8d60m]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

[b-cf2gw8d60m]::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 3px;
}

    [b-cf2gw8d60m]::-webkit-scrollbar-thumb:hover {
        background: #495057;
    }

/* ===== 主题选择器 ===== */
.theme-selector-container[b-cf2gw8d60m] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: inline-block;
    border: 1px solid #e9ecef;
}

/* ===== 链接按钮样式 ===== */
.btn-link[b-cf2gw8d60m] {
    font-size: 0.9rem;
}

/* ===== 上传预览样式 ===== */
.upload-preview[b-cf2gw8d60m] {
    border: 1px dashed #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

    .upload-preview ul[b-cf2gw8d60m] {
        margin: 0;
        padding-left: 1rem;
    }





/* _content/LEAFBlazorApp25/Components/Pages/PictureV1.razor.rz.scp.css */
/* 管理员面板样式 */
.admin-panel[b-o8h8ja4rnt] {
    border-left: 4px solid #007bff;
}

.admin-actions[b-o8h8ja4rnt] {
    white-space: nowrap;
}

/* 控制面板样式 */
.controls-container[b-o8h8ja4rnt] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.control-label[b-o8h8ja4rnt] {
    font-weight: 500;
    color: #495057;
}

/* 卡片样式 */
.feature-card[b-o8h8ja4rnt] {
    transition: transform 0.2s, box-shadow 0.2s;
}

    .feature-card:hover[b-o8h8ja4rnt] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

.feature-title[b-o8h8ja4rnt] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.feature-description[b-o8h8ja4rnt] {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 轮播样式 */
.carousel-container[b-o8h8ja4rnt] {
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
}

.carousel-track[b-o8h8ja4rnt] {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide[b-o8h8ja4rnt] {
    flex-shrink: 0;
    position: relative;
}

.carousel-image[b-o8h8ja4rnt] {
    object-fit: contain;
}

.image-name[b-o8h8ja4rnt] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.carousel-btn[b-o8h8ja4rnt] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s;
}

    .carousel-btn:hover[b-o8h8ja4rnt] {
        opacity: 1;
    }

    .carousel-btn.prev[b-o8h8ja4rnt] {
        left: 0.5rem;
    }

    .carousel-btn.next[b-o8h8ja4rnt] {
        right: 0.5rem;
    }

.carousel-indicators[b-o8h8ja4rnt] {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    z-index: 10;
}

.carousel-indicator[b-o8h8ja4rnt] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s;
}

    .carousel-indicator.active[b-o8h8ja4rnt] {
        background-color: white;
    }

    .carousel-indicator:hover[b-o8h8ja4rnt] {
        background-color: rgba(255, 255, 255, 0.8);
    }

/* 模态框样式 */
.modal-backdrop.show[b-o8h8ja4rnt] {
    opacity: 0.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .controls-container[b-o8h8ja4rnt] {
        flex-direction: column;
        gap: 1rem;
    }

    .control-group[b-o8h8ja4rnt] {
        justify-content: center;
    }

    .feature-title[b-o8h8ja4rnt] {
        font-size: 1rem;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/SmsDemo.razor.rz.scp.css */
/* Components/Pages/SmsDemo.razor.css */
.loading-overlay[b-x8fyk8tg15] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 卡片阴影效果增强 */
.card[b-x8fyk8tg15] {
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover[b-x8fyk8tg15] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

/* 表单控件样式优化 */
.form-control:focus[b-x8fyk8tg15], .form-select:focus[b-x8fyk8tg15] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* 按钮样式优化 */
.btn[b-x8fyk8tg15] {
    transition: all 0.15s ease-in-out;
}

.btn-primary[b-x8fyk8tg15] {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
}

    .btn-primary:hover[b-x8fyk8tg15] {
        background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
        transform: translateY(-1px);
    }

/* 警告框样式优化 */
.alert[b-x8fyk8tg15] {
    border: none;
    border-left: 4px solid;
}

.alert-success[b-x8fyk8tg15] {
    border-left-color: #198754;
    background-color: #f8fff9;
}

.alert-danger[b-x8fyk8tg15] {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.alert-warning[b-x8fyk8tg15] {
    border-left-color: #ffc107;
    background-color: #fffef5;
}

/* 输入组样式 */
.input-group .btn-outline-secondary[b-x8fyk8tg15] {
    border-color: #ced4da;
    transition: all 0.15s ease-in-out;
}

    .input-group .btn-outline-secondary:hover[b-x8fyk8tg15] {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

/* 徽章样式优化 */
.badge[b-x8fyk8tg15] {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-body[b-x8fyk8tg15] {
        padding: 1rem;
    }

    .btn[b-x8fyk8tg15] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-group[b-x8fyk8tg15] {
        flex-direction: column;
    }
}

/* 动画效果 */
.spinner-border[b-x8fyk8tg15] {
    animation: spinner-border-b-x8fyk8tg15 0.75s linear infinite;
}

@keyframes spinner-border-b-x8fyk8tg15 {
    to {
        transform: rotate(360deg);
    }
}

/* 自定义滚动条 */
[b-x8fyk8tg15]::-webkit-scrollbar {
    width: 8px;
}

[b-x8fyk8tg15]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

[b-x8fyk8tg15]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    [b-x8fyk8tg15]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 表单标签样式 */
.form-label.fw-semibold[b-x8fyk8tg15] {
    color: #495057;
    margin-bottom: 0.5rem;
}

/* 单选按钮组样式 */
.form-check-inline[b-x8fyk8tg15] {
    margin-right: 1rem;
}

.form-check-input:checked[b-x8fyk8tg15] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 文本区域样式 */
.form-control[rows="3"][b-x8fyk8tg15] {
    resize: vertical;
    min-height: 80px;
}

/* 使用说明区域样式 */
.small li[b-x8fyk8tg15] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
/* _content/LEAFBlazorApp25/Components/Pages/TaskTrack.razor.rz.scp.css */
/* 任务跟踪系统样式 */
.track-container[b-n82i75q2wq] {
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* 头部样式 */
.track-header[b-n82i75q2wq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.track-title[b-n82i75q2wq] {
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
}

.track-header-actions[b-n82i75q2wq] {
    display: flex;
    gap: 10px;
}

/* 筛选区域样式 */
.track-filter-section[b-n82i75q2wq] {
    transition: all 0.3s ease-in-out;
    margin-bottom: 20px;
}

    .track-filter-section.hide[b-n82i75q2wq] {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0;
    }

    .track-filter-section.show[b-n82i75q2wq] {
        max-height: 500px;
        opacity: 1;
    }

.filter-card[b-n82i75q2wq] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.filter-title[b-n82i75q2wq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: 0;
    padding: 15px 20px;
    font-size: 1.1rem;
}

.filter-form[b-n82i75q2wq] {
    padding: 20px;
}

.form-row[b-n82i75q2wq] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-n82i75q2wq] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .form-group.full-width[b-n82i75q2wq] {
        flex: 0 0 100%;
    }

.form-label[b-n82i75q2wq] {
    font-weight: 600;
    margin-bottom: 5px;
    color: #495057;
}

    .form-label.required[b-n82i75q2wq]::after {
        content: " *";
        color: #dc3545;
    }

.form-control[b-n82i75q2wq] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.15s ease-in-out;
}

    .form-control:focus[b-n82i75q2wq] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

.filter-actions[b-n82i75q2wq] {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

/* 加载状态 */
.track-loading[b-n82i75q2wq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 无数据状态 */
.track-no-data[b-n82i75q2wq] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .track-no-data i[b-n82i75q2wq] {
        font-size: 48px;
        color: #6c757d;
        margin-bottom: 15px;
    }

/* 表格样式 */
.track-table-section[b-n82i75q2wq] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.table-responsive[b-n82i75q2wq] {
    overflow-x: auto;
}

.track-table[b-n82i75q2wq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .track-table th[b-n82i75q2wq] {
        background: #f8f9fa;
        padding: 15px 12px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .track-table td[b-n82i75q2wq] {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
    }

    .track-table tr:hover[b-n82i75q2wq] {
        background-color: #f8f9fa;
    }

    .track-table tr.track-deleted[b-n82i75q2wq] {
        background-color: #fff5f5;
        opacity: 0.7;
    }

        .track-table tr.track-deleted:hover[b-n82i75q2wq] {
            background-color: #ffe6e6;
        }

.track-empty-row[b-n82i75q2wq] {
    background-color: #f8f9fa;
}

    .track-empty-row:hover[b-n82i75q2wq] {
        background-color: #e9ecef;
    }

/* 表格列特定样式 */
.track-task-number[b-n82i75q2wq] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #667eea;
}

.track-description[b-n82i75q2wq] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-plan-date[b-n82i75q2wq], .track-actual-date[b-n82i75q2wq] {
    white-space: nowrap;
}

/* 状态徽章 */
.status-badge[b-n82i75q2wq] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    min-width: 70px;
}

.status-completed[b-n82i75q2wq] {
    background: #d4edda;
    color: #155724;
}

.status-progress[b-n82i75q2wq] {
    background: #d1ecf1;
    color: #0c5460;
}

.status-delayed[b-n82i75q2wq] {
    background: #f8d7da;
    color: #721c24;
}

.status-cancelled[b-n82i75q2wq] {
    background: #e2e3e5;
    color: #383d41;
}

/* 操作按钮 */
.track-actions[b-n82i75q2wq] {
    white-space: nowrap;
}

    .track-actions .btn[b-n82i75q2wq] {
        margin: 0 2px;
        padding: 4px 8px;
        font-size: 12px;
    }

/* 模态框样式 */
.track-modal[b-n82i75q2wq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    padding: 20px;
}

.modal-dialog[b-n82i75q2wq] {
    max-width: 800px;
    width: 100%;
}

.modal-content[b-n82i75q2wq] {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header[b-n82i75q2wq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 20px;
}

.modal-title[b-n82i75q2wq] {
    margin: 0;
    font-weight: 600;
}

.btn-close[b-n82i75q2wq] {
    filter: invert(1);
}

.modal-body[b-n82i75q2wq] {
    padding: 30px;
}

.form-grid[b-n82i75q2wq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

    .form-grid .full-width[b-n82i75q2wq] {
        grid-column: 1 / -1;
    }

.modal-footer[b-n82i75q2wq] {
    border-top: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

/* 按钮样式 */
.btn[b-n82i75q2wq] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .btn:hover[b-n82i75q2wq] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .btn:active[b-n82i75q2wq] {
        transform: translateY(0);
    }

.btn-primary[b-n82i75q2wq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-success[b-n82i75q2wq] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.btn-warning[b-n82i75q2wq] {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.btn-danger[b-n82i75q2wq] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.btn-info[b-n82i75q2wq] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.btn-outline-primary[b-n82i75q2wq] {
    border: 1px solid #667eea;
    color: #667eea;
    background: transparent;
}

    .btn-outline-primary:hover[b-n82i75q2wq] {
        background: #667eea;
        color: white;
    }

/* 响应式设计 */
@media (max-width: 768px) {
    .track-container[b-n82i75q2wq] {
        padding: 10px;
    }

    .track-header[b-n82i75q2wq] {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .form-row[b-n82i75q2wq] {
        flex-direction: column;
        gap: 15px;
    }

    .form-grid[b-n82i75q2wq] {
        grid-template-columns: 1fr;
    }

    .track-table[b-n82i75q2wq] {
        font-size: 12px;
    }

        .track-table th[b-n82i75q2wq],
        .track-table td[b-n82i75q2wq] {
            padding: 8px 6px;
        }

    .track-actions[b-n82i75q2wq] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .modal-dialog[b-n82i75q2wq] {
        margin: 10px;
    }

    .modal-body[b-n82i75q2wq] {
        padding: 20px;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/WeComDemo.razor.rz.scp.css */
/* Components/Pages/WeComDemo.razor.css */
.loading-overlay[b-ubenshyzdt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 企业微信主题色调整 */
.card-header.bg-success[b-ubenshyzdt] {
    background: linear-gradient(135deg, #1aad19 0%, #0d8b0c 100%) !important;
}

.btn-success[b-ubenshyzdt] {
    background: linear-gradient(135deg, #1aad19 0%, #0d8b0c 100%);
    border: none;
}

    .btn-success:hover[b-ubenshyzdt] {
        background: linear-gradient(135deg, #0d8b0c 0%, #0a6c0a 100%);
        transform: translateY(-1px);
    }

/* 卡片动画效果 */
.card[b-ubenshyzdt] {
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover[b-ubenshyzdt] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(26, 173, 25, 0.15) !important;
    }

/* 表单控件样式优化 */
.form-control:focus[b-ubenshyzdt], .form-select:focus[b-ubenshyzdt] {
    border-color: #1aad19;
    box-shadow: 0 0 0 0.2rem rgba(26, 173, 25, 0.25);
}

/* 警告框样式优化 */
.alert[b-ubenshyzdt] {
    border: none;
    border-left: 4px solid;
}

.alert-success[b-ubenshyzdt] {
    border-left-color: #1aad19;
    background-color: #f8fff9;
}

.alert-danger[b-ubenshyzdt] {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.alert-warning[b-ubenshyzdt] {
    border-left-color: #ffc107;
    background-color: #fffef5;
}

.alert-info[b-ubenshyzdt] {
    border-left-color: #17a2b8;
    background-color: #f8fdff;
}

/* 预览内容区域样式 */
.alert-light.border[b-ubenshyzdt] {
    background-color: #f8f9fa;
    border-color: #e9ecef !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-body[b-ubenshyzdt] {
        padding: 1rem;
    }

    .btn[b-ubenshyzdt] {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* 动画效果 */
.spinner-border[b-ubenshyzdt] {
    animation: spinner-border-b-ubenshyzdt 0.75s linear infinite;
}

@keyframes spinner-border-b-ubenshyzdt {
    to {
        transform: rotate(360deg);
    }
}

/* 徽章样式优化 */
.badge[b-ubenshyzdt] {
    font-size: 0.7em;
    padding: 0.3em 0.6em;
}

/* 单选按钮组样式 */
.form-check-inline[b-ubenshyzdt] {
    margin-right: 1rem;
}

.form-check-input:checked[b-ubenshyzdt] {
    background-color: #1aad19;
    border-color: #1aad19;
}

/* 文本区域样式 */
.form-control[rows="4"][b-ubenshyzdt] {
    resize: vertical;
    min-height: 100px;
}

/* 使用说明区域样式 */
.small li[b-ubenshyzdt] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* 结果区域动画 */
.alert[b-ubenshyzdt] {
    animation: fadeIn-b-ubenshyzdt 0.3s ease-in;
}

@keyframes fadeIn-b-ubenshyzdt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/备份/DownloadSoftB1.razor.rz.scp.css */
/* 紧凑布局容器 */
.download-container[b-6mxsf6t0oj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
}

/* 管理员面板样式 */
.admin-panel[b-6mxsf6t0oj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: -10px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    padding: 10px 20px 5px 20px;
}


/* 管理员标题区域布局 */
.admin-title[b-6mxsf6t0oj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.title-left[b-6mxsf6t0oj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* 操作按钮容器 */
.form-actions[b-6mxsf6t0oj] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

/* 紧凑按钮样式 */
.upload-btn.compact[b-6mxsf6t0oj], .cancel-btn.compact[b-6mxsf6t0oj] {
    width: auto;
    min-width: 100px;
    padding: 6px 12px;
    white-space: nowrap;
    height: 36px;
    font-size: 0.85rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cancel-btn.compact[b-6mxsf6t0oj] {
    min-width: 60px;
}

/* 上传按钮特定样式 */
.upload-btn.compact[b-6mxsf6t0oj] {
    background: rgba(40, 167, 69, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .upload-btn.compact:hover:not(:disabled)[b-6mxsf6t0oj] {
        background: #28a745;
        transform: translateY(-1px);
    }

    .upload-btn.compact:disabled[b-6mxsf6t0oj] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .upload-btn.compact.uploading[b-6mxsf6t0oj] {
        background: #6c757d;
    }

/* 取消按钮特定样式 */
.cancel-btn.compact[b-6mxsf6t0oj] {
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .cancel-btn.compact:hover[b-6mxsf6t0oj] {
        background: #5a6268;
    }

.admin-icon[b-6mxsf6t0oj] {
    font-size: 1.3rem;
}

/* 状态消息 */
.status-message[b-6mxsf6t0oj] {
    padding: 10px 15px;
    margin: 8px 0 12px 0;
    border-radius: 6px;
    font-weight: 500;
    border-left: 4px solid;
    font-size: 0.9rem;
}

    .status-message.success[b-6mxsf6t0oj] {
        background: rgba(212, 237, 218, 0.9);
        color: #155724;
        border-left-color: #28a745;
    }

    .status-message.error[b-6mxsf6t0oj] {
        background: rgba(248, 215, 218, 0.9);
        color: #721c24;
        border-left-color: #dc3545;
    }

/* 紧凑表单样式 */
.compact-form .form-row[b-6mxsf6t0oj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.compact-form .form-group.compact[b-6mxsf6t0oj] {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

/* 文件选择按钮样式 */
.file-select-btn[b-6mxsf6t0oj] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #495057;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .file-select-btn:hover[b-6mxsf6t0oj] {
        background: white;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

.file-input-hidden[b-6mxsf6t0oj] {
    display: none;
}

.description-input[b-6mxsf6t0oj] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 50px;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.3s ease;
    color: #495057;
}

    .description-input:focus[b-6mxsf6t0oj] {
        border-color: white;
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

.char-count[b-6mxsf6t0oj] {
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

.form-actions[b-6mxsf6t0oj] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.upload-btn.compact[b-6mxsf6t0oj] {
    padding: 10px 16px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

    .upload-btn.compact:hover:not(:disabled)[b-6mxsf6t0oj] {
        background: #28a745;
        transform: translateY(-1px);
    }

    .upload-btn.compact:disabled[b-6mxsf6t0oj] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .upload-btn.compact.uploading[b-6mxsf6t0oj] {
        background: #6c757d;
    }

.cancel-btn.compact[b-6mxsf6t0oj] {
    padding: 10px 16px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    flex: 1;
}

    .cancel-btn.compact:hover[b-6mxsf6t0oj] {
        background: #5a6268;
    }

.file-info[b-6mxsf6t0oj] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* 分区头部样式 */
.section-header[b-6mxsf6t0oj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 5px;
}

.section-title[b-6mxsf6t0oj] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
}

.download-title[b-6mxsf6t0oj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.recruitment-title[b-6mxsf6t0oj] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.software-count[b-6mxsf6t0oj] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: normal;
}

.section-controls[b-6mxsf6t0oj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.columns-selector[b-6mxsf6t0oj] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

.columns-dropdown[b-6mxsf6t0oj] {
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.85rem;
}

.section-icon[b-6mxsf6t0oj] {
    font-size: 1.6rem;
}

/* 加载和空状态 */
.loading[b-6mxsf6t0oj], .empty-state[b-6mxsf6t0oj] {
    text-align: center;
    padding: 50px 20px;
    color: #6c757d;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading[b-6mxsf6t0oj] {
    flex-direction: row;
    justify-content: center;
}

.empty-icon[b-6mxsf6t0oj] {
    font-size: 2.5rem;
    opacity: 0.7;
}

/* 软件网格布局 */
.software-grid[b-6mxsf6t0oj] {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

/* 软件卡片样式 */
.software-card[b-6mxsf6t0oj] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #e9ecef;
}

    .software-card:hover[b-6mxsf6t0oj] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

/* 软件图片区域 - 移除点击功能 */
.software-image[b-6mxsf6t0oj] {
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .software-image img[b-6mxsf6t0oj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.software-card:hover .software-image img[b-6mxsf6t0oj] {
    transform: scale(1.05);
}

.software-placeholder[b-6mxsf6t0oj] {
    font-size: 2rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 软件内容区域 */
.software-content[b-6mxsf6t0oj] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.software-header[b-6mxsf6t0oj] {
    margin-bottom: 8px;
    text-align: center;
}

.software-name[b-6mxsf6t0oj] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    word-break: break-word;
}

.software-meta[b-6mxsf6t0oj] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #6c757d;
    flex-wrap: wrap;
    justify-content: center;
}

.file-size[b-6mxsf6t0oj], .file-date[b-6mxsf6t0oj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 软件描述 */
.software-description-section[b-6mxsf6t0oj] {
    margin-bottom: 12px;
    flex-grow: 1;
}

.software-description[b-6mxsf6t0oj] {
    color: #555;
    line-height: 1.4;
    margin: 0;
    font-size: 0.9rem;
    word-break: break-word;
}

/* 管理员编辑区域 */
.admin-edit-section[b-6mxsf6t0oj] {
    margin-bottom: 12px;
    flex-grow: 1;
}

.admin-description[b-6mxsf6t0oj] {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    margin-bottom: 8px;
    resize: vertical;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

    .admin-description:focus[b-6mxsf6t0oj] {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

.admin-actions[b-6mxsf6t0oj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.btn-update[b-6mxsf6t0oj], .btn-delete[b-6mxsf6t0oj] {
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 500;
}

.btn-update[b-6mxsf6t0oj] {
    background: #28a745;
    color: white;
}

    .btn-update:hover[b-6mxsf6t0oj] {
        background: #218838;
        transform: translateY(-1px);
    }

.btn-delete[b-6mxsf6t0oj] {
    background: #dc3545;
    color: white;
}

    .btn-delete:hover[b-6mxsf6t0oj] {
        background: #c82333;
        transform: translateY(-1px);
    }

/*#region 下载单行 容器  */

/* 下载按钮容器 - 单行布局 */
.download-button-container[b-6mxsf6t0oj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

/* 下载按钮样式调整 */
.download-button[b-6mxsf6t0oj] {
    flex: 1;
    min-width: 0;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

    .download-button:hover[b-6mxsf6t0oj] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

/* 文件信息样式 */
.file-size-info[b-6mxsf6t0oj] {
    white-space: nowrap;
    color: #6c757d;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.download-text[b-6mxsf6t0oj] {
    flex: 1;
    text-align: center;
}


/* 响应式调整 */
@media (max-width: 576px) {
    .download-button-container[b-6mxsf6t0oj] {
        flex-direction: column;
        gap: 8px;
    }

    .file-size-info[b-6mxsf6t0oj] {
        align-self: flex-end;
    }
}

/*#endregion */

/* 招聘区域 */
.recruitment-section[b-6mxsf6t0oj] {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 2px solid #e9ecef;
}

.iframe-container[b-6mxsf6t0oj] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.recruitment-iframe[b-6mxsf6t0oj] {
    width: 100%;
    height: 400px; /* 减少高度 */
    border: none;
    background: white;
}

.iframe-overlay[b-6mxsf6t0oj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .iframe-overlay.loading[b-6mxsf6t0oj] {
        opacity: 1;
        pointer-events: all;
    }

.iframe-loading[b-6mxsf6t0oj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6c757d;
}

/* 模态对话框 */
.modal-overlay[b-6mxsf6t0oj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 15px;
}

.modal-content[b-6mxsf6t0oj] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-6mxsf6t0oj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

    .modal-header h3[b-6mxsf6t0oj] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.2rem;
    }

.modal-close[b-6mxsf6t0oj] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .modal-close:hover[b-6mxsf6t0oj] {
        background: #f8f9fa;
        color: #495057;
    }

.modal-body[b-6mxsf6t0oj] {
    padding: 20px;
}

.modal-actions[b-6mxsf6t0oj] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

.file-preview[b-6mxsf6t0oj] {
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* 加载动画 */
.spinner[b-6mxsf6t0oj] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-6mxsf6t0oj 1s linear infinite;
}

@keyframes spin-b-6mxsf6t0oj {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .software-grid[b-6mxsf6t0oj] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .software-grid[b-6mxsf6t0oj] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .download-container[b-6mxsf6t0oj] {
        padding: 12px;
    }

    .section-header[b-6mxsf6t0oj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-controls[b-6mxsf6t0oj] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .software-grid[b-6mxsf6t0oj] {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .compact-form .form-row[b-6mxsf6t0oj] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-actions[b-6mxsf6t0oj] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-6mxsf6t0oj] {
        margin: 10px;
        max-width: none;
    }

    .recruitment-iframe[b-6mxsf6t0oj] {
        height: 350px;
    }

    .form-actions[b-6mxsf6t0oj] {
        flex-direction: column;
    }

    .upload-btn.compact[b-6mxsf6t0oj], .cancel-btn.compact[b-6mxsf6t0oj] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .download-container[b-6mxsf6t0oj] {
        padding: 10px;
    }

    .software-image[b-6mxsf6t0oj] {
        height: 140px;
    }

    .software-content[b-6mxsf6t0oj] {
        padding: 12px;
    }

    .download-button[b-6mxsf6t0oj] {
        padding: 8px;
        font-size: 0.85rem;
    }

    .section-title[b-6mxsf6t0oj] {
        font-size: 1.2rem;
    }

    .admin-panel[b-6mxsf6t0oj] {
        padding: 12px;
    }

    .admin-title[b-6mxsf6t0oj] {
        font-size: 1.1rem;
    }
}

/* 打印样式 */
@media print {
    .admin-panel[b-6mxsf6t0oj],
    .admin-actions[b-6mxsf6t0oj],
    .section-controls[b-6mxsf6t0oj] {
        display: none !important;
    }

    .software-card[b-6mxsf6t0oj] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .download-button[b-6mxsf6t0oj] {
        background: #666 !important;
        color: white !important;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/ReportPDF.razor.rz.scp.css */
/* ===== 主容器布局 ===== */
.report-pdf-container[b-qgrp6j5cil] {
    display: flex;
    height: calc(100vh - 90px);
    margin: 0;
    padding: 0;
    align-items: flex-start;
    position: relative;
    left: -20px;
    width: calc(100% + 30px);
    background: #fafafa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== 左侧面板样式 ===== */
.left-panel[b-qgrp6j5cil] {
    width: 300px;
    min-width: 200px;
    max-width: 600px;
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    padding: 0px;
    overflow-y: auto;
    margin: 0;
    height: 100%;
    box-shadow: 1px 0 3px rgba(0,0,0,0.05);
}

/* 分类选择区域 */
.select-group[b-qgrp6j5cil] {
    margin: 5px 10px 5px 2px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.category-select[b-qgrp6j5cil] {
    flex: 1;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #323130;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
}

    .category-select:hover[b-qgrp6j5cil] {
        border-color: #0078d4;
    }

    .category-select:focus[b-qgrp6j5cil] {
        outline: none;
        border-color: #0078d4;
        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
    }

.file-upload-btn[b-qgrp6j5cil] {
    min-width: max-content;
    padding: 8px 16px;
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .file-upload-btn:hover[b-qgrp6j5cil] {
        background: #e1dfdd;
        border-color: #107c10;
        color: #107c10;
        transform: translateY(-1px);
    }

/* 管理员面板 */
.admin-panel[b-qgrp6j5cil] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 3px 8px 3px 2px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 48px;
    box-sizing: border-box;
}

.admin-input[b-qgrp6j5cil] {
    width: 140px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
    background: white;
}

    .admin-input:focus[b-qgrp6j5cil] {
        outline: none;
        border-color: #0078d4;
        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
    }

.category-btn[b-qgrp6j5cil] {
    min-width: max-content;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .category-btn.create[b-qgrp6j5cil] {
        background: #0078d4;
        color: white;
    }

        .category-btn.create:hover[b-qgrp6j5cil] {
            background: #106ebe;
            transform: translateY(-1px);
        }

    .category-btn.delete[b-qgrp6j5cil] {
        background: #d13438;
        color: white;
    }

        .category-btn.delete:hover[b-qgrp6j5cil] {
            background: #b02a30;
            transform: translateY(-1px);
        }

.file-action-btn[b-qgrp6j5cil] {
    min-width: max-content;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .file-action-btn.delete[b-qgrp6j5cil] {
        background: #f3f2f1;
        color: #323130;
        border: 1px solid #d1d5db;
    }

        .file-action-btn.delete:hover[b-qgrp6j5cil] {
            background: #e1dfdd;
            border-color: #d13438;
            color: #d13438;
        }

.panel-divider[b-qgrp6j5cil] {
    width: 1px;
    height: 24px;
    background: #d1d5db;
    margin: 0 4px;
    flex-shrink: 0;
}

/* 文件列表头部 */
.file-list-header[b-qgrp6j5cil] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0 10px 0;
    padding: 0 15px;
}

    .file-list-header h4[b-qgrp6j5cil] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #323130;
    }

.selected-category[b-qgrp6j5cil] {
    font-size: 14px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

/* 文件列表容器 */
.file-list-container[b-qgrp6j5cil] {
    font-size: 13px;
    line-height: 1.3;
    padding: 0 15px;
}

.file-item[b-qgrp6j5cil] {
    margin: 2px 0;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    background-color: transparent;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

    .file-item:hover[b-qgrp6j5cil] {
        background-color: #f0f7ff;
        border-left-color: #0078d4;
    }

    .file-item.selected[b-qgrp6j5cil] {
        background-color: #e3f2fd;
        border-left-color: #0078d4;
        font-weight: 500;
    }

.no-files[b-qgrp6j5cil] {
    padding: 12px 8px;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* ===== 分割条样式 ===== */
.splitter-bar[b-qgrp6j5cil] {
    width: 8px;
    background: #dee2e6;
    cursor: col-resize;
    position: relative;
    margin: 0;
    height: 100%;
    transition: background-color 0.2s ease;
}

    .splitter-bar:hover[b-qgrp6j5cil] {
        background: #adb5bd;
    }

.splitter-handle[b-qgrp6j5cil] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 40px;
    background: #adb5bd;
    border-radius: 3px;
    transform: translateY(-50%);
}

/* ===== 右侧面板样式 ===== */
.right-panel[b-qgrp6j5cil] {
    flex: 1;
    padding: 15px;
    overflow: auto;
    margin: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
}

/* 文件信息栏 */
.file-info-bar[b-qgrp6j5cil] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.file-name[b-qgrp6j5cil] {
    color: #323130;
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: 500;
}

.error-message[b-qgrp6j5cil] {
    color: #d13438;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* PDF查看器容器 */
.pdf-viewer-container[b-qgrp6j5cil] {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 25px);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f8f9fa;
}

.pdf-iframe[b-qgrp6j5cil] {
    border: none;
    border-radius: 0 0 4px 4px;
    flex-grow: 1;
}

/* HTML查看器容器 */
.html-viewer-container[b-qgrp6j5cil] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #f5f5f5;
    height: calc(100% - 25px);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.viewer-controls[b-qgrp6j5cil] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.control-btn[b-qgrp6j5cil] {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 25px;
    height: 25px;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .control-btn:hover[b-qgrp6j5cil] {
        background: #e8f4fd;
        border-color: #007bff;
    }

.iframe-scroll-container[b-qgrp6j5cil] {
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}

.iframe-wrapper[b-qgrp6j5cil] {
    transform-origin: 0 0;
    transition: transform 0.2s ease;
}

.html-iframe[b-qgrp6j5cil] {
    border: none;
    display: block;
}

/* 滚动条样式 */
.iframe-scroll-container[b-qgrp6j5cil]::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.iframe-scroll-container[b-qgrp6j5cil]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 7px;
}

.iframe-scroll-container[b-qgrp6j5cil]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 7px;
    border: 3px solid #f1f1f1;
}

    .iframe-scroll-container[b-qgrp6j5cil]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.iframe-scroll-container[b-qgrp6j5cil] {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 状态容器样式 ===== */
.loading-container[b-qgrp6j5cil] {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: #f8f9fa;
    border-radius: 4px;
}

.loading-spinner[b-qgrp6j5cil] {
    width: 3rem;
    height: 3rem;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0078d4;
    border-radius: 50%;
    animation: spin-b-qgrp6j5cil 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-qgrp6j5cil {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-container[b-qgrp6j5cil] {
    margin-top: 5px;
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
}

.error-icon[b-qgrp6j5cil] {
    margin-right: 8px;
    font-size: 1.2rem;
}

.welcome-container[b-qgrp6j5cil] {
    margin-top: 5px;
    background-color: #f8f9fa;
    border-radius: 4px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.welcome-icon[b-qgrp6j5cil] {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.welcome-container p[b-qgrp6j5cil] {
    color: #6c757d;
    margin: 0.5rem 0;
}

.welcome-container small[b-qgrp6j5cil] {
    color: #8a8d91;
    margin-top: 1rem;
}

/* ===== 上传状态样式 ===== */
.upload-status[b-qgrp6j5cil] {
    padding: 10px;
    margin: 10px 8px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 13px;
}

    .upload-status.success[b-qgrp6j5cil] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .upload-status.error[b-qgrp6j5cil] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    .upload-status.warning[b-qgrp6j5cil] {
        background-color: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }

    .upload-status.info[b-qgrp6j5cil] {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
        cursor: pointer;
    }

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .report-pdf-container[b-qgrp6j5cil] {
        flex-direction: column;
        left: 0;
        width: 100%;
        height: auto;
    }

    .left-panel[b-qgrp6j5cil] {
        width: 100%;
        max-width: none;
        height: 40vh;
    }

    .splitter-bar[b-qgrp6j5cil] {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .splitter-handle[b-qgrp6j5cil] {
        top: 1px;
        left: 50%;
        width: 40px;
        height: 6px;
        transform: translateX(-50%);
    }

    .right-panel[b-qgrp6j5cil] {
        height: 60vh;
    }

    .admin-panel[b-qgrp6j5cil] {
        gap: 5px;
        padding: 8px;
    }

    .admin-input[b-qgrp6j5cil] {
        width: 120px;
        height: 28px;
        font-size: 12px;
    }

    .category-btn[b-qgrp6j5cil], .file-action-btn[b-qgrp6j5cil] {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .admin-panel[b-qgrp6j5cil] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .admin-input[b-qgrp6j5cil] {
        width: 100%;
        height: 32px;
    }

    .category-btn[b-qgrp6j5cil], .file-action-btn[b-qgrp6j5cil] {
        width: 100%;
        height: 32px;
        justify-content: center;
    }

    .panel-divider[b-qgrp6j5cil] {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }

    .select-group[b-qgrp6j5cil] {
        flex-direction: column;
        gap: 8px;
    }

    .category-select[b-qgrp6j5cil], .file-upload-btn[b-qgrp6j5cil] {
        width: 100%;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatAdmin.razor.rz.scp.css */
/* ChatAdmin.razor.css */
/* ===== 基础重置和容器样式 ===== */
*[b-hp5r8f3kt0] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.leaf-admin-container[b-hp5r8f3kt0] {
    display: flex;
    height: 100%;
    width: 100%;
    background: #f5f6fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    gap: 0;
}

/* ===== 左侧区域样式 ===== */
.leaf-admin-left[b-hp5r8f3kt0] {
    width: 280px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e1e5e9;
    margin: 0;
    padding: 0;
}

/* 头部统计区域 - 简洁设计 */
.leaf-admin-header[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #ffffff;
    flex-shrink: 0;
}

.leaf-header-content[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaf-admin-title[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 700;
}

.leaf-admin-icon[b-hp5r8f3kt0] {
    font-size: 1.1em;
    color: #6B46C1;
}

/* 统计项样式 - 简洁边框设计 */
.leaf-admin-stats[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.leaf-stat-item[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ffffff;
    font-size: 0.9rem;
    border: 2px solid #e1e5e9;
    transition: all 0.2s ease;
    color: #2c3e50;
}

    .leaf-stat-item:hover[b-hp5r8f3kt0] {
        background: #f8f9fa;
    }

    /* 使用不同颜色的边框 */
    .leaf-stat-item.primary[b-hp5r8f3kt0] {
        border-color: #6B46C1;
    }

    .leaf-stat-item.success[b-hp5r8f3kt0] {
        border-color: #38A169;
    }

    .leaf-stat-item.warning[b-hp5r8f3kt0] {
        border-color: #D69E2E;
    }

    .leaf-stat-item.info[b-hp5r8f3kt0] {
        border-color: #3182CE;
    }

.leaf-stat-icon[b-hp5r8f3kt0] {
    font-size: 1.3rem;
    opacity: 0.8;
}

.leaf-stat-info[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.leaf-stat-value[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    color: #2c3e50;
}

.leaf-stat-label[b-hp5r8f3kt0] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 2px;
    color: #4a5568;
    font-weight: 300;
}

/* 选项卡导航区域 - 简洁设计 */
.leaf-admin-nav[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    padding: 2px 8px;
    gap: 8px;
    flex: 1;
    background: #ffffff;
    margin: 8px 0 8px 0;
    border-radius: 4px;
    /* 添加浅灰色边框 */
    border: 4px solid #e0e0e0; /* 浅灰色边框 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 可选：添加轻微阴影增强立体感 */
}

.leaf-nav-title[b-hp5r8f3kt0] {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 6px 0 6px 0;
    border-bottom: 1px solid #e1e5e9;
    text-align: center;
}

.leaf-nav-item[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a5568;
    font-size: 0.8rem;
    text-align: left;
    border: 1px solid transparent;
    margin:5px 0 5px 0;
}

    .leaf-nav-item:hover[b-hp5r8f3kt0] {
        background: #FFC000;/*#f8f9fa;*/
        color: #2c3e50;
    }

.leaf-nav-active[b-hp5r8f3kt0] {
    background: #6B46C1;
    color: #ffffff;
    border-color: #6B46C1;
}

    .leaf-nav-active .leaf-nav-icon[b-hp5r8f3kt0] {
        color: #ffffff;
    }

.leaf-nav-icon[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    width: 1.1rem;
    text-align: center;
    color: #718096;
}

.leaf-nav-text[b-hp5r8f3kt0] {
    font-weight: 600;
    font-size: 1.1rem;
    margin-left:10px;
}

/* ===== 右侧区域样式 ===== */
.leaf-admin-right[b-hp5r8f3kt0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin: 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

/* ===== 内容面板通用样式 ===== */
.leaf-admin-panel[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;

}

/* 面板头部 - 简洁设计 */
.leaf-panel-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 30px 8px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #ffffff;
    flex-shrink: 0;
    min-height: 70px;
}

.leaf-panel-title[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 700;
}

.leaf-panel-actions[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaf-action-buttons[b-hp5r8f3kt0] {
    display: flex;
    gap: 8px;
}

.leaf-results-info[b-hp5r8f3kt0] {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
}

.leaf-count[b-hp5r8f3kt0] {
    background: #6B46C1;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* ===== 查询条件区域 - 简洁设计 ===== */
.leaf-query-filters[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 4px solid #6B46C1;
    /*#e1e5e9;*/
    background: #f8f9fa;
    flex-shrink: 0;
}

.leaf-filter-row[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

    .leaf-filter-row:last-child[b-hp5r8f3kt0] {
        margin-bottom: 0;
    }

.leaf-filter-group.compact[b-hp5r8f3kt0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-filter-label[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    min-width: 70px;
    flex-shrink: 0;
}

.leaf-filter-controls[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/*分类选项*/
.leaf-filter-controls-Cate[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    margin-left:10px;
}

.leaf-select-input-Cate[b-hp5r8f3kt0] {
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 150px;
    transition: all 0.2s ease;
    gap: 20px;
}

/*其他统一设置*/
.leaf-date-group[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.leaf-date-label[b-hp5r8f3kt0] {
    font-size: 0.8rem;
    color: #6c757d;
    min-width: 30px;
    font-weight: 500;
}

.leaf-date-input[b-hp5r8f3kt0],
.leaf-text-input[b-hp5r8f3kt0],
.leaf-select-input[b-hp5r8f3kt0] {
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 120px;
    transition: all 0.2s ease;
}

    .leaf-date-input:focus[b-hp5r8f3kt0],
    .leaf-text-input:focus[b-hp5r8f3kt0],
    .leaf-select-input:focus[b-hp5r8f3kt0] {
        outline: none;
        border-color: #6B46C1;
    }

.leaf-text-input-Conent[b-hp5r8f3kt0]{
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 340px;
    transition: all 0.2s ease;
}

.leaf-checkbox-label.compact[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
    margin-left:20px;
}

.leaf-checkbox-text[b-hp5r8f3kt0] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===== 查询结果区域 ===== */
.leaf-query-results[b-hp5r8f3kt0] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: #f8f9fa;
}

.leaf-messages-list[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 消息项样式 - 简洁设计 */
.leaf-message-item[b-hp5r8f3kt0] {
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

    .leaf-message-item:hover[b-hp5r8f3kt0] {
        border-color: #cbd5e0;
    }

.leaf-message-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f3f4;
}

.leaf-message-meta[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

.leaf-message-status[b-hp5r8f3kt0] {
    display: flex;
    gap: 4px;
}

.leaf-read-status[b-hp5r8f3kt0] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

    .leaf-read-status.read[b-hp5r8f3kt0] {
        background: #C6F6D5;
        color: #22543D;
    }

    .leaf-read-status.unread[b-hp5r8f3kt0] {
        background: #FED7D7;
        color: #742A2A;
    }

.leaf-message-content[b-hp5r8f3kt0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.leaf-sender-badge[b-hp5r8f3kt0] {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

    .leaf-sender-badge.visitor[b-hp5r8f3kt0] {
        background: #EBF8FF;
        color: #2B6CB0;
    }

    .leaf-sender-badge.agent[b-hp5r8f3kt0] {
        background: #F0FFF4;
        color: #276749;
    }

.leaf-content-text[b-hp5r8f3kt0] {
    flex: 1;
    line-height: 1.4;
    color: #2c3e50;
    font-size: 0.85rem;
    padding: 2px 0;
}

.leaf-message-actions[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid #f1f3f4;
}

.leaf-category-edit[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-category-label[b-hp5r8f3kt0] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
}

.leaf-category-select[b-hp5r8f3kt0] {
    padding: 4px 6px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 100px;
    font-weight: 500;
}

.leaf-category-badge[b-hp5r8f3kt0] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

    .leaf-category-badge.follow[b-hp5r8f3kt0] {
        background: #FFFBEB;
        color: #744210;
    }

    .leaf-category-badge.important[b-hp5r8f3kt0] {
        background: #F0FFF4;
        color: #22543D;
    }

    .leaf-category-badge.urgent[b-hp5r8f3kt0] {
        background: #FED7D7;
        color: #742A2A;
    }

    .leaf-category-badge.other[b-hp5r8f3kt0] {
        background: #EDF2F7;
        color: #2D3748;
    }

/* ===== 按钮样式系统 - 简洁设计 ===== */
.leaf-btn[b-hp5r8f3kt0] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.0rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #ffffff;
    min-width:130px;
}

.leaf-primary-btn[b-hp5r8f3kt0] {
    background: #6B46C1;
}

    .leaf-primary-btn:hover[b-hp5r8f3kt0] {
        background: #553C9A;
    }

.leaf-export-btn[b-hp5r8f3kt0] {
    background: #38A169;
}

    .leaf-export-btn:hover[b-hp5r8f3kt0] {
        background: #2F855A;
    }

.leaf-danger-btn[b-hp5r8f3kt0] {
    background: #E53E3E;
}

    .leaf-danger-btn:hover:not(:disabled)[b-hp5r8f3kt0] {
        background: #C53030;
    }

    .leaf-danger-btn:disabled[b-hp5r8f3kt0] {
        background: #A0AEC0;
        cursor: not-allowed;
    }

.leaf-secondary-btn[b-hp5r8f3kt0] {
    background: #718096;
}

    .leaf-secondary-btn:hover[b-hp5r8f3kt0] {
        background: #4A5568;
    }

.leaf-save-btn[b-hp5r8f3kt0] {
    background: #38A169;
    padding: 4px 8px;
    font-size: 0.8rem;
}

    .leaf-save-btn:hover[b-hp5r8f3kt0] {
        background: #2F855A;
    }

.leaf-btn-icon[b-hp5r8f3kt0] {
    font-size: 1.0rem;
}

/* ===== 消息操作按钮区域 ===== */
.leaf-message-action-buttons[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-deleted-btn[b-hp5r8f3kt0] {
    background: #A0AEC0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

.leaf-btn-disabled[b-hp5r8f3kt0] {
    background: #A0AEC0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

/* ===== 空状态样式 - 简洁设计 ===== */
.leaf-empty-state[b-hp5r8f3kt0] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    background: #ffffff;
    border-radius: 4px;
    border: 1px dashed #e1e5e9;
}

.leaf-empty-icon[b-hp5r8f3kt0] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.leaf-empty-text[b-hp5r8f3kt0] {
    font-size: 1rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.leaf-empty-subtext[b-hp5r8f3kt0] {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* ===== 数据清理面板样式 ===== */
.leaf-cleanup-filters[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.leaf-cleanup-warning[b-hp5r8f3kt0] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFBEB;
    border: 1px solid #F6E05E;
    border-radius: 4px;
    margin-bottom: 10px;
}

.leaf-warning-icon[b-hp5r8f3kt0] {
    font-size: 1.2rem;
    color: #D69E2E;
}

.leaf-warning-content[b-hp5r8f3kt0] {
    flex: 1;
}

    .leaf-warning-content strong[b-hp5r8f3kt0] {
        color: #744210;
        font-size: 0.85rem;
    }

    .leaf-warning-content p[b-hp5r8f3kt0] {
        margin: 4px 0 0 0;
        color: #744210;
        font-size: 0.8rem;
    }

.leaf-cleanup-preview[b-hp5r8f3kt0] {
    padding: 8px 12px;
    background: #F0FFF4;
    border: 1px solid #9AE6B4;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 0.85rem;
}

.leaf-cleanup-result[b-hp5r8f3kt0] {
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 0.85rem;
    border: 1px solid;
}

    .leaf-cleanup-result.success[b-hp5r8f3kt0] {
        background: #F0FFF4;
        border-color: #9AE6B4;
        color: #22543D;
    }

    .leaf-cleanup-result.error[b-hp5r8f3kt0] {
        background: #FED7D7;
        border-color: #FC8181;
        color: #742A2A;
    }

/* ===== 分类统计面板样式 ===== */
.leaf-stats-controls[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right:20px;
}

.leaf-stats-type[b-hp5r8f3kt0] {
    display: flex;
    gap: 10px;
    background: #f8f9fa;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
}

.leaf-radio-label[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background 0.2s ease;
}

    .leaf-radio-label:hover[b-hp5r8f3kt0] {
        background: rgba(107, 70, 193, 0.1);
    }

.leaf-radio-text[b-hp5r8f3kt0] {
    font-size: 1.0rem;
    color: #6c757d;
    font-weight: 500;
}

/* 统计卡片样式 - 简洁设计 */
.leaf-stats-grid[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 12px;
    padding: 0 16px;
}

.leaf-stat-card[b-hp5r8f3kt0] {
    background: #ffffff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
    transition: transform 0.2s ease;
}

    .leaf-stat-card:hover[b-hp5r8f3kt0] {
        transform: translateY(-1px);
    }

    .leaf-stat-card.follow[b-hp5r8f3kt0] {
        border-left: 3px solid #D69E2E;
        background: #FFFBEB;
    }

    .leaf-stat-card.important[b-hp5r8f3kt0] {
        border-left: 3px solid #38A169;
        background: #F0FFF4;
    }

    .leaf-stat-card.urgent[b-hp5r8f3kt0] {
        border-left: 3px solid #E53E3E;
        background: #FED7D7;
    }

    .leaf-stat-card.other[b-hp5r8f3kt0] {
        border-left: 3px solid #718096;
        background: #EDF2F7;
    }

    .leaf-stat-card.default[b-hp5r8f3kt0] {
        border-left: 3px solid #6B46C1;
        background: #EBF4FF;
    }

.leaf-stat-card-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.leaf-stat-card-title[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.8rem;
}

.leaf-stat-card-value[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}

.leaf-stat-card-progress[b-hp5r8f3kt0] {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.leaf-progress-bar[b-hp5r8f3kt0] {
    height: 100%;
    background: #6B46C1;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.leaf-stat-card-percentage[b-hp5r8f3kt0] {
    text-align: right;
    font-size: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

/* 状态分布样式 */
.leaf-status-section[b-hp5r8f3kt0] {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 0 16px 16px;
    border: 1px solid #e1e5e9;
}

.leaf-section-title[b-hp5r8f3kt0] {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.leaf-status-grid[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.leaf-status-item[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    transition: transform 0.2s ease;
    font-size: 0.8rem;
    border: 1px solid #e1e5e9;
}

    .leaf-status-item:hover[b-hp5r8f3kt0] {
        transform: translateX(2px);
    }

    .leaf-status-item.pending[b-hp5r8f3kt0] {
        border-left: 2px solid #ffc107;
        background: #fff9e6;
    }

    .leaf-status-item.active[b-hp5r8f3kt0] {
        border-left: 2px solid #28a745;
        background: #e8f5e8;
    }

    .leaf-status-item.closed[b-hp5r8f3kt0] {
        border-left: 2px solid #6c757d;
        background: #f8f9fa;
    }

.leaf-status-name[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
}

.leaf-status-count[b-hp5r8f3kt0] {
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    color: #2c3e50;
    font-size: 0.8rem;
    border: 1px solid #e1e5e9;
}

/* ===== 消息删除相关样式 ===== */
.leaf-message-deleted[b-hp5r8f3kt0] {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    opacity: 0.6;
}

.leaf-delete-preview[b-hp5r8f3kt0] {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    border: 1px solid #e1e5e9;
}

.leaf-delete-content[b-hp5r8f3kt0] {
    margin: 6px 0;
    padding: 8px;
    background: white;
    border-radius: 3px;
    border-left: 2px solid #E53E3E;
    font-style: italic;
    color: #4a5568;
    font-size: 0.85rem;
}

.leaf-delete-meta[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===== 操作提示样式 ===== */
.leaf-alert-overlay[b-hp5r8f3kt0] {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2000;
    animation: slideInRight-b-hp5r8f3kt0 0.3s ease-out;
}

.leaf-alert[b-hp5r8f3kt0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 400px;
    border: 1px solid;
}

.leaf-alert-success[b-hp5r8f3kt0] {
    background: #F0FFF4;
    border-color: #9AE6B4;
    color: #22543D;
}

.leaf-alert-error[b-hp5r8f3kt0] {
    background: #FED7D7;
    border-color: #FC8181;
    color: #742A2A;
}

.leaf-alert-icon[b-hp5r8f3kt0] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.leaf-alert-content[b-hp5r8f3kt0] {
    flex: 1;
}

    .leaf-alert-content h4[b-hp5r8f3kt0] {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .leaf-alert-content p[b-hp5r8f3kt0] {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.4;
    }

.leaf-alert-close[b-hp5r8f3kt0] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    margin-left: 4px;
}

    .leaf-alert-close:hover[b-hp5r8f3kt0] {
        opacity: 1;
    }

@keyframes slideInRight-b-hp5r8f3kt0 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== 模态框样式 ===== */
.leaf-modal-overlay[b-hp5r8f3kt0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.leaf-modal[b-hp5r8f3kt0] {
    background: #ffffff;
    border-radius: 6px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid #e1e5e9;
    overflow: hidden;
}

.leaf-modal-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
    color: #2c3e50;
}

.leaf-modal-close[b-hp5r8f3kt0] {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaf-modal-body[b-hp5r8f3kt0] {
    padding: 16px;
}

.leaf-modal-footer[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-top: 1px solid #e1e5e9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1024px) {
    .leaf-admin-container[b-hp5r8f3kt0] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .leaf-admin-left[b-hp5r8f3kt0] {
        width: 100%;
        max-width: none;
        min-width: auto;
    }

    .leaf-admin-right[b-hp5r8f3kt0] {
        margin: 8px;
    }

    .leaf-filter-row[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
    }

    .leaf-filter-group.compact[b-hp5r8f3kt0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaf-filter-controls[b-hp5r8f3kt0] {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .leaf-panel-header[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 8px 12px;
    }

    .leaf-panel-actions[b-hp5r8f3kt0] {
        width: 100%;
        justify-content: space-between;
    }

    .leaf-admin-stats[b-hp5r8f3kt0] {
        grid-template-columns: 1fr;
    }

    .leaf-message-actions[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .leaf-category-edit[b-hp5r8f3kt0] {
        flex-wrap: wrap;
    }

    .leaf-message-action-buttons[b-hp5r8f3kt0] {
        width: 100%;
        justify-content: space-between;
    }

    .leaf-alert-overlay[b-hp5r8f3kt0] {
        left: 12px;
        right: 12px;
    }

    .leaf-alert[b-hp5r8f3kt0] {
        min-width: auto;
        max-width: none;
    }

    .leaf-stats-grid[b-hp5r8f3kt0] {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

    .leaf-status-section[b-hp5r8f3kt0] {
        margin: 0 12px 12px;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatAgentPanel.razor.rz.scp.css */
/* ChatAgentPanel.razor.css - 客服工作台样式 */
/* 设计理念：现代化客服界面，清晰的视觉层次 */

/* ===== CSS变量定义 ===== */
:root[b-gnmnyqoj5r] {
    /* ===== 字体大小参数 ===== */
    /* 消息内容字体大小 - 控制聊天对话框中消息文本的字号 */
    --leaf-message-font-size: 1.1rem;
    /* 输入框字体大小 - 控制客服回复输入框中的文本字号 */
    --leaf-input-font-size: 1.1rem;

    /* ===== 间距参数 ===== */
    /* 消息行间距 - 控制聊天对话框中各条消息之间的垂直间距 */
    --leaf-message-line-spacing: 0.5rem;

    /* ===== 消息背景色 ===== */
    /* 访客消息背景色 - 控制客户发送消息的气泡背景颜色（浅蓝色） */
    --leaf-message-sent-bg: #E3F2FD;
    /* 客服消息背景色 - 控制客服发送消息的气泡背景颜色（浅紫色） */
    --leaf-message-received-bg: #F3E5F5;

    /* ===== 字体粗细参数 ===== */
    /* 细体字重 - 用于次要文本、说明文字等 */
    --leaf-font-weight-light: 400;
    /* 正常字重 - 用于正文文本、普通内容 */
    --leaf-font-weight-normal: 400;
    /* 中等字重 - 用于按钮文字、标签等需要强调的内容 */
    --leaf-font-weight-medium: 500;
    /* 半粗体字重 - 用于小标题、重要信息 */
    --leaf-font-weight-semibold: 600;
    /* 粗体字重 - 用于主要标题、关键数据 */
    --leaf-font-weight-bold: 700;
    /* 特粗体字重 - 用于品牌名称、重要标识 */
    --leaf-font-weight-extrabold: 800;
}

/* ===== 【A：标题区】 ===== */
.leaf-agent-dashboard[b-gnmnyqoj5r] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #334155;
    overflow: hidden;
}

.leaf-agent-header[b-gnmnyqoj5r] {
    background: white;
    border-bottom: 5px solid #8B0000; /* 深红色粗线 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.leaf-header-content[b-gnmnyqoj5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    max-width: 100%;
}

.leaf-brand-section[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.leaf-brand-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.5rem;
    /*font-weight: var(--leaf-font-weight-extrabold);*/ /* 使用变量定义字重 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #006400;
    font-weight: 700;
}

.leaf-brand-icon[b-gnmnyqoj5r] {
    font-size: 1.8rem;
    color: #006400;
}

.leaf-agent-id-display[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.3rem;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 1;
    min-width: 30px;
    overflow: hidden;
    margin-top:10px;
}

.leaf-agent-id-label[b-gnmnyqoj5r] {
    color: #0369a1;
    font-weight: var(--leaf-font-weight-semibold);
}

.leaf-agent-id-value[b-gnmnyqoj5r] {
    color: #0c4a6e;
    font-family: monospace;
    font-weight: var(--leaf-font-weight-light);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.leaf-stats-panel[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
}

.leaf-stat-item[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.leaf-stat-label[b-gnmnyqoj5r] {
    font-size: 1.0rem;
    color: #000000;
    font-weight: var(--leaf-font-weight-light);
}

.leaf-stat-value[b-gnmnyqoj5r] {
    font-size: 1.3rem;
    font-weight: 500;
    color: #006400;
}

.leaf-stat-divider[b-gnmnyqoj5r] {
    width: 2px;
    height: 20px;
    background-color: #E6F3FF;
    margin: 0 8px;
    border: none;
}

.leaf-service-controls[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
}

.leaf-service-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    font-family: inherit;
}

.leaf-start-service[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

    .leaf-start-service:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #059669, #047857);
    }

.leaf-stop-service[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

    .leaf-stop-service:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
    }

.leaf-reset-all[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

    .leaf-reset-all:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

.leaf-service-status[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-service-active[b-gnmnyqoj5r] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.leaf-service-inactive[b-gnmnyqoj5r] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.leaf-status-dot[b-gnmnyqoj5r] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.leaf-service-active .leaf-status-dot[b-gnmnyqoj5r] {
    background: #16a34a;
    animation: pulse-b-gnmnyqoj5r 2s infinite;
}

.leaf-service-inactive .leaf-status-dot[b-gnmnyqoj5r] {
    background: #9ca3af;
}

@keyframes pulse-b-gnmnyqoj5r {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* ===== 【B：交流内容区】 ===== */
.leaf-agent-main[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #e2e8f0;
    margin-top: 5px;
}

/* ===== 【B-左: 客户清单面板-左侧】 ===== */
.leaf-sessions-panel[b-gnmnyqoj5r] {
    width: 40%;
    min-width: 250px;
    background: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    overflow: hidden;
}

.leaf-panel-header[b-gnmnyqoj5r] {
    padding: 0.1rem 3rem 0.2rem 1rem;
    border-bottom: 2px solid #666666; /* 修改：使用更细的深灰色边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.leaf-panel-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--leaf-font-weight-semibold);
    color: #0f172a;
}

.leaf-refresh-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem 1.0rem 0.2rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    /*background: white;*/
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: var(--leaf-font-weight-medium);
}

    .leaf-refresh-btn:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #059669, #047857);
        border-color: #cbd5e1;
    }

.leaf-sessions-container[b-gnmnyqoj5r] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaf-session-item[b-gnmnyqoj5r] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .leaf-session-item:hover[b-gnmnyqoj5r] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .leaf-session-item.leaf-session-active[b-gnmnyqoj5r] {
        border-color: #0ea5e9;
        background: #f0f9ff;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
    }

.leaf-session-status[b-gnmnyqoj5r] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.leaf-status-text[b-gnmnyqoj5r] {
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-waiting .leaf-status-text[b-gnmnyqoj5r] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.status-active .leaf-status-text[b-gnmnyqoj5r] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.status-closed .leaf-status-text[b-gnmnyqoj5r] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.leaf-session-content[b-gnmnyqoj5r] {
    margin-right: 70px;
}

.leaf-visitor-info[b-gnmnyqoj5r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.leaf-visitor-name[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem; /* 客户名字体大小 */
    font-weight: var(--leaf-font-weight-semibold); /* 客户名字重：中等粗细 */
    color: #0f172a;
}

.leaf-message-count[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
}

.leaf-count-badge[b-gnmnyqoj5r] {
    padding: 0.15rem 0.4rem;
    background: #0ea5e9;
    color: white;
    border-radius: 8px;
    font-size: 0.7rem; /* 消息数字体大小 */
    font-weight: var(--leaf-font-weight-semibold); /* 消息数字重：中等粗细 */
    min-width: 16px;
    text-align: center;
}

.leaf-session-time[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 时间字体大小 */
    font-weight: var(--leaf-font-weight-normal); /* 时间字重：正常 */
    color: #64748b;
    margin-bottom: 0.4rem;
}

.leaf-session-detail[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 详情字体大小 */
    color: #475569;
    line-height: 1.2;
}

.leaf-detail-label[b-gnmnyqoj5r] {
    color: #64748b;
    font-weight: var(--leaf-font-weight-medium); /* 标签字重：中等 */
}

.leaf-detail-text[b-gnmnyqoj5r] {
    display: block;
    color: #475569;
    font-weight: var(--leaf-font-weight-normal); /* 详情文字字重：正常 */
}

.leaf-last-message[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 最后消息字体大小 */
    color: #475569;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: var(--leaf-font-weight-normal); /* 最后消息字重：正常 */
}

.leaf-agent-info[b-gnmnyqoj5r] {
    font-size: 0.7rem; /* 客服信息字体大小 */
    color: #64748b;
    margin-top: 0.25rem;
}

.leaf-agent-label[b-gnmnyqoj5r] {
    font-weight: var(--leaf-font-weight-medium); /* 客服标签字重：中等 */
}

.leaf-agent-id[b-gnmnyqoj5r] {
    font-family: monospace;
    background: #f1f5f9;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: var(--leaf-font-weight-normal); /* 客服ID字重：正常 */
}

.leaf-empty-state[b-gnmnyqoj5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.leaf-empty-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.leaf-empty-text[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}


/* 新增样式 */
.leaf-agent-connection[b-gnmnyqoj5r] {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.leaf-user-id[b-gnmnyqoj5r] {
    margin-top: -5px;
}

.leaf-user-id-badge[b-gnmnyqoj5r] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    border: 1px solid #bbdefb;
}

.leaf-client-badge[b-gnmnyqoj5r] {
    background: #fff3e0;
    color: #f57c00;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.8em;
    margin-left: 5px;
    border: 1px solid #ffe0b2;
}

/* ===== 【B右: 聊天对话面板-右侧】 ===== */
.leaf-chat-panel[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    min-width: 300px;
    overflow: hidden;
    margin-left: 5px;
}

.leaf-conversation-container[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ===== 【C-1：接管失败警告标识】 ===== */
.leaf-takeover-alert[b-gnmnyqoj5r] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 6px;
    margin: 0.5rem;
    padding: 0.5rem;
    animation: slideInDown-b-gnmnyqoj5r 0.3s ease;
}

.leaf-alert-content[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leaf-alert-icon[b-gnmnyqoj5r] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.leaf-alert-text[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .leaf-alert-text strong[b-gnmnyqoj5r] {
        color: #dc2626;
        font-size: 0.9rem;
        font-weight: var(--leaf-font-weight-semibold);
    }

    .leaf-alert-text span[b-gnmnyqoj5r] {
        color: #7c2d12;
        font-size: 0.8rem;
        font-weight: var(--leaf-font-weight-normal);
    }

.leaf-alert-close[b-gnmnyqoj5r] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

    .leaf-alert-close:hover[b-gnmnyqoj5r] {
        background: #f3f4f6;
        color: #374151;
    }

@keyframes slideInDown-b-gnmnyqoj5r {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== 【C-2：交流按钮控制区】 ===== */
.leaf-chat-header[b-gnmnyqoj5r] {
    padding: 0.1rem 2rem 0.3rem 1rem;
    border-bottom: 2px solid #666666; /* 修改：使用更细的深灰色边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.leaf-chat-info[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leaf-chat-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--leaf-font-weight-semibold);
    color: #0f172a;
}

    .leaf-chat-title strong[b-gnmnyqoj5r] {
        color: #0ea5e9;
    }

.leaf-chat-status[b-gnmnyqoj5r] {
    padding: 0.3rem 0.3rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
}

    .leaf-chat-status.pending[b-gnmnyqoj5r] {
        background: #fef3c7;
        color: #92400e;
    }

    .leaf-chat-status.active[b-gnmnyqoj5r] {
        background: #dcfce7;
        color: #166534;
    }

.leaf-agent-badge[b-gnmnyqoj5r] {
    font-size: 0.7rem;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    margin-left: 0.5rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-chat-actions[b-gnmnyqoj5r] {
    display: flex;
    gap: 2rem;
}

.leaf-action-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    font-family: inherit;
}

.leaf-take-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
}

    .leaf-take-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #0284c7, #0891b2);
    }

    .leaf-take-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-close-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

    .leaf-close-btn:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
    }

.leaf-force-take-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: 1px solid #e55a2b;
}

    .leaf-force-take-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #e55a2b, #e08215);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
        border-color: #cc4a1f;
    }

    .leaf-force-take-btn:active[b-gnmnyqoj5r] {
        transform: translateY(0);
    }

    .leaf-force-take-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        border-color: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.leaf-cancel-takeover-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

    .leaf-cancel-takeover-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

    .leaf-cancel-takeover-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-btn-icon[b-gnmnyqoj5r] {
    font-size: 1.1rem;
}

.leaf-btn-text[b-gnmnyqoj5r] {
    font-weight: var(--leaf-font-weight-medium);
    font-size: 1.0rem;
}

/* ===== 【C-3:状态提示区域】 ===== */
.leaf-takeover-prompt[b-gnmnyqoj5r] {
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    margin: 1rem;
}

.leaf-prompt-content[b-gnmnyqoj5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.leaf-prompt-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    opacity: 0.7;
}

.leaf-prompt-text h3[b-gnmnyqoj5r] {
    margin: 0 0 0.5rem 0;
    color: #475569;
    font-weight: var(--leaf-font-weight-semibold);
}

.leaf-prompt-text p[b-gnmnyqoj5r] {
    margin: 0;
    color: #64748b;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 【C-4:消息显示区域】 ===== */
.leaf-messages-container[b-gnmnyqoj5r] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
    min-height: 0;
}

.leaf-message[b-gnmnyqoj5r] {
    display: flex;
    gap: 0.5rem;
    max-width: 85%;
    animation: slideIn-b-gnmnyqoj5r 0.2s ease;
}

@keyframes slideIn-b-gnmnyqoj5r {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leaf-visitor-msg[b-gnmnyqoj5r] {
    align-self: flex-start;
}

.leaf-agent-msg[b-gnmnyqoj5r] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-avatar[b-gnmnyqoj5r] {
    flex-shrink: 0;
}

.leaf-avatar[b-gnmnyqoj5r] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

    /* 客户头像样式 */
    .leaf-avatar.visitor[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #e0f2fe, #bae6fd);
        color: #0369a1;
    }

    /* 客服头像样式 - 修改：使用深绿色背景 */
    .leaf-avatar.agent[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #228B22, #006400); /* 修改：深绿色渐变背景 */
        color: white; /* 修改：白色图标，提高对比度 */
    }

/*消息框内容边界等设置*/
.leaf-message-bubble[b-gnmnyqoj5r] {
    padding: 0.3rem 1.2rem;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    border: 1px solid; /* 修改：边框从2px改为1px，变细 */
}

/* 客户消息样式 */
.leaf-visitor-msg .leaf-message-bubble[b-gnmnyqoj5r] {
    background: var(--leaf-message-sent-bg);
    border-color: #64B5F6;
    color: #212121;
    border-bottom-left-radius: 4px;
}

/* 客服消息样式 */
.leaf-agent-msg .leaf-message-bubble[b-gnmnyqoj5r] {
    background: var(--leaf-message-received-bg);
    border-color: #81C784;
    color: #212121;
    border-bottom-right-radius: 4px;
}

.leaf-message-content[b-gnmnyqoj5r] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    word-wrap: break-word;
    margin-bottom: 0.25rem;
    font-weight: var(--leaf-font-weight-normal); /* 消息内容字重：正常 */
}

.leaf-message-time[b-gnmnyqoj5r] {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: var(--leaf-font-weight-normal); /* 消息时间字重：正常 */
}

.leaf-visitor-msg .leaf-message-time[b-gnmnyqoj5r] {
    text-align: left;
    color: #546E7A;
}

.leaf-agent-msg .leaf-message-time[b-gnmnyqoj5r] {
    text-align: right;
    color: #546E7A;
}

.leaf-read-badge[b-gnmnyqoj5r] {
    font-size: 0.7rem;
    background: #dcfce7;
    color: #166534;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-chat-empty[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaf-chat-welcome[b-gnmnyqoj5r] {
    text-align: center;
    padding: 1.5rem;
    color: #94a3b8;
}

.leaf-welcome-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.leaf-chat-welcome h3[b-gnmnyqoj5r] {
    margin: 0 0 0.25rem 0;
    color: #64748b;
    font-weight: var(--leaf-font-weight-semibold);
    font-size: 1.2rem;
}

.leaf-chat-welcome p[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 【C-5:销售输入区域】 ===== */
.leaf-input-section[b-gnmnyqoj5r] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: white;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.leaf-input-container[b-gnmnyqoj5r] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.25rem;
}

.leaf-message-input[b-gnmnyqoj5r] {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: var(--leaf-input-font-size);
    resize: vertical;
    min-height: 80px;
    max-height: 120px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f8fafc;
    line-height: 1.3;
    color: #212121;
    font-weight: var(--leaf-font-weight-normal); /* 输入框字重：正常 */
}

    .leaf-message-input:focus[b-gnmnyqoj5r] {
        outline: none;
        border-color: #0ea5e9;
        box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
        background: white;
    }

.leaf-send-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.9rem;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    min-width: 60px;
    justify-content: center;
}

    .leaf-send-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #0284c7, #0891b2);
    }

    .leaf-send-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-send-icon[b-gnmnyqoj5r] {
    font-size: 2.0rem;
}

.leaf-input-hint[b-gnmnyqoj5r] {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: var(--leaf-font-weight-normal);
}

.leaf-input-disabled[b-gnmnyqoj5r] {
    padding: 1.5rem;
    text-align: center;
    background: #f1f5f9;
    border-radius: 8px;
    margin: 0 1rem 1rem 1rem;
}

.leaf-disabled-message[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-disabled-icon[b-gnmnyqoj5r] {
    font-size: 1.2rem;
}

.leaf-no-selection[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaf-selection-empty[b-gnmnyqoj5r] {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

.leaf-empty-illustration[b-gnmnyqoj5r] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.leaf-empty-heading[b-gnmnyqoj5r] {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-weight: var(--leaf-font-weight-semibold);
    font-size: 1.2rem;
}

.leaf-empty-subtitle[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 滚动条样式 ===== */
.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar {
    width: 12px;
}

.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-track,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb:hover,
    .leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* ===== 响应式设计 ===== */
@media (max-width: 1024px) {
    .leaf-sessions-panel[b-gnmnyqoj5r] {
        width: 30%;
        min-width: 250px;
    }

    .leaf-chat-panel[b-gnmnyqoj5r] {
        width: 65%;
    }
}

@media (max-width: 768px) {
    .leaf-agent-main[b-gnmnyqoj5r] {
        flex-direction: column;
    }

    .leaf-sessions-panel[b-gnmnyqoj5r] {
        width: 100%;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .leaf-chat-panel[b-gnmnyqoj5r] {
        width: 100%;
        height: 60vh;
    }

    .leaf-header-content[b-gnmnyqoj5r] {
        padding: 0.5rem 1rem;
    }

    .leaf-stats-panel[b-gnmnyqoj5r] {
        gap: 0.5rem;
    }

    .leaf-stat-value[b-gnmnyqoj5r] {
        font-size: 1rem;
    }

    .leaf-stat-label[b-gnmnyqoj5r] {
        font-size: 0.6rem;
    }

    .leaf-message[b-gnmnyqoj5r] {
        max-width: 90%;
    }

    .leaf-brand-section[b-gnmnyqoj5r] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .leaf-agent-header[b-gnmnyqoj5r] {
        padding: 0;
    }

    .leaf-header-content[b-gnmnyqoj5r] {
        padding: 0.5rem;
    }

    .leaf-brand-title[b-gnmnyqoj5r] {
        font-size: 1.1rem;
    }

    .leaf-session-item[b-gnmnyqoj5r] {
        padding: 0.6rem;
    }

    .leaf-session-content[b-gnmnyqoj5r] {
        margin-right: 60px;
    }

    .leaf-chat-header[b-gnmnyqoj5r] {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .leaf-chat-actions[b-gnmnyqoj5r] {
        width: 100%;
        justify-content: flex-end;
    }

    .leaf-message-bubble[b-gnmnyqoj5r] {
        padding: 0.4rem 0.6rem;
    }

    .leaf-input-container[b-gnmnyqoj5r] {
        flex-direction: column;
    }

    .leaf-send-btn[b-gnmnyqoj5r] {
        align-self: flex-end;
        width: 80px;
    }
}


/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatVisitorPage.razor.rz.scp.css */
/* ChatVisitorPage.razor.css - 简化版样式 */
/* 仅保留必要的CSS变量：字体大小、行间距、背景色 */

/* ===== CSS变量定义 ===== */
:root[b-ej49mlb1ul] {
    /* 字体大小：消息*/
    --leaf-message-font-size: 1.1rem;
    --leaf-input-font-size: 1.1rem;
    /* 消息行间距 */
    --leaf-message-line-spacing: 0.3rem;
    /* 消息背景色 */
    --leaf-message-sent-bg: #E3F2FD; /* 访客消息浅蓝色背景 */
    --leaf-message-received-bg: #F3E5F5; /* 客服消息浅紫色背景 */
    --leaf-message-system-bg: #FFF3E0; /* 系统消息浅橙色背景 */
}

/* ===== 基础重置和主容器 ===== */
.leaf-chat-container[b-ej49mlb1ul] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #F5F5F5;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #212121;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ===== 页面头部 ===== */
.leaf-chat-header[b-ej49mlb1ul] {
    background: #FFFFFF;
    border-bottom: 5px solid #8B0000;
    padding: 0.2rem 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.leaf-header-content[b-ej49mlb1ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    max-width: 100%;
}

.leaf-header-title[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #006400;
}

.leaf-header-icon[b-ej49mlb1ul] {
    font-size: 1.5rem;
    color: #4CAF50;
}

.leaf-header-title h1[b-ej49mlb1ul] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #006400; /* 墨绿色 */
}

.leaf-header-info[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.leaf-status-area[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    padding: 0.2rem 1.0rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 2px solid #E0E0E0;
}

.leaf-status-label[b-ej49mlb1ul] {
    font-size: 1.0rem;
    color: #616161;
    font-weight: 400;
}

.leaf-status-badge[b-ej49mlb1ul] {
    padding: 0.1rem 1.0rem;
    border-radius: 20px;
    font-size: 1.0rem;
    font-weight: 400;
    text-transform: capitalize;
    transition: all 0.3s ease;
    margin-left:-10px;
}

.leaf-status-connecting[b-ej49mlb1ul],
.leaf-status-waiting[b-ej49mlb1ul] {
    background: #FFF3E0;
    color: #EF6C00;
    border: 1px solid #FFB74D;
}

.leaf-status-connected[b-ej49mlb1ul] {
    background: #E8F5E9;
    color: #4CAF50;
    border: 1px solid #81C784;
}

.leaf-status-disconnected[b-ej49mlb1ul] {
    background: #FFEBEE;
    color: #F44336;
    border: 1px solid #E57373;
}

.leaf-session-info[b-ej49mlb1ul] {
    font-size: 0.85rem;
    color: #616161;
    font-family: monospace;
    background: #F5F5F5;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

/* ===== 聊天主内容区域 ===== */
.leaf-chat-main[b-ej49mlb1ul] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
    gap: 0.8rem;
    min-height: 0;
    margin-top:-10px;
}

/* ===== 消息显示区域 ===== */
.leaf-messages-section[b-ej49mlb1ul] {
    flex: 1;
    background: #FAFAFA;
    border-radius: 12px;
    border: 2px solid #757575;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.leaf-messages-container[b-ej49mlb1ul] {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
}

    /* 滚动条样式 */
    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar {
        width: 14px;
    }

    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-track {
        background: #EEEEEE;
        border-radius: 6px;
    }

    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb {
        background: #4CAF50;
        border-radius: 6px;
        border: 2px solid #EEEEEE;
    }

        .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb:hover {
            background: #388E3C;
        }

        .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb:active {
            background: #2E7D32;
        }

/* 消息项样式 */
.leaf-message[b-ej49mlb1ul] {
    display: flex;
    gap: 1rem;
    max-width: 80%;
}

.leaf-message-sent[b-ej49mlb1ul] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-received[b-ej49mlb1ul] {
    align-self: flex-start;
}

/* 消息头像 */
.leaf-message-avatar[b-ej49mlb1ul] {
    flex-shrink: 0;
}

.leaf-avatar[b-ej49mlb1ul] {
    width: 40px; /* 控制头像容器的宽度 */
    height: 40px; /* 控制头像容器的高度 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 这里控制图标的基础大小 */
    border: 2px solid transparent;
}

.leaf-avatar-user[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #81C784, #4CAF50);
    border-color: #388E3C;
}

.leaf-avatar-agent[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #64B5F6, #2196F3);
    border-color: #1976D2;
}

.leaf-avatar-system[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #FFE0B2, #FFB74D);
    border-color: #F57C00;
}

.leaf-avatar-icon[b-ej49mlb1ul] {
    color: #FFFFFF;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));

}

.leaf-avatar-system .leaf-avatar-icon[b-ej49mlb1ul] {
    color: #E65100;
}

/* 消息内容 */
.leaf-message-content[b-ej49mlb1ul] {
    flex: 1;
    min-width: 200px;
}

.leaf-message-header[b-ej49mlb1ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    padding: 0 0.5rem;
}

.leaf-message-sender[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    font-weight: 600;
    color: #616161;
}

.leaf-message-time[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    color: #9E9E9E;
}

.leaf-message-bubble[b-ej49mlb1ul] {
    padding: 0.4rem 1.2rem;
    border-radius: 16px;
    border: 2px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    color: #212121; /* 黑色字体 */
}

.leaf-message-sent .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-sent-bg);
    border-color: #64B5F6;
    border-bottom-right-radius: 6px;
}

.leaf-message-received .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-received-bg);
    border-color: #81C784;
    border-bottom-left-radius: 6px;
}

.leaf-message-system .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-system-bg);
    border-color: #FFB74D;
    color: #E65100;
}

.leaf-message-text[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    word-wrap: break-word;
}

.leaf-system-badge[b-ej49mlb1ul] {
    font-size: 0.7rem;
    background: #FF9800;
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    margin-top: 0.3rem;
    display: inline-block;
    font-weight: 500;
}


/* ===== 输入区域 ===== */
.leaf-input-section[b-ej49mlb1ul] {
    background: transparent;
    border-radius: 12px;
    border: 2px solid #BDBDBD;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    height: 25%;
}

.leaf-input-container[b-ej49mlb1ul] {
    flex: 1;
    display: flex;
    gap: 1.0rem;
    padding: 0.5rem;
    align-items: stretch;
}

.leaf-input-main[b-ej49mlb1ul] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    background: #FAFAFA;
    transition: all 0.3s ease;
}

    .leaf-input-main:focus-within[b-ej49mlb1ul] {
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

.leaf-message-input[b-ej49mlb1ul] {
    flex: 1;
    width: 100%;
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: var(--leaf-input-font-size);
    resize: none;
    font-family: inherit;
    color: #212121; /* 黑色字体 */
    line-height: 1.5;
    min-height: 60px;
    max-height: 150px;
    outline: none;
}

    .leaf-message-input:disabled[b-ej49mlb1ul] {
        background: #EEEEEE;
        color: #9E9E9E;
        cursor: not-allowed;
    }

    .leaf-message-input[b-ej49mlb1ul]::placeholder {
        color: #9E9E9E;
    }

.leaf-input-actions[b-ej49mlb1ul] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

.leaf-char-count[b-ej49mlb1ul] {
    font-size: 0.8rem;
    color: #9E9E9E;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

/* 发送按钮 */
.leaf-send-btn[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 1.0rem;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
    min-width: 80px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 2px solid #388E3C;
    align-self: flex-end;
    height: fit-content;
}

    .leaf-send-btn:hover:not(:disabled)[b-ej49mlb1ul] {
        background: linear-gradient(135deg, #388E3C, #2E7D32);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .leaf-send-btn:active[b-ej49mlb1ul] {
        transform: translateY(0);
    }

    .leaf-send-btn:disabled[b-ej49mlb1ul] {
        background: #BDBDBD;
        color: #9E9E9E;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        border-color: #BDBDBD;
    }

.leaf-send-icon[b-ej49mlb1ul] {
    font-size: 1.5rem;
}

.leaf-send-text[b-ej49mlb1ul] {
    font-weight: 600;
}

/* 输入区域底部 */
.leaf-input-footer[b-ej49mlb1ul] {
    padding: 0.08rem 1rem;
    background: #FAFAFA;
    border-top: 1px solid #E0E0E0;
}

.leaf-input-tip[b-ej49mlb1ul] {
    font-size: 0.9rem;
    color: #9E9E9E;
    text-align: center;
    display: block;
}

.leaf-warning-text[b-ej49mlb1ul] {
    color: #FF9800;
    font-weight: 500;
}

/* ===== 空状态 ===== */
.leaf-empty-state[b-ej49mlb1ul] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.leaf-empty-content[b-ej49mlb1ul] {
    text-align: center;
    max-width: 400px;
}

.leaf-empty-icon[b-ej49mlb1ul] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #4CAF50;
    opacity: 0.7;
}

.leaf-empty-title[b-ej49mlb1ul] {
    font-size: 1.3rem;
    color: #212121;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.leaf-empty-desc[b-ej49mlb1ul] {
    font-size: 0.95rem;
    color: #616161;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.leaf-connection-status[b-ej49mlb1ul] {
    margin-top: 1.5rem;
}

.leaf-status-indicator[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    border: 2px solid;
    font-size: 0.9rem;
}

.leaf-status-ready[b-ej49mlb1ul] {
    background: #E8F5E9;
    border-color: #81C784;
}

.leaf-status-connecting[b-ej49mlb1ul] {
    background: #FFF3E0;
    border-color: #FFB74D;
}

.leaf-status-icon[b-ej49mlb1ul] {
    font-size: 1rem;
}

.leaf-status-ready .leaf-status-icon[b-ej49mlb1ul] {
    color: #4CAF50;
}

.leaf-status-connecting .leaf-status-icon[b-ej49mlb1ul] {
    color: #FF9800;
}

.leaf-status-text[b-ej49mlb1ul] {
    color: #616161;
    font-weight: 500;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .leaf-header-content[b-ej49mlb1ul] {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    .leaf-header-info[b-ej49mlb1ul] {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }

    .leaf-status-area[b-ej49mlb1ul] {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .leaf-message[b-ej49mlb1ul] {
        max-width: 90%;
    }

    .leaf-input-container[b-ej49mlb1ul] {
        flex-direction: column;
    }

    .leaf-send-btn[b-ej49mlb1ul] {
        width: 100%;
        min-width: auto;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .leaf-chat-container[b-ej49mlb1ul] {
        height: 100vh;
    }

    .leaf-message[b-ej49mlb1ul] {
        max-width: 95%;
    }

    .leaf-message-content[b-ej49mlb1ul] {
        min-width: 160px;
    }

    .leaf-header-title h1[b-ej49mlb1ul] {
        font-size: 1.3rem;
    }

    .leaf-messages-section[b-ej49mlb1ul] {
        min-height: 150px;
    }

    .leaf-input-section[b-ej49mlb1ul] {
        min-height: 100px;
    }

    :root[b-ej49mlb1ul] {
        --leaf-message-font-size: 0.9rem;
        --leaf-input-font-size: 1rem;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatWidget.razor.rz.scp.css */
/* ChatWidget.razor.css - 优化悬浮聊天组件样式 */
/* ===== CSS变量定义 ===== */
:root[b-0kav0mxh3k] {
    --leaf-message-font-size: 0.9rem;
    --leaf-input-font-size: 0.9rem;
    --leaf-message-line-spacing: 0.2rem;
    --leaf-message-sent-bg: #E3F2FD;
    --leaf-message-received-bg: #F3E5F5;
    --leaf-message-system-bg: #FFF3E0;
}

/* ===== 主容器和悬浮按钮区域 ===== */
.leaf-chat-widget[b-0kav0mxh3k] {
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index: 1000;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 悬浮聊天按钮样式 */
.leaf-chat-toggle-button[b-0kav0mxh3k] {
    background: #8B0000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

    .leaf-chat-toggle-button:hover[b-0kav0mxh3k] {
        background: #FFD700;
        color: #000;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    }

.chat-icon[b-0kav0mxh3k] {
    font-size: 14px;
}

.chat-text[b-0kav0mxh3k] {
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ===== 聊天窗口主体区域 ===== */
.leaf-chat-window[b-0kav0mxh3k] {
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ddd;
}

.leaf-chat-expanded[b-0kav0mxh3k] {
    width: 500px;
}

/* ===== 窗口控制按钮区域 ===== */
.leaf-chat-controls[b-0kav0mxh3k] {
    display: flex;
    justify-content: flex-end;
    padding: 4px 6px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 2px;
    flex-shrink: 0;
}

/* 新增刷新按钮样式 */
.leaf-refresh-button[b-0kav0mxh3k] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s;
}

    .leaf-refresh-button:hover[b-0kav0mxh3k] {
        background: #e9ecef;
    }

.leaf-expand-button[b-0kav0mxh3k],
.leaf-close-button[b-0kav0mxh3k] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s;
}

    .leaf-expand-button:hover[b-0kav0mxh3k] {
        background: #e9ecef;
    }

.leaf-close-button[b-0kav0mxh3k] {
    font-size: 16px;
    color: #6c757d;
}

    .leaf-close-button:hover[b-0kav0mxh3k] {
        background: #dc3545;
        color: white;
    }

/* ===== 消息显示区域 - 占窗口3/4高度 ===== */
.leaf-messages-section[b-0kav0mxh3k] {
    flex: 3; /* 3/4 高度 */
    background: #FAFAFA;
    overflow: hidden;
    margin: 0;
}

.leaf-messages-container[b-0kav0mxh3k] {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
}

    /* 消息区域滚动条样式 */
    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar {
        width: 6px;
    }

    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

        .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

/* ===== 消息项样式区域 ===== */
.leaf-message[b-0kav0mxh3k] {
    display: flex;
    gap: 8px;
    max-width: 85%;
    align-items: flex-start;
}

.leaf-message-sent[b-0kav0mxh3k] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-received[b-0kav0mxh3k] {
    align-self: flex-start;
}

/* 消息头像样式 */
.leaf-message-avatar[b-0kav0mxh3k] {
    flex-shrink: 0;
    margin-top: 2px;
}

.leaf-avatar[b-0kav0mxh3k] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.leaf-avatar-user[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #81C784, #4CAF50);
    border-color: #388E3C;
}

.leaf-avatar-agent[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #64B5F6, #2196F3);
    border-color: #1976D2;
}

.leaf-avatar-system[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #FFE0B2, #FFB74D);
    border-color: #F57C00;
}

.leaf-avatar-icon[b-0kav0mxh3k] {
    color: #FFFFFF;
    font-size: 0.8rem;
}

/* 消息气泡样式 */
.leaf-message-bubble[b-0kav0mxh3k] {
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid;
    font-size: var(--leaf-message-font-size);
    line-height: 1.3;
    color: #212121;
    max-width: 100%;
    word-wrap: break-word;
}

.leaf-message-sent .leaf-message-bubble[b-0kav0mxh3k] {
    background: var(--leaf-message-sent-bg);
    border-color: #90CAF9;
    border-bottom-right-radius: 4px;
}

.leaf-message-received .leaf-message-bubble[b-0kav0mxh3k] {
    background: var(--leaf-message-received-bg);
    border-color: #CE93D8;
    border-bottom-left-radius: 4px;
}

.leaf-message-text[b-0kav0mxh3k] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.3;
}

.leaf-system-badge[b-0kav0mxh3k] {
    font-size: 0.6rem;
    background: #FF9800;
    color: white;
    padding: 1px 4px;
    border-radius: 6px;
    margin-top: 2px;
    display: inline-block;
    font-weight: 500;
}

/* ===== 输入区域 - 占窗口1/4高度 ===== */
.leaf-input-section[b-0kav0mxh3k] {
    flex: 1; /* 1/4 高度 */
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-height: 120px; /* 确保最小高度 */
}

.leaf-input-main[b-0kav0mxh3k] {
    flex: 1;
    margin-bottom: 6px;
}

.leaf-message-input[b-0kav0mxh3k] {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: var(--leaf-input-font-size);
    resize: none;
    font-family: inherit;
    color: #212121;
    line-height: 1.3;
    outline: none;
    box-sizing: border-box;
}

    .leaf-message-input:disabled[b-0kav0mxh3k] {
        background: #f5f5f5;
        color: #9E9E9E;
        cursor: not-allowed;
    }

    .leaf-message-input[b-0kav0mxh3k]::placeholder {
        color: #9E9E9E;
        font-size: 0.85rem;
    }

/* 输入区域底部操作栏 */
.leaf-input-footer[b-0kav0mxh3k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.leaf-input-actions[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.leaf-char-count[b-0kav0mxh3k] {
    font-size: 0.7rem;
    color: #9E9E9E;
    white-space: nowrap;
}

.leaf-input-tip[b-0kav0mxh3k] {
    font-size: 0.7rem;
    color: #9E9E9E;
    white-space: nowrap;
}

.leaf-warning-text[b-0kav0mxh3k] {
    color: #FF9800;
    font-weight: 500;
}

/* 发送按钮样式 */
.leaf-send-btn[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #FFD700; /* 金黄色背景 */
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .leaf-send-btn:hover:not(:disabled)[b-0kav0mxh3k] {
        background: #FFC400;
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .leaf-send-btn:active[b-0kav0mxh3k] {
        transform: translateY(0);
    }

    .leaf-send-btn:disabled[b-0kav0mxh3k] {
        background: #BDBDBD;
        color: #9E9E9E;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.leaf-send-icon[b-0kav0mxh3k] {
    font-size: 0.9rem;
}

.leaf-send-text[b-0kav0mxh3k] {
    font-weight: 600;
}

/* ===== 空状态显示区域 ===== */
.leaf-empty-state[b-0kav0mxh3k] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.leaf-empty-content[b-0kav0mxh3k] {
    text-align: center;
    max-width: 300px;
}

.leaf-empty-icon[b-0kav0mxh3k] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #4CAF50;
    opacity: 0.7;
}

.leaf-empty-title[b-0kav0mxh3k] {
    font-size: 1rem;
    color: #212121;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.leaf-empty-desc[b-0kav0mxh3k] {
    font-size: 0.8rem;
    color: #616161;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.leaf-connection-status[b-0kav0mxh3k] {
    margin-top: 1rem;
}

.leaf-status-indicator[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.75rem;
}

.leaf-status-ready[b-0kav0mxh3k] {
    background: #E8F5E9;
    border-color: #81C784;
}

.leaf-status-connecting[b-0kav0mxh3k] {
    background: #FFF3E0;
    border-color: #FFB74D;
}

.leaf-status-icon[b-0kav0mxh3k] {
    font-size: 0.8rem;
}

.leaf-status-ready .leaf-status-icon[b-0kav0mxh3k] {
    color: #4CAF50;
}

.leaf-status-connecting .leaf-status-icon[b-0kav0mxh3k] {
    color: #FF9800;
}

.leaf-status-text[b-0kav0mxh3k] {
    color: #616161;
    font-weight: 500;
}

/* ===== 响应式设计区域 ===== */
@media (max-width: 480px) {
    .leaf-chat-widget[b-0kav0mxh3k] {
        bottom: 60px;
        right: 10px;
        left: 10px;
    }

    .leaf-chat-window[b-0kav0mxh3k] {
        width: auto;
        height: 450px;
    }

    .leaf-chat-expanded[b-0kav0mxh3k] {
        width: auto;
    }

    .leaf-chat-toggle-button[b-0kav0mxh3k] {
        width: auto;
        justify-content: center;
    }

    .leaf-message[b-0kav0mxh3k] {
        max-width: 90%;
    }

    .leaf-input-footer[b-0kav0mxh3k] {
        flex-direction: column;
        gap: 6px;
    }

    .leaf-input-actions[b-0kav0mxh3k] {
        justify-content: space-between;
        width: 100%;
    }

    .leaf-send-btn[b-0kav0mxh3k] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/ProductTypeManage.razor.rz.scp.css */
/* ProductTypeManage.razor.css - 产品管理组件样式 */

/* ====== 标题行样式 ====== */
.header-container[b-r9owcj6ezf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* 浅灰色背景 */
    padding: 6px 16px; /* 减少内边距 */
    margin: 4px 0; /* 减少外边距 */
    border-radius: 6px;
    border: 1px solid #dee2e6;
    flex-wrap: nowrap; /* 防止换行 */
    min-height: 50px; /* 确保最小高度 */
}

.header-left[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    min-width: 150px; /* 最小宽度 */
}

.header-center[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    display: flex;
    justify-content: center;
}

.header-right[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    display: flex;
    justify-content: flex-end;
    min-width: 120px; /* 最小宽度 */
}

/* 页面标题样式 */
.page-title[b-r9owcj6ezf] {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap; /* 防止标题换行 */
}

/* 统计信息样式 */
.count-info[b-r9owcj6ezf] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap; /* 防止统计信息换行 */
}

/* ====== 表格外层容器 - 水平滚动支持 ====== */
.table-outer-container[b-r9owcj6ezf] {
    width: 100%;
    overflow-x: auto; /* 水平滚动条 */
    margin-top: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

/* 表格容器 */
.table-container[b-r9owcj6ezf] {
    min-width: 800px; /* 最小宽度，确保在小屏幕上出现水平滚动 */
    width: 100%;
}

/* ====== 表格样式优化 ====== */
.table-responsive[b-r9owcj6ezf] {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
}

.table-custom[b-r9owcj6ezf] {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 800px; /* 确保表格有最小宽度 */
}

    .table-custom thead[b-r9owcj6ezf] {
        background: linear-gradient(135deg, #34495e, #2c3e50);
        position: sticky;
        top: 0; /* 表头固定 */
        z-index: 10;
    }

        .table-custom thead th[b-r9owcj6ezf] {
            color: white;
            font-weight: 600;
            padding: 12px 8px;
            border: none;
            font-size: 0.85rem;
            text-align: center; /* 表头文本居中 */
            vertical-align: middle;
            white-space: nowrap; /* 防止表头文本换行 */
        }

/* 表格行样式 */
.table-row[b-r9owcj6ezf] {
    height: 65px; /* 增加行高 */
    max-height: 80px; /* 最大高度限制 */
    transition: all 0.2s ease;
}

.table-custom tbody tr:hover[b-r9owcj6ezf] {
    background-color: #f8f9fa;
}

.table-custom tbody td[b-r9owcj6ezf] {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* ====== 产品名称列样式 ====== */
.product-name-cell[b-r9owcj6ezf] {
    min-width: 200px;
    max-width: 300px;
}

.product-name-content[b-r9owcj6ezf] {
    display: flex;
    flex-direction: column;
    max-height: 60px; /* 限制内容高度 */
    overflow: hidden; /* 超出的内容隐藏 */
}

.product-name-main[b-r9owcj6ezf] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.product-name-desc[b-r9owcj6ezf] {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 操作列样式 ====== */
.action-column[b-r9owcj6ezf] {
    width: 130px;
    min-width: 130px;
}

.action-buttons[b-r9owcj6ezf] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* 操作按钮样式 */
.btn-action[b-r9owcj6ezf] {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin: 0; /* 移除边距 */
    white-space: nowrap; /* 按钮文本不换行 */
}

.btn-edit[b-r9owcj6ezf] {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-edit:hover[b-r9owcj6ezf] {
        background-color: #e0a800;
        border-color: #d39e00;
        transform: translateY(-1px);
    }

.btn-delete[b-r9owcj6ezf] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-delete:hover[b-r9owcj6ezf] {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-1px);
    }

/* ====== 主要按钮样式 ====== */
.btn-primary-custom[b-r9owcj6ezf] {
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    border-radius: 6px;
    padding: 4px 16px;
    color: white;
    font-weight: 500;
    font-size: 1.0rem;
    transition: all 0.3s ease;
    white-space: nowrap; /* 按钮文本不换行 */
}

    .btn-primary-custom:hover[b-r9owcj6ezf] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        background: linear-gradient(45deg, #2980b9, #3498db);
    }

/* ====== 徽章样式 ====== */
.id-badge[b-r9owcj6ezf] {
    background: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.code-badge[b-r9owcj6ezf] {
    background: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-badge[b-r9owcj6ezf] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #28a745;
}

.currency-badge[b-r9owcj6ezf] {
    background: #17a2b8;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.created-date[b-r9owcj6ezf] {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ====== 状态容器样式 ====== */
.loading-container[b-r9owcj6ezf], .empty-container[b-r9owcj6ezf] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
}

/* ====== 模态框样式 ====== */
.modal-backdrop-custom[b-r9owcj6ezf] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content-custom[b-r9owcj6ezf] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header-custom[b-r9owcj6ezf] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title-custom[b-r9owcj6ezf] {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.modal-body-custom[b-r9owcj6ezf] {
    padding: 1.5rem;
}

.modal-footer-custom[b-r9owcj6ezf] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* ====== 表单样式 ====== */
.form-label-custom[b-r9owcj6ezf] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control-custom[b-r9owcj6ezf] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .form-control-custom:focus[b-r9owcj6ezf] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

/* ====== 文本对齐类 ====== */
.text-center[b-r9owcj6ezf] {
    text-align: center !important;
}

.text-end[b-r9owcj6ezf] {
    text-align: end !important;
}

.align-middle[b-r9owcj6ezf] {
    vertical-align: middle !important;
}

/* ====== 响应式设计 ====== */
@media (max-width: 1200px) {
    .table-outer-container[b-r9owcj6ezf] {
        overflow-x: auto; /* 在中等屏幕上启用水平滚动 */
    }

    .table-container[b-r9owcj6ezf] {
        min-width: 900px; /* 增加最小宽度 */
    }
}

@media (max-width: 768px) {
    .header-container[b-r9owcj6ezf] {
        flex-wrap: nowrap; /* 在小屏幕上也不换行 */
        overflow-x: auto; /* 如果内容过多，允许水平滚动 */
        padding: 8px;
    }

    .header-left[b-r9owcj6ezf],
    .header-center[b-r9owcj6ezf],
    .header-right[b-r9owcj6ezf] {
        flex-shrink: 0; /* 防止收缩 */
        margin-right: 10px;
    }

    .header-right[b-r9owcj6ezf] {
        margin-right: 0;
    }

    .page-title[b-r9owcj6ezf] {
        font-size: 1.2rem; /* 在小屏幕上稍微缩小标题 */
    }

    .action-buttons[b-r9owcj6ezf] {
        flex-direction: row; /* 保持按钮水平排列 */
        gap: 4px;
    }

    .action-column[b-r9owcj6ezf] {
        width: 120px;
        min-width: 120px;
    }

    .product-name-cell[b-r9owcj6ezf] {
        max-width: 150px;
        min-width: 150px;
    }

    .table-row[b-r9owcj6ezf] {
        height: auto;
        min-height: 60px;
    }

    .table-container[b-r9owcj6ezf] {
        min-width: 1000px; /* 在小屏幕上需要更大的最小宽度 */
    }
}

@media (max-width: 576px) {
    .header-container[b-r9owcj6ezf] {
        padding: 6px;
    }

    .page-title[b-r9owcj6ezf] {
        font-size: 1.1rem;
    }

    .count-info[b-r9owcj6ezf] {
        font-size: 0.8rem;
    }

    .btn-primary-custom[b-r9owcj6ezf] {
        padding: 4px 12px;
        font-size: 0.8rem;
    }
}

/* ====== 辅助类 ====== */
.visually-hidden[b-r9owcj6ezf] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/ProductTypeManage1.razor.rz.scp.css */
/* ProductTypeManage.razor.css - 产品分类管理组件样式 */

/* ====== 标题行样式 ====== */
.header-container[b-h9612m6xcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* 浅灰色背景 */
    padding: 8px 16px; /* 减少内边距 */
    margin: 8px 0; /* 减少外边距 */
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.header-left[b-h9612m6xcq] {
    flex: 1;
}

.header-center[b-h9612m6xcq] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-right[b-h9612m6xcq] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* 页面标题样式 */
.page-title[b-h9612m6xcq] {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 统计信息样式 */
.count-info[b-h9612m6xcq] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ====== 主要按钮样式 ====== */
.btn-primary-custom[b-h9612m6xcq] {
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .btn-primary-custom:hover[b-h9612m6xcq] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        background: linear-gradient(45deg, #2980b9, #3498db);
    }

/* ====== 表格样式优化 ====== */
.table-container[b-h9612m6xcq] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 8px;
}

.table-custom[b-h9612m6xcq] {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-custom thead[b-h9612m6xcq] {
        background: linear-gradient(135deg, #34495e, #2c3e50);
    }

        .table-custom thead th[b-h9612m6xcq] {
            color: white;
            font-weight: 600;
            padding: 12px 8px;
            border: none;
            font-size: 0.85rem;
        }

/* 表格行样式 */
.table-row[b-h9612m6xcq] {
    height: 65px; /* 增加行高 */
    max-height: 80px; /* 最大高度限制 */
    transition: all 0.2s ease;
}

.table-custom tbody tr:hover[b-h9612m6xcq] {
    background-color: #f8f9fa;
}

.table-custom tbody td[b-h9612m6xcq] {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* ====== 产品名称列样式 ====== */
.product-name-cell[b-h9612m6xcq] {
    max-width: 300px;
    min-width: 200px;
}

.product-name-content[b-h9612m6xcq] {
    display: flex;
    flex-direction: column;
    max-height: 60px; /* 限制内容高度 */
    overflow: hidden; /* 超出的内容隐藏 */
}

.product-name-main[b-h9612m6xcq] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.product-name-desc[b-h9612m6xcq] {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 操作列样式 ====== */
.action-column[b-h9612m6xcq] {
    width: 180px;
    min-width: 180px;
}

.action-buttons[b-h9612m6xcq] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* 操作按钮样式 */
.btn-action[b-h9612m6xcq] {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin: 0; /* 移除边距 */
}

.btn-edit[b-h9612m6xcq] {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-edit:hover[b-h9612m6xcq] {
        background-color: #e0a800;
        border-color: #d39e00;
        transform: translateY(-1px);
    }

.btn-delete[b-h9612m6xcq] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-delete:hover[b-h9612m6xcq] {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-1px);
    }

/* ====== 徽章样式 ====== */
.id-badge[b-h9612m6xcq] {
    background: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.code-badge[b-h9612m6xcq] {
    background: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-badge[b-h9612m6xcq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #28a745;
}

.currency-badge[b-h9612m6xcq] {
    background: #17a2b8;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.created-date[b-h9612m6xcq] {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ====== 状态容器样式 ====== */
.loading-container[b-h9612m6xcq], .empty-container[b-h9612m6xcq] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
}

/* ====== 模态框样式 ====== */
.modal-backdrop-custom[b-h9612m6xcq] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content-custom[b-h9612m6xcq] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header-custom[b-h9612m6xcq] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title-custom[b-h9612m6xcq] {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.modal-body-custom[b-h9612m6xcq] {
    padding: 1.5rem;
}

.modal-footer-custom[b-h9612m6xcq] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* ====== 表单样式 ====== */
.form-label-custom[b-h9612m6xcq] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control-custom[b-h9612m6xcq] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .form-control-custom:focus[b-h9612m6xcq] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

/* ====== 响应式设计 ====== */
@media (max-width: 768px) {
    .header-container[b-h9612m6xcq] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .header-left[b-h9612m6xcq],
    .header-center[b-h9612m6xcq],
    .header-right[b-h9612m6xcq] {
        justify-content: center;
        width: 100%;
    }

    .action-buttons[b-h9612m6xcq] {
        flex-direction: column;
        gap: 4px;
    }

    .action-column[b-h9612m6xcq] {
        width: 120px;
        min-width: 120px;
    }

    .product-name-cell[b-h9612m6xcq] {
        max-width: 150px;
    }

    .table-row[b-h9612m6xcq] {
        height: auto;
        min-height: 60px;
    }
}

/* ====== 辅助类 ====== */
.align-middle[b-h9612m6xcq] {
    vertical-align: middle !important;
}

.text-end[b-h9612m6xcq] {
    text-align: end !important;
}

.visually-hidden[b-h9612m6xcq] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/SalesStatistics.razor.rz.scp.css */
/* 销售统计分析页面样式 */
/* 主容器样式 */
.sales-statistics[b-w3d87i9b86] {
    padding: 8px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100%;
}

/* 筛选条件区域 */
.filter-section[b-w3d87i9b86] {
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.form-label[b-w3d87i9b86] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.form-control[b-w3d87i9b86], .form-select[b-w3d87i9b86] {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

    .form-control:focus[b-w3d87i9b86], .form-select:focus[b-w3d87i9b86] {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        outline: none;
    }

/* 周期统计按钮 - 优化响应式布局 */
.cycle-stat-btn[b-w3d87i9b86] {
    min-width: 90px;
    max-width: 120px;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    padding: 8px 8px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    /* 添加这些换行属性 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

    .cycle-stat-btn:hover:not(:disabled)[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
        background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
    }

    .cycle-stat-btn:disabled[b-w3d87i9b86] {
        opacity: 0.6;
        transform: none;
        box-shadow: none;
    }

.btn-text[b-w3d87i9b86] {
    margin-top: 1px;
    text-align: center;

    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    line-height: 1.0;
}

/* 其他按钮样式 */
.export-btn[b-w3d87i9b86], .toggle-btn[b-w3d87i9b86], .order-details-btn[b-w3d87i9b86], .pagination-btn[b-w3d87i9b86] {
    min-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 10px;
    transition: all 0.3s ease;
}

.order-details-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

    .order-details-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    }

.export-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

    .export-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
        background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
    }

.toggle-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    padding: 5px 10px !important;
    min-width: 70px !important;
}

    .toggle-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
        background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    }

/* 加载状态 */
.loading-overlay[b-w3d87i9b86] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.spinner-container[b-w3d87i9b86] {
    text-align: center;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 统计概览卡片 - 优化响应式布局 */
.summary-cards[b-w3d87i9b86] {
    margin-bottom: 12px;
}

.summary-card[b-w3d87i9b86] {
    background: white;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

    .summary-card:hover[b-w3d87i9b86] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

.card-icon[b-w3d87i9b86] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.total-revenue .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.total-orders .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.avg-order .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.top-product .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.card-value[b-w3d87i9b86] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.card-label[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #7f8c8d;
    margin: 0;
    font-weight: 600;
}

/* 图表区域 */
.charts-section[b-w3d87i9b86] {
    margin-bottom: 12px;
}

.chart-card[b-w3d87i9b86] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: 350px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    overflow: hidden;
}

.chart-header[b-w3d87i9b86] {
    padding: 15px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(248, 249, 250, 0.8);
}

    .chart-header h5[b-w3d87i9b86] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.2rem;
        font-weight: 700;
    }

.chart-legend[b-w3d87i9b86] {
    display: flex;
    gap: 15px;
}

.legend-item[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
}

.legend-color[b-w3d87i9b86] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.bar-color[b-w3d87i9b86] {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.line-color[b-w3d87i9b86] {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.chart-container[b-w3d87i9b86] {
    flex: 1;
    padding: 15px;
    position: relative;
}

/* 数据表格区域 */
.data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* 标题行样式 - 使用浅灰色背景 */
.section-header.stats-header[b-w3d87i9b86] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
}

.section-header.order-details-header[b-w3d87i9b86] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
}

.section-header[b-w3d87i9b86] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.section-header h5[b-w3d87i9b86] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.table-info[b-w3d87i9b86], .date-range[b-w3d87i9b86] {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

.header-actions[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 表格容器 */
.table-container[b-w3d87i9b86] {
    max-height: 400px;
    overflow-y: auto;
}

.data-table[b-w3d87i9b86] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem; /* 增大表格字体 */
}

    .data-table th[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 12px 15px;
        text-align: left;
        font-weight: 700;
        color: #2c3e50;
        border-bottom: 3px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 0.95rem; /* 表头字体大小 */
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .data-table td[b-w3d87i9b86] {
        padding: 10px 15px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
        font-size: 0.95rem; /* 表格数据字体大小 */
    }

.amount[b-w3d87i9b86] {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.95rem; /* 金额列字体大小与其他列相同 */
    color: #2c3e50;
}

.cumulative[b-w3d87i9b86] {
    color: #e74c3c;
    font-weight: 700;
}

/* 订单详细数据表格 */
.order-details-table[b-w3d87i9b86] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 1200px;
}

    .order-details-table th[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 10px 12px;
        text-align: left;
        font-weight: 700;
        color: #2c3e50;
        border-bottom: 3px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 10;
        white-space: nowrap;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .order-details-table td[b-w3d87i9b86] {
        padding: 8px 12px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.85rem;
    }

.truncate[b-w3d87i9b86] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 状态标签 */
.status-badge[b-w3d87i9b86] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

    .status-badge.paid[b-w3d87i9b86] {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
    }

    .status-badge.pending[b-w3d87i9b86] {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        color: #856404;
    }

    .status-badge.failed[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
        color: #721c24;
    }

/* 分页控件 - 重新布局 */
.pagination-container[b-w3d87i9b86] {
    padding: 15px 20px;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.pagination-info[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.pagination-controls[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto; /* 将分页控件推到右侧 */
}

.page-info[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #2c3e50;
    font-weight: 600;
    background: white;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 空状态提示 */
.empty-state[b-w3d87i9b86] {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
    margin: 12px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

    .empty-state.small[b-w3d87i9b86] {
        padding: 20px;
        margin: 0;
    }

.empty-icon[b-w3d87i9b86] {
    font-size: 48px;
    color: #bdc3c7;
    margin-bottom: 15px;
    opacity: 0.7;
}

.empty-state h4[b-w3d87i9b86] {
    color: #7f8c8d;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 600;
}

.empty-state p[b-w3d87i9b86] {
    color: #95a5a6;
    margin: 0;
    font-size: 0.95rem;
}

/* 响应式设计 - 优化移动端体验
    平板：≥ 768px (min-width: 768px)*/
@media (max-width: 768px) {
    .sales-statistics[b-w3d87i9b86] {
        padding: 5px;
    }

    .filter-section[b-w3d87i9b86], .summary-card[b-w3d87i9b86], .chart-card[b-w3d87i9b86], .data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
        padding: 10px;
        margin-bottom: 10px;
    }

    .section-header[b-w3d87i9b86] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .header-actions[b-w3d87i9b86] {
        align-self: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chart-header[b-w3d87i9b86] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .summary-card[b-w3d87i9b86] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }

    .card-value[b-w3d87i9b86] {
        font-size: 1.1rem; /* 移动端减小字体 */
    }

    .card-label[b-w3d87i9b86] {
        font-size: 0.8rem; /* 移动端减小标签字体 */
    }

    .pagination-container[b-w3d87i9b86] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .pagination-controls[b-w3d87i9b86] {
        margin-left: 0;
        justify-content: center;
    }

    /* 周期统计按钮移动端优化 */
    .cycle-stat-btn[b-w3d87i9b86] {
        flex-direction: column; /* 移动端垂直排列 */
        min-width: 100%;
        max-width: 100%;
        font-size: 0.9rem;
        padding: 4px 4px;
        min-height: 40px;
        margin-top: 0px;
    }

    .export-btn[b-w3d87i9b86], .toggle-btn[b-w3d87i9b86], .order-details-btn[b-w3d87i9b86] {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    /* 统计卡片移动端布局优化 */
    .summary-cards .row[b-w3d87i9b86] {
        margin: 0 -5px;
    }

    .summary-cards .col-sm-6[b-w3d87i9b86] {
        padding: 0 5px;
        margin-bottom: 10px;
    }
}

/*手机（小屏）：< 576px (通常使用 max-width: 575.98px)
    手机（大屏）：≥ 576px (min-width: 576px)*/
@media (max-width: 400px) {
    .card-value[b-w3d87i9b86] {
        font-size: 1rem;
    }

    .card-label[b-w3d87i9b86] {
        font-size: 0.75rem;
    }

    .section-header h5[b-w3d87i9b86] {
        font-size: 1rem;
    }

    .chart-header h5[b-w3d87i9b86] {
        font-size: 1rem;
    }
}

/* 滚动条样式 */
.table-container[b-w3d87i9b86]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-w3d87i9b86]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-w3d87i9b86]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-radius: 4px;
}

    .table-container[b-w3d87i9b86]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
    }

/* 动画效果 */
@keyframes fadeIn-b-w3d87i9b86 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card[b-w3d87i9b86], .chart-card[b-w3d87i9b86], .data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
    animation: fadeIn-b-w3d87i9b86 0.6s ease-out;
}

/* 产品销售排行图X轴字体样式 */
#productRankingChart[b-w3d87i9b86] {
    font-family: 'SimSun', '宋体', serif !important;
}

    #productRankingChart .chartjs-size-monitor[b-w3d87i9b86],
    #productRankingChart .chartjs-render-monitor[b-w3d87i9b86] {
        font-family: 'SimSun', '宋体', serif !important;
    }
/* _content/LEAFBlazorApp25/Components/WeChat/WeChatPay.razor.rz.scp.css */
.wechat-pay-container[b-n0voylrp3i] {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

.qr-code[b-n0voylrp3i] {
    max-width: 250px;
    max-height: 250px;
    border: 1px solid #ddd;
    padding: 10px;
    background: white;
}

.payment-info[b-n0voylrp3i] {
    margin: 15px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    text-align: left;
}

.payment-status[b-n0voylrp3i] {
    margin: 15px 0;
    min-height: 40px;
}

.status-checking[b-n0voylrp3i] {
    color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.status-message[b-n0voylrp3i] {
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
}

.action-buttons[b-n0voylrp3i] {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.loading[b-n0voylrp3i] {
    padding: 40px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* _content/LEAFBlazorApp25/Components/WeChat/WeChatPayB1.razor.rz.scp.css */
.wechat-pay-container[b-8hkyt81c7v] {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

.qr-code[b-8hkyt81c7v] {
    max-width: 250px;
    max-height: 250px;
    border: 1px solid #ddd;
    padding: 10px;
    background: white;
}

.payment-info[b-8hkyt81c7v] {
    margin: 15px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    text-align: left;
}

.payment-status[b-8hkyt81c7v] {
    margin: 15px 0;
    min-height: 40px;
}

.status-checking[b-8hkyt81c7v] {
    color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.status-message[b-8hkyt81c7v] {
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
}

.action-buttons[b-8hkyt81c7v] {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.loading[b-8hkyt81c7v] {
    padding: 40px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}