/*调整全局字体大小*/
body,html{font-size:14px;}

/*左导航悬浮sidebar-menu-inner宽度调整为90px*/
.sidebar-popup.sidebar-menu-inner > div > ul > li.sidebar-item>ul{position:absolute;top:0px;left:10px;width:90px;z-index:99}
.sidebar-popup.sidebar-menu-inner ul{width:90px}
.sidebar-popup.sidebar-menu-inner ul li{width:90px}

/*隐藏左导航scrollbar*/
.sidebar-menu.flex-fill::-webkit-scrollbar{display:none}

/*搜索框搜索图标颜色*/
#search button i{color:#6C757D;font-size:18px}

/* ============================================================
   首页改「整页纯白底」：去掉搜索横幅背景图 + 去掉灰色网格底纹
   · 浅色模式 body.io-grey-mode：白底 + 深色字
   · 夜间模式 body.io-black-mode：保留深色系，只去掉图片、给纯色兜底
   ============================================================ */

/* ---- 1) 搜索横幅（#search-bg）背景：统一去掉背景图，颜色按模式给 ---- */
/* !important 用于覆盖 index.html 里 JS 写入的行内 background-image */
#search-bg,.header-big.css-color{
    background-image:none!important;
    background-size:auto!important;
    background-position:center!important;
    animation:none!important;
}
.io-grey-mode #search-bg,.io-grey-mode .header-big.css-color{background-color:#fff!important;}
.io-black-mode #search-bg,.io-black-mode .header-big.css-color{background-color:#1b1d1f!important;}

/* ---- 2) 顶部导航栏文字+图标 ---- */
/* 浅色模式：白底 → 深色字（否则原来的白字会看不见） */
.big-header-banner .page-header{color:#2c3345;background:transparent;box-shadow:none;transition:color .3s,background-color .3s}
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item){color:#2c3345;}
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a:hover,.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover{color:#dc3545;}
.big-header-banner:not(.header-bg) .header-mini-btn path{stroke:#2c3345;}
.big-header-banner:not(.header-bg) .header-mini-btn label:hover path{stroke:#dc3545;}
/* 夜间模式：深色底 → 保持白字 */
.io-black-mode .big-header-banner .page-header{color:#fff;}
.io-black-mode .big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,.io-black-mode .big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item){color:#fff;}
.io-black-mode .big-header-banner:not(.header-bg) .header-mini-btn path{stroke:#fff;}

/* ---- 3) 搜索输入框：白底页面上靠描边+浅阴影区分出来 ---- */
.header-big #search-text{color:#333;background-color:#fff;border:1px solid #e4e8ee;box-shadow:0 2px 10px rgba(16,24,40,.06);}
.header-big #search-text::placeholder{color:#9aa0a6;}
.io-black-mode .header-big #search-text{color:#fff;background-color:#2c2e2f;border-color:#3c4045;box-shadow:none;}

/* ---- 4) 搜索类别 tab + 底部快捷链接 ---- */
.header-big .search-type input:checked+label:before{content:'';border-width:8px 8px 0px 8px;border-style:solid;border-color:#2563eb transparent transparent;position:absolute;left:50%;top:0;margin-left:-8px}
.header-big:not(.no-bg) .s-type-list{color:#2563eb}
.header-big:not(.no-bg) .s-type-list .anchor{background:#2563eb}
.header-big .s-type-list label:not(.active){opacity:.6}
.header-big:not(.no-bg) .text-muted,.header-big:not(.no-bg) .search-type .menu-item a,.header-big:not(.no-bg) .big-title .h1{color:#5b6470!important}
/* 夜间模式：这几处回到浅色 */
.io-black-mode .header-big .search-type input:checked+label:before{border-color:#fff transparent transparent}
.io-black-mode .header-big:not(.no-bg) .s-type-list{color:#20c997}
.io-black-mode .header-big:not(.no-bg) .s-type-list .anchor{background:#fff}
.io-black-mode .header-big:not(.no-bg) .text-muted,.io-black-mode .header-big:not(.no-bg) .search-type .menu-item a,.io-black-mode .header-big:not(.no-bg) .big-title .h1{color:#fff!important}

/*主页header-banner底部宽度*/
.post-top{padding-bottom:50px}

/*左导航二级导航标题左侧距离*/
.sidebar-menu-inner ul li ul li a{margin-left:30px;}

/*头部导航二级导航iconfont图标*/
.navbar-collapse ul li.menu-item-has-children:after{content:'\e612';}

/*搜索热词样式调整*/
.search-hot-text{
    position: absolute;
    z-index: 100;
    width: 100%;
    border-radius: 0 0 10px 10px;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px #cccccc94;
    overflow: hidden;
}
.search-hot-text ul{
    margin: 0;
    padding: 5px 0;
}
.search-hot-text ul li{
    line-height: 30px;
    font-size: 14px;
    padding: 0px 25px;
    color: #777;
    cursor: pointer;
}
.io-black-mode .search-hot-text ul li{
    color: #fff;
}    
.search-hot-text ul li.current{
    background: #f1f1f1;
    color: #2196f3;
}
.search-hot-text ul li:hover{
    background: #f1f1f1;
    color: #2196f3;
    cursor: pointer;
}
.search-hot-text ul li span{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background: #e5e5e5;
    margin-right: 10px;
    border-radius: 10px;
    color: #999;
}

footer.main-footer .footer-text {
    text-align: center;
}
footer.main-footer .footer-text a {
    color: #007bff;
}
footer.main-footer .footer-text a:hover {
    color: red;
}

/*About页面*/
.panel .panel-body a {color: #007bff;}
.panel .panel-body a:hover {color: #979898;}

/*整页背景：去掉灰色网格纹理，改纯白底*/
body.io-grey-mode{background-color:#fff;}
.io-grey-mode .page-container .grid-bg{
    background-image:none;
    background-color:#fff;
}

/*侧边栏站点 Logo：未配置 logo 图片时，图标后面跟站点名（由 nav-app.js 控制）*/
.logo-expanded .brand-text {
    display: inline-block;
    margin-left: 10px;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #2c3345;
}
.io-black-mode .logo-expanded .brand-text {
    color: #e9edf5;
}


/* ============================================================
   首页「网址展示方式」切换：卡片 / 图标 / 标题 / 简称
   切换条结构由 _dev/tools/build_index.py 注入，逻辑在 assets/js/nav-app.js
   ============================================================ */

/* ---- 切换条 ---- */
#nav-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
#nav-mode-bar .nv-mode-tip {
    font-size: 12.5px;
    color: #9aa0a6;
}
#nav-mode-bar .nv-modes {
    display: inline-flex;
    padding: 3px;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
#nav-mode-bar .nv-mode {
    border: 0;
    background: transparent;
    padding: 5px 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #5b6470;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
#nav-mode-bar .nv-mode:hover { color: #2563eb; background: #f5f7fa; }
#nav-mode-bar .nv-mode.active { background: #2563eb; color: #fff; }
.io-black-mode #nav-mode-bar .nv-modes { background: #22262b; border-color: #31363c; box-shadow: none; }
.io-black-mode #nav-mode-bar .nv-mode { color: #adbac7; }
.io-black-mode #nav-mode-bar .nv-mode:hover { background: #2b3138; color: #fff; }
.io-black-mode #nav-mode-bar .nv-mode.active { background: #2563eb; color: #fff; }

/* ---- 简称文字：默认隐藏，只在「简称」模式显示 ---- */
#nav-cat-body .nv-short { display: none !important; font-style: normal; }

/* ---- 模式一：卡片（现有样式，无需覆盖） ---- */

/* 说明：主题里 .d-flex / .overflowClip_1 等工具类带 !important，
   所以这里隐藏/显示的元素必须同样用 !important 才能盖住。 */

/* ---- 模式二：只展示图标 ---- */
#nav-cat-body.nv-mode-icon .url-card { flex: 0 0 88px; max-width: 88px; }
#nav-cat-body.nv-mode-icon .url-card .card-body { padding: 14px 10px; }
#nav-cat-body.nv-mode-icon .url-card .card.mb-4 { margin-bottom: .9rem !important; }
#nav-cat-body.nv-mode-icon .url-content { justify-content: center; }
#nav-cat-body.nv-mode-icon .url-img { width: 48px; height: 48px; margin-right: 0 !important; }
#nav-cat-body.nv-mode-icon .url-info,
#nav-cat-body.nv-mode-icon .togo { display: none !important; }

/* ---- 模式三：只展示标题 ---- */
#nav-cat-body.nv-mode-title .url-card { flex: 0 0 152px; max-width: 152px; }
#nav-cat-body.nv-mode-title .url-card .card-body { padding: 13px 10px; }
#nav-cat-body.nv-mode-title .url-card .card.mb-4 { margin-bottom: .9rem !important; }
#nav-cat-body.nv-mode-title .url-content { justify-content: center; }
#nav-cat-body.nv-mode-title .url-img,
#nav-cat-body.nv-mode-title .url-info p,
#nav-cat-body.nv-mode-title .togo { display: none !important; }
#nav-cat-body.nv-mode-title .url-info { text-align: center; padding-right: 0; }

/* ---- 模式四：展示简称（图标 + 2 字简称） ---- */
#nav-cat-body.nv-mode-short .url-card { flex: 0 0 118px; max-width: 118px; }
#nav-cat-body.nv-mode-short .url-card .card-body { padding: 12px 10px; }
#nav-cat-body.nv-mode-short .url-card .card.mb-4 { margin-bottom: .9rem !important; }
#nav-cat-body.nv-mode-short .url-img { width: 30px; height: 30px; }
#nav-cat-body.nv-mode-short .url-info { padding-right: 0; }
#nav-cat-body.nv-mode-short .url-info > div,
#nav-cat-body.nv-mode-short .url-info p,
#nav-cat-body.nv-mode-short .togo { display: none !important; }
#nav-cat-body.nv-mode-short .nv-short {
    display: inline-block !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

/* ============================================================
   通用：整块隐藏
   JS 用 .nv-hide 而不是 [hidden] 属性 ——
   主题的 .card / .d-flex 等类自带 display 规则，会盖掉 [hidden]。
   ============================================================ */
.nv-hide {
    display: none !important;
}

/* ============================================================
   首页「推荐资讯」区域
   位置：搜索栏下方、网址列表上方（容器由 _dev/tools/build_index.py 注入）
   内容由 assets/js/nav-app.js::renderRecommend() 渲染
   （开关 / 标题 / 条数 / 是否显示封面图见后台「系统设置 → 资讯与单页」）
   ============================================================ */
.nv-reco {
    margin: 0 0 30px;
}
.nv-reco[hidden] {
    display: none !important;
}
.nv-reco-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.nv-reco-head h4 {
    margin: 0 0 16px;
}
.nv-reco-more {
    font-size: 13px;
    color: #5b6470;
    margin-bottom: 16px;
}
.nv-reco-more:hover {
    color: #2563eb;
}
/* 320px 起跳：1210px 内容区正好 3 列铺满（默认 6 条 = 两行），
   窄屏自动降到 2 列 / 1 列，不需要额外媒体查询 */
.nv-reco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.nv-reco-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.nv-reco-card:hover {
    box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
    border-color: #dbe3ef;
    text-decoration: none;
}
.nv-reco-thumb {
    display: block;
    height: 132px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    background-size: cover;
    background-position: center;
}
/* 纯文字卡片（默认形态，reco_cover 未开启）：没有图片区，内边距放宽一点 */
.nv-reco-grid.no-cover {
    gap: 16px;
}
.nv-reco-card.no-cover .nv-reco-body {
    padding: 18px 18px 16px;
}
.nv-reco-card.no-cover .nv-reco-title {
    font-size: 16px;
}
.nv-reco-thumb.no-cover {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-reco-thumb.no-cover i {
    font-size: 26px;
    color: #c7d2fe;
}
.nv-reco-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.nv-reco-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #2c3345;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-reco-summary {
    font-size: 13px;
    color: #5b6470;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-reco-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: #9aa0a6;
    border-top: 1px solid #f1f3f6;
    padding-top: 10px;
}
.nv-reco-meta .tag {
    color: #2563eb;
}

/* 夜间模式回退（body.io-black-mode） */
.io-black-mode .nv-reco-head h4 {
    color: #e9edf5;
}
.io-black-mode .nv-reco-more {
    color: #adbac7;
}
.io-black-mode .nv-reco-more:hover {
    color: #6ea8fe;
}
.io-black-mode .nv-reco-card {
    background: #22262b;
    border-color: #31363c;
}
.io-black-mode .nv-reco-card:hover {
    border-color: #3d444c;
}
.io-black-mode .nv-reco-thumb {
    background: linear-gradient(135deg, #2a3038, #232830);
}
.io-black-mode .nv-reco-thumb.no-cover i {
    color: #4a5568;
}
.io-black-mode .nv-reco-title {
    color: #e9edf5;
}
.io-black-mode .nv-reco-summary {
    color: #adbac7;
}
.io-black-mode .nv-reco-meta {
    color: #8b949e;
    border-top-color: #31363c;
}
.io-black-mode .nv-reco-meta .tag {
    color: #6ea8fe;
}