.box2 {
    height: 86px;
    cursor: pointer;
    border-radius: var(--ws-radius, 12px);
    padding: 0px 30px 0px 30px;
    background-color: #fff;
    -webkit-backdrop-filter: blur(var(--ws-card-blur, 0px));
    backdrop-filter: blur(var(--ws-card-blur, 0px));
    border: 1px solid #e4ecf3;
    margin: 14px 0 0 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* 导航卡片 hover：边框线粗细/颜色 + 阴影 均跟随样式设置变量（单变量控制，避免 none 破坏声明） */
.box2:hover {
    box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px #2a7fff);
    -webkit-box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px #2a7fff);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* linecons 字体未定义 vector 字形，映射到真实存在的 diamond 几何图形，保证可见 */
.linecons-vector:before { content: '\e82d'; }

.xe-comment-entry img {
    float: left;
    display: block;
    margin-right: 10px;
}
.xe-comment {
    transform: translateY(-50%);
    position: absolute;
    margin-left: 50px;
    top: 50%;
}
.xe-comment p {
    margin-bottom: 0px;
    margin-right: 15px;
}
.overflowClip_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.overflowClip_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.submit-tag {
    margin-top: 50px;
}

.img-circle {
    padding: 7px 0;
}

/* ============ 固定侧边栏布局：覆盖 navpage 的 table 布局 ============ */
/* 关键：用 position:sticky 代替 fixed，避免 navpage 在祖先元素上设置的 transform 使 fixed 失效（导致滚动时侧栏跟随内容滚动）。 */
.page-container {
    display: flex !important;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    table-layout: auto;
}
.sidebar-menu {
    display: block !important;
    width: 280px;
    flex: 0 0 280px;
    position: relative;
}
.sidebar-menu.fixed {
    position: sticky !important;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    /* 侧栏右侧阴影 */
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.10);
    /* 窄滚动条（Firefox） */
    scrollbar-width: none;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
/* 窄滚动条（WebKit） */
.sidebar-menu.fixed::-webkit-scrollbar { width: 6px; }
.sidebar-menu.fixed::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu.fixed::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 3px;
}
.sidebar-menu.fixed::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }
.sidebar-menu.fixed .sidebar-menu-inner {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}
.main-content {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    margin-left: 0 !important;
    position: relative;
    z-index: 1;
}
/* 折叠态：侧栏收窄，内容区随 flex 自动跟随 */
.sidebar-menu.fixed.collapsed { width: 80px; flex-basis: 80px; }
/* 移动端：侧栏转正常流，内容占满 */
@media (max-width: 768px) {
    .page-container { display: block !important; }
    .sidebar-menu, .sidebar-menu.fixed, .sidebar-menu.fixed.collapsed {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        flex: none;
        overflow: visible;
    }
    .main-content { margin-left: 0 !important; }
}

/* ============ 网站背景视频（循环播放，铺满、置于内容之下） ============ */
#bgVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    display: none;
}

/* ============ 侧边栏背景色 / 字体颜色 / 毛玻璃 ============ */
.sidebar-menu.fixed {
    background-color: var(--ws-sidebar-bg, #fff);
    -webkit-backdrop-filter: blur(var(--ws-sidebar-blur, 0px));
    backdrop-filter: blur(var(--ws-sidebar-blur, 0px));
}
.sidebar-menu.fixed .sidebar-menu-inner {
    background-color: transparent;
}
.sidebar-menu .main-menu a { color: var(--ws-sidebar-font-color, #4a4a4a); }
/* 侧栏分类图标颜色跟随字体颜色 */
.sidebar-menu .main-menu a i { color: var(--ws-sidebar-font-color, #4a4a4a); }
/* 侧栏箭头（navpage 折叠箭头 + 自定义 hover 箭头）颜色跟随字体颜色 */
.sidebar-menu .main-menu li.has-sub > a:before,
.sidebar-menu .main-menu > li:not(.has-sub) > a:after,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:after {
    color: var(--ws-sidebar-font-color, #4a4a4a) !important;
}

/* ============ 侧边栏标题字号分级 ============ */
/* 一级标题：比页面字号大 1 号（页面 + 2px），加粗 */
.sidebar-menu .main-menu > li > a .title {
    font-weight: 700;
    font-size: calc(var(--ws-font-size, 14px) + 2px);
    color: var(--ws-sidebar-font-color, #4a4a4a);
}
/* 二级（子分类）标题：与页面字号一致，常规字重 */
.sidebar-menu .main-menu > li.has-sub > ul > li > a .title {
    font-weight: 400;
    font-size: var(--ws-font-size, 14px);
    color: var(--ws-sidebar-font-color, #4a4a4a);
}

/* ============ 侧栏分类菜单底边框线（开关控制，默认隐藏） ============ */
.sidebar-menu .main-menu > li > a,
.sidebar-menu .main-menu > li.has-sub > ul > li > a {
    border-bottom: 1px solid transparent !important;
}
.sidebar-menu.show-border .main-menu > li > a,
.sidebar-menu.show-border .main-menu > li.has-sub > ul > li > a {
    border-bottom-color: var(--ws-sb-border-color, rgba(0, 0, 0, 0.12)) !important;
}

/* ============ 内容分类区块：浅色背景 + 圆角，统一上下间距 ============ */
.ws-section {
    margin-bottom: 24px;
    padding: 16px 18px 18px;
    background: #f6f8fb;
    border: 1px solid #eef1f5;
    border-radius: var(--ws-radius, 12px);
    -webkit-backdrop-filter: blur(var(--ws-section-blur, 0px));
    backdrop-filter: blur(var(--ws-section-blur, 0px));
}
/* 最后一个分类底部间距 = 分类之间的间距（24px），去掉 navpage 留下的巨大 footer 边距即可对齐 */
.ws-section:last-child { margin-bottom: 24px; }
/* 卡片区域“无背景”：连边框也去掉，呈现纯无背景 */
.ws-section.no-bg { background-color: transparent !important; border-color: transparent !important; }
.ws-section .section-title {
    margin: 0 0 12px;
    padding-top: 2px;
    font-weight: 700;
}

/* ============ 折叠态侧边栏修复 ============ */
.sidebar-menu.collapsed .main-menu > li > ul,
.sidebar-menu.collapsed .main-menu > li:hover > ul {
    display: none !important;
}
.sidebar-menu.collapsed .main-menu a > span { display: none; }
.sidebar-menu.collapsed .main-menu li.has-sub > a:before { display: none; }
.sidebar-menu.collapsed .main-menu > li > a {
    justify-content: center;
}
.sidebar-menu.collapsed .main-menu > li > a > i {
    margin-right: 0;
}

/* ============ 底部压缩（去掉 navpage sticky-footer 的内联大边距） ============ */
footer.main-footer {
    margin-top: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer.main-footer .footer-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
footer.main-footer .footer-text { font-size: 13px; }
/* 回到顶部：右侧垂直居中，尺寸减半，颜色与侧栏一致 */
footer.main-footer .go-up {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
}
footer.main-footer .go-up a {
    width: 39px;
    height: 39px;
    line-height: 39px;
    border-radius: 50%;
    background: rgba(60, 60, 60, 0.5);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
    position: relative;
}
footer.main-footer .go-up a i {
    font-size: 20px;
    font-weight: 700;
    line-height: 39px;
    display: inline-block;
    width: 100%;
}
footer.main-footer .go-up a:hover { background-color: rgba(60, 60, 60, 0.5) !important; }
footer.main-footer .go-up a:hover i { animation: goUpArrow 1s linear infinite; }
@keyframes goUpArrow {
    0% { transform: translateY(100%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

/* ============ 页头(搜索区域) / 页脚 背景色 ============ */
.user-info-navbar { background-color: var(--ws-header-bg, #ffffff) !important; }
footer.main-footer { background-color: var(--ws-footer-bg, transparent) !important; }

/* ============ 弹窗圆角跟随变量 ============ */
.modal-content { border-radius: var(--ws-radius, 12px); }

/* ============ 弹窗输入框/按钮圆角与高度统一（与搜索框一致） ============ */
.modal .form-control,
.modal select.form-control,
.modal textarea.form-control,
.modal input.form-control,
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="url"],
.modal input[type="number"] {
    border-radius: var(--ws-radius, 12px) !important;
    height: 40px !important;
    font-size: 14px;
}
.modal .btn { border-radius: var(--ws-radius, 12px) !important; }
.modal .modal-footer .btn { height: 40px !important; font-size: 15px; }
/* 删除弹窗提示文字：红色加粗，字号跟随样式设置中的字体大小 */
.delete-modal-tip { color: #d9534f; font-weight: 700; font-size: var(--ws-font-size); line-height: 1.6; margin: 0; }
/* 删除弹窗：宽度 450px（原 300 增加二分之一），高度减少三分之一（366→244px），垂直居中显示 */
#deleteModal.modal.in { display: flex !important; align-items: center; justify-content: center; }
#deleteModal .modal-dialog { margin: 0 auto; width: 450px; max-width: 94vw; min-height: 244px; }
#deleteModal .modal-content { display: flex; flex-direction: column; min-height: 244px; }
/* 确认删除按钮 hover 时变红 */
#deleteModal #btnDeleteOk:hover {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #fff !important;
}
/* 删除弹窗：移除 footer 上方横线，使按钮区与内容融为一体 */
#deleteModal .modal-footer { border-top: none !important; }

/* ============ 导入确认弹窗：尺寸/位置与删除弹窗完全一致 ============ */
#importModal.modal.in, #importSuccessModal.modal.in { display: flex !important; align-items: center; justify-content: center; }
#importModal .modal-dialog, #importSuccessModal .modal-dialog { margin: 0 auto; width: 450px; max-width: 94vw; min-height: 244px; }
#importModal .modal-content, #importSuccessModal .modal-content { display: flex; flex-direction: column; min-height: 244px; }
#importModal .modal-footer, #importSuccessModal .modal-footer { border-top: none !important; }

/* ============ 无导航数据兜底空状态 ============ */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    min-height: 0;
}
.empty-state-illu { width: 200px; height: 160px; margin-bottom: 18px; }
.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: #5b6573;
    line-height: 1.5;
    margin-bottom: 8px;
}
.empty-state-sub {
    font-size: var(--ws-font-size, 14px);
    color: #9aa4b2;
    line-height: 1.6;
    max-width: 320px;
}

/* ============ 侧边栏无数据空状态（适配侧栏窄宽） ============ */
.sidebar-empty-state {
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 14px;
    pointer-events: none;
}
.sidebar-empty-state .empty-state-illu { width: 120px; height: 96px; margin-bottom: 12px; }
.sidebar-empty-state .empty-state-title { font-size: 14px; margin-bottom: 6px; }
.sidebar-empty-state .empty-state-sub { font-size: 12px; max-width: 200px; }
/* 侧栏折叠态下隐藏侧栏空状态（窄栏无法容纳文字） */
.sidebar-menu.collapsed .sidebar-empty-state { display: none !important; }

/* ============ 导出 / 导入 菜单 ============ */
.export-controls { position: relative; }
.export-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 1080;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: var(--ws-radius, 12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
    padding: 6px;
    min-width: 168px;
}
.export-controls:hover .export-menu { display: block; }
/* 桥接：覆盖按钮与菜单之间的 8px 间隙，鼠标从按钮移到菜单时不丢失 :hover */
.export-menu::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
}
.export-menu button {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}
.export-menu button:hover { background: #f0f6ff; color: #2a7fff; }

/* ============ 导航卡片响应式布局（v22） ============ */
/* 501px ~ 767px：每行 2 个，完整展示 icon / 名称 / 描述 */
/* 768px ~ 920px：每行 2 个，完整展示 icon / 名称 / 描述（新增断点） */
/* ≤500px：每行 2 个，仅 icon+名称（紧凑样式见下方媒体查询） */

/* 768px ~ 920px：每行 2 个，完整内容 */
@media (min-width: 768px) and (max-width: 920px) {
    .ws-section .col-sm-3 { width: 50%; float: left; padding: 0 7px; box-sizing: border-box; }
}

@media (max-width: 767px) {
    .ws-section .row { margin-left: 0; margin-right: 0; }
    .ws-section .col-sm-3 { width: 50%; float: left; padding: 0 7px; box-sizing: border-box; }
}

/* ≤500px：紧凑模式（仅 icon+名称，水平垂直居中，字号+2px，隐藏描述） */
@media (max-width: 500px) {
    .site-card .xe-comment-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
    .site-card .xe-comment-entry img { float: none; }
    .site-card .xe-user-img { float: none; margin-bottom: 4px; }
    .site-card .xe-comment { position: static; transform: none; top: auto; margin-left: 0; text-align: center; }
    .site-card .xe-comment p { display: none; }
    .site-card .xe-user-name strong { font-size: calc(var(--ws-font-size, 14px) + 2px); }
}

/* ============ 移动端（<768px）侧边栏修复（v21/v22） ============ */
@media (max-width: 768px) {
    /* Bug4：即使侧栏处于 collapsed 状态，分类名称也要正常展示 */
    .sidebar-menu.collapsed .main-menu > li > a > span,
    .sidebar-menu.collapsed .main-menu > li.has-sub > ul > li > a > span {
        display: inline-block !important;
    }
    .sidebar-menu.collapsed .main-menu > li > a { justify-content: flex-start; }
    .sidebar-menu.collapsed .main-menu > li > a > i { margin-right: 8px; }

    /* 需求3(v22)：展开/收缩按钮与用户图标和 logo 水平对齐；用户图标位于按钮右侧，保留合理间距 */
    .sidebar-menu .logo-env {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px !important;
    }
    .sidebar-menu .logo-env .logo {
        width: auto !important;
        flex: 0 0 auto;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
    .sidebar-menu .logo-env .logo-expanded img,
    .sidebar-menu .logo-env .logo-collapsed img { width: auto !important; max-width: 120px; }
    .sidebar-menu .logo-env .mobile-menu-toggle {
        float: none !important;
        display: flex !important;
        align-items: center;
        gap: 14px;
        margin-left: auto;
    }
    .sidebar-menu .logo-env .mobile-menu-toggle a { margin-left: 0 !important; }
    .sidebar-menu .logo-env .sidebar-logo-edit { display: none !important; }
}

/* ============ 样式方案管理（v22） ============ */
.sp-action-btn {
    font-size: 12px; color: #2a7fff; background: #f0f6ff;
    border: 1px solid #cfe0ff; border-radius: 6px; padding: 5px 12px; cursor: pointer;
}
.sp-action-btn:hover { background: #e2eefe; }
.sp-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sp-hint { font-size: 12px; color: #999; }
.sp-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sp-list .sp-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0f2f5; }
.sp-list .sp-name { font-size: 14px; color: #333; font-weight: 600; flex: 0 0 auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list .sp-badge { display: none; font-size: 11px; color: #fff; background: #2a7fff; border-radius: 4px; padding: 2px 6px; }
.sp-list .sp-actions { margin-left: auto; display: flex; gap: 8px; }
.sp-list .sp-actions button { font-size: 12px; border-radius: 6px; padding: 4px 10px; cursor: pointer; border: 1px solid #ddd; background: #fff; color: #555; }
.sp-list .sp-actions button:hover:not(:disabled) { border-color: #2a7fff; color: #2a7fff; }
.sp-list .sp-actions button:disabled { opacity: .45; cursor: not-allowed; }
.sp-list .sp-actions .sp-del-btn:not(:disabled):hover { border-color: #e35; color: #e35; }
.sp-list .sp-empty { padding: 16px 4px; color: #999; font-size: 13px; }