:root {
    /* 白天模式变量 */
    --theme-text-color: #333333;
    --theme-bg-color: #ffffff;
}

/* 当 body 拥有 dark-mode 类时切换变量 */
body.dark-mode {
    --theme-text-color: #f2f2f2;
    --theme-bg-color: #000000;
}

:root {
    
    /* 图标 (白天) */
    --icon-home-video: url("/Themes/Home/yymh/Public/images/dayIcon/video/home.svg");
    --icon-favorite-video: url("/Themes/Home/yymh/Public/images/dayIcon/video/favorite.svg");
    --icon-video-video: url("/Themes/Home/yymh/Public/images/dayIcon/video/video.svg");
    --icon-mine-video: url("/Themes/Home/yymh/Public/images/dayIcon/video/mine.svg");
    
    --icon-home-video-s: url("/Themes/Home/yymh/Public/images/dayIcon/video/homeS.svg");
    --icon-favorite-video-s: url("/Themes/Home/yymh/Public/images/dayIcon/video/favoriteS.svg");
    --icon-video-video-s: url("/Themes/Home/yymh/Public/images/dayIcon/video/videoS.svg");
    --icon-mine-video-s: url("/Themes/Home/yymh/Public/images/dayIcon/video/mineS.svg");
   
    
    --nav-bg: #ffffff;
    --nav-text: #666;
    --nav-active: rgb(0,210,190);
}

body.dark-mode {
    
    /* 图标 (白天) */
    --icon-home-video: url("/Themes/Home/yymh/Public/images/nightIcon/video/home.svg");
    --icon-favorite-video: url("/Themes/Home/yymh/Public/images/nightIcon/video/favorite.svg");
    --icon-video-video: url("/Themes/Home/yymh/Public/images/nightIcon/video/video.svg");
    --icon-mine-video: url("/Themes/Home/yymh/Public/images/nightIcon/video/mine.svg");
    
    --icon-home-video-s: url("/Themes/Home/yymh/Public/images/nightIcon/video/homeS.svg");
    --icon-favorite-video-s: url("/Themes/Home/yymh/Public/images/nightIcon/video/favoriteS.svg");
    --icon-video-video-s: url("/Themes/Home/yymh/Public/images/nightIcon/video/videoS.svg");
    --icon-mine-video-s: url("/Themes/Home/yymh/Public/images/nightIcon/video/mineS.svg");
    
    --nav-bg: #1a1a1a;
    --nav-text: #999;
    --nav-active: rgb(0,210,190);
}

.reader-index-toolbar {
    background-color: var(--nav-bg) !important;
    transition: all 0.3s ease;
}

/* 图标基础样式 */
.nav-svg-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 关键：利用变量拼接路径 */
    transition: background-image 0.3s ease;
}

.nav-label { color: var(--nav-text); }
/* 激活状态文字颜色 */
.tab-link-active .nav-label {
    color: var(--nav-active) !important;
}

/* 基础导航容器样式 */
.video-footer-nav {
    display: flex;
    justify-content: space-around;
    background-color: var(--nav-bg);
    padding: 10px 0;
    list-style: none;
}

.video-footer-nav li a {
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--nav-text);
}

.video-footer-nav li a.active span {
    color: var(--nav-active);
}

/* 图标基础样式 */
.nav-svg-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 4px;
    transition: background-image 0.2s ease;
}

/* 1. 默认状态图标绑定 */
.nav-video-home     { background-image: var(--icon-home-video); }
.nav-video-cate     { background-image: var(--icon-video-video); }
.nav-video-favorite { background-image: var(--icon-favorite-video); }
.nav-video-mine     { background-image: var(--icon-mine-video); }

/* 2. 激活状态 (a.active) 自动切换带 -s 的图标 */
a.active .nav-video-home     { background-image: var(--icon-home-video-s); }
a.active .nav-video-cate     { background-image: var(--icon-video-video-s); }
a.active .nav-video-favorite { background-image: var(--icon-favorite-video-s); }
a.active .nav-video-mine     { background-image: var(--icon-mine-video-s); }