/**
 * 零售采购导航站 - Neon Cyberpunk 风格首页
 * 设计规范版本: 1.0.0
 * 适用: PC端 / 移动端响应式
 */

/* ==================== CSS 变量 - 简洁双色方案 ==================== */
:root {
    /* 品牌主色 - 蓝色（唯一强调色） */
    --nav-primary: #2563EB;
    --nav-primary-light: #3B82F6;
    --nav-primary-dark: #1D4ED8;
    --nav-primary-glow: rgba(37, 99, 235, 0.1);
    
    /* 辅助色统一使用主色 */
    --nav-secondary: #2563EB;
    --nav-secondary-light: #3B82F6;
    --nav-secondary-dark: #1D4ED8;
    --nav-secondary-glow: rgba(37, 99, 235, 0.1);
    
    /* 强调色也使用主色 */
    --nav-accent: #2563EB;
    --nav-accent-light: #3B82F6;
    --nav-accent-glow: rgba(37, 99, 235, 0.1);
    
    /* 功能色 - 保留但少用 */
    --nav-success: #10B981;
    --nav-warning: #F59E0B;
    --nav-error: #EF4444;
    --nav-info: #2563EB;
    
    /* 浅色背景层次 */
    --nav-bg-deepest: #F8FAFC;
    --nav-bg-deep: #F1F5F9;
    --nav-bg-base: #FFFFFF;
    --nav-bg-elevated: #F8FAFC;
    --nav-bg-surface: #E2E8F0;
    --nav-bg-overlay: rgba(255, 255, 255, 0.95);
    
    /* 文字色彩 - 仅两种：深灰+浅灰 */
    --nav-text-primary: #333333;
    --nav-text-secondary: #666666;
    --nav-text-tertiary: #999999;
    --nav-text-disabled: #CCCCCC;
    
    /* 边框色彩 */
    --nav-border-subtle: rgba(0, 0, 0, 0.04);
    --nav-border-default: rgba(0, 0, 0, 0.08);
    --nav-border-prominent: rgba(0, 0, 0, 0.12);
    
    /* 阴影系统 */
    --nav-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --nav-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --nav-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --nav-shadow-glow-primary: 0 2px 8px var(--nav-primary-glow);
    --nav-shadow-glow-secondary: 0 2px 8px var(--nav-primary-glow);
    
    /* 渐变系统 - 简化 */
    --nav-gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    --nav-gradient-card: linear-gradient(145deg, #FFFFFF, #FAFAFA);
    --nav-gradient-text: var(--nav-primary);
    --nav-gradient-border: var(--nav-primary);
    
    /* 紧凑间距系统 */
    --nav-space-xs: 2px;
    --nav-space-sm: 4px;
    --nav-space-md: 8px;
    --nav-space-lg: 12px;
    --nav-space-xl: 16px;
    --nav-space-2xl: 24px;
    --nav-space-3xl: 32px;
    
    /* 圆角系统 */
    --nav-radius-sm: 6px;
    --nav-radius-md: 12px;
    --nav-radius-lg: 16px;
    --nav-radius-xl: 24px;
    --nav-radius-full: 9999px;
    
    /* 字体系统 */
    --nav-font-display: 'Clash Display', 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --nav-font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --nav-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* 动画时间 */
    --nav-transition-fast: 0.15s;
    --nav-transition-normal: 0.3s;
    --nav-transition-slow: 0.5s;
}

/* ==================== 基础重置 ==================== */
.nav-homepage-wrapper {
    background: var(--nav-bg-deepest);
    min-height: 100vh;
    font-family: var(--nav-font-body);
    color: var(--nav-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100vw; /* 使用100vw确保与viewport同宽 */
    max-width: 100vw;
    margin-left: calc(-1 * (100vw - 100%) / 2); /* 补偿滚动条宽度，使内容居中 */
    box-sizing: border-box;
}

/* 覆盖body背景为浅色 */
html.neon-nav-page,
body.neon-nav-page {
    background: var(--nav-bg-deepest) !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PC端使用overlay滚动条，确保左右对称 */
@supports (overflow: overlay) {
    html.neon-nav-page,
    body.neon-nav-page {
        overflow-y: overlay !important;
    }
}

/* 对于不支持overlay的浏览器，使用scrollbar-gutter */
@supports not (overflow: overlay) {
    html.neon-nav-page {
        scrollbar-gutter: stable both-edges !important;
    }
}

/* 移动端强制全宽 - 隐藏scrollbar */
@media (max-width: 768px) {
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    html::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
    
    body, body.neon-nav-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
    
    .nav-homepage-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

.nav-homepage-wrapper *,
.nav-homepage-wrapper *::before,
.nav-homepage-wrapper *::after {
    box-sizing: border-box;
}

/* ==================== 页面布局 ==================== */
.nav-page-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ==================== 左侧菜单栏 - 原首页风格 ==================== */
/* 左侧菜单宽度和样式已在主容器部分定义 */

.nav-sidebar-inner {
    padding: 0;
}

.nav-sidebar-logo {
    display: none;
}

.nav-sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-sidebar-menu > ul > li {
    margin-bottom: 0;
    position: relative;
}

.nav-sidebar-section {
    display: none;
}

.nav-sidebar-divider {
    display: none;
}

.nav-sidebar-menu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左对齐 */
    padding: 12px 0;
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all var(--nav-transition-fast) ease;
    position: relative;
}

.nav-sidebar-menu > ul > li > a span {
    margin-right: 0;
    margin-left: 0;
}

.nav-sidebar-menu > ul > li > a:hover,
.nav-sidebar-menu > ul > li.active > a {
    color: var(--nav-primary);
}

.nav-sidebar-menu > ul > li > a i:first-child {
    display: none;
}

.nav-sidebar-menu > ul > li > a i.arrow {
    font-size: 0.625rem;
    color: var(--nav-text-tertiary);
    transition: transform var(--nav-transition-fast) ease;
    margin-left: 6px; /* 箭头在文字右侧 */
}

.nav-sidebar-menu > ul > li.has-submenu.open > a i.arrow {
    transform: rotate(90deg);
}

.nav-sidebar-menu .submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: var(--nav-space-xs) 0 var(--nav-space-xs) 0;
    margin-left: 0;
    padding-left: 0;
}

.nav-sidebar-menu > ul > li.has-submenu.open .submenu {
    display: block;
}

.nav-sidebar-menu .submenu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-sidebar-menu .submenu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左对齐 */
    padding: 8px 0 8px 12px; /* 左侧缩进 */
    color: var(--nav-text-tertiary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all var(--nav-transition-fast) ease;
    margin-left: 0;
    text-indent: 0;
    text-align: left; /* 左对齐 */
}

.nav-sidebar-menu .submenu li a:hover {
    color: var(--nav-primary);
}

/* ==================== 背景装饰 - 浅色风格隐藏 ==================== */
.nav-bg-decoration {
    display: none;
}

.nav-bg-orb,
.nav-bg-grid {
    display: none;
}

/* ==================== 主容器 ==================== */
.nav-main-container {
    position: relative;
    z-index: 1;
    max-width: 1352px; /* 内容最大宽度 */
    /* 使用CSS calc动态计算左右边距，确保完全对称 */
    /* 当视口宽度 > 1352px + 48px = 1400px 时，左右边距相等 */
    margin-left: max(24px, calc((100vw - 1352px) / 2));
    margin-right: max(24px, calc((100vw - 1352px) / 2));
    padding: 0; /* 顶部不留间隙 */
    min-height: 100vh;
    box-sizing: border-box;
}

/* 内容区域flex布局 - 确保左右边距一致 */
.nav-content-wrapper {
    display: flex;
    gap: 10px; /* 菜单与内容间距10px */
    margin-top: var(--nav-space-md);
}

/* 左侧菜单固定宽度 - 确保左右边距对称 */
.nav-sidebar {
    width: 70px; /* 紧凑菜单宽度 */
    min-width: 70px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    margin-left: 0;
}

.nav-main-content {
    flex: 1;
    min-width: 0;
    margin-right: 0;
}

@media (max-width: 992px) {
    .nav-main-container {
        width: calc(100% - 32px); /* 平板端左右各16px */
        padding: var(--nav-space-sm) 0;
    }
    
    .nav-content-wrapper {
        flex-direction: column;
    }
    
    .nav-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-main-container {
        width: 100% !important;
        padding: var(--nav-space-xs) 12px !important; /* 移动端左右各12px内边距 */
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

/* ==================== 顶部英雄区域 ==================== */
.nav-hero-section {
    text-align: center;
    padding: var(--nav-space-xs) 0;
    margin-bottom: 4px;
}

.nav-hero-title {
    font-family: var(--nav-font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--nav-space-lg);
    color: var(--nav-text-primary);
}

.nav-hero-subtitle {
    font-size: 1.25rem;
    color: var(--nav-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--nav-space-xl);
}

/* 搜索框 */
.nav-search-container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.nav-search-box {
    display: flex;
    align-items: center;
    background: var(--nav-bg-elevated);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-full);
    padding: var(--nav-space-sm);
    transition: all var(--nav-transition-normal) ease;
}

.nav-search-box:focus-within {
    border-color: var(--nav-primary);
    box-shadow: var(--nav-shadow-glow-primary);
}

.nav-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--nav-space-md) var(--nav-space-lg);
    font-size: 1rem;
    color: var(--nav-text-primary);
    outline: none;
}

.nav-search-input::placeholder {
    color: var(--nav-text-tertiary);
}

.nav-search-btn {
    background: var(--nav-gradient-text);
    border: none;
    border-radius: var(--nav-radius-full);
    padding: var(--nav-space-md) var(--nav-space-xl);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--nav-transition-normal) ease;
}

.nav-search-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--nav-shadow-glow-primary);
}

/* ==================== 统计数据展示 ==================== */
.nav-stats-section {
    display: flex;
    justify-content: center;
    gap: var(--nav-space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--nav-space-3xl);
}

.nav-stat-item {
    text-align: center;
    padding: var(--nav-space-lg);
    background: var(--nav-gradient-card);
    border: 1px solid var(--nav-border-subtle);
    border-radius: var(--nav-radius-lg);
    min-width: 160px;
    transition: all var(--nav-transition-normal) ease;
}

.nav-stat-item:hover {
    transform: translateY(-4px);
    border-color: var(--nav-primary);
    box-shadow: var(--nav-shadow-glow-primary);
}

.nav-stat-number {
    font-family: var(--nav-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--nav-primary);
}

.nav-stat-label {
    color: var(--nav-text-secondary);
    font-size: 0.875rem;
    margin-top: var(--nav-space-xs);
}

/* ==================== 快捷入口 ==================== */
.nav-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--nav-space-lg);
    margin-bottom: var(--nav-space-3xl);
}

.nav-quick-link-card {
    background: var(--nav-gradient-card);
    border: 1px solid var(--nav-border-subtle);
    border-radius: var(--nav-radius-lg);
    padding: var(--nav-space-xl);
    display: flex;
    align-items: center;
    gap: var(--nav-space-lg);
    transition: all var(--nav-transition-normal) ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.nav-quick-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--nav-primary-glow), transparent);
    opacity: 0;
    transition: opacity var(--nav-transition-normal) ease;
}

.nav-quick-link-card:hover {
    transform: translateY(-4px);
    border-color: var(--nav-primary);
    box-shadow: var(--nav-shadow-lg);
}

.nav-quick-link-card:hover::before {
    opacity: 1;
}

.nav-quick-link-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--nav-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.nav-quick-link-icon.primary {
    background: linear-gradient(135deg, var(--nav-primary), var(--nav-primary-dark));
    box-shadow: 0 4px 20px var(--nav-primary-glow);
}

.nav-quick-link-icon.secondary {
    background: linear-gradient(135deg, var(--nav-secondary), var(--nav-secondary-dark));
    box-shadow: 0 4px 20px var(--nav-secondary-glow);
}

.nav-quick-link-icon.accent {
    background: linear-gradient(135deg, var(--nav-accent), var(--nav-accent-light));
    box-shadow: 0 4px 20px var(--nav-accent-glow);
}

.nav-quick-link-icon.success {
    background: linear-gradient(135deg, var(--nav-success), #00D68F);
    box-shadow: 0 4px 20px rgba(0, 245, 160, 0.4);
}

.nav-quick-link-content {
    position: relative;
    z-index: 1;
}

.nav-quick-link-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--nav-space-xs);
}

.nav-quick-link-desc {
    font-size: 0.875rem;
    color: var(--nav-text-secondary);
}

/* ==================== 分类区块 - 卡片外框版 ==================== */
.nav-category-section {
    margin-bottom: var(--nav-space-lg);
    padding: var(--nav-space-md) var(--nav-space-lg);
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-md);
    box-shadow: var(--nav-shadow-sm);
    transition: box-shadow var(--nav-transition-fast) ease;
}

.nav-category-section:hover {
    box-shadow: var(--nav-shadow-md);
}

.nav-category-section:last-child {
    margin-bottom: 0;
}

.nav-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--nav-space-xs);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--nav-border-subtle);
}

.nav-category-title {
    display: flex;
    align-items: center;
    gap: var(--nav-space-xs);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

.nav-category-title i {
    width: 22px;
    height: 22px;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.nav-category-more {
    display: none !important; /* 隐藏所有模块标题右侧的"更多"链接 */
}

.nav-category-more:hover {
    display: none !important;
}

/* 子分类标签 */
.nav-subcategory-tabs {
    display: flex;
    gap: var(--nav-space-xs);
    margin-bottom: var(--nav-space-sm);
    overflow-x: auto;
    padding-bottom: var(--nav-space-xs);
}

.nav-subcategory-tabs::-webkit-scrollbar {
    height: 3px;
}

.nav-subcategory-tabs::-webkit-scrollbar-track {
    background: var(--nav-bg-base);
}

.nav-subcategory-tabs::-webkit-scrollbar-thumb {
    background: var(--nav-primary);
    border-radius: var(--nav-radius-full);
}

.nav-subcategory-tab {
    padding: var(--nav-space-xs) var(--nav-space-md);
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--nav-transition-fast) ease;
    text-decoration: none;
}

.nav-subcategory-tab:hover,
.nav-subcategory-tab.active {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: white;
}

/* ==================== 网站卡片网格 - 横向紧凑版 ==================== */
.nav-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--nav-space-sm);
}

@media (max-width: 768px) {
    .nav-sites-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: var(--nav-space-xs);
    }
}

@media (max-width: 480px) {
    .nav-sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
}

/* 网站卡片 - 横向布局（logo+名称一排） */
.nav-site-card {
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-sm);
    padding: 6px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    text-align: left;
    transition: all var(--nav-transition-fast) ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.nav-site-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: var(--nav-primary);
    transform: scaleY(0);
    transition: transform var(--nav-transition-fast) ease;
}

.nav-site-card:hover {
    border-color: var(--nav-primary);
    box-shadow: var(--nav-shadow-sm);
}

.nav-site-card:hover::before {
    transform: scaleY(1);
}

.nav-site-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all var(--nav-transition-fast) ease;
}

.nav-site-card:hover .nav-site-icon {
    transform: scale(1.05);
}

.nav-site-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.nav-site-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nav-site-name {
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0;
    color: var(--nav-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.nav-site-desc {
    font-size: 0.625rem;
    color: var(--nav-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* 隐藏描述 - 更紧凑 */
.nav-site-card .nav-site-desc {
    display: none;
}

/* ==================== 热门推荐区块 ==================== */
.nav-featured-section {
    margin-bottom: var(--nav-space-3xl);
}

.nav-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--nav-space-lg);
}

.nav-featured-card {
    background: var(--nav-gradient-card);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-xl);
    padding: var(--nav-space-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--nav-transition-normal) ease;
}

.nav-featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(108, 92, 231, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity var(--nav-transition-normal) ease;
}

.nav-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nav-shadow-lg);
}

.nav-featured-card:hover::before {
    opacity: 1;
}

.nav-featured-badge {
    position: absolute;
    top: var(--nav-space-md);
    right: var(--nav-space-md);
    padding: var(--nav-space-xs) var(--nav-space-md);
    background: var(--nav-primary);
    border-radius: var(--nav-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-featured-header {
    display: flex;
    align-items: center;
    gap: var(--nav-space-md);
    margin-bottom: var(--nav-space-lg);
}

.nav-featured-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--nav-radius-md);
    background: var(--nav-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nav-featured-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.nav-featured-info {
    flex: 1;
}

.nav-featured-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--nav-space-xs);
}

.nav-featured-url {
    font-size: 0.75rem;
    color: var(--nav-text-tertiary);
}

.nav-featured-desc {
    color: var(--nav-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--nav-space-lg);
}

.nav-featured-tags {
    display: flex;
    gap: var(--nav-space-sm);
    flex-wrap: wrap;
}

.nav-featured-tag {
    padding: var(--nav-space-xs) var(--nav-space-sm);
    background: var(--nav-bg-elevated);
    border-radius: var(--nav-radius-sm);
    font-size: 0.75rem;
    color: var(--nav-text-secondary);
}

/* ==================== 底部区块 ==================== */
.nav-footer-section {
    text-align: center;
    padding: var(--nav-space-lg) 0;
    border-top: 1px solid var(--nav-border-subtle);
    margin-top: var(--nav-space-lg);
}

.nav-footer-logo {
    font-family: var(--nav-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--nav-text-primary);
    margin-bottom: var(--nav-space-xs);
}

.nav-footer-text {
    color: var(--nav-text-tertiary);
    font-size: 0.6875rem;
}

.nav-footer-text a {
    color: var(--nav-text-tertiary);
    text-decoration: none;
    margin-left: var(--nav-space-sm);
}

.nav-footer-text a:hover {
    color: var(--nav-primary-light);
}

/* ==================== 动画效果 ==================== */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px var(--nav-primary-glow);
    }
    50% {
        box-shadow: 0 0 40px var(--nav-primary-glow), 0 0 60px var(--nav-secondary-glow);
    }
}

.nav-glow-pulse {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* 渐入动画 */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-animate-in {
    animation: fade-in-up 0.6s ease forwards;
}

.nav-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.nav-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.nav-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.nav-animate-delay-4 { animation-delay: 0.4s; opacity: 0; }
.nav-animate-delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ==================== 响应式适配 ==================== */
@media (max-width: 1200px) {
    .nav-quick-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* nav-hero-section 的样式在移动端英雄区域优化部分设置 */
    
    .nav-hero-title {
        font-size: 2rem;
    }
    
    .nav-hero-subtitle {
        font-size: 1rem;
    }
    
    .nav-stats-section {
        gap: var(--nav-space-md);
    }
    
    .nav-stat-item {
        min-width: 120px;
        padding: var(--nav-space-md);
    }
    
    .nav-stat-number {
        font-size: 1.75rem;
    }
    
    .nav-quick-links {
        grid-template-columns: 1fr;
    }
    
    /* nav-category-header 的样式在移动端分类区域优化部分设置 */
    
    .nav-featured-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* 搜索框在小屏幕保持横向紧凑布局 */
    .nav-search-box {
        display: flex !important;
        flex-direction: row !important;
        border-radius: 20px;
        height: 38px;
        padding: 0 3px 0 0;
    }
    
    .nav-search-input {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
        font-size: 0.8125rem;
        text-align: left !important;
    }
    
    .nav-search-btn {
        width: 32px !important;
        height: 32px !important;
        margin-top: 0 !important;
        font-size: 0.8125rem;
    }
    
    .search-tab {
        padding: 3px 10px;
        font-size: 0.6875rem;
    }
    
    .nav-site-card {
        padding: 4px 6px;
    }
    
    .nav-site-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }
    
    .nav-site-icon img {
        width: 20px;
        height: 20px;
    }
    
    .nav-site-name {
        font-size: 0.6875rem;
    }
}

/* ==================== 顶部导航栏 ==================== */
.nav-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nav-space-sm) calc(50vw - 676px); /* 内容区域与下方对齐 */
    margin-left: calc(-50vw + 50%); /* 负margin让背景延伸到屏幕左边缘 */
    margin-right: calc(-50vw + 50%); /* 负margin让背景延伸到屏幕右边缘 */
    margin-bottom: var(--nav-space-sm);
    /* 白色背景 + 阴影效果 - 参考amz123.com */
    background: var(--nav-bg-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--nav-border-subtle);
}

.nav-top-left {
    display: flex;
    align-items: center;
    gap: var(--nav-space-lg);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--nav-space-xs);
    text-decoration: none;
    color: var(--nav-text-primary);
}

.nav-logo img {
    height: 24px;
    width: auto;
}

.nav-logo span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nav-primary);
}

.nav-main-menu .nav-menu-list {
    display: flex;
    gap: var(--nav-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-main-menu .nav-menu-list li a {
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color var(--nav-transition-fast) ease;
    padding: var(--nav-space-xs) var(--nav-space-sm);
    border-radius: var(--nav-radius-sm);
}

.nav-main-menu .nav-menu-list li a:hover {
    color: var(--nav-primary);
    background: var(--nav-bg-elevated);
}

.nav-mobile-btn {
    display: none;
    color: var(--nav-text-primary);
    font-size: 1rem;
    padding: var(--nav-space-xs);
}

@media (max-width: 768px) {
    .nav-main-menu { display: none; }
    .nav-mobile-btn { display: block; }
}

/* ==================== 英雄搜索区域 - 紧凑版 ==================== */
.nav-hero-section {
    padding: var(--nav-space-xs) 0;
}

/* 三列布局：Logo + 搜索框 + 食品快讯 - 与下方导航区域对齐 */
.nav-hero-content-centered {
    display: grid;
    grid-template-columns: 250px 1fr 300px; /* Logo宽度增大，往右移动 */
    gap: 10px; /* 与content-wrapper的gap一致 */
    align-items: center;
    max-width: 100%;
    margin: 0;
}

.nav-search-wrapper-centered {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 1200px) {
    .nav-hero-content-centered {
        grid-template-columns: 200px 1fr 260px;
    }
}

@media (max-width: 1024px) {
    .nav-hero-content-centered {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Logo区域 - 仅显示Logo图标，放大3倍 */
.nav-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-hero-logo img {
    height: 130px;
    width: auto;
    object-fit: contain;
    transition: transform var(--nav-transition-normal) ease;
}

.nav-hero-logo img:hover {
    transform: scale(1.05);
}

@media (max-width: 1024px) {
    .nav-hero-logo {
        justify-content: center;
    }
    
    .nav-hero-logo img {
        height: 72px;
    }
}

@media (max-width: 768px) {
    .nav-hero-logo img {
        height: 60px;
    }
}

/* 搜索框 - 控制宽度并居中 */
.nav-search-wrapper-centered {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-search-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--nav-space-sm);
    justify-content: center;
}

@media (max-width: 1024px) {
    .nav-search-tabs {
        justify-content: center;
    }
}

.search-tab {
    padding: var(--nav-space-xs) var(--nav-space-md);
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--nav-transition-fast) ease;
}

.search-tab:hover,
.search-tab.active {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: white;
}

.nav-search-box {
    display: flex;
    align-items: center;
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-full);
    overflow: hidden;
    transition: all var(--nav-transition-normal) ease;
    width: 100%;
    box-shadow: var(--nav-shadow-sm);
}

.nav-search-box:focus-within {
    border-color: var(--nav-primary);
    box-shadow: var(--nav-shadow-glow-primary);
}

.nav-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--nav-space-sm) var(--nav-space-md);
    font-size: 0.875rem;
    color: var(--nav-text-primary);
    outline: none;
}

.nav-search-input::placeholder {
    color: var(--nav-text-tertiary);
}

.nav-search-btn {
    background: var(--nav-primary);
    border: none;
    padding: var(--nav-space-sm) var(--nav-space-lg);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--nav-transition-normal) ease;
}

.nav-search-btn:hover {
    background: var(--nav-primary-dark);
}

/* 热门关键词 - 搜索框下方 */
.nav-hot-keywords {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--nav-space-sm);
    margin-top: 4px;
    margin-bottom: 2px;
    padding: 0 var(--nav-space-sm);
}

.nav-hot-keywords .hot-keywords-label {
    color: var(--nav-text-tertiary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-hot-keywords .hot-keywords-label i {
    color: #F59E0B;
    font-size: 0.7rem;
}

.nav-hot-keywords .hot-keyword-item {
    padding: 2px 10px;
    background: var(--nav-bg-elevated);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-full);
    color: var(--nav-text-secondary);
    font-size: 0.7rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--nav-transition-fast) ease;
    white-space: nowrap;
}

.nav-hot-keywords .hot-keyword-item:hover {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: white;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .nav-hot-keywords {
        justify-content: center;
    }
    
    .nav-hot-keywords .hot-keyword-item {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
}

/* 食品快讯 - 右侧垂直列表样式 - 拉宽布局，与右侧模块边框对齐 */
.nav-news-flash-inline {
    display: flex;
    flex-direction: column;
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-md);
    padding: 6px 20px 5px;
    box-shadow: var(--nav-shadow-sm);
    height: auto;
    max-height: 90px;
    justify-content: flex-start;
    min-width: 300px;
    width: 100%;
}

.nav-news-flash-inline .news-label {
    color: var(--nav-text-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 4px;
    display: block;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--nav-border-subtle);
    line-height: 1.2;
    text-align: center;
}

.nav-news-flash-inline .news-scroll-wrapper {
    flex: 1;
    overflow: hidden;
    max-height: 62px;
}

.nav-news-flash-inline .news-scroll-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-news-flash-inline .news-scroll-list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 0;
    font-size: 0.75rem;
    line-height: 1.4;
    min-height: 18px;
    text-align: left;
}

.nav-news-flash-inline .news-scroll-list li:not(:last-child) {
    border-bottom: 1px dashed var(--nav-border-subtle);
}

/* 点符号样式 */
.nav-news-flash-inline .news-scroll-list li .news-dot {
    color: var(--nav-primary);
    font-size: 1rem;
    font-weight: bold;
    margin-right: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.nav-news-flash-inline .news-scroll-list li a {
    color: var(--nav-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    max-width: calc(100% - 55px);
    transition: color var(--nav-transition-fast) ease;
    text-align: left;
}

.nav-news-flash-inline .news-scroll-list li a:hover {
    color: var(--nav-primary);
}

.nav-news-flash-inline .news-scroll-list li .time {
    color: var(--nav-text-tertiary);
    font-size: 0.625rem;
    white-space: nowrap;
    margin-left: 6px;
    flex-shrink: 0;
    text-align: right;
}

@media (max-width: 1024px) {
    .nav-news-flash-inline {
        display: none;
    }
}

/* ==================== 实时汇率显示 ==================== */
.nav-exchange-rate-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nav-space-sm);
    flex-wrap: wrap;
    padding: 4px 0;
    margin-bottom: 2px;
    background: transparent;
}

.exchange-rate-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nav-primary);
    padding: 4px 10px;
    background: rgba(37, 99, 235, 0.08);
    border-radius: var(--nav-radius-full);
}

.exchange-rate-label i {
    font-size: 0.7rem;
}

.exchange-rate-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--nav-text-secondary);
    padding: 4px 10px;
    background: var(--nav-bg-base);
    border-radius: var(--nav-radius-full);
    border: 1px solid var(--nav-border-subtle);
    transition: all var(--nav-transition-fast) ease;
}

.exchange-rate-item:hover {
    border-color: var(--nav-primary);
    box-shadow: 0 2px 6px var(--nav-primary-glow);
}

.exchange-rate-item .flag {
    font-size: 0.875rem;
}

.exchange-rate-item .currency {
    color: var(--nav-text-tertiary);
    font-size: 0.6875rem;
}

.exchange-rate-item .rate {
    color: var(--nav-text-primary);
    font-family: var(--nav-font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    color: #10B981;
}

.exchange-rate-update {
    font-size: 0.625rem;
    color: var(--nav-text-tertiary);
    padding: 2px 8px;
}

@media (max-width: 768px) {
    .nav-exchange-rate-bar {
        gap: 6px !important;
        padding: 3px 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-exchange-rate-bar::-webkit-scrollbar {
        display: none;
    }
    
    .exchange-rate-label {
        font-size: 0.6875rem;
        padding: 3px 8px;
        flex-shrink: 0;
        margin-left: 0 !important;
    }
    
    .exchange-rate-item {
        font-size: 0.625rem;
        padding: 3px 8px;
        flex-shrink: 0;
    }
    
    .exchange-rate-item .rate {
        font-size: 0.6875rem;
    }
    
    .exchange-rate-update {
        font-size: 0.5625rem;
        flex-shrink: 0;
    }
}

/* ==================== 倒计时 - 紧凑版 ==================== */
.nav-countdown-bar {
    display: flex;
    justify-content: center;
    gap: var(--nav-space-sm);
    flex-wrap: wrap;
    padding: 2px 0;
    margin-bottom: 2px;
}

.countdown-item {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--nav-text-secondary);
}

.countdown-item .label {
    color: var(--nav-text-tertiary);
}

.countdown-item .event {
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--nav-radius-sm);
    font-size: 0.6875rem;
    background: rgba(37, 99, 235, 0.1);
    color: var(--nav-primary);
}

.countdown-item .event.spring,
.countdown-item .event.sial,
.countdown-item .event.ciie {
    background: rgba(37, 99, 235, 0.1);
    color: var(--nav-primary);
}

.countdown-item .days {
    font-family: var(--nav-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--nav-primary);
}

@media (max-width: 640px) {
    .nav-countdown-bar {
        gap: var(--nav-space-xs);
    }
    .countdown-item {
        font-size: 0.625rem;
    }
    .countdown-item .days {
        font-size: 0.875rem;
    }
}

/* ==================== 更多链接 ==================== */
.nav-more-link {
    display: none !important; /* 隐藏所有模块的"更多"链接 */
}

/* ==================== 空状态 ==================== */
.nav-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--nav-text-tertiary);
    padding: var(--nav-space-xl);
    font-size: 0.875rem;
}

/* ==================== 滚动条样式 ==================== */
.nav-homepage-wrapper::-webkit-scrollbar {
    width: 8px;
}

.nav-homepage-wrapper::-webkit-scrollbar-track {
    background: var(--nav-bg-deepest);
}

.nav-homepage-wrapper::-webkit-scrollbar-thumb {
    background: var(--nav-primary);
    border-radius: var(--nav-radius-full);
}

.nav-homepage-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--nav-primary-light);
}

/* ==================== 常用链接模块 - AMZ123风格 ==================== */
.nav-quick-links-section {
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    border-radius: var(--nav-radius-md);
    margin-bottom: var(--nav-space-md);
    overflow: hidden;
}

.nav-quick-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--nav-border-default);
    background: var(--nav-bg-elevated);
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-quick-tabs::-webkit-scrollbar {
    display: none;
}

.nav-quick-tab {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--nav-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--nav-transition-fast) ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.nav-quick-tab:hover {
    color: var(--nav-primary);
    background: rgba(37, 99, 235, 0.05);
}

.nav-quick-tab.active {
    color: var(--nav-primary);
    border-bottom-color: var(--nav-primary);
    background: var(--nav-bg-base);
}

.nav-quick-content {
    padding: var(--nav-space-md);
}

.nav-quick-panel {
    display: none;
}

.nav-quick-panel.active {
    display: block;
}

.nav-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: var(--nav-space-md);
}

/* 常用链接12列网格（无Tab模式） */
.nav-quick-grid-12cols {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--nav-space-sm);
}

/* 无Tab模式样式 */
.nav-quick-no-tabs {
    padding: var(--nav-space-md);
}

.nav-quick-no-tabs .nav-quick-content {
    padding: 0;
}

@media (max-width: 1400px) {
    .nav-quick-grid-12cols {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 1200px) {
    .nav-quick-grid-12cols {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 992px) {
    .nav-quick-grid-12cols {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-quick-grid-12cols {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--nav-space-sm);
    }
}

@media (max-width: 480px) {
    .nav-quick-grid-12cols {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .nav-quick-no-tabs {
        padding: var(--nav-space-sm);
    }
}

.nav-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all var(--nav-transition-fast) ease;
    padding: var(--nav-space-xs);
    border-radius: var(--nav-radius-sm);
}

.nav-quick-item:hover {
    background: var(--nav-bg-elevated);
    transform: translateY(-2px);
}

.nav-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--nav-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--nav-space-xs);
    overflow: hidden;
    border: 1px solid var(--nav-border-default);
    transition: all var(--nav-transition-fast) ease;
}

.nav-quick-item:hover .nav-quick-icon {
    border-color: var(--nav-primary);
    box-shadow: 0 2px 8px var(--nav-primary-glow);
}

.nav-quick-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.nav-quick-icon .flag-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.nav-quick-name {
    font-size: 0.6875rem;
    color: var(--nav-text-secondary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧工具栏 */
.nav-quick-tools {
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--nav-space-xs);
    z-index: 100;
}

.nav-quick-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--nav-transition-fast) ease;
    text-decoration: none;
}

.nav-quick-tool-btn:hover {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: white;
}

@media (max-width: 768px) {
    .nav-quick-tools {
        display: none;
    }
    .nav-quick-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: var(--nav-space-sm);
    }
    .nav-quick-icon {
        width: 38px;
        height: 38px;
    }
    .nav-quick-icon img {
        width: 24px;
        height: 24px;
    }
}

/* ==================== 移动端优化 ==================== */

/* 移动端顶部导航栏 */
@media (max-width: 768px) {
    .nav-top-bar {
        margin-left: -12px; /* 移动端负margin配合父容器的padding */
        margin-right: -12px;
        padding: var(--nav-space-xs) 12px; /* 内容保持与下方对齐 */
    }
    
    .nav-logo span {
        display: none; /* 移动端隐藏网站名称，只显示logo */
    }
    
    .nav-logo img {
        height: 40px;
    }
    
    /* 移动端显示简化顶部菜单（可横向滚动） */
    .nav-main-menu {
        display: block !important;
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: var(--nav-space-sm);
    }
    
    .nav-main-menu::-webkit-scrollbar {
        display: none;
    }
    
    .nav-main-menu .nav-menu-list {
        display: flex;
        gap: 2px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    .nav-main-menu .nav-menu-list li a {
        font-size: 0.6875rem;
        padding: 2px 6px;
    }
    
    .nav-mobile-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--nav-radius-sm);
        background: var(--nav-bg-elevated);
        flex-shrink: 0;
    }
}

/* 移动端英雄区域优化 */
@media (max-width: 768px) {
    .nav-hero-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-hero-content-centered {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端隐藏Logo区域（顶部已有） */
    .nav-hero-logo {
        display: none;
    }
    
    /* 搜索框移动端优化 - 紧凑设计，去掉额外padding */
    .nav-search-wrapper-centered {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        align-items: stretch !important;
    }
    
    /* 搜索tab优化 */
    .nav-search-tabs {
        gap: 4px;
        margin-bottom: 6px;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    
    .nav-search-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .search-tab {
        padding: 4px 12px;
        font-size: 0.75rem;
        flex-shrink: 0;
        border-radius: 16px;
    }
    
    .search-tab.active {
        font-weight: 600;
    }
    
    /* 搜索框紧凑横向布局 */
    .nav-search-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        border-radius: 22px;
        height: 40px;
        padding: 0 4px 0 0;
        background: var(--nav-bg-base);
        border: 1.5px solid var(--nav-border-default);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    .nav-search-box:focus-within {
        border-color: var(--nav-primary);
        box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
    }
    
    .nav-search-input {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 12px;
        font-size: 0.875rem;
        border: none;
        background: transparent;
        text-align: left !important;
    }
    
    .nav-search-input::placeholder {
        color: var(--nav-text-tertiary);
        font-size: 0.8125rem;
    }
    
    .nav-search-btn {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        padding: 0;
        margin: 0;
        margin-top: 0 !important;
        border-radius: 50%;
        background: var(--nav-primary);
        color: white;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-search-btn:hover {
        background: var(--nav-primary-dark);
        transform: scale(1.05);
    }
    
    /* 热门关键词移动端 - 左右对称 */
    .nav-hot-keywords {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
        scrollbar-width: none;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-hot-keywords::-webkit-scrollbar {
        display: none;
    }
    
    .nav-hot-keywords .hot-keywords-label {
        flex-shrink: 0 !important;
        font-size: 0.6875rem !important;
        color: var(--nav-text-tertiary) !important;
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
        margin-left: 0 !important;
    }
    
    .nav-hot-keywords .hot-keywords-label i {
        color: #F59E0B !important;
        font-size: 0.625rem !important;
    }
    
    .nav-hot-keywords .hot-keyword-item {
        padding: 3px 10px;
        font-size: 0.6875rem;
        flex-shrink: 0;
        border-radius: 12px;
        background: var(--nav-bg-elevated);
        border: 1px solid var(--nav-border-subtle);
        white-space: nowrap;
    }
    
    .nav-hot-keywords .hot-keyword-item:hover {
        background: var(--nav-primary);
        border-color: var(--nav-primary);
        color: white;
    }
}


/* 移动端倒计时优化 */
@media (max-width: 768px) {
    .nav-countdown-bar {
        gap: 6px !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        scrollbar-width: none;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-countdown-bar::-webkit-scrollbar {
        display: none;
    }
    
    .countdown-item {
        flex-shrink: 0;
        font-size: 0.625rem;
        padding: 2px 6px;
        background: var(--nav-bg-base);
        border-radius: var(--nav-radius-sm);
        border: 1px solid var(--nav-border-subtle);
        white-space: nowrap;
    }
    
    /* 确保第一个元素与其他行对齐 */
    .countdown-item:first-child {
        margin-left: 0 !important;
    }
    
    .countdown-item .days {
        font-size: 0.8125rem;
    }
    
    .countdown-item .event {
        font-size: 0.625rem;
        padding: 1px 3px;
    }
}

/* ==================== 移动端侧边菜单 ==================== */
.nav-mobile-sidebar {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: var(--nav-bg-base);
    z-index: 9999;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.nav-mobile-sidebar.open {
    right: 0;
}

.nav-mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nav-space-md) var(--nav-space-lg);
    border-bottom: 1px solid var(--nav-border-default);
    background: var(--nav-bg-elevated);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-mobile-sidebar-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nav-text-primary);
    display: flex;
    align-items: center;
    gap: var(--nav-space-xs);
}

.nav-mobile-sidebar-title i {
    color: var(--nav-primary);
}

.nav-mobile-sidebar-close {
    width: 32px;
    height: 32px;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-bg-base);
    border: 1px solid var(--nav-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--nav-text-secondary);
    transition: all var(--nav-transition-fast) ease;
}

.nav-mobile-sidebar-close:hover {
    background: var(--nav-primary);
    border-color: var(--nav-primary);
    color: white;
}

.nav-mobile-sidebar-content {
    flex: 1;
    padding: var(--nav-space-sm);
    overflow-y: auto;
}

.nav-mobile-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile-sidebar-menu > li {
    margin-bottom: 2px;
}

.nav-mobile-sidebar-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nav-space-sm) var(--nav-space-md);
    color: var(--nav-text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: var(--nav-radius-sm);
    transition: all var(--nav-transition-fast) ease;
}

.nav-mobile-sidebar-menu > li > a:hover,
.nav-mobile-sidebar-menu > li.open > a {
    background: var(--nav-bg-elevated);
    color: var(--nav-primary);
}

.nav-mobile-sidebar-menu > li > a i.arrow {
    font-size: 0.625rem;
    transition: transform var(--nav-transition-fast) ease;
}

.nav-mobile-sidebar-menu > li.open > a i.arrow {
    transform: rotate(90deg);
}

.nav-mobile-sidebar-menu .submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: var(--nav-space-xs) 0 var(--nav-space-xs) 0;
    background: var(--nav-bg-elevated);
    border-radius: 0 0 var(--nav-radius-sm) var(--nav-radius-sm);
    margin-top: 2px;
    margin-left: 0;
    padding-left: 0;
}

.nav-mobile-sidebar-menu > li.open .submenu {
    display: block;
}

.nav-mobile-sidebar-menu .submenu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-mobile-sidebar-menu .submenu li a {
    display: block;
    padding: var(--nav-space-sm) var(--nav-space-md) var(--nav-space-sm) var(--nav-space-3xl);
    color: var(--nav-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    border-radius: var(--nav-radius-sm);
    transition: all var(--nav-transition-fast) ease;
    margin-left: 0;
    text-indent: 0;
    position: relative;
}

.nav-mobile-sidebar-menu .submenu li a:hover {
    color: var(--nav-primary);
    background: var(--nav-bg-base);
}

/* 移动端遮罩层 */
.nav-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nav-mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 隐藏桌面端侧边栏在移动端 */
@media (max-width: 992px) {
    .nav-sidebar {
        display: none !important;
    }
}

/* 移动端分类区域优化 */
@media (max-width: 768px) {
    .nav-category-section {
        margin-bottom: var(--nav-space-sm);
        padding: var(--nav-space-sm) 0; /* 移动端左右padding由父容器控制 */
    }
    
    .nav-category-header {
        flex-direction: row;
        align-items: center;
        gap: var(--nav-space-sm);
    }
    
    .nav-category-title {
        font-size: 0.8125rem;
    }
    
    .nav-category-title i {
        width: 18px;
        height: 18px;
        font-size: 0.5rem;
    }
    
    .nav-subcategory-tabs {
        gap: 3px;
    }
    
    .nav-subcategory-tab {
        padding: 3px 8px;
        font-size: 0.6875rem;
    }
}

/* 移动端快捷链接优化 */
@media (max-width: 768px) {
    .nav-quick-links-section {
        margin-bottom: var(--nav-space-sm);
    }
    
    .nav-quick-tabs {
        padding: 0;
    }
    
    .nav-quick-tab {
        padding: 6px 10px;
        font-size: 0.6875rem;
    }
    
    .nav-quick-content {
        padding: var(--nav-space-sm) 0; /* 移动端左右padding由父容器控制 */
    }
    
    .nav-quick-no-tabs {
        padding: var(--nav-space-sm) 0 !important; /* 移动端左右对称 */
    }
}

/* 移动端底部优化 */
@media (max-width: 768px) {
    .nav-footer-section {
        padding: var(--nav-space-md) 0;
        margin-top: var(--nav-space-md);
    }
    
    .nav-footer-logo {
        font-size: 0.875rem;
    }
    
    .nav-footer-text {
        font-size: 0.5625rem;
    }
}