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

.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;
}
/* 内测中（橙 + 🔥） */
.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.system-group a.status-dev {
    background: #6b7a8a;
    cursor: not-allowed;
    opacity: 0.85;
}
.nav-group.system-group a.status-dev:hover {
    background: #5a6978;
}

/* ===== 按钮样式 ===== */
.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;
    }
}