/* ==========================================================================
 * 主题四（仿易优）彩色菜单：左侧分类栏 + 顶部导航
 * 侧栏图标（.sidebar-icon，空 <i>，图标由本文件 ::before 注入）与顶部导航
 * （<i class="fa fa-xxx">，图标来自后台导航配置）共用同一套 12 色渐变槽位。
 * 只改颜色与质感，不改任何尺寸盒模型基准：侧栏芯片 28px、顶部芯片 26px，
 * 与改动前 index-custom.css / 模板内联块一致，行高、页头 74px 占位都不会位移。
 * 深色模式（html.io-black-mode）只调整文字颜色，芯片渐变保持不变。
 * ========================================================================== */

/* ===== 12 色槽位调色板（唯一来源，侧栏与顶部菜单共用） ===== */
:root {
    --t1a:#4f8dff;  --t1b:#2f6fe0;  --t1k:#2f6bdc;  --t1d:#9cc3ff;  --t1s:rgba(47,111,224,.42);
    --t2a:#a78bfa;  --t2b:#7c4ddb;  --t2k:#7648d6;  --t2d:#c4b0ff;  --t2s:rgba(124,77,219,.40);
    --t3a:#34d399;  --t3b:#12a37a;  --t3k:#0f9b74;  --t3d:#7ef0c4;  --t3s:rgba(18,163,122,.38);
    --t4a:#ffb45c;  --t4b:#f57c1f;  --t4k:#dd7318;  --t4d:#ffd39a;  --t4s:rgba(245,124,31,.40);
    --t5a:#ff7eb3;  --t5b:#ef4688;  --t5k:#df3577;  --t5d:#ffb3d4;  --t5s:rgba(239,70,136,.40);
    --t6a:#6d8dff;  --t6b:#3d55d6;  --t6k:#3a51c8;  --t6d:#a9b8ff;  --t6s:rgba(61,85,214,.40);
    --t7a:#3fd8d0;  --t7b:#0f9fc9;  --t7k:#0d92be;  --t7d:#8cecec;  --t7s:rgba(15,159,201,.38);
    --t8a:#ff7a7a;  --t8b:#e6394f;  --t8k:#d92f47;  --t8d:#ffb4bb;  --t8s:rgba(230,57,79,.40);
    --t9a:#ffd66b;  --t9b:#f0a71b;  --t9k:#c8890f;  --t9d:#ffe6a8;  --t9s:rgba(240,167,27,.40);
    --t10a:#d78bf0; --t10b:#9a46d8; --t10k:#8f3ecb; --t10d:#e8bcff; --t10s:rgba(154,70,216,.40);
    --t11a:#63e6a8; --t11b:#26a86b; --t11k:#229a62; --t11d:#a5f2cd; --t11s:rgba(38,168,107,.38);
    --t12a:#8fa8d8; --t12b:#5a6f9c; --t12k:#556a95; --t12d:#c0cde6; --t12s:rgba(90,111,156,.36);
}

/* 槽位变量：第 N 项取第 N 组配色，超过 12 个继续循环 */
.sidebar-menu-inner .sidebar-item:nth-child(12n+1), .navbar-nav.navbar-top > .menu-item:nth-child(12n+1) { --ca:var(--t1a); --cb:var(--t1b); --ci:var(--t1k); --cd:var(--t1d); --cs:var(--t1s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+2), .navbar-nav.navbar-top > .menu-item:nth-child(12n+2) { --ca:var(--t2a); --cb:var(--t2b); --ci:var(--t2k); --cd:var(--t2d); --cs:var(--t2s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+3), .navbar-nav.navbar-top > .menu-item:nth-child(12n+3) { --ca:var(--t3a); --cb:var(--t3b); --ci:var(--t3k); --cd:var(--t3d); --cs:var(--t3s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+4), .navbar-nav.navbar-top > .menu-item:nth-child(12n+4) { --ca:var(--t4a); --cb:var(--t4b); --ci:var(--t4k); --cd:var(--t4d); --cs:var(--t4s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+5), .navbar-nav.navbar-top > .menu-item:nth-child(12n+5) { --ca:var(--t5a); --cb:var(--t5b); --ci:var(--t5k); --cd:var(--t5d); --cs:var(--t5s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+6), .navbar-nav.navbar-top > .menu-item:nth-child(12n+6) { --ca:var(--t6a); --cb:var(--t6b); --ci:var(--t6k); --cd:var(--t6d); --cs:var(--t6s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+7), .navbar-nav.navbar-top > .menu-item:nth-child(12n+7) { --ca:var(--t7a); --cb:var(--t7b); --ci:var(--t7k); --cd:var(--t7d); --cs:var(--t7s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+8), .navbar-nav.navbar-top > .menu-item:nth-child(12n+8) { --ca:var(--t8a); --cb:var(--t8b); --ci:var(--t8k); --cd:var(--t8d); --cs:var(--t8s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+9), .navbar-nav.navbar-top > .menu-item:nth-child(12n+9) { --ca:var(--t9a); --cb:var(--t9b); --ci:var(--t9k); --cd:var(--t9d); --cs:var(--t9s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+10), .navbar-nav.navbar-top > .menu-item:nth-child(12n+10) { --ca:var(--t10a); --cb:var(--t10b); --ci:var(--t10k); --cd:var(--t10d); --cs:var(--t10s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+11), .navbar-nav.navbar-top > .menu-item:nth-child(12n+11) { --ca:var(--t11a); --cb:var(--t11b); --ci:var(--t11k); --cd:var(--t11d); --cs:var(--t11s); }
.sidebar-menu-inner .sidebar-item:nth-child(12n+12), .navbar-nav.navbar-top > .menu-item:nth-child(12n+12) { --ca:var(--t12a); --cb:var(--t12b); --ci:var(--t12k); --cd:var(--t12d); --cs:var(--t12s); }

/* ===== 左侧分类栏图标 ===== */
.sidebar-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    margin-right: 9px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: #fff !important;
    /* 变量不被支持时退回第一组渐变 */
    background: linear-gradient(135deg, #4f8dff, #2f6fe0);
    background: linear-gradient(135deg, var(--ca, #4f8dff), var(--cb, #2f6fe0));
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .22);
    box-shadow: 0 4px 10px -3px var(--cs, rgba(0, 0, 0, .22)), inset 0 1px 0 rgba(255, 255, 255, .38);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.sidebar-icon::before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0c1";
}
/* 每个槽位一个图标，替代原来「整列同一个 FontAwesome 方块 / 一排 emoji」 */
.sidebar-menu-inner .sidebar-item:nth-child(12n+1) .sidebar-icon::before  { content: "\f06d"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+2) .sidebar-icon::before  { content: "\f005"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+3) .sidebar-icon::before  { content: "\f02d"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+4) .sidebar-icon::before  { content: "\f1fc"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+5) .sidebar-icon::before  { content: "\f109"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+6) .sidebar-icon::before  { content: "\f07a"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+7) .sidebar-icon::before  { content: "\f072"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+8) .sidebar-icon::before  { content: "\f015"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+9) .sidebar-icon::before  { content: "\f26c"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+10) .sidebar-icon::before { content: "\f001"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+11) .sidebar-icon::before { content: "\f1b0"; }
.sidebar-menu-inner .sidebar-item:nth-child(12n+12) .sidebar-icon::before { content: "\f0c1"; }

/* 悬停：芯片微微抬起、提亮，文字用本槽位主色（浅/深色各取一套） */
.sidebar-menu-inner .sidebar-item > a {
    position: relative;
    transition: all .3s;
}
.sidebar-item:hover .sidebar-icon,
.sidebar-item.active .sidebar-icon {
    transform: translateY(-1px) scale(1.06);
    filter: saturate(1.12);
    box-shadow: 0 6px 14px -4px var(--cs, rgba(0, 0, 0, .2)), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.io-grey-mode .sidebar-item:hover > a,
.io-grey-mode .sidebar-item.active > a {
    color: var(--ci, #f1404b) !important;
    background: rgba(120, 140, 180, .10);
}
.io-black-mode .sidebar-item:hover > a,
.io-black-mode .sidebar-item.active > a {
    color: var(--cd, #fff) !important;
    background: rgba(255, 255, 255, .08);
}
/* 选中项：整行左侧 3px 槽位色指示条（挂在 li 上，因为 a 是 overflow:hidden，画在 a 上会被裁掉；
   .active 由 main.js 的二级分类面板逻辑维护） */
.sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ca, #4f8dff), var(--cb, #2f6fe0));
    box-shadow: 0 0 8px var(--cs, rgba(0, 0, 0, .2));
}

/* ===== 折叠（迷你）侧栏 ===== */
.mini-sidebar .sidebar-nav .sidebar-item > a .sidebar-icon {
    width: 30px !important;
    height: 30px !important;
    margin-right: 0 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}
.mini-sidebar .sidebar-nav ul:first-child > li.sidebar-item > a {
    justify-content: center !important;
    padding: 12px 0 !important;
}
/* 迷你栏不显示文字，放开裁剪才能看见芯片的彩色投影 */
.mini-sidebar .sidebar-menu-inner a {
    overflow: visible;
}
/* 迷你栏没有文字，指示条贴着整行左边缘 */
.mini-sidebar .sidebar-item.active::before {
    height: 26px;
}

/* ===== 顶部导航 ===== */
.navbar-nav.navbar-top > .menu-item > a {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500;
}
.navbar-nav.navbar-top > .menu-item > a i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    margin-right: 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #4f8dff, #2f6fe0);
    background: linear-gradient(135deg, var(--ca, #4f8dff), var(--cb, #2f6fe0));
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .20);
    box-shadow: 0 4px 10px -3px var(--cs, rgba(0, 0, 0, .2)), inset 0 1px 0 rgba(255, 255, 255, .38);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.navbar-nav.navbar-top > .menu-item:hover > a i {
    transform: translateY(-1px) scale(1.06);
    filter: saturate(1.12);
    box-shadow: 0 6px 14px -4px var(--cs, rgba(0, 0, 0, .2)), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* 文字颜色交给主题自己处理：页头悬浮在头图上时是浅色、落地后是深色，
   这里只补一条槽位色下划线，既显彩色又不会把浅色模式下的文字盖成对比度不足的色 */
.navbar-nav.navbar-top > .menu-item > a {
    position: relative;
}
.navbar-nav.navbar-top > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ca, #4f8dff), var(--cb, #2f6fe0));
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .22s ease, transform .22s ease;
}
.navbar-nav.navbar-top > .menu-item:hover > a::after {
    opacity: .95;
    transform: scaleX(1);
}
/* 顶栏二级菜单里的图标同样上色 */
.navbar-top .sub-menu a {
    position: relative;
}
.navbar-top .sub-menu a:hover {
    color: var(--ci, #f1404b) !important;
}
.io-black-mode .navbar-top .sub-menu a:hover {
    color: var(--cd, #fff) !important;
}

/* ===== 二级分类面板（原来只在 index-custom.css 里，首页没引入 → 首页点父分类会掉成一坨，
       现在统一到本文件，主题四所有页面行为一致） ===== */
.sidebar-sub-panel {
    display: none;
    position: absolute;
    left: 220px;
    top: 0;
    width: 200px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e8ecf0;
    box-shadow: 3px 0 12px rgba(0, 0, 0, .06);
    z-index: 1090;
    overflow-y: auto;
    padding: 12px 0;
}
.mini-sidebar .sidebar-sub-panel {
    left: 60px;
}
.sidebar-sub-panel.show {
    display: block;
}
.sidebar-sub-panel .sub-title {
    padding: 8px 18px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #243447;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 8px;
}
.sidebar-sub-panel .sub-item {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.sidebar-sub-panel .sub-item:hover {
    background: #f5f8ff;
    color: #4a6cf7;
    border-left-color: #4a6cf7;
}
.sidebar-sub-panel .sub-item .sub-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-size: 13px;
}
/* 有子分类的条目：右侧箭头 */
.sidebar-item.has-children > a {
    cursor: pointer;
}
.sidebar-item.has-children > a::after {
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #bbb;
    transition: transform 0.3s;
}
.sidebar-item.has-children.active > a::after {
    transform: translateY(-50%) rotate(90deg);
}
.io-black-mode .sidebar-sub-panel {
    background: #1e2133;
    border-left-color: #2a2d3e;
}
.io-black-mode .sidebar-sub-panel .sub-item {
    color: #c4c8d0;
}
.io-black-mode .sidebar-sub-panel .sub-item:hover {
    background: #252840;
    color: #7b9cf7;
}
.io-black-mode .sidebar-sub-panel .sub-title {
    color: #e5e7eb;
    border-bottom-color: #2a2d3e;
}

/* ===== 二级面板小箭头按槽位上色 ===== */
.sidebar-sub-panel .sub-item:nth-child(6n+1) .sub-icon { color: #2f6bdc; }
.sidebar-sub-panel .sub-item:nth-child(6n+2) .sub-icon { color: #0f9b74; }
.sidebar-sub-panel .sub-item:nth-child(6n+3) .sub-icon { color: #df3577; }
.sidebar-sub-panel .sub-item:nth-child(6n+4) .sub-icon { color: #dd7318; }
.sidebar-sub-panel .sub-item:nth-child(6n+5) .sub-icon { color: #7648d6; }
.sidebar-sub-panel .sub-item:nth-child(6n+6) .sub-icon { color: #0d92be; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+1) .sub-icon { color: #9cc3ff; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+2) .sub-icon { color: #7ef0c4; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+3) .sub-icon { color: #ffb3d4; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+4) .sub-icon { color: #ffd39a; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+5) .sub-icon { color: #c4b0ff; }
.io-black-mode .sidebar-sub-panel .sub-item:nth-child(6n+6) .sub-icon { color: #8cecec; }
.sidebar-sub-panel .sub-item:hover .sub-icon { transform: translateX(2px); }
.sidebar-sub-panel .sub-icon { transition: transform .2s ease, color .2s ease; }

/* ===== 移动端抽屉（#sidebar 弹出层）===== */
@media (max-width: 991px) {
    .sidebar-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}

/* 尊重「减少动效」偏好：只去掉位移，配色不受影响 */
@media (prefers-reduced-motion: reduce) {
    .sidebar-icon,
    .navbar-nav.navbar-top > .menu-item > a i,
    .sidebar-sub-panel .sub-icon {
        transition: none !important;
        transform: none !important;
    }
}