/*
 * site.css — 网站布局与通用组件
 * 职责：页面骨架、导航卡片、管理表单、搜索、菜单、弹窗基础及响应式布局。
 * 不同主题的配色、背景装饰和最终主题适配位于 themes.css。
 * 章节按原有层叠顺序排列；调整时先搜索具体选择器，避免重复追加覆盖规则。
 */

/* ==================== 01 页面基础：侧栏、页头、页脚、菜单与表单基础 ==================== */
/* ---- FontAwesome 图标字体基础渲染 ---- */
[class*=fa-] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* ---- 链接：去掉焦点 outline ---- */
a {
    outline: 0!important
}

/* ---- 段落：默认灰色文字 ---- */
p {
    color: #979898
}

/* ---- 全页：至少占满视口，长页面由内容撑高，弹窗锁定滚动时不裁切页面 ---- */
html { height: 100%; }
body { min-height: 100%; }
html,
body {
    margin: 0;
    padding: 0;
    border: none
}

/* ---- 页面容器：flex 布局由 site.css 提供，这里只保留宽高 ---- */
.page-container {
    width: 100%;
    height: 100%
}

/* ---- 主内容区：相对定位 + 30px 内边距 ---- */
.page-container .main-content {
    position: relative;
    z-index: 1;
    padding: 30px;
    padding-bottom: 0;
    word-break: break-word;
    -webkit-transition: opacity 100ms ease-in-out;
    -moz-transition: opacity 100ms ease-in-out;
    -o-transition: opacity 100ms ease-in-out;
    transition: opacity 100ms ease-in-out
}

/* 主内容区 hover 时提升层级（避免被侧栏覆盖） */
.page-container .main-content:hover {
    z-index: 15
}

/* ---- 侧栏 Logo 区：内边距 ---- */
.sidebar-menu .logo-env {
    padding: 19px 45px
}

/* ---- 侧栏菜单：默认内边距与列表样式（折叠态内边距由下方 media 控制） ---- */
.sidebar-menu .main-menu {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    list-style: none
}

/* 移动端：菜单收紧上下间距 */
@media screen and (max-width:768px) {
.sidebar-menu .main-menu {
        margin-top: 0px;
        margin-bottom: 10px
    }
}

/* ---- 侧栏菜单项：块级链接（flex 布局由 site.css 提供） ---- */
.sidebar-menu .main-menu a {
    display: block;
    text-decoration: none
}

/* 菜单项图标与文字之间保留间距 */
.sidebar-menu .main-menu a>i+span {
    padding-right: 10px
}

/* 含子菜单项左侧箭头（chevron，收起态向右旋转 -90deg） */
.sidebar-menu .main-menu li.has-sub>a:before {
    position: relative;
    display: inline-block;
    font-family: FontAwesome;
    content: '\f107';
    float: right;
    color: #6d747a;
    margin-left: 10px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out
}

/* ---- 二级菜单容器：默认隐藏 ---- */
.sidebar-menu .main-menu ul {
    display: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none
}

/* 桌面端（>768px）二级菜单展开：site.css 的 max-height 过渡仅作用于移动端，
   此处把 .opened 的 display 由 none 恢复为 block（精简时误删导致侧边栏模式点击不展开） */
.sidebar-menu .main-menu > li.opened > ul {
    display: block
}

/* 二级菜单项：相对定位（为子菜单定位作基础） */
.sidebar-menu .main-menu ul li {
    position: relative
}

/* 二级菜单项：缩进 */
.sidebar-menu .main-menu ul li a {
    padding-left: 35px
}

/* ---- 折叠态（桌面侧栏图标模式，≥768px）：由汉堡按钮切换 .collapsed ---- */
@media screen and (min-width:768px) {
    /* 折叠后侧栏收窄为 80px 图标栏 */
.sidebar-menu.collapsed {
        width: 80px;
        z-index: 10;
        overflow: visible
    }

    /* 折叠后侧栏切换按钮颜色 */
.sidebar-menu.collapsed+.main-content .user-info-navbar .user-info-menu a[data-toggle=sidebar] {
        color: #606161
    }

    /* 折叠后页脚向左偏移（与收窄侧栏对齐） */
.sidebar-menu.collapsed+.main-content .main-footer {
        left: 80px
    }

    /* 折叠后侧栏内部允许溢出（子菜单可浮出） */
.sidebar-menu.collapsed .sidebar-menu-inner {
        overflow: visible;
        position: relative
    }

    /* 折叠后 Logo 区上下收窄 */
.sidebar-menu.collapsed .logo-env {
        padding: 18px 0
    }

    /* 折叠态菜单去左右内边距 */
.sidebar-menu.collapsed .main-menu {
        padding-left: 0;
        padding-right: 0
    }

    /* 折叠态菜单项居中 */
.sidebar-menu.collapsed .main-menu>li {
        text-align: center;
        position: relative
    }

    /* 折叠态菜单图标放大并去右边距 */
.sidebar-menu.collapsed .main-menu>li>a>i {
        margin-right: 0;
        font-size: 16px
    }
}

/* ---- 页脚：内边距与上边框（背景/高度等由 site.css 控制） ---- */
footer.main-footer {
    padding: 20px 30px;
    border-top: 1px solid #ddd
}

/* 页脚内部容器：居中并限宽 1080px（footer 位于 .main-content 内部，并非 .page-container 的相邻兄弟） */
footer.main-footer .footer-inner {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto
}

/* ---- 顶栏导航（navbar）：负边距嵌入主内容区 30px padding 内 ---- */
.user-info-navbar {
    min-height: 0;
    border: 0;
    padding: 0;
    margin: -30px;
    margin-bottom: 30px
}

/* 顶栏菜单列表：去除默认边距 */
.user-info-navbar .user-info-menu {
    margin: 0
}

/* 左右两端菜单浮动分布（flex 布局下实际由 index.html 控制） */
.user-info-navbar .user-info-menu.left-links {
    float: left
}

.user-info-navbar .user-info-menu.right-links {
    float: right
}

/* 顶栏菜单项行高为 1 */
.user-info-navbar .user-info-menu li {
    line-height: 1
}

.user-info-navbar .user-info-menu li a {
    line-height: 1
}

.user-info-navbar .user-info-menu li a img {
    line-height: 1
}

/* 顶栏菜单项：块级 + 左浮动 */
.user-info-navbar .user-info-menu>li {
    position: relative;
    margin: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    display: block;
    float: left
}

/* 顶栏菜单链接：上下 padding 30px 决定导航栏高度 */
.user-info-navbar .user-info-menu>li>a {
    position: relative;
    display: block;
    padding: 30px 20px;
    color: #979898;
    top: 1px;
    z-index: 5;
    text-decoration: none
}

/* 顶栏菜单图标尺寸 */
.user-info-navbar .user-info-menu>li>a i {
    font-size: 15px;
    line-height: 1
}

/* 顶栏菜单链接 hover 颜色 */
.user-info-navbar .user-info-menu>li>a:hover {
    color: #606161
}

/* ---- 移动端（≤768px）：侧栏转全宽正常流、顶栏按钮样式、隐藏 navbar ---- */
@media screen and (max-width:768px) {
    /* 移动端侧栏内部相对定位 */
.page-container .sidebar-menu .sidebar-menu-inner {
        position: relative
    }

    /* 移动端 Logo 与菜单左右内边距 20px */
.page-container .sidebar-menu .sidebar-menu-inner .logo-env,
    .page-container .sidebar-menu .sidebar-menu-inner .main-menu {
        padding-left: 20px;
        padding-right: 20px
    }

    /* 移动端顶栏按钮（菜单/搜索/外观/登录）基础样式 */
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button {
        position: relative;
        display: inline-block;
        color: var(--text-secondary-color, #5a6577);
        border: 1px solid var(--control-border-color);
        background: var(--control-surface-color);
        line-height: 1;
        margin-left: 20px
    }

    /* 移动端顶栏按钮图标 */
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a i,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button i {
        line-height: 1;
        font-size: 18px;
        position: relative;
        top: 1px
    }

    /* 移动端顶栏按钮 hover */
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:hover,
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:active,
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:focus,
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:hover,
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:active,
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:focus {
        color: var(--action-accent-color, #4a63e7)
    }

    /* 移动端隐藏顶栏 navbar（功能入口全部迁移到侧栏顶栏按钮） */
.page-container .main-content .navbar.user-info-navbar {
        display: none
    }

    /* 移动端 navbar 内菜单项收窄 padding（navbar 已隐藏，仅作保险） */
.page-container .main-content .navbar.user-info-navbar .user-info-menu>li>a,
    .page-container .main-content .navbar.user-info-navbar .user-info-menu>li>form {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

/* ---- 按钮基础（bootstrap 补充） ---- */
.btn {
    outline: 0;
    border: 1px solid transparent;
    margin-bottom: 10px
}

.btn:active,
.btn:focus {
    outline: 0!important
}

.btn:active,
.btn.active {
    -webkit-box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, .08);
    -moz-box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, .08);
    box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, .08)
}

/* 相邻按钮间距 */
.btn+.btn {
    margin-left: 5px
}

.btn+.btn.btn-block {
    margin-left: 0
}

/* ---- 弹窗内容布局（bootstrap 补充，圆角/边框由 site.css 与 index.html 控制） ---- */
.modal .modal-dialog .modal-content {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #f5f5f5;
    padding: 30px
}

.modal .modal-dialog .modal-content .modal-header {
    margin: 0;
    padding: 0;
    border-bottom-width: 2px;
    padding-bottom: 15px
}

.modal .modal-dialog .modal-content .modal-header .close {
    outline: 0
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 20px 0
}

.modal .modal-dialog .modal-content .modal-footer {
    padding: 0;
    padding-top: 15px
}

.modal .modal-dialog .modal-content .modal-footer .btn {
    margin-bottom: 0
}

/* ---- 表单辅助 ---- */
form .help-block {
    color: #979898
}

/* label 点击不触发文本选中 */
label[for] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/* 行内复选框中 checkbox 垂直对齐 */
label.checkbox-inline input[type=checkbox] {
    margin-top: 2px
}

.input-group .btn {
    margin-bottom: 0
}

/* ---- 导航栏标签基础 ---- */
nav.navbar {
    border: 0
}

nav.navbar form>.btn {
    margin-bottom: 0
}

/* ---- 打印：隐藏侧栏、内容区占满整页 ---- */
@media print {
.sidebar-menu {
        display: none
    }

.main-content {
        padding: 0!important
    }
}

/* ---- 链接 hover 去下划线 ---- */
a:hover {
    text-decoration: none
}

/* label 常规字重（bootstrap 默认加粗，此处取消） */
label {
    font-weight: 400
}

/* ---- 表单控件去阴影（bootstrap 补充） ---- */
.form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.form-control:focus,
.form-control:active {
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

/* ---- 文本颜色工具类（配合 JS/HTML 中使用） ---- */
.text-muted {
    color: #9d9d9d
}

.text-gray {
    color: #555
}

a.text-gray:hover {
    color: #3b3b3b
}

.text-success {
    color: #8dc63f
}

a.text-success:hover {
    color: #72a230
}

.text-info {
    color: #40bbea
}

a.text-info:hover {
    color: #18a8df
}

.text-danger {
    color: #cc3f44
}

a.text-danger:hover {
    color: #ab2d32
}

/* ---- 代码块：自动换行 ---- */
pre {
    white-space: pre-wrap;
    font-size: 12px
}

/* ==================== 02 导航布局：网站卡片、分类区块、导入导出与空状态 ==================== */
/* ============ 导航卡片基础 ============ */
/* 卡片本体：固定高度、hover 时边框/阴影跟随样式变量 */
.site-card {
    height: 86px;
    cursor: pointer;
    border-radius: var(--control-radius, 12px);
    padding: 0px 30px 0px 30px;
    background-color: #fff;
    -webkit-backdrop-filter: blur(var(--card-blur, 0px));
    backdrop-filter: blur(var(--card-blur, 0px));
    border: 1px solid #e4ecf3;
    border-width: var(--card-border-width, 1px);
    box-shadow: var(--card-shadow, none);
    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 破坏声明） */
.site-card:hover {
    box-shadow: var(--card-hover-shadow, 0 0 0 1px var(--action-accent-color));
    -webkit-box-shadow: var(--card-hover-shadow, 0 0 0 1px var(--action-accent-color));
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ---- 卡片内容区：图标与标题/描述始终垂直居中 ---- */
.site-card .card-content {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}
.site-card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 8px;
}
.site-card .card-content img {
    float: none;
    display: block;
}
.site-card .card-description {
    position: static;
    top: auto;
    transform: none;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-description 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;
}

/* ---- 头像圆角与边距 ---- */
.img-circle {
    margin:6px 0;
}

/* ============ 固定侧边栏布局 ============ */
/* 侧栏在桌面视口内保持固定，内容区由 flex 分配剩余宽度。 */
.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;
    font-size: var(--text-font-size, 14px);
    font-weight: var(--text-font-weight, 400);
}
/* 折叠态：侧栏收窄，内容区随 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; }
}

/* ============ 侧边栏背景色 / 字体颜色 / 毛玻璃 ============ */
.sidebar-menu.fixed {
    background-color: var(--sidebar-background, #fff);
    -webkit-backdrop-filter: blur(var(--sidebar-blur, 0px));
    backdrop-filter: blur(var(--sidebar-blur, 0px));
}
.sidebar-menu.fixed .sidebar-menu-inner {
    background-color: transparent;
}
.sidebar-menu .main-menu a { color: var(--sidebar-text-color, #4a4a4a); }
/* 侧栏分类图标颜色跟随字体颜色 */
.sidebar-menu .main-menu a i { color: var(--sidebar-text-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(--sidebar-text-color, #4a4a4a) !important;
}
/* 子菜单展开时箭头旋转回正（收起态 rotate(-90deg) 由 navpage-core 定义，此处覆盖为 0） */
.sidebar-menu .main-menu li.has-sub.opened > a:before {
    transform: rotate(0deg);
}

/* ============ 侧边栏标题字号分级 ============ */
/* 一级标题：比页面字号大 1 号，字重跟随基础样式设置 */
.sidebar-menu .main-menu > li > a .title {
    font-weight: var(--text-font-weight, 400);
    font-size: calc(var(--text-font-size, 14px) + 2px);
    color: var(--sidebar-text-color, #4a4a4a);
}
/* 二级（子分类）标题：比页面字号大 1 号，字重跟随基础样式设置 */
.sidebar-menu .main-menu > li.has-sub > ul > li > a .title {
    font-weight: var(--text-font-weight, 400);
    font-size: calc(var(--text-font-size, 14px) + 2px);
    color: var(--sidebar-text-color, #4a4a4a);
}

/* ============ 侧栏分类菜单底边框线（开关控制，仅一级菜单，二级不显示边框线） ============ */
.sidebar-menu .main-menu > li > a {
    border-bottom: 1px solid transparent !important;
}
.sidebar-menu.show-border .main-menu > li > a {
    border-bottom-color: var(--sidebar-border-color, var(--control-border-color)) !important;
}

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

/* ============ 折叠态侧边栏修复 ============ */
.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;
    margin-left: 0 !important;
    margin-right: 0 !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;
    overflow: hidden;
}
footer.main-footer .footer-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
footer.main-footer .footer-text {
    font-size: var(--text-font-size, 14px);
    font-weight: var(--text-font-weight, 400);
}

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

/* ============ 弹窗圆角跟随变量 ============ */
/* Bootstrap 3.3.1 的 Modal 将 .modal-backdrop 作为 modal 子元素（z-index 1040），
   会覆盖无 z-index 的 .modal-dialog 导致弹窗内容无法点击；
   提升 modal-dialog 层级（>1040），确保弹窗内容可正常交互 */
.modal-dialog { z-index: 1050; }
.modal-content { border-radius: var(--control-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(--control-radius, 12px) !important;
    height: 40px !important;
    font-size: 14px;
}
.modal .btn { border-radius: var(--control-radius, 12px) !important; }
.modal .modal-footer .btn { height: 40px !important; font-size: 15px; }
/* 删除弹窗：宽度 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: var(--status-danger-color) !important;
    border-color: var(--status-danger-color) !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(--text-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(--control-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: var(--action-soft-background); color: var(--action-accent-color); }

/* ============ 导航卡片响应式布局（v22） ============ */
/* 列宽由本文件的 .card-grid / .card-cell 规则控制，手机布局由 themes.css 切换。 */

/* ============ 移动端（<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; }

    /* 移动端一级菜单字号缩小（去掉 +2px 加粗提升，与页面字号一致） */
    .sidebar-menu .main-menu > li > a .title,
    .sidebar-menu .main-menu > li > a i { font-size: var(--text-font-size, 14px); }

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

/* 超窄屏（≤360px）：顶栏按钮缩小字号/间距，避免横向溢出 */
@media (max-width: 360px) {
    .sidebar-menu .logo-env { padding: 12px 10px !important; }
    .sidebar-menu .logo-env .mobile-menu-toggle { gap: 8px; }
    .sidebar-menu .logo-env .mobile-menu-toggle a,
    .sidebar-menu .logo-env .mobile-menu-toggle button {
        font-size: 12px;
        padding: 4px 8px;
        white-space: nowrap;
    }
}

/* ============ 卡片组件（原 navpage-components.css 合并而来） ============ */
/* 导航卡片容器基础样式 */
.nav-widget.nav-conversations {
    position: relative;
    background: #fff;
    margin-bottom: 0px;
    padding: 15px
}

/* ==================== 03 通用界面：设计变量、控件、搜索、菜单与响应式行为 ==================== */
:root {

    --control-radius-small: calc(var(--control-radius, 12px) * 0.5);
    --control-radius-medium: calc(var(--control-radius, 12px) * 0.75);
    --control-radius-large: var(--control-radius, 12px);

    --motion-easing: cubic-bezier(.22, .61, .36, 1);
    --motion-fast: 140ms var(--motion-easing);
    --motion-medium: 240ms var(--motion-easing);

    --page-background-color: #f2f5fa;
    --page-background-image: none;
    --card-surface-color: #ffffff;
    --control-surface-color: #f6f8fc;
    --control-surface-muted-color: #eef2f8;
    --category-surface-color: #f6f8fc;
    --header-surface-color: rgba(255, 255, 255, .78);
    --footer-surface-color: transparent;

    --control-border-color: rgba(227, 233, 242, 0.18);
    --control-border-soft-color: rgba(255, 255, 255, .2);
    --control-border-strong-color: #d3dbe8;

    --text-primary-color: #1b2330;
    --text-secondary-color: #5a6577;
    --text-muted-color: #8e99ab;

    --status-danger-color: #e0483c;

    --status-success-color: #17a673;

    --status-warning-color: #e08a00;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .09), 0 2px 6px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 46px rgba(16, 24, 40, .14), 0 4px 12px rgba(16, 24, 40, .07);
    --shadow-accent: 0 6px 18px rgba(var(--action-accent-rgb), .32);

    --action-accent-color: #4a63e7;
    --action-accent-rgb: 74, 99, 231;
    --action-hover-color: #3d55d8;
    --action-soft-background: rgba(74, 99, 231, .10);
    --action-pressed-background: rgba(74, 99, 231, .18);
    --action-text-color: #ffffff;

    --pc-sidebar-width: 272px;
    --pc-sidebar-collapsed-width: 78px;
    --header-height: 64px;
    --card-height: 84px;

}
html[data-mode="dark"] {
    --page-background-color: #0d1117;
    --page-background-image: none;
    --card-surface-color: #161b24;
    --control-surface-color: #1b2029;
    --control-surface-muted-color: #232935;
    --category-surface-color: #1b2029;
    --header-surface-color: rgba(18, 22, 30, .78);
    --footer-surface-color: transparent;

    --control-border-color: #252c39;
    --control-border-soft-color: #1e242f;
    --control-border-strong-color: #333c4c;

    --text-primary-color: #e7ebf3;
    --text-secondary-color: #a3adbf;
    --text-muted-color: #6f7b8e;

    --status-danger-color: #f0655a;

    --status-success-color: #2ecf9a;

    --status-warning-color: #f5b53d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .40);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, .50);
    --shadow-lg: 0 22px 54px rgba(0, 0, 0, .60);
    --shadow-accent: 0 6px 20px rgba(var(--action-accent-rgb), .40);
}
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="dark"] input,
html[data-mode="dark"] select,
html[data-mode="dark"] textarea { color: var(--text-primary-color); }
html[data-mode="dark"] ::placeholder { color: var(--text-muted-color); }
html[data-mode="dark"] body {
    background-color: var(--page-background-color);
    background-image: var(--page-background-image);
}
html[data-mode="dark"] .site-card { background-color: var(--card-surface-color) !important; }
html[data-mode="dark"] .category-section { background-color: var(--category-surface-color) !important; border-color: var(--control-border-color) !important; }
html[data-mode="dark"] .sidebar-menu.fixed { background-color: transparent !important; }
html[data-mode="dark"] .user-info-navbar { background-color: var(--header-background, var(--header-surface-color)) !important; }
html[data-mode="dark"] footer.main-footer { background-color: var(--footer-background, var(--footer-surface-color)) !important; }
html[data-mode="dark"] .sidebar-menu .main-menu a,
html[data-mode="dark"] .sidebar-menu .main-menu a i,
html[data-mode="dark"] .sidebar-menu .main-menu a .title,
html[data-mode="dark"] .sidebar-menu .main-menu li.has-sub > a:before,
html[data-mode="dark"] .sidebar-menu .main-menu > li:not(.has-sub) > a:after,
html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:after { color: var(--sidebar-text-color, var(--text-primary-color)) !important; }
html[data-mode="dark"] .sidebar-menu .main-menu > li.opened > a,
html[data-mode="dark"] .sidebar-menu .main-menu > li.active > a { color: var(--action-accent-color) !important; }
html[data-mode="dark"] .sidebar-menu .main-menu > li > a:hover,
html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover { background: var(--category-hover-background, var(--action-soft-background)) !important; }
.sidebar-menu .main-menu > li > a:hover,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover {
    -webkit-backdrop-filter: blur(var(--category-hover-blur, 0px));
    backdrop-filter: blur(var(--category-hover-blur, 0px));
}
html[data-mode="dark"] .sidebar-menu .main-menu > li.opened > a,
html[data-mode="dark"] .sidebar-menu .main-menu > li.active > a { background: var(--action-soft-background) !important; }
:root {
    --sidebar-background: transparent;
    --sidebar-text-color: var(--text-primary-color);
    --sidebar-border-color: var(--control-border-soft-color);
    --brand-border-color: var(--control-border-soft-color);

    --header-background: var(--header-surface-color);
    --footer-background: var(--footer-surface-color);
    --card-hover-shadow: 0 0 0 1px var(--action-accent-color);

    --submenu-background: color-mix(in srgb, var(--sidebar-text-color, var(--text-primary-color)) 6%, transparent);
    --submenu-blur: 0px;

    --category-hover-background: rgba(var(--action-accent-rgb), .10);
    --category-hover-blur: 0px;

}
.sidebar-menu .main-menu > li.has-sub > ul {
    background-color: var(--submenu-background, rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(var(--submenu-blur, 0px));
    backdrop-filter: blur(var(--submenu-blur, 0px));
}
html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul {
    background-color: var(--submenu-background, rgba(255, 255, 255, 0));
}
html .sidebar-menu .main-menu > li.has-sub > ul {
    background-color: var(--submenu-background, color-mix(in srgb, var(--sidebar-text-color, var(--text-primary-color)) 6%, transparent)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html { scroll-behavior: smooth; overflow-y: scroll; }
/* 保留滚动条及 CSS 视口宽度。背景滚动由 navpage-modal.js 锁定，避免 WebKit 断点变化。 */
html.modal-scroll-locked { overflow-y: scroll; overflow-anchor: none; overscroll-behavior: none; }
html.modal-scroll-locked body.modal-open { overflow: visible; }
html.modal-scroll-locked .modal-body,
html.modal-scroll-locked .form-floating-menu { overscroll-behavior: contain; }
/* Reserve the document scrollbar while Bootstrap or the mobile menu locks scroll.
   Bootstrap's legacy body compensation would otherwise reserve the space twice. */
@supports (scrollbar-gutter: stable) {
    html { scrollbar-gutter: stable; }
    body.modal-open { padding-right: 0 !important; }
}
body {
    background-color: var(--page-background-color);
    background-image: var(--page-background-image);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-primary-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--motion-medium), color var(--motion-medium);
}
::selection { background: var(--action-pressed-background); color: var(--text-primary-color); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--control-border-strong-color); border-radius: 8px; border: 2px solid var(--page-background-color); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted-color); }
a { color: var(--action-accent-color); transition: color var(--motion-fast); }
.text-gray { color: var(--text-secondary-color) !important; }
.text-muted { color: var(--text-muted-color) !important; }
.text-info { color: var(--action-accent-color) !important; }
.text-success { color: var(--status-success-color) !important; }
.text-danger { color: var(--status-danger-color) !important; }
.sidebar-menu.fixed {
    border-right: 1px solid var(--control-border-color);
    box-shadow: var(--shadow-sm);
}
.sidebar-menu.fixed::-webkit-scrollbar-thumb { background: var(--control-border-strong-color); }
.sidebar-menu.fixed::-webkit-scrollbar-thumb:hover { background: var(--text-muted-color); }
.sidebar-menu .main-menu {padding-right: 12px; }
.sidebar-menu .main-menu > li { margin: 2px 0; }
.sidebar-menu .main-menu > li > a {
    padding: 8px 12px;
    border-radius: var(--control-radius-medium);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar-menu .main-menu > li > a:hover { color: var(--text-primary-color); }
.sidebar-menu .main-menu > li.opened > a,
.sidebar-menu .main-menu > li.active > a {
    color: var(--action-accent-color) !important;
    background: var(--action-soft-background) !important;
    font-weight: 600;
}
.sidebar-menu .main-menu > li.has-sub > ul {
    margin: 2px 0 6px;
    padding: 4px;
    border-radius: var(--control-radius-large);
}
.sidebar-menu .main-menu > li.has-sub > ul > li > a {
    padding: 8px 10px;
    border-radius: var(--control-radius-small);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar-menu .main-menu > li.has-sub > ul > li.active > a { color: var(--action-accent-color) !important; }
@media (min-width: 769px) {
html .sidebar-menu .main-menu > li > a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        margin: 2px 0;
        padding: 8px 12px;
    }
html .sidebar-menu .main-menu > li > a > i {
        flex: 0 0 20px;
        width: 20px;
        margin: 0;
        text-align: center;
        font-size: 15px;
        opacity: .9;
    }
html .sidebar-menu .main-menu > li > a > .title {
        flex: 1 1 auto;
        min-width: 0;
    }
html .sidebar-menu .main-menu > li.has-sub > a:before {
        float: none;
        margin-left: auto;
        margin-right: 0;
        order: 99;
    }
html .sidebar-menu .main-menu > li.has-sub > ul {
        margin: 2px 0 6px;
        padding: 4px;
        border-left: none;
        border-radius: var(--control-radius-large);
    }
html .sidebar-menu .main-menu > li.has-sub > ul > li > a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: var(--control-radius-small);
    }
html .sidebar-menu .main-menu > li.has-sub > ul > li > a > i {
        flex: 0 0 18px;
        width: 18px;
        margin: 0;
        text-align: center;
        opacity: .75;
    }

}
.logo-env { padding: 18px 16px !important; background: transparent; }
.user-info-navbar {
    position: sticky; top: 0; z-index: 1020;
    -webkit-backdrop-filter: blur(var(--header-blur, 16px)); backdrop-filter: blur(var(--header-blur, 16px));
    border-bottom: 1px solid var(--control-border-color);
    box-shadow: var(--shadow-xs);
    padding: 0 22px !important;
    min-height: var(--header-height);
}
.nav-search input#siteSearchInput {
    background: var(--control-surface-color);
    border: 1px solid var(--control-border-color);
    color: var(--text-primary-color);
}
.nav-search input#siteSearchInput::placeholder { color: var(--text-muted-color); }
.nav-search input#siteSearchInput:focus {
    border-color: var(--action-accent-color);
    box-shadow: 0 0 0 3px var(--action-soft-background);
}
.search-engine-switch .ses-toggle { border-color: var(--control-border-color); background: var(--control-surface-color); color: var(--header-button-color, var(--text-secondary-color)); }
.search-engine-switch .ses-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
.search-engine-switch .ses-menu button { color: var(--text-secondary-color); }
.search-engine-switch .ses-menu button:hover { background: var(--action-soft-background); color: var(--action-accent-color); }
.search-engine-switch .ses-menu,
.nav-search .search-results { background: var(--card-surface-color); border-color: var(--control-border-color); box-shadow: var(--shadow-lg); }
html[data-mode="dark"] .search-engine-switch .ses-toggle { background-color: var(--header-button-background, var(--control-surface-color)); color: var(--header-button-color, var(--text-secondary-color)) !important; }
html[data-mode="dark"] .search-engine-switch .ses-toggle:hover { border-color: var(--action-accent-color) !important; color: var(--action-accent-color) !important; }
html[data-mode="dark"] .search-engine-switch .ses-menu button:hover,
html[data-mode="dark"] .search-engine-switch .ses-menu button.active { background-color: var(--action-soft-background) !important; color: var(--action-accent-color) !important; }
html[data-mode="dark"] .search-engine-switch .ses-menu,
html[data-mode="dark"] .nav-search .search-results { background-color: var(--header-flyout-background, var(--card-surface-color)); border-color: var(--control-border-color) !important; box-shadow: var(--shadow-lg) !important; }
html[data-mode="dark"] .nav-search .search-results .sr-item:hover,
html[data-mode="dark"] .nav-search .search-results .sr-item.active { background: var(--action-soft-background) !important; }
html[data-mode="dark"] .nav-search .search-results .sr-title { color: var(--text-primary-color) !important; }
html[data-mode="dark"] .nav-search .search-results .sr-cat,
html[data-mode="dark"] .nav-search .search-results .sr-empty { color: var(--text-muted-color) !important; }
html[data-mode="dark"] .nav-search .search-results mark { background: rgba(255, 213, 0, .35); color: inherit; }
.nav-search .search-results .sr-item:hover,
.nav-search .search-results .sr-item.active { background: var(--action-soft-background); }
.nav-search .search-results .sr-title { color: var(--text-primary-color); }
.nav-search .search-results .sr-cat { color: var(--text-muted-color); }
.nav-search .search-submit-button {
    background: var(--action-accent-color);
    box-shadow: var(--shadow-accent);
}
.nav-search .search-submit-button:hover { background: var(--action-hover-color); }
.search-count { background: var(--action-accent-color); box-shadow: var(--shadow-accent); }
.search-count .search-clear { color: var(--action-text-color); opacity: .85; }
.style-toggle,
.theme-picker-toggle {
    border: 1px solid var(--control-border-color);
    background: var(--control-surface-color);
    color: var(--header-button-color, var(--text-secondary-color));
}
.style-toggle:hover,
.theme-picker-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
.nav-search #siteSearchInput { color: var(--header-button-color, var(--text-primary-color)); }
.nav-search #siteSearchInput::placeholder { color: var(--header-button-color, var(--text-muted-color)); opacity: .7; }
.theme-picker-li { margin: 0 !important; padding: 0 !important; border: 0 !important;}
.theme-picker-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-width: 40px; padding: 0 14px; margin: 0 2px;
    border-radius: var(--control-radius-medium); font-size: 13px; white-space: nowrap; cursor: pointer;
    transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
}
.theme-picker-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
#userNav .user-greeting,
#loginNav a,
#userNav .user-logout { color: var(--text-secondary-color); }
html .style-toggle,
html .theme-picker-toggle,
html .search-engine-switch .ses-toggle { border-color: transparent; }
.category-section {
    background: var(--category-surface-color);
    border: 1px solid var(--control-border-color);
    box-shadow: var(--shadow-xs);
}
.category-section.no-bg { background: transparent !important; border-color: transparent !important; box-shadow: none; }
.category-section .section-title { color: var(--text-primary-color); }
.category-section .section-title > i { color: var(--action-accent-color); }
.category-section .cat-actions button { color: inherit; }
.category-section .cat-actions button i { color: inherit; }
.site-card {
    background-color: var(--card-surface-color);
    border: var(--card-border-width, 1px) solid var(--card-border-color, var(--control-border-color));
    box-shadow: var(--card-shadow, var(--shadow-sm));
}
.card-title strong { color: var(--text-primary-color);  }
.card-description p { color: var(--text-secondary-color); font-size: 12px; margin-top: 2px; }
.card-icon img { background: transparent; border-radius: var(--control-radius-small); }
.site-card:hover {
    box-shadow: var(--card-hover-shadow, var(--shadow-md));
    -webkit-box-shadow: var(--card-hover-shadow, var(--shadow-md));
    border-color: var(--action-accent-color) !important;
    transform: translateY(-3px);
}
.site-card:focus-visible { outline: none; border-color: var(--action-accent-color); box-shadow: 0 0 0 3px var(--action-soft-background); }
.card-tag-icon { color: var(--action-accent-color); }
.card-featured { color: var(--status-warning-color); }
.card-pinned { color: var(--action-accent-color); }
.site-card.is-featured { border-color: var(--status-warning-color); }
.card-stamp { background: var(--card-surface-color); }
.editor-modal .modal-content { background: var(--card-surface-color); border: 1px solid var(--control-border-color); box-shadow: var(--shadow-lg); color: var(--text-primary-color); }
.editor-modal .modal-header { border-bottom-color: var(--control-border-color); }
.editor-modal .modal-title { color: var(--text-primary-color); }
.editor-modal .modal-body { color: var(--text-secondary-color); }
.editor-modal .modal-footer { border-top-color: var(--control-border-color); }
.editor-modal .form-control { background: var(--control-surface-color); border-color: var(--control-border-color); color: var(--text-primary-color); }
.editor-modal .form-control:focus { border-color: var(--action-accent-color); box-shadow: 0 0 0 3px var(--action-soft-background); }
.editor-modal .btn-primary { background: var(--action-accent-color); border-color: var(--action-accent-color); color: var(--action-text-color); box-shadow: var(--shadow-accent); }
.editor-modal .btn-primary:hover { background: var(--action-hover-color); border-color: var(--action-hover-color); }
.editor-modal .btn-default { background: var(--control-surface-color); color: var(--text-primary-color); border-color: var(--control-border-color); }
.editor-modal .btn-default:hover { background: var(--control-surface-muted-color); color: var(--text-primary-color); }
.modal .form-control { background: var(--control-surface-color); border-color: var(--control-border-color); color: var(--text-primary-color); }
.modal .form-control:focus { border-color: var(--action-accent-color); box-shadow: 0 0 0 3px var(--action-soft-background); }
.modal .btn { border-radius: var(--control-radius-medium); }
#loginModal .form-control { background: var(--control-surface-color); border-color: var(--control-border-color); color: var(--text-primary-color); }
#loginModal .modal-footer .btn-default { background: var(--control-surface-color); color: var(--text-primary-color); border-color: var(--control-border-color); }
#deleteModal #btnDeleteOk:hover { background: var(--status-danger-color) !important; border-color: var(--status-danger-color) !important; }
.site-actions .site-del { background: var(--action-accent-color) !important; }
.site-actions .site-del:hover { background: var(--action-hover-color) !important; color: #fff; }
.cat-del { color: var(--status-danger-color) !important; }
.cat-del:hover { opacity: .85; }
.cat-addsite { color: var(--status-success-color) !important; }
.cat-addsite:hover { opacity: .85; }
.icon-picker-toggle { background: var(--control-surface-color); border: 1px solid var(--control-border-color); color: var(--text-secondary-color); }
.icon-picker-menu { background: var(--card-surface-color); border-color: var(--control-border-color); box-shadow: var(--shadow-lg); }
.icon-picker-menu a:hover { background: var(--action-soft-background); border-color: var(--action-accent-color); color: var(--action-accent-color); }
.icon-picker-menu a.selected { background: var(--action-soft-background); border-color: var(--action-accent-color); color: var(--action-accent-color); }
.style-subtitle { color: var(--action-accent-color); }
.style-reset button { color: var(--text-muted-color); border-color: var(--control-border-color); }
.style-reset button:hover { color: var(--action-accent-color); border-color: var(--action-accent-color); }
.export-menu { background: var(--card-surface-color); border-color: var(--control-border-color); box-shadow: var(--shadow-lg); }
.export-menu button { color: var(--text-secondary-color); }
.export-menu button:hover { background: var(--action-soft-background); color: var(--action-accent-color); }
.admin-fab-main { background: var(--action-accent-color); box-shadow: var(--shadow-accent); }
.admin-fab-main:hover { background: var(--action-hover-color); }
.admin-fab-menu #btnAddCat { background: var(--action-accent-color); }
.admin-fab-menu #btnAddSite { background: var(--status-success-color); }
footer.main-footer { color: var(--text-muted-color); border-top: 1px solid var(--control-border-color); -webkit-backdrop-filter: blur(var(--footer-blur, 0px)); backdrop-filter: blur(var(--footer-blur, 0px)); }
footer.main-footer .footer-text { color: var(--text-muted-color); }
.empty-state-title { color: var(--text-primary-color); }
.empty-state-sub { color: var(--text-muted-color); }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.site-card:hover { transform: none !important; }

}
html .sidebar-menu.fixed { width: var(--pc-sidebar-width); flex-basis: var(--pc-sidebar-width); }
html .sidebar-menu.fixed.collapsed { width: var(--pc-sidebar-collapsed-width); flex-basis: var(--pc-sidebar-collapsed-width); }
@media (min-width: 769px) {
.mobile-menu-backdrop { display: none; }

}
@media (max-width: 768px) {
.sidebar-menu.fixed {
        position: sticky !important;
        top: 0;
        width: 100% !important;
        height: auto !important;
        z-index: 1030;
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid var(--control-border-color);
        box-shadow: var(--shadow-sm);
    }
.sidebar-menu.fixed .sidebar-menu-inner {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap;
        padding: 6px 10px;
        gap: 0;
        position: relative;
    }
.logo-env {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        width: 100%;
        padding: 0 !important;
        border-bottom: none !important;
    }
.mobile-menu-toggle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
    }
.mobile-menu-toggle a,
.mobile-menu-toggle button {
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 28px;
        padding: 0 8px !important;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary-color);
        border-radius: var(--control-radius-medium);
        background: var(--control-surface-color);
        border: 1px solid var(--control-border-color);
        line-height: 1;
        box-sizing: border-box;
        white-space: nowrap;
        text-decoration: none;
        flex: 0 0 auto;
        letter-spacing: 0;
    }
.mobile-menu-toggle a:hover,
.mobile-menu-toggle button:hover { color: var(--action-accent-color); background: var(--action-soft-background); }
.nav-search .search-input-wrap,
.nav-search .search-engine-switch,
.nav-search .search-submit-button,
.nav-search .style-toggle { display: none !important; }
#main-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 12px;
        width: min(240px, calc(100vw - 24px));
        z-index: 1029;
        display: flex !important;
        flex-direction: column !important;
        max-height: min(66vh, 560px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px;
        margin: 0;
        border-radius: var(--control-radius-large);

        border: 1px solid var(--control-border-color);
        box-shadow: 0 12px 40px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .08);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        backdrop-filter: blur(20px) saturate(1.4);

        background: color-mix(in srgb, var(--card-surface-color) 92%, transparent);
        transition: opacity var(--motion-medium), transform var(--motion-medium), visibility var(--motion-medium);
        transform-origin: top left;
    }
.mobile-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1028;
        border: 0;
        background: rgba(13, 17, 23, .34);
    }
.mobile-menu-backdrop.open { display: block; }
body.mobile-menu-open { overflow: hidden; }
#main-menu.collapsed {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
        visibility: hidden;
        pointer-events: none;
    }
#main-menu:not(.collapsed) {
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }
.sidebar-menu .main-menu > li { display: block !important; margin: 1px 0; }
.sidebar-menu .main-menu > li > a {
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: var(--control-radius-medium);
        padding: 11px 14px;
        white-space: nowrap;
        font-size: 15px;
        line-height: 1.35;
        min-height: 44px;
        box-sizing: border-box;
    }
.sidebar-menu .main-menu > li > a > i {
        flex: 0 0 auto;
        width: 20px;
        text-align: center;
        margin-right: 0;
        font-size: 16px;
    }
.sidebar-menu .main-menu > li > a > .title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.sidebar-menu .main-menu > li.has-sub > a:before {
        float: none;
        order: 3;
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 2px;
    }
.sidebar-menu .main-menu > li.has-sub > ul {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        padding: 0 6px;

        transition: max-height var(--motion-medium), opacity var(--motion-fast), margin var(--motion-medium), padding var(--motion-medium);
    }
.sidebar-menu .main-menu > li.has-sub.opened > ul {
        max-height: 320px;
        opacity: 1;
        margin: 2px 0 4px;
        padding: 4px 6px;
    }
.sidebar-menu .main-menu > li.has-sub > ul > li > a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        min-height: 40px;
        border-radius: var(--control-radius-small);
        font-size: 16px;
    }
.sidebar-menu .main-menu > li.has-sub > ul > li > a > i {
        flex: 0 0 auto;
        width: 20px;
        text-align: center;
        margin-right: 0;
        font-size: 14px;
        opacity: .75;
    }
.sidebar-menu .main-menu > li.has-sub > ul {
        margin-left: 0;
        border-left: none;
        border-radius: 12px;
    }
#main-menu::-webkit-scrollbar { width: 0; height: 0; display: none; }
#main-menu { scrollbar-width: none; -ms-overflow-style: none; }
html[data-mode="dark"] #main-menu {
        background: color-mix(in srgb, var(--card-surface-color) 88%, transparent);
        box-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .30);
    }
@media (prefers-reduced-motion: reduce) {
#main-menu,
#main-menu.collapsed,
#main-menu:not(.collapsed),
.sidebar-menu .main-menu > li.has-sub > ul {
            transition: none !important;
        }

    }
.page-container .main-content { margin-left: 0 !important; padding: 0 10px !important; }
#themePickerPanel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 85px !important; 
        bottom: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 12px !important;
        padding: 16px !important;
        z-index: 1080 !important;
        overflow-y: auto;
        margin: 0 !important;
    }
#themePickerPanel.open { display: block !important; }
body.edit-mode .mobile-menu-toggle #topLoginBtn { display: none !important; }
body:not(.edit-mode) .mobile-menu-toggle #topUserNav { display: none !important; }
#loginModal .modal-dialog { width: 94vw; max-width: none; }
html .card-grid > .col-sm-3.card-cell { width: 50% !important; }

}
html .site-card { height: var(--card-height); }
html .site-card { -webkit-backdrop-filter: blur(var(--card-blur, 18px)); backdrop-filter: blur(var(--card-blur, 18px)); }
html .category-section { -webkit-backdrop-filter: blur(var(--section-blur, 18px)); backdrop-filter: blur(var(--section-blur, 18px)); }
html .user-info-navbar,
html .sidebar-menu.fixed,
html .editor-modal .modal-content,
html .theme-picker-panel {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
html .user-info-navbar {
    -webkit-backdrop-filter: blur(var(--header-blur, 18px));
    backdrop-filter: blur(var(--header-blur, 18px));
}
html .site-card { background-color: rgba(255, 255, 255, .62); border-color: rgba(16, 24, 40, .10); }
html .category-section { background-color: rgba(255, 255, 255, .46); border-color: rgba(16, 24, 40, .08); }

html .editor-modal .modal-content,
html .theme-picker-panel {  border-color: rgba(16, 24, 40, .10); }
html .nav-search input#siteSearchInput,
html .nav-search .ses-toggle,
html .style-toggle,
html .theme-picker-toggle,
html .nav-search .search-submit-button {
    background-color: var(--header-button-background, rgba(255, 255, 255, .55));
    -webkit-backdrop-filter: blur(var(--header-button-blur, 18px));
    backdrop-filter: blur(var(--header-button-blur, 18px));
}

html .search-engine-switch .ses-menu,
html .export-menu,
html .nav-search .search-results {
    background-color: var(--header-flyout-background, rgba(255, 255, 255, .62));
    border-color: rgba(16, 24, 40, .10);
    -webkit-backdrop-filter: blur(var(--header-flyout-blur, 18px));
    backdrop-filter: blur(var(--header-flyout-blur, 18px));
}
html[data-mode="dark"] .site-card { background-color: rgba(22, 27, 36, .30); border-color: rgba(255, 255, 255, .08); }
html[data-mode="dark"] .category-section { background-color: rgba(27, 32, 41, .42); border-color: rgba(255, 255, 255, .07); }
html[data-mode="dark"] .user-info-navbar { background-color: rgba(18, 22, 30, .42); }
html[data-mode="dark"] .sidebar-menu.fixed { background-color: rgba(27, 32, 41, .42); }
html[data-mode="dark"] .editor-modal .modal-content,
html[data-mode="dark"] .theme-picker-panel { background-color: rgba(18, 22, 30, .55); border-color: rgba(255, 255, 255, .08); }
html[data-mode="dark"] .nav-search input#siteSearchInput,
html[data-mode="dark"] .nav-search .ses-toggle,
html[data-mode="dark"] .style-toggle,
html[data-mode="dark"] .theme-picker-toggle,
html[data-mode="dark"] .nav-search .search-submit-button { background-color: var(--header-button-background, rgba(18, 22, 30, .42)); border-color: var(--card-border-color, rgba(255, 255, 255, .08)); }
html[data-mode="dark"] .search-engine-switch .ses-menu,
html[data-mode="dark"] .export-menu,
html[data-mode="dark"] .nav-search .search-results { background-color: var(--header-flyout-background, rgba(18, 22, 30, .42)); border-color: var(--card-border-color, rgba(255, 255, 255, .08)) !important; }
html {  --category-hover-background: rgba(255, 255, 255, .62);
  --category-hover-blur: 18px;
  --submenu-blur: 18px;
  --card-blur: 30px;
  --section-blur: 30px; }
html[data-mode="dark"] {  --category-hover-background: rgba(22, 27, 36, .5);
  --category-hover-blur: 18px;
  --submenu-blur: 18px;
  --card-blur: 20px;
  --section-blur: 20px; }
html { --category-glass-background: rgba(255, 255, 255, var(--category-glass-opacity, .24));
  --card-glass-background: rgba(255, 255, 255, var(--card-glass-opacity, .06)); }
html[data-mode="dark"] { --category-glass-background: rgba(18, 22, 30, var(--category-glass-opacity, .22));
  --card-glass-background: rgba(18, 22, 30, var(--card-glass-opacity, .12)); }
html body .category-section { background-color: var(--category-glass-background) !important; }
html .user-info-navbar { background-color: var(--header-background, var(--category-glass-background)) !important; }
html .sidebar-menu.fixed { background-color: var(--category-glass-background) !important; }
html .mobile-search-panel { background-color: var(--category-glass-background) !important; }
html .mobile-search-panel { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html .mobile-menu-toggle > button,
html .mobile-menu-toggle #topLogoutBtn { -webkit-backdrop-filter: blur(var(--header-button-blur, 18px)); backdrop-filter: blur(var(--header-button-blur, 18px)); }
html[data-mode="dark"] .mobile-menu-toggle > button,
html[data-mode="dark"] .mobile-menu-toggle #topLogoutBtn { border-color: transparent !important; }
html body .site-card { background-color: var(--card-glass-background) !important; }
html .nav-search input#siteSearchInput,
html .nav-search .ses-toggle,
html .style-toggle,
html .theme-picker-toggle,
html .mobile-menu-toggle > button,
html .mobile-menu-toggle #topLogoutBtn { background-color: var(--header-button-background, var(--card-glass-background)) !important; }
html .nav-search .search-submit-button { background-color: var(--action-accent-color) !important; color: var(--action-text-color) !important; box-shadow: var(--shadow-accent) !important; }
html .nav-search .search-submit-button:hover { background-color: var(--action-hover-color) !important; color: var(--action-text-color) !important; }
html .nav-search .ses-toggle:hover,
html .style-toggle:hover,
html .theme-picker-toggle:hover { border-color: var(--action-accent-color) !important; color: var(--action-accent-color) !important; }
html .sidebar-menu .main-menu > li > a:hover,
html .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover { background-color: var(--card-glass-background) !important; }
html body .category-section,
html body .site-card,
html .user-info-navbar,
html .sidebar-menu.fixed,
html .nav-search input#siteSearchInput { border-color: rgba(16, 24, 40, .10) !important; }
html[data-mode="dark"] body .category-section,
html[data-mode="dark"] body .site-card,
html[data-mode="dark"] .user-info-navbar,
html[data-mode="dark"] .sidebar-menu.fixed,
html[data-mode="dark"] .nav-search input#siteSearchInput { border-color: rgba(255, 255, 255, .08) !important; }
html body .site-card,
html .nav-search input#siteSearchInput { border-color: var(--card-border-color, rgba(16, 24, 40, .10)) !important; }
html[data-mode="dark"] body .site-card,
html[data-mode="dark"] .nav-search input#siteSearchInput { border-color: var(--card-border-color, rgba(255, 255, 255, .08)) !important; }
html .editor-modal .modal-content,
html .theme-picker-panel {
    background-color: var(--card-surface-color) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.theme-picker-panel {
    display: none; position: absolute; right: -120px; top: 100%; margin-top: 25px; z-index: 1071;
    width: 400px; max-width: calc(100vw - 24px); max-height: 80vh; overflow-y: auto;
    padding: 16px; background: var(--card-surface-color); border: 1px solid var(--control-border-color);
    border-radius: var(--control-radius-large); box-shadow: var(--shadow-lg); color: var(--text-primary-color);
}
.theme-picker-panel.open { display: block; }
.theme-picker-li { position: relative; display: inline-flex; align-items: center; list-style: none; min-height: 0 !important; }
.nav-search input#siteSearchInput,
.search-engine-switch .ses-toggle,
.style-toggle,
.theme-picker-toggle {
    background-color: var(--header-button-background, var(--control-surface-color));
    -webkit-backdrop-filter: blur(var(--header-button-blur, 0px));
    backdrop-filter: blur(var(--header-button-blur, 0px));
}
.search-engine-switch .ses-menu,
.export-menu,
.nav-search .search-results {
    background-color: var(--header-flyout-background, var(--card-surface-color));
    -webkit-backdrop-filter: blur(var(--header-flyout-blur, 0px));
    backdrop-filter: blur(var(--header-flyout-blur, 0px));
}
html { --sidebar-text-color: #2a3446 !important;
  --header-button-color: #5d6b7e; }
html[data-mode="dark"] { --sidebar-text-color: #e9edf5 !important;
  --header-button-color: #a9b3c4; }
.page-body button,
.page-body .btn,
.page-body input[type="button"],
.page-body input[type="submit"] { font-weight: var(--text-font-weight, 400); }
.page-body button:not(.style-toggle):not(.theme-picker-toggle):not(.ses-toggle):not(.search-submit-button):hover,
.page-body .btn:not(.style-toggle):not(.theme-picker-toggle):not(.ses-toggle):not(.search-submit-button):hover,
.page-body input[type="button"]:hover,
.page-body input[type="submit"]:hover {

    outline-offset: 0;
    font-weight: var(--text-font-weight, 400);
}
.sidebar-menu .main-menu > li > a:hover,
.sidebar-menu .main-menu > li > a:hover i,
.sidebar-menu .main-menu > li > a:hover .title,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover i,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover .title {
    color: var(--action-accent-color) !important;
}
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:hover,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:active,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:focus,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:hover,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:active,
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:focus {
    color: var(--action-accent-color);
}
.card-title strong {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size, 14px);
    font-weight: var(--text-font-weight, 400);
}
.user-info-navbar,
html .nav-search,
html .nav-search input#siteSearchInput,
html .nav-search .search-submit-button,
html .search-engine-switch .ses-toggle,
html .search-engine-switch .ses-menu button,
html .style-toggle,
html .theme-picker-toggle,
html .search-count {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size, 14px);
    font-weight: var(--text-font-weight, 400);
}
html .nav-search input#siteSearchInput,
html .nav-search input#siteSearchInput::placeholder {
    color: var(--header-button-color, var(--text-primary-color));
}
html .nav-search input#siteSearchInput::placeholder { opacity: .7; }
@media (min-width: 769px) {
html .sidebar-menu .main-menu > li.has-sub > ul > li > a {
        padding-right: 26px; 
    }
html .sidebar-menu .main-menu > li.has-sub > ul > li > a .title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
    }
html .sidebar-menu .main-menu > li.has-sub > ul > li > a:after {
        right: 10px; 
    }

}

/* ==================== 04 页面交互：字体、管理按钮、搜索与编辑弹窗 ==================== */
@font-face {
        font-family: 'MiSans';
        src: url('../fonts/misans/MiSans-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
@font-face {
        font-family: 'MiSans';
        src: url('../fonts/misans/MiSans-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
@font-face {
        font-family: 'MiSans';
        src: url('../fonts/misans/MiSans-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
@font-face {
        font-family: '抖音美好体';
        src: url('../fonts/douyin/DouyinSansBold.otf') format('opentype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
:root {
        --text-font-family: 'PingFang SC', 'MiSans', '抖音美好体', sans-serif;
        --text-font-size: 14px;
        --text-font-weight: 400;
        --control-radius: 12px;
        --card-blur: 0px;
        --section-blur: 0px;
        --sidebar-background: rgba(255, 255, 255, 1);
        --sidebar-text-color: var(--text-primary-color);
        --sidebar-blur: 0px;

    }
body { font-family: var(--text-font-family); font-size: var(--text-font-size); font-weight: var(--text-font-weight); min-width: 0; }
.cat-actions { display: none; margin-left: 6px; font-size: 13px; vertical-align: middle; }
body.edit-mode .cat-actions { display: inline-block; }
.cat-actions button { margin-right: 4px; cursor: pointer; border: 0; background: transparent; padding: 0; }
.cat-actions button:last-child { margin-right: 0; }
.cat-actions button.disabled { pointer-events: none; opacity: .45; cursor: not-allowed; }
.cat-del-hint { display: none; color: var(--status-danger-color); font-size: 12px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
body.edit-mode .cat-del-hint { display: inline; }
.site-actions { display: none; position: absolute; top: 2px; right: 10px; z-index: 5; }
body.edit-mode .site-actions { display: block; }
.site-actions button { display: inline-block; padding: 2px 7px; margin-left: 4px; border: 0; border-radius: calc(var(--control-radius) - 2px); background: rgba(0,0,0,.45); color: #fff; font-size: 12px; cursor: pointer; }
.site-actions button:hover { background: rgba(0,0,0,.75); color: #fff; }
.nav-widget { position: relative; }
.site-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.site-card-link:hover,
.site-card-link:focus { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--action-accent-color) !important; }
body:not(.edit-mode) .nav-data-controls { display: none !important; }
.login-entry { cursor: pointer; }
#loadingTip { text-align: center; color: var(--text-muted-color); padding: 60px 0; font-size: 14px; }
.empty-cat-tip { color: var(--text-muted-color); font-size: 13px; padding: 6px 2px 14px; }
.modal .form-group label .req { color: var(--status-danger-color); }
#userNav { align-self: center; height: 40px; align-items: center; }
#userNav .user-greeting { color: var(--action-accent-color); font-size: 13px; margin-right: 12px; white-space: nowrap; }
#userNav .user-greeting b { color: var(--action-accent-color); }
#userNav .user-logout { display: inline-flex; align-items: center; height: 40px; padding: 0 !important; top: 0; color: var(--status-danger-color); font-size: 13px; white-space: nowrap; }
#userNav .user-logout:hover { color: var(--status-danger-color); filter: brightness(.85); text-decoration: none; }
#loginNav { align-self: center; height: 40px; }
#loginNav .login-entry {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        height: 40px; min-width: 40px; margin: 0 2px; padding: 0 10px;
        border: 0; border-radius: var(--control-radius-medium); background: transparent;
        color: var(--text-secondary-color); font-size: 13px; line-height: 1; white-space: nowrap;
    }
#loginNav .login-entry:hover { color: var(--action-accent-color); }
.icon-picker { position: relative; }
.icon-picker-toggle {
        display: flex; align-items: center; gap: 8px; text-align: left;
        background: var(--control-surface-color); cursor: pointer;
        border-radius: var(--control-radius);
    }
.icon-picker-toggle > i:first-child { font-size: 18px; width: 20px; text-align: center; color: var(--text-secondary-color); }
.icon-picker-name { color: var(--text-secondary-color); }
.icon-picker-caret { margin-left: auto; color: var(--text-muted-color); }
.icon-picker-menu {
        display: none; position: absolute; z-index: 1060; top: 100%; left: 0; right: 0;
        margin-top: 4px; padding: 10px;
        background: var(--card-surface-color); border: 1px solid var(--control-border-color); border-radius: var(--control-radius);
        max-height: 240px; overflow-y: auto;
        grid-template-columns: repeat(6, 1fr); gap: 6px;
        box-shadow: var(--shadow-lg);
    }
.icon-picker.open .icon-picker-menu { display: grid; }
.icon-picker-menu a {
        display: flex; align-items: center; justify-content: center;
        height: 40px; font-size: 18px; color: var(--text-secondary-color); border-radius: calc(var(--control-radius) - 4px);
        cursor: pointer; border: 1px solid transparent;
    }
.icon-picker-menu a:hover { background: var(--action-soft-background); border-color: var(--action-accent-color); color: var(--action-accent-color); }
.icon-picker-menu a.selected { background: var(--action-soft-background); border-color: var(--action-accent-color); color: var(--action-accent-color); }
.user-info-navbar { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.nav-search {
        flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
        justify-content: center; min-width: 0; max-width: 760px;
    }
.nav-search input#siteSearchInput {
        flex: 1 1 auto; min-width: 80px; height: 40px; border-radius: var(--control-radius);
        border: var(--card-border-width, 1px) solid var(--card-border-color, var(--control-border-color)); padding: 0 16px; font-size: var(--text-font-size, 14px);
        transition: border-color .15s, box-shadow .15s;
    }
.nav-search input#siteSearchInput:focus { border-color: var(--action-accent-color); box-shadow: 0 0 0 2px rgba(var(--action-accent-rgb),.15); }
.nav-search .search-input-wrap { position: relative; flex: 1 1 auto; min-width: 120px; display: flex; }
.nav-search .search-input-wrap input#siteSearchInput { width: 100%; flex: 1 1 auto; }
.nav-search .search-results {
        display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1090;
        background: var(--header-flyout-background, #fff); border: 1px solid var(--control-border-color); border-radius: var(--control-radius, 12px);
        box-shadow: var(--shadow-lg); padding: 6px; max-height: 62vh; overflow-y: auto;
    }
.nav-search .search-results.open { display: block; }
.nav-search .search-results .sr-item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.nav-search .search-results .sr-item:hover,
.nav-search .search-results .sr-item.active { background: var(--action-soft-background); }
.nav-search .search-results .sr-title { font-size: 14px; color: var(--text-primary-color); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search .search-results .sr-cat { font-size: 12px; color: var(--text-muted-color); flex: 0 0 auto; }
.nav-search .search-results .sr-empty { padding: 10px; color: var(--text-muted-color); font-size: 13px; text-align: center; }
.site-card.search-result-flash { animation: searchResultFlash 1.2s ease-out; }
@keyframes searchResultFlash {
        0% { box-shadow: 0 0 0 3px rgba(var(--action-accent-rgb), .55); }
        100% { box-shadow: 0 0 0 3px rgba(var(--action-accent-rgb), 0); }
    }
.search-engine-switch { position: relative; flex: 0 0 auto; }
.search-engine-switch .ses-toggle {
        height: 40px; padding: 0 12px; border-radius: var(--control-radius);border: var(--card-border-width, 1px) solid var(--card-border-color, var(--control-border-color));
        background: var(--header-button-background, var(--control-surface-color)); color: var(--header-button-color, var(--text-secondary-color)); font-size: var(--text-font-size, 14px); cursor: pointer;
        display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    }
.search-engine-switch .ses-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
.search-engine-switch .ses-menu {
        display: none; position: absolute; right: 0; top: 100%; margin-top: 8px; z-index: 1080;
        background: var(--header-flyout-background, #fff); border: 1px solid var(--control-border-color); border-radius: var(--control-radius, 12px);
        box-shadow: var(--shadow-lg); padding: 6px; min-width: 120px;
    }
.search-engine-switch.open .ses-menu { display: block; }
.search-engine-switch .ses-menu::before {
        content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
    }
.search-engine-switch .ses-menu button {
        display: block; width: 100%; text-align: left; white-space: nowrap;
        padding: 8px 12px; border: none; background: transparent; border-radius: 6px;
        font-size: var(--text-font-size, 14px); color: var(--text-secondary-color); cursor: pointer;
    }
.search-engine-switch .ses-menu button:hover { background: var(--action-soft-background); color: var(--action-accent-color); }
.nav-search .search-submit-button {
        height: 40px; padding: 0 18px; border-radius: var(--control-radius); border: none;
        background: var(--action-accent-color); color: var(--action-text-color); font-size: var(--text-font-size, 14px); cursor: pointer; white-space: nowrap;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(var(--action-accent-rgb),.35);
    }
.nav-search .search-submit-button:hover { background: var(--action-hover-color); }
.search-count {
        position: fixed; top: calc(var(--header-toolbar-height, 0px) + var(--header-height, 64px) + 10px); right: 24px;
        background: rgba(var(--action-accent-rgb),.95); color: var(--action-text-color); padding: 6px 16px; border-radius: 16px;
        font-size: var(--text-font-size, 14px); z-index: 1060; display: none; box-shadow: 0 4px 14px rgba(0,0,0,.2);
    }
.search-count b { font-weight: 700; }
.search-count .search-clear { margin-left: 10px; padding: 0; border: 0; background: transparent; color: var(--action-text-color); opacity: .78; cursor: pointer; text-decoration: underline; }
.search-count .search-clear:hover { color: var(--action-text-color); }
.style-toggle {
        display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 14px;
        border: 1px solid var(--control-border-color); background: var(--header-button-background, var(--control-surface-color)); border-radius: var(--control-radius-medium); cursor: pointer;
        font-size: var(--text-font-size, 14px); color: var(--header-button-color, var(--text-secondary-color)); white-space: nowrap;
        transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
    }
.style-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
select.form-dropdown-hidden { position: absolute; opacity: 0; pointer-events: none; }
.form-dropdown { position: relative; display: inline-block; vertical-align: middle; }
.form-dropdown-toggle {
        width: 100%; height: 34px; display: inline-flex; align-items: center; gap: 6px;
        padding: 0 10px; background: var(--control-surface-color); color: var(--text-secondary-color);
        border: 1px solid var(--control-border-color); border-radius: 8px; font-size: 13px; cursor: pointer;
    }
.form-dropdown-toggle:hover { border-color: var(--action-accent-color); color: var(--action-accent-color); }
.form-dropdown-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.form-dropdown-caret { flex: 0 0 auto; font-size: 12px; opacity: .7; }
.form-dropdown-menu {
        display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 1090;
        background: var(--card-surface-color); border: 1px solid var(--control-border-color); border-radius: 8px;
        box-shadow: var(--shadow-lg); padding: 4px; max-height: 220px; overflow-y: auto;
    }
.form-dropdown.open .form-dropdown-menu { display: block; }
.form-dropdown-item {
        display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent;
        border-radius: 6px; font-size: 13px; color: var(--text-secondary-color); cursor: pointer; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
.form-dropdown-item:hover { background: var(--action-soft-background); color: var(--action-accent-color); }
.form-dropdown-item.active { background: var(--action-soft-background); color: var(--action-accent-color); font-weight: 600; }
.editor-modal .form-dropdown { display: block; width: 100%; }
.editor-modal .form-dropdown-toggle { height: 38px; font-size: 14px; border-radius: var(--control-radius); }
.user-info-menu.right-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.user-info-navbar .user-info-menu>li { border: 0 !important;}
.user-info-navbar .user-info-menu.left-links>li>a,
.user-info-navbar .user-info-menu.right-links>li>a { padding-left: 0 !important; padding-right: 0 !important; }
.mobile-search-btn { display: inline-flex; align-items: center; gap: 4px; }
.mobile-search-panel {
        display: none;
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 2100;
        background-color: var(--header-background, var(--card-surface-color));
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--control-border-color);
        padding: 10px 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
    }
.mobile-search-panel.open { display: block; }
.mobile-search-inner { display: flex; align-items: center; gap: 8px; }
.mobile-search-inner input#mobileSearchInput {
        flex: 1 1 auto; min-width: 0; height: 40px;
        border: 1px solid var(--control-border-color); border-radius: var(--control-radius);
        padding: 0 14px; font-size: 14px; outline: none; color: var(--text-primary-color);
        background: var(--control-surface-color);
    }
.mobile-search-inner input#mobileSearchInput:focus { border-color: var(--action-accent-color); }
.mobile-search-inner button#mobileSearchGo {
        flex: 0 0 auto; height: 40px; padding: 0 16px; border: none; border-radius: var(--control-radius);
        background: var(--action-accent-color); color: var(--action-text-color); font-size: 14px; cursor: pointer; white-space: nowrap;
        box-shadow: var(--shadow-accent); transition: background-color .16s ease, box-shadow .16s ease;
    }
.mobile-search-inner button#mobileSearchGo:hover { background: var(--action-hover-color); }

.search-count { top: calc(var(--header-height, 64px) + 8px); right: 12px; }
.admin-fab { position: fixed; right: 24px; bottom: 28px; z-index: 1050; display: none; }
body.edit-mode .admin-fab { display: block; }
.admin-fab-main {
        width: 54px; height: 54px; border-radius: 50%; border: none;
        background: var(--action-accent-color); color: var(--action-text-color); font-size: 26px; line-height: 54px;
        box-shadow: var(--shadow-accent); cursor: pointer; transition: transform .15s, background-color .15s;
    }
.admin-fab-main:hover { background: var(--action-hover-color); transform: scale(1.08); }
.admin-fab-menu {
        position: absolute; right: 0; bottom: 54px; padding-bottom: 24px;
        display: none; flex-direction: column; gap: 8px;
    }
.admin-fab.is-open .admin-fab-menu { display: flex; }
.admin-fab-menu button {
        white-space: nowrap; padding: 9px 16px; border-radius: 22px; border: none;
        font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }
.admin-fab-menu #btnAddCat { background: var(--action-accent-color); color: var(--action-text-color); }
.admin-fab-menu #btnAddSite { background: var(--status-success-color); color: #fff; }
.admin-fab-menu button:hover { filter: brightness(.95); }
#loginModal.modal.in { display: flex !important; align-items: center; justify-content: center; }
#loginModal .modal-dialog { margin: 0 auto; width: 400px; max-width: 92vw; }
#loginModal .modal-body { padding: 26px 28px; }
#loginModal .modal-header { padding: 18px 28px 0; border-bottom: none; }
#loginModal .modal-title { font-size: 19px; }
#loginModal .form-group label { font-size: 14px; margin-bottom: 6px; }
#loginModal .form-control { font-size: 16px; border-radius: var(--control-radius); }
#loginModal .modal-footer .btn { font-size: 16px; border-radius: var(--control-radius); }
#loginModal .modal-footer .btn-default { background: var(--control-surface-color); color: var(--text-primary-color); border: 1px solid var(--control-border-color); }
#loginModal .modal-footer .btn-default:hover { background: var(--control-surface-muted-color); }
#loginModal .modal-footer { padding: 0 28px 22px; border-top: none; }
.sidebar-menu .main-menu > li > a { position: relative; }
.sidebar-menu .main-menu > li:not(.has-sub) > a:after,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:after {
        content: '\279E'; position: absolute; right: calc(14px + 2em); top: 50%; transform: translateY(-50%);
        opacity: 0; color: var(--text-primary-color); font-size: 13px; transition: opacity .15s; pointer-events: none;
    }
.sidebar-menu .main-menu > li:not(.has-sub) > a:hover:after,
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover:after { opacity: 1; }
.sidebar-menu .main-menu > li > a:hover {
        background: var(--category-hover-background, rgba(var(--action-accent-rgb),.10)) !important;
    }
.sidebar-menu .main-menu > li.has-sub > ul > li > a:hover {
        background: var(--category-hover-background, rgba(var(--action-accent-rgb),.10)) !important;
    }
.sidebar-menu.no-cat-hover .main-menu > li > a:hover,
.sidebar-menu.no-cat-hover .main-menu > li.has-sub > ul > li > a:hover {
        background: transparent !important;
    }
.sidebar-menu.collapsed .main-menu > li > a:after,
.sidebar-menu.collapsed .main-menu > li.has-sub > ul > li > a:after { display: none; }
.user-info-navbar .user-info-menu.left-links,
.user-info-navbar .user-info-menu.right-links,
.user-info-navbar .nav-search {
        border-left: 0 !important;
        border-right: 0 !important;
    }
.user-info-navbar .user-info-menu > li.hover-line:before,
.user-info-navbar .user-info-menu > li.hover-line:after { display: none !important; content: none !important; }
.logo-env {
        position: relative;
        display: flex !important; align-items: center !important; justify-content: center !important;
        border-bottom: var(--brand-border-width, 0px) solid var(--brand-border-color, #dddddd) !important;
    }
.editor-modal.modal.in { display: flex !important; align-items: center; justify-content: center; }
.editor-modal .modal-dialog { width: 440px; max-width: 92vw; margin: 0 auto; }
.editor-modal .modal-content { border: none; border-radius: var(--control-radius); box-shadow: 0 8px 30px rgba(0,0,0,.16);}
.editor-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--control-border-color); }
.editor-modal .modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary-color); }
.editor-modal .modal-body { padding: 18px 20px; font-size: 14px; line-height: 1.6; color: var(--text-secondary-color); }
.editor-modal#siteModal .modal-dialog { width: 760px; }
.site-form-body { max-height: 74vh; overflow-y: auto; }
.site-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.site-form-col { min-width: 0; }
@media (max-width: 600px) {
.site-form-grid { grid-template-columns: 1fr; }
.editor-modal#siteModal .modal-dialog { width: auto; }
 }
.editor-modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--control-border-color); text-align: right; }
.editor-modal .modal-footer .btn { font-size: 14px; border-radius: var(--control-radius); padding: 7px 18px; margin-left: 10px; }
.editor-modal .btn-default { background: var(--control-surface-color); color: var(--text-primary-color); border: 1px solid var(--control-border-color); }
.editor-modal .btn-default:hover { background: var(--control-surface-muted-color); color: var(--text-primary-color); }
.editor-modal .btn-primary { background: var(--action-accent-color); color: var(--action-text-color); border: 1px solid var(--action-accent-color); }
.editor-modal .btn-primary:hover { background: var(--action-hover-color); border-color: var(--action-hover-color); color: var(--action-text-color); }
.editor-modal .modal-tip-danger { color: var(--status-danger-color); font-weight: 700; }
.editor-modal .form-control { width: 100%; height: 38px; border: 1px solid var(--control-border-color); border-radius: var(--control-radius); padding: 0 12px; font-size: 14px; color: var(--text-primary-color); outline: none; box-sizing: border-box; background: var(--control-surface-color); }
.editor-modal .form-control:focus { border-color: var(--action-accent-color); box-shadow: 0 0 0 2px rgba(var(--action-accent-rgb),.15); }
.card-grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
body.edit-mode .card-grid:empty { min-height: 64px; }
.card-grid > .col-sm-3.card-cell { width: 25%; min-width: 170px; padding: 0 8px; box-sizing: border-box; }
@media (max-width: 1200px) {
.card-grid > .col-sm-3.card-cell { width: 33.3333%; }
 }
@media (max-width: 992px) {
.card-grid > .col-sm-3.card-cell { width: 50%; }
 }
@media (max-width: 768px) {
.card-grid > .col-sm-3.card-cell { min-width: 0; }
.card-grid > .col-sm-3.card-cell .card-content { align-items: center; }

    }
.card-grid .sortable-ghost { opacity: .35; background: rgba(var(--action-accent-rgb),.06); border-radius: var(--control-radius, 12px); }
.card-grid .sortable-chosen { box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.card-grid .sortable-drag { opacity: 1; }
.drag-handle { position: absolute; right: 10px; bottom: 10px; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; cursor: grab; z-index: 6; font-size: 12px; }
body.edit-mode .site-card .drag-handle { display: flex; }
.drag-handle:active { cursor: grabbing; }
.card-badges-right { position: absolute; top: 2px; right: 10px; display: flex; gap: 6px; z-index: 5; }
.card-featured { color: #ff9f1a; font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.card-pinned { color: var(--action-accent-color); font-size: 14px; }
.cat-badges { margin-left: 8px; }
.cat-featured { color: #ff9f1a; margin-right: 4px; }
.cat-pinned { color: var(--action-accent-color); margin-right: 4px; }
.site-card.is-featured { border-color: rgba(255,159,26,.5); }
.card-stamp { position: absolute; top: -8px; left: -8px; z-index: 7; padding: 2px 7px; font-size: 11px; font-weight: 700; line-height: 1.4; color: var(--card-stamp-color, #e0432a); border: 2px solid var(--card-stamp-color, #e0432a); border-radius: 6px; background: rgba(255,255,255,.88); transform: rotate(-8deg); letter-spacing: .5px; box-shadow: 0 2px 4px rgba(0,0,0,.12); pointer-events: none; }
.card-tag-icon { position: absolute; top: 6px; left: 8px; z-index: 7; font-size: 16px; color: var(--action-accent-color); filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); pointer-events: none; }
.form-group-inline { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.checkbox-inline { font-weight: 400; margin: 0; cursor: pointer; }
.tag-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tag-field { flex: 1 1 160px; }
.tag-field-color,
.tag-field-icon { flex: 0 0 auto; }
.tag-field-color label,
.tag-field-icon label { display: block; font-size: 12px; margin-bottom: 4px; color: var(--text-muted-color); }
.tag-field-icon { flex: 1 1 280px; }
.card-icon img { transition: transform .3s ease; }
.card-title strong { transition: color .3s ease, font-size .3s ease; }