/* ============================================================
   导航分组样式（网站组 / 系统组）
   ============================================================ */

.nav-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 标签切换栏 */
.nav-tabs {
    display: none;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
    width: 100%;
}

.nav-tabs .tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 24px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: inherit;
}

.nav-tabs .tab-btn.active {
    color: #fff;
    border-bottom-color: #6aafff;
}

.nav-tabs .tab-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ===== 网站组 ===== */
.nav-group {
    display: flex;
    gap: 20px;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 0;
}

.nav-group a {
    color: #6aafff;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-group a:hover {
    color: #8fcbff;
}

.nav-group a.active {
    color: #6aafff;
}

/* ===== 系统组（绿色背景，白色文字） ===== */
.nav-group.system-group a {
    background: #22a65e;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
}

.nav-group.system-group a:hover {
    background: #1a8c4e;
    color: #ffffff;
}

.nav-group.system-group a.active {
    background: #1a8c4e;
    color: #ffffff;
}

/* ===== 系统组状态色 ===== */
/* 已上线（绿） */
.nav-group.system-group a.status-live {
    background: #22a65e;
}
.nav-group.system-group a.status-live:hover {
    background: #1a8c4e;
}
/* 2026-09-28（CSS 审核清单 nav-P1）：
   status-dev 已删 —— 全站 HTML + JS 检索 0 处使用，是死代码；
   而且原实现本身也不对：<a> 可跳转，cursor: not-allowed 拦不住键盘 Tab + Enter。
   status-beta **是活的**（admin-articles.html / admin-leads.html 各 2 处：
   PMC部、生产部），恢复保留。
   遗留建议（未采纳，待老伍拍板）：::after 里的 🔥 跨系统渲染差异大、
   读屏会念出「火」，可换成纯色圆点或文字「内测」。 */
/* 内测中（橙 + 🔥） */
.nav-group.system-group a.status-beta {
    background: #ff8800;
    position: relative;
}
.nav-group.system-group a.status-beta:hover {
    background: #e07700;
}
.nav-group.system-group a.status-beta::after {
    content: "🔥";
    margin-left: 4px;
    font-size: 11px;
}

/* ===== 按钮样式 ===== */
.nav-group .btn-nav {
    background: #2d7aff;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
}

.nav-group .btn-nav:hover {
    background: #1a5fd9;
    color: #fff;
}

/* 系统组默认隐藏（桌面端除外） */
.nav-group.system-group {
    display: none;
}

/* ===== 桌面端（> 768px）：两组都显示，无标签 ===== */
@media (min-width: 769px) {
    .nav-tabs {
        display: none !important;
    }
    .nav-group {
        display: flex !important;
    }
    .nav-group.system-group {
        display: flex !important;
    }
    .nav-group .sep {
        color: rgba(255, 255, 255, 0.15);
        font-size: 14px;
    }
}

/* ===== 移动端（≤ 768px）：标签切换 ===== */
@media (max-width: 768px) {
    .navbar .container {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 0 4px;
    }

    .nav-tabs {
        display: flex !important;
    }

    /* 手机端标签按钮改为亮蓝色 */
    .nav-tabs .tab-btn {
        color: #6aafff !important;
        font-weight: 600;
        font-size: 14px;
        padding: 6px 20px;
    }

    .nav-tabs .tab-btn.active {
        color: #6aafff !important;
        border-bottom-color: #6aafff;
    }

    .nav-tabs .tab-btn:hover {
        color: #8fcbff !important;
    }

    .nav-group {
        display: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
        padding: 8px 0 4px;
        width: 100%;
    }

    .nav-group.active {
        display: flex !important;
    }

    .nav-group a {
        font-size: 13px;
        padding: 4px 2px;
        color: #6aafff;
    }

    .nav-group.system-group a {
        background: #22a65e;
        color: #ffffff;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
    }

    .nav-group.system-group a:hover {
        background: #1a8c4e;
    }

    .nav-group .btn-nav {
        font-size: 12px;
        padding: 4px 12px;
    }

    .nav-group .sep {
        display: none;
    }

    .menu-toggle {
        display: none !important;
    }
}