/* 功能介绍页特有样式 (原 data.js 中 frontend 部分对应的样式) */

/* 功能介绍子容器 */
#frontend .frontend-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    text-align: left;
}
#frontend .image-card {
    width: 100%;
    border: var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}
#frontend .image-pair-card {
    width: 100%;
    border: var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* 顶部导航胶囊样式 */
.frontend-top-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap; /* 不换行，横向滚动 */
    overflow-x: auto; /* 允许横向滚动 */
    padding: 0.5rem 0.5rem;
    /* 强磨砂背景 */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    /* 细腻的内描边和阴影 */
    box-shadow: 
        0 10px 40px -10px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    border: none; /* 移除原来的 border */
    border-radius: 9999px;
    position: fixed;
    top: 0.75rem;
    left: 50%;
    transform: translateX(calc(-50% + var(--sidebar-width) / 2));
    z-index: 1200;
    width: auto;
    max-width: calc(100vw - var(--sidebar-width) - 4rem);
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
    justify-content: flex-start; /* 内容过多时从左开始 */
}
.frontend-top-nav::-webkit-scrollbar {
    display: none;
}
.frontend-top-nav .nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap; /* 文本不换行 */
    /* 移除 transition 实现直接跳转效果 */
    cursor: pointer;
    flex-shrink: 0; /* 防止挤压 */
}
.frontend-top-nav .nav-pill:hover {
    /* 悬停仅保留轻微背景变化，不缩放 */
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}
.frontend-top-nav .nav-pill:active {
    /* 点击时依然可以保留轻微按压感，或者完全移除 */
    transform: scale(0.98);
}
/* 选中状态 - 淡紫色 */
.frontend-top-nav .nav-pill.active {
    background: #E6E6FA; /* 淡紫色 (Lavender) */
    color: #4B0082; /* 深紫色文字 (Indigo) 以保证对比度 */
    box-shadow: 0 2px 8px rgba(75, 0, 130, 0.15);
    font-weight: bold;
}

/* 列表样式 */
#frontend .frontend-subcontainer > ul {
    list-style-type: disc;
    padding-left: 1.25rem;
}
#frontend .frontend-subcontainer > ul li {
    border-left: none;
    padding-left: 0;
    font-weight: normal;
}

/* 标题样式 */
#frontend .content-placeholder h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    scroll-margin-top: 4.5rem;
}
#frontend .content-placeholder h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 2px;
}
#frontend .content-placeholder h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}
#frontend .content-placeholder h4::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* 隐藏“功能介绍”内容区的主标题 */
#frontend > h1 {
    display: none;
}

/* 暗黑模式适配已停用 */

/* 响应式调整 */
@media (max-width: 768px) {
    .frontend-top-nav {
        left: 50%;
        transform: translateX(-50%);
        top: 0.5rem;
        bottom: auto;
        width: auto;
        max-width: calc(100vw - 2rem);
    }
}