/* 帮助中心主色：使用全局动态变量（由 theme.blade.php / 后台主题色 控制） */
.epower-help {
    --help-primary: var(--color-primary, #3369E3);
    --help-primary-text: var(--color-primary-plus, #3c7ee5);
    --help-primary-bg: var(--color-primary-bg, #F1F6FE);
}

.epower-help .banner {
    width: 100%;
    max-width: 1200px; /* 设置最大宽度 */
    height: 320px;
    background: url(../../../img/help-banner01.png) no-repeat center center;
    background-size: cover;
    text-align: center;
    padding-top: 87px;
    margin: 0 auto; /* 使其居中 */
}

.epower-help .banner h3 {
    height: 60px;
    font-size: 50px;
    color: #ffffff;
    /* line-height: 60px; */
    /* margin-bottom: 28px; */
}

.epower-help .banner p {
    height: 16px;
    font-size: 16px;
    color: #ffffff;
    line-height: 16px;
}

.help-content img {
    max-width: 100%;  /* 确保图片宽度不超过容器宽度 */
    height: auto;     /* 保持图片的纵横比 */
}

.epower-help .help-content .help-tab {
    margin-top: -30px;
    margin-bottom: 10px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(182, 192, 219, 0.5);
}

.epower-help .help-content .help-tab li {
    width: 10%;
    font-size: 20px;
    color: #333;
    line-height: 60px;
    float: left;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
}

/* 悬停时颜色变化 */
.epower-help .help-content .help-tab li:hover {
    color: var(--help-primary-text);
}

/* 伪元素实现下划线：自左向右动画，主色 */
.epower-help .help-content .help-tab li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--help-primary);
    transition: width 0.4s ease;
}

/* 悬停时下划线展开 */
.epower-help .help-content .help-tab li:hover::after {
    width: 100%;
}

/* 激活状态的标签样式 */
.epower-help .help-content .help-tab li.active {
    color: var(--help-primary-text);
    background: linear-gradient(to bottom, #E0F3FF, #ffffff);
    box-shadow: 0 -5px 0 0 var(--help-primary-text);
}


/* 内容区：全宽、无外框线 */
.epower-help .help-content .help-list.help-list--fullwidth {
    padding-top: 0;
    padding-bottom: 51px;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* 面包屑导航样式 */
.epower-help .help-content .help-list .help-right-inner .help-breadcrumb {
    margin-bottom: 0;
    padding-bottom: 15px;
}

/* 下载和打印按钮样式 */
.epower-help .help-download-buttons .action-btn {
    transition: all 0.3s ease;
}

.epower-help .help-download-buttons .action-btn:hover {
    background: var(--help-primary-text, #3c7ee5) !important;
    color: #fff !important;
    border-color: var(--help-primary-text, #3c7ee5) !important;
}

/* 顶部分类 Tab 与搜索框同一行：限定 90% 宽、居中对齐，与下方文章列表左右边距一致 */
.epower-help .help-content .help-list .help-category-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 20px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 2px solid #e5e7eb;
    box-sizing: border-box;
}
.epower-help .help-content .help-list .help-category-tab .help-horizontal-menu {
    flex: 1;
    min-width: 0;
}
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal {
    border: none;
    background: transparent;
}
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item {
    height: 48px;
    line-height: 48px;
    border-bottom: 3px solid transparent;
    color: #333;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item a {
    color: inherit;
    text-decoration: none;
    display: block;
}
/* 悬停：淡蓝色，覆盖 Element 内联样式 */
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item:hover {
    color: var(--help-primary-text) !important;
    background: color-mix(in srgb, var(--help-primary) 20%, transparent) !important;
    border-bottom-color: var(--help-primary) !important;
}
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item:hover a {
    color: var(--help-primary-text) !important;
}
/* 选中项：文字与下边线为主色（蓝色），背景为淡蓝，覆盖 Element 默认黑色/灰色 */
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item.is-active {
    color: var(--help-primary-text) !important;
    font-weight: bold;
    border-bottom-color: var(--help-primary);
    background: color-mix(in srgb, var(--help-primary) 15%, transparent) !important;
}
.epower-help .help-content .help-list .help-horizontal-menu.el-menu--horizontal > .el-menu-item.is-active a {
    color: var(--help-primary-text) !important;
}

.epower-help .help-content .help-list .help-right {
    width: 882px;
    float: left;
}
.epower-help .help-content .help-list .help-right.help-right--fullwidth {
    width: 100%;
    float: none;
}
/* 内容区 90% 宽，左右边距居中 */
.epower-help .help-content .help-list .help-right .help-right-inner {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 搜索区：覆盖 Element 全局样式，统一对齐/高度/圆角；关键词/输入框/搜索/清除 间距 16px，高 36px，圆角 4px */
.epower-help .help-content .help-list .help-category-tab .help-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0 16px;
}
.epower-help .help-content .help-list .help-category-tab .help-search label {
    margin: 0;
    font-size: 14px;
    color: #333;
    display: inline-flex;
    align-items: center;
}
/* 输入组：覆盖 Element table/负 margin，flex 布局，整体 36px 高、4px 圆角 */
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group {
    display: inline-flex !important;
    width: 260px !important;
    min-width: 260px;
    height: 36px !important;
    border-collapse: unset;
    border-spacing: 0;
    align-items: stretch;
    border-radius: 4px !important;
    overflow: hidden;
    box-sizing: border-box;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group .el-input {
    flex: 1;
    min-width: 0;
    height: 36px !important;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 4px 0 0 4px !important;
    border: 2px solid var(--help-primary-text);
    border-right: none !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append,
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__prepend {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: auto;
    height: 36px !important;
    border: 2px solid var(--help-primary-text) !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--help-primary-text) !important;
    vertical-align: middle;
    transition: background 0.2s ease !important;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append .el-button,
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append button.el-button {
    margin: 0 !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 20px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    box-sizing: border-box !important;
    transition: background 0.2s;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append:hover {
    background: color-mix(in srgb, var(--help-primary-text) 50%, transparent) !important;
    border-color: var(--help-primary-text) !important;
}
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append:hover .el-button,
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append:hover button.el-button,
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append .el-button:hover,
.epower-help .help-content .help-list .help-category-tab .help-search .el-input-group__append button.el-button:hover {
    background: transparent !important;
    color: var(--help-primary-text) !important;
    opacity: 1 !important;
    border: none !important;
}
.epower-help .help-content .help-list .help-category-tab .help-search .search-btn {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 20px !important;
    border-radius: 0 !important;
}
/* 清除按钮：与输入组同高 36px、同圆角 4px、box-sizing，悬停反色 */
.epower-help .help-content .help-list .help-category-tab .help-search .reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 20px;
    border-radius: 4px !important;
    border: 2px solid var(--help-primary-text);
    font-size: 14px;
    color: var(--help-primary-text);
    text-align: center;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.epower-help .help-content .help-list .help-category-tab .help-search .reset-btn:hover {
    color: #fff;
    background: var(--help-primary-text);
    border-color: var(--help-primary-text);
}
@media screen and (min-width: 1536px) and (max-width: 1620px) {
    .epower-help .help-content .help-list .help-right .article-list li span {
        width: 160px; /* 调整宽度适应 110% 缩放 */
    }
}

/* 文章列表：数字排序 + 单双行白/淡蓝 + 底部虚线灰分隔 */
.epower-help .help-content .help-list .help-right .article-list {
    list-style: none;
    counter-reset: article-num;
    padding-left: 0;
}
.epower-help .help-content .help-list .help-right .article-list li {
    counter-increment: article-num;
    height: 44px;
    line-height: 44px;
    padding-left: 36px;
    padding-right: 20px;
    border-bottom: 1px dashed #d0d0d0;
    position: relative;
}
/* 单数行白色，双数行淡蓝色 */
.epower-help .help-content .help-list .help-right .article-list li:nth-child(odd) {
    background: #fff;
}
.epower-help .help-content .help-list .help-right .article-list li:nth-child(even) {
    background: var(--help-primary-bg, #f1f6fe);
}
.epower-help .help-content .help-list .help-right .article-list li::before {
    content: counter(article-num);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 20px;
    font-weight: bold;
    color: var(--help-primary);
    font-size: 14px;
}
.epower-help .help-content .help-list .help-right .article-list li:last-child {
    border-bottom: 1px dashed #d0d0d0;
    margin-bottom: 30px;
}

.epower-help .help-content .help-list .help-right .article-list li:hover {
    background: var(--help-primary-bg);
}

.epower-help .help-content .help-list .help-right .article-list li:hover a {
    color: var(--help-primary-text);
    font-weight: bold;
    font-size: 16px;
}

.epower-help .help-content .help-list .help-right .article-list li b {
    display: none; /* 数字排序由 li::before 展示，隐藏原圆点 */
}

.epower-help .help-content .help-list .help-right .article-list li a {
    position: relative;
    text-decoration: none;
    color: #333333;
    line-height: 1.2em;
    font-weight: normal;
    transition: color 0.3s ease, font-weight 0.3s ease, font-size 0.3s ease;
}

/* 文章链接下划线：自左向右动画，3px 主色 */
.epower-help .help-content .help-list .help-right .article-list li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 3px;
    background: var(--help-primary);
    transition: width 0.4s ease;
}

.epower-help .help-content .help-list .help-right .article-list li:hover a::after {
    width: 100%;
}

.epower-help .help-content .help-list .help-right .article-list li span {
    min-width: 140px;
    max-width: 160px;
    font-size: 12px;
    line-height: 44px;
    float: right;
    transition: color 0.3s ease, font-weight 0.3s ease; /* 添加平滑过渡效果 */
}

/* 悬停效果 */
.epower-help .help-content .help-list .help-right .article-list li:hover span {
    color: #008a64; /* 悬停时颜色 */
    font-weight: bold; /* 悬停时字体加粗 */
}


.epower-help .help-content .help-list .help-right .article-content {
    border-radius: 0;
    border: none;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 35px;
}

.epower-help .help-content .help-list .help-right .article-content .title {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 30px;
    line-height: 1.4;
}

.epower-help .help-content .help-list .help-right .article-content .time {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

.epower-help .help-content .help-list .help-right .article-content .time span {
    margin-right: 0;
    display: inline-flex;
    align-items: center;
}

.epower-help .help-content .help-list .help-right .article-content .time .help-download-buttons {
    flex-shrink: 0;
}

/* 工具栏容器（字号调整+下载按钮） */
.epower-help .help-content .help-list .help-right .article-content .time .help-toolbar {
    flex-shrink: 0;
    margin-left: auto;
}

/* 字号调整组件样式 */
.epower-help .help-content .help-list .help-right .article-content .time .help-font-size-control {
    flex-shrink: 0;
}

.epower-help .help-content .help-list .help-right .article-content .time .help-font-size-control .font-size-btn:hover {
    background: var(--help-primary-bg, #F1F6FE) !important;
    border-color: var(--help-primary-text, #3c7ee5) !important;
    color: var(--help-primary-text, #3c7ee5) !important;
}

.epower-help .help-content .help-list .help-right .article-content .time .time-item {
    display: inline-flex;
    align-items: center;
}

.epower-help .help-content .help-list .help-right .article-content .time .time-item svg {
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

.epower-help .help-content .help-list .help-right .article-content .time .views-item {
    display: inline-flex;
    align-items: center;
}

.epower-help .help-content .help-list .help-right .article-content .time .views-item svg {
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

.epower-help .help-content .help-list .help-right .article-content .news-description {
    margin: 15px 0;
    padding: 12px;
    background: #f5f7fa;
    border-left: 4px solid var(--help-primary-text, #3c7ee5);
}

.epower-help .help-content .help-list .help-right .article-content .news-description .description-content {
    color: #666;
    line-height: 1.6;
}

.detail img {
    max-width: 100%;
}
.detail,.contentfooternotice {
    text-indent: 2em; /* 段落首行缩进两个汉字 */
    line-height: 300%;
    text-align: justify;
    margin：2em; /* 段落顶部间隔 */
        }
.contentfooternotice-title {
    font-weight: bold;
    font-size: 16px;
    margin: 1em;
}
.detail p,.contentfooternotice p {
    margin-top: 10px;
    line-height: 300%;
    text-align: justify;
    text-indent: 2em;
}
 /* 二维码样式 */
.qrcode-section {
    text-align: center;
    margin: 10px auto;
    max-width: 200px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

.qrcode-container {
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
}

.qrcode-image {
    width: 128px;
    height: 128px;
}
.qrcode-title {
    font-weight: bold;
}
.article-link {
    max-width: 1200px;
    margin: 15px auto 0 auto; /* 上 15px，左右自动，下面 0 */
    font-size: 14px;
    color: #666;
}
.share-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}
        /* 轻量 Tab 样式 */
        .inpage-tabs{margin-top:12px}
        .inpage-tabs .tab-nav{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #e6e8ee;padding:0 2px 8px}
        .inpage-tabs .tab-nav button{
            padding:8px 14px;border:2px solid #e6e8ee;background:#fff;border-radius:4px;cursor:pointer;
            font-size:14px;line-height:1
        }
       .inpage-tabs .tab-nav button.active {
  border-color: var(--help-primary, #3369E3);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--help-primary-text, #3c7ee5) 12%, transparent);
  font-weight: 700;
  color: var(--help-primary, #3369E3);
}
        .inpage-tabs .tab-panel{padding:18px 0}
        .share-container{max-width:440px;margin:28px auto 8px;text-align:center}
        .qrcode-tip{margin-top:8px;color:#666}
        .article-link{margin-top:16px;color:#333}
        .banner h3{padding:50px}
        [v-cloak]{display:none}
        
        /* 帮助中心详情页左侧分享组件 - 在1200px容器左边20px处，靠上靠右 */
        .help-share-layout {
            position: fixed;
            left: calc((100% - 1200px) / 2 - 20px);
            top: 30%;
            transform: translateY(0);
            z-index: 100;
        }
        
        /* 当屏幕宽度小于1200px时，使用固定位置 */
        @media screen and (max-width: 1200px) {
            .help-share-layout {
                left: 20px;
            }
        }
        
        /* 响应式：小屏幕时隐藏左侧分享 */
        @media screen and (max-width: 1400px) {
            .help-share-layout {
                display: none;
            }
        }