/* ============================================================
   A站 暗黑/明亮模式 主题变量
   配色方案：页头暗色 + 绿色点缀
   ============================================================ */

/* ===== 明亮模式（默认） ===== */
:root {
    --header-bg: #ffffff;
    --header-border: #26b200;
    --nav-link-color: #222222;
    --nav-link-hover-color:#ff6600;
    --body-bg: #ffffff;
        --bg-card: #ffffff;
    --bg-hover: #f5f6fa;
    --bg-body: #ffffff;
    --bg-primary: #f5f5f0;   /* ← 页面主背景色 */
    --bg-card: #ffffff;       /* ← 卡片背景色 */
    --text-primary: #1a1a2e;
    --text-secondary: #444444;
    --text-muted: #888888;
    --border-color: #e8ecf0;
    --shadow: 0 1px 4px rgba(0,0,0,0.06);
    --radius: 8px;
    --radius-sm: 4px;
    --link-hover: #ff6600;
    --price-color: #ff6600;
}

/* ===== 暗黑模式 ===== */
/* ===== 暗黑模式 - 方案二：碳灰绿调 ===== */
/* ===== 暗黑模式 - 方案一：深空蓝黑 ===== */
/* ===== 暗黑模式 - 方案三：深绿丛林 ===== */
/* ===== 暗黑模式 - 方案八：深海珊瑚 ===== */
/* ===== 暗黑模式 - 方案七：深林琥珀 ===== */
/* ===== 暗黑模式 - 方案六：炭黑红焰 ===== */
/* ===== 暗黑模式 - 方案五：午夜蓝橙 ===== */
/* ===== 暗黑模式 - 方案四：暗紫金钻 ===== */
/* ===== 暗黑模式 - 方案一：深空蓝黑 ===== */
/* ===== 暗黑模式 - 方案二：碳灰绿调 ===== */
/* ===== 暗黑模式 - 方案七：深林琥珀 ===== */
/* ===== 暗黑模式 - 方案八：深海珊瑚 ===== */
body.dark-mode {
    --header-bg: #001a2a;
    --header-border: #26b200;
    --nav-link-color: #00ff00;
    --nav-link-hover-color: #ff6600;
    --bg-primary: #001a2a; !important;
    --bg-card: #0a2a3e;
    --bg-hover: #0e3a52;
    --bg-body: #001a2a; !important;
    --text-primary: #e0f0ff;
    --text-secondary: #90c0e0;
    --text-muted: #4a7a9a;
    --border-color: #1a4a5a;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --radius: 8px;
    --radius-sm: 4px;
    --link-hover: #ff6600;
    --price-color: #ff6b6b;
}
/* ===== 版幅宽度1200px ===== */
.container-layout {
    max-width: 1200px !important;
}

#pc-header .container-layout {
    max-width: 1200px !important;
}

/* ===== 页头 ===== */
#pc-header {
    background: var(--header-bg);
    border-bottom: 2px solid var(--header-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* ===== Logo区域 ===== */
#pc-header .logo {
    padding: 20px 0;
    margin-right: 50px;  /* Logo右边距50px */
}

/* ===== 导航菜单 - 靠左显示 ===== */
#pc-header .x9 {
    text-align: left !important;  /* 左对齐 */
}

#pc-header .nav {
    display: flex;
    justify-content: flex-start;  /* 靠左排列 */
}

/* ===== 导航菜单链接 - 不要背景色 ===== */
#pc-header .nav li a {
    color: var(--nav-link-color) !important;
    background: transparent !important;
    transition: color 0.3s ease;
    padding: 0 16px;
    line-height: 90px;
}

/* ===== 导航菜单链接 - 不要背景色 ===== */
#pc-header .nav li a {
    color: var(--nav-link-color) !important;
    background: transparent !important;
    transition: color 0.3s ease;
    padding: 0 16px;
    line-height: 90px;
    outline: none !important;           /* 去除焦点框 */
    -webkit-tap-highlight-color: transparent; /* 移动端去高亮 */
}
/* ===== 下拉菜单 ===== */
#pc-header .nav li ul {
    background: var(--header-bg) !important;
}
#pc-header .nav li ul li a {
    color: var(--nav-link-color) !important;
    background: transparent !important;
    outline: none !important;
}
#pc-header .nav li ul li a:hover {
    color: var(--nav-link-hover-color) !important;
    background: transparent !important;
}

/* ===== 搜索图标 ===== */
#pc-header a.search-ico i {
    color: var(--nav-link-color) !important;
}

/* ===== 登录图标 ===== */
.log-in a.user-ico i {
    color: var(--nav-link-color) !important;
}

/* ===== 悬浮主题切换按钮 ===== */
.floating-theme-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--header-bg, #ffffff);
    border: 2px solid var(--header-border, #26b200);
    cursor: pointer;
    font-size: 22px;
    color: var(--nav-link-color, #111111);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.floating-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
body.dark-mode .floating-theme-toggle {
    background: #313131;
    border-color: #26b200;
    color: #26b200;
}
body.dark-mode .floating-theme-toggle:hover {
    background: #26b200;
    color: #111111;
}




/* ============================================================
   暗黑模式 - 内容区背景（精准控制，不影响页头）
   ============================================================ */

/* ===== 首页主要区域 ===== */
body.dark-mode .bg-gray {
    background: var(--body-bg) !important;
}

body.dark-mode .layout.bg-gray {
    background: var(--body-bg) !important;
}

body.dark-mode .bg-white {
    background: var(--body-bg) !important;
}

/* ===== 产品推荐卡片 ===== */
body.dark-mode .carousel-pro .media {
    background: var(--bg-card, #1a1a2e) !important;
    border-color: #2a3a5a;
}

body.dark-mode .carousel-pro .media .padding-large {
    background: var(--bg-card, #1a1a2e) !important;
}

body.dark-mode .carousel-pro .media-body h2 a {
    color: var(--nav-link-color) !important;
}

/* ===== 关于我们区域 ===== */
body.dark-mode .home-about {
    background-color: var(--body-bg) !important;
}

body.dark-mode .home-about .bg-white {
    background: var(--bg-card, #1a1a2e) !important;
}

/* ===== 解决方案区域 ===== */
body.dark-mode .solution .media-img .linear-link {
    background: var(--body-bg) !important;
}

/* ===== 新闻动态区域 ===== */
body.dark-mode .home-news-c {
    background: var(--bg-card, #1a1a2e) !important;
    border-color: #2a3a5a;
}

body.dark-mode .home-news-h .media-img .post-title {
    background: var(--bg-card, #1a1a2e) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .home-news-c .news-title h2 a {
    color: var(--nav-link-color) !important;
}

/* ===== Tab导航 ===== */
body.dark-mode .tab-normal .tab .tab-nav li a {
    background: var(--body-bg) !important;
    color: var(--nav-link-color) !important;
}

body.dark-mode .tab-normal .tab .tab-nav .active a {
    background: var(--nav-link-hover-bg, #26b200) !important;
    color: #111 !important;
}

/* ===== 标题 ===== */
body.dark-mode .title-c h3 {
    color: var(--nav-link-color) !important;
}

body.dark-mode .title-l h2 {
    color: var(--nav-link-color) !important;
}

/* ===== 购物车图标 - 橙色 =====*/
#pc-header a.shop-ico i {
    color: #FF6600 !important;
} 

/* ============================================================
   通用布局样式
   ============================================================ */

.doc-page {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3px 4px 50px;
    min-height: 760px;
}


/* 文件夹切换按钮 */
.doc-sidebar .folder-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
.doc-sidebar .folder-toggle .arrow {
    display: inline-block;
    width: 18px;
    font-size: 12px;
    color: #FF6600; 
    /*color: var(--text-muted, #26b200);*/
    transition: transform 0.2s;
    text-align: center;
    flex-shrink: 0;
}
.doc-sidebar .folder-toggle .arrow.open {
    color: #26b200;   /* 展开时的颜色 */
    transform: rotate(90deg);
}
.doc-sidebar .folder-toggle a {
    flex: 1;
    padding: 6px 8px 6px 4px;
    font-size: 14px;
    color: var(--text-secondary, #555);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.doc-sidebar .folder-toggle a:hover {
    background: var(--bg-hover, #f5f6fa);
    color: var(--link-hover, #ff6600);
}
.doc-sidebar .folder-toggle a.active {
    background: var(--bg-hover, #f5f6fa);
    color: var(--link-hover, #ff6600);
    border-left-color: var(--link-hover, #ff6600);
}