/**
 * Apple App Store 风格设计系统
 * 完全按照苹果 App Store 的设计理念重构
 */

/* ============================================
   0. 基础重置和字体系统
   ============================================ */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    background: var(--pageBG);
    color: var(--systemPrimary);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* ============================================
   1. CSS 变量系统（Apple Design System）
   ============================================ */
:root {
    /* 系统颜色 */
    --systemPrimary: #000000;
    --systemPrimary-onLight: #000000;
    --systemPrimary-onDark: #ffffff;
    --systemSecondary: rgba(0, 0, 0, 0.6);
    --systemSecondary-onLight: rgba(0, 0, 0, 0.6);
    --systemSecondary-onDark: rgba(255, 255, 255, 0.6);
    --systemTertiary: rgba(0, 0, 0, 0.4);
    --systemQuaternary: rgba(0, 0, 0, 0.18);
    
    /* 背景颜色 */
    --pageBG: #ffffff;
    --systemBackground: #ffffff;
    --systemBackground-elevated: #ffffff;
    --sidebar-bg: #f5f5f7;
    
    /* 强调色 */
    --keyColor: #007AFF;
    --primary-color: #ff5a00;
    --primary-hover: #e54100;
    
    /* 间距系统（8px基础单位） */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-2xl: 48px;
    
    /* 圆角系统 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    
    /* 阴影系统 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);
    
    /* 动画参数 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 字体系统 */
    --title-1: 600 28px/34px -apple-system, BlinkMacSystemFont, sans-serif;
    --title-2: 600 22px/28px -apple-system, BlinkMacSystemFont, sans-serif;
    --title-3: 600 20px/25px -apple-system, BlinkMacSystemFont, sans-serif;
    --title-3-tall: 400 20px/28px -apple-system, BlinkMacSystemFont, sans-serif;
    --body: 400 17px/22px -apple-system, BlinkMacSystemFont, sans-serif;
    --body-emphasized: 600 17px/22px -apple-system, BlinkMacSystemFont, sans-serif;
    --callout: 400 16px/21px -apple-system, BlinkMacSystemFont, sans-serif;
    --subhead: 400 15px/20px -apple-system, BlinkMacSystemFont, sans-serif;
    --subhead-emphasized: 600 15px/20px -apple-system, BlinkMacSystemFont, sans-serif;
    --footnote: 400 13px/18px -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 布局变量 */
    --sidebar-width: 260px;
    --header-height: 44px;
    
    /* TodayCard 变量 */
    --today-card-gutter: 16px;
    --today-card-border-radius: var(--radius-xl);
    --today-card-accent-color: var(--primary-color);
    --today-card-text-color: rgb(255, 255, 255);
    --today-card-text-accent-color: rgba(255, 255, 255, 0.7);
    --today-card-background-tint-color: rgba(0, 0, 0, 0.2);
    
    /* Shelf 变量 */
    --grid-column-gap: 16px;
    --grid-row-gap: 16px;
    --standard-lockup-shadow-offset: 15px;
    
    /* 断点变量 */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-large: 1440px;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --systemPrimary: #ffffff;
        --systemSecondary: rgba(255, 255, 255, 0.6);
        --systemTertiary: rgba(255, 255, 255, 0.4);
        --pageBG: #000000;
        --systemBackground: #000000;
        --sidebar-bg: #1c1c1e;
    }
    
    .sidebar-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
    }
    
    .sidebar-logo {
        color: #f5f5f7;
    }
    
    .sidebar-search {
        border-bottom-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
    }
    
    .sidebar-search-input {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
        color: #f5f5f7;
    }
    
    .sidebar-search-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
    
    .sidebar-nav-item {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .sidebar-nav-item:hover {
        background: rgba(255, 90, 0, 0.15);
    }
    
    .sidebar-nav-item.active {
        background: rgba(255, 90, 0, 0.2);
    }
    
    .app-sidebar {
        border-right-color: rgba(255, 255, 255, 0.1);
    }
}

/* ============================================
   1.1 主应用布局系统（App Store Grid Layout）
   ============================================ */
.app-container {
    min-height: 100vh;
    min-height: 100dvh; /* 动态视口高度，考虑移动端地址栏 */
    display: grid;
    width: 100%;
    max-width: 100%;
    
    /* 移动端：单列布局 */
    grid-template-areas:
        'structure-header'
        'structure-main-section';
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 0;
    grid-template-rows: auto 1fr;
}

/* 桌面端：侧边栏 + 主内容区 */
@media (min-width: 1024px) {
    .app-container {
        grid-template-areas: 'structure-sidebar structure-main-section';
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        grid-template-rows: auto;
        /* 不设置 overflow，避免影响 sticky 定位 */
        /* 横向滚动由 html/body 控制 */
    }
}

/* 大屏桌面：更宽的侧边栏 */
@media (min-width: 1440px) {
    .app-container {
        --sidebar-width: 300px;
    }
}

/* ============================================
   1.2 侧边栏导航（Sidebar Navigation）
   ============================================ */
.app-sidebar {
    grid-area: structure-sidebar;
    background: var(--sidebar-bg);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: none; /* 移动端隐藏 */
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    /* 确保侧边栏独立滚动，不受父容器影响 */
    align-self: start;
}

@media (min-width: 1024px) {
    .app-sidebar {
        display: block;
    }
}

.sidebar-header {
    padding: 20px 25px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

.sidebar-logo {
    font-size: 21px;
    font-weight: 700;
    color: #1d1d1f;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-fast);
}

.sidebar-logo:hover {
    color: var(--primary-color);
}

.sidebar-logo i {
    font-size: 22px;
    color: var(--primary-color);
}

.sidebar-search {
    padding: 16px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.3);
}

.sidebar-search {
    position: relative;
}

.sidebar-search::before {
    content: '\f002';
    font-family: 'FontAwesome';
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
    transition: color var(--transition-fast);
}

.sidebar-search:focus-within::before {
    color: var(--primary-color);
}

.sidebar-search-input {
    width: 100%;
    padding: 11px 16px 11px 40px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font: var(--title-3-tall);
    font-size: 15px;
    color: #1d1d1f;
    transition: var(--transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 0;
}

.sidebar-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.sidebar-nav {
    padding: 8px 12px 8px 0;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 25px;
    color: #1d1d1f;
    text-decoration: none;
    font: var(--body);
    font-size: 16px;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    margin: 2px 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0 10px 10px 0;
}

.sidebar-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    opacity: 0;
    transition: var(--transition-fast);
}

.sidebar-nav-item:hover {
    background: linear-gradient(90deg, rgba(255, 90, 0, 0.08), rgba(255, 90, 0, 0.04));
    color: var(--primary-color);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.1);
}

.sidebar-nav-item:hover::before {
    opacity: 1;
}

.sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(255, 90, 0, 0.15), rgba(255, 90, 0, 0.08));
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.15);
}

.sidebar-nav-item.active::before {
    opacity: 1;
}

.sidebar-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: rgba(255, 90, 0, 0.08);
    border-radius: 0 8px 8px 0;
}

.sidebar-nav-item i {
    width: 22px;
    text-align: center;
    font-size: 19px;
    transition: var(--transition-fast);
    color: #8e8e93; /* 默认图标颜色 */
}

.sidebar-nav-item:hover i,
.sidebar-nav-item.active i {
    transform: scale(1.1);
}

/* 菜单项图标配色方案 - 使用橙色系渐变 */
.sidebar-nav-item i.fa-home {
    color: #ff5a00 !important;
}

.sidebar-nav-item i.fa-video-camera,
.sidebar-nav-item i.fa-play-circle,
.sidebar-nav-item i.fa-youtube-play {
    color: #ff6b35 !important;
}

.sidebar-nav-item i.fa-coins,
.sidebar-nav-item i.fa-money,
.sidebar-nav-item i.fa-credit-card {
    color: #ff8c42 !important;
}

.sidebar-nav-item i.fa-tag,
.sidebar-nav-item i.fa-tags,
.sidebar-nav-item i.fa-shopping-bag {
    color: #ffa366 !important;
}

.sidebar-nav-item i.fa-newspaper-o,
.sidebar-nav-item i.fa-book,
.sidebar-nav-item i.fa-file-text {
    color: #ffb84d !important;
}

.sidebar-nav-item i.fa-info-circle,
.sidebar-nav-item i.fa-question-circle {
    color: #ffc966 !important;
}

.sidebar-nav-item i.fa-user,
.sidebar-nav-item i.fa-user-circle {
    color: #ffd699 !important;
}

.sidebar-nav-item i.fa-list-alt,
.sidebar-nav-item i.fa-list {
    color: #ff8c42 !important;
}

.sidebar-nav-item i.fa-sign-in,
.sidebar-nav-item i.fa-sign-out {
    color: #ff6b35 !important;
}

.sidebar-nav-item i.fa-user-plus {
    color: #ff5a00 !important;
}

/* 悬停和激活状态时图标颜色 */
.sidebar-nav-item:hover i,
.sidebar-nav-item.active i {
    color: var(--primary-color) !important;
}

/* 侧边栏底部区域（登录/注册） */
.sidebar-nav > div[style*="border-top"] {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 8px;
}

/* 用户菜单区域特殊样式 */
.sidebar-nav-item[href*="user"] {
    font-size: 15px;
}

.sidebar-nav-item[href*="login"],
.sidebar-nav-item[href*="register"] {
    position: relative;
}

.sidebar-nav-item[href*="login"]::after,
.sidebar-nav-item[href*="register"]::after {
    content: '';
    position: absolute;
    right: 25px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
    transition: var(--transition-fast);
}

.sidebar-nav-item[href*="login"]:hover::after,
.sidebar-nav-item[href*="register"]:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

/* ============================================
   1.3 主内容区域（Main Content Area）
   ============================================ */
.app-main {
    grid-area: structure-main-section;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pageBG);
    width: 100%;
    max-width: 100%;
    /* 主内容区可以垂直滚动 */
    overflow-y: auto;
    /* 横向滚动由 html/body 控制，不在这里设置避免影响布局 */
}

.app-header {
    grid-area: structure-header;
    background: var(--systemBackground-elevated);
    border-bottom: 1px solid var(--systemQuaternary);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

@media (min-width: 1024px) {
    .app-header {
        display: none; /* 桌面端隐藏顶部导航 */
    }
}

.app-content {
    padding: var(--spacing-xl) var(--spacing-md);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    /* 不设置 overflow，避免影响父容器的滚动行为 */
}

@media (min-width: 1440px) {
    .app-content {
        max-width: 1800px;
    }
}

@media (max-width: 1023px) {
    .app-content {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

/* ============================================
   1.4 容器查询支持（Container Queries）
   ============================================ */
.hero-today-card {
    container-type: size;
    container-name: today-card;
}

@container today-card (aspect-ratio >= 16/9) {
    .hero-information-layer::before {
        background: linear-gradient(
            0deg,
            var(--today-card-accent-color) 0%,
            color-mix(in srgb, var(--today-card-accent-color) 60%, transparent) 30%,
            transparent 60%
        );
    }
}

@container today-card (orientation: portrait) {
    .hero-title {
        font-size: 36px;
    }
}

/* ============================================
   2. Hero 大卡片（TodayCard 风格）
   ============================================ */
.hero-today-card {
    position: relative;
    width: 100%;
    min-height: 500px;
    min-height: 50vh;
    border-radius: var(--today-card-border-radius);
    overflow: hidden;
    background-color: var(--today-card-accent-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    container-type: size;
    container-name: today-card;
}

/* 媒体层 */
.hero-media-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-media-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.hero-today-card:hover .hero-media-layer img {
    transform: scale(1.05);
}

/* 信息层 */
.hero-information-layer {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--spacing-xl) var(--today-card-gutter);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 渐变遮罩层 */
.hero-information-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        0deg,
        var(--today-card-accent-color) 0%,
        color-mix(in srgb, var(--today-card-accent-color) 60%, transparent) 30%,
        transparent 60%
    );
    z-index: -1;
}

/* 毛玻璃保护层 */
.hero-protection-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(100% + 60px);
    background: var(--today-card-background-tint-color);
    backdrop-filter: blur(34px) brightness(0.95) saturate(1.6) contrast(1.1);
    -webkit-backdrop-filter: blur(34px) brightness(0.95) saturate(1.6) contrast(1.1);
    mask-image: linear-gradient(
        to top,
        black 30%,
        rgba(0, 0, 0, 0.75) 70%,
        rgba(0, 0, 0, 0.4) 86%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        black 30%,
        rgba(0, 0, 0, 0.75) 70%,
        rgba(0, 0, 0, 0.4) 86%,
        transparent 100%
    );
    z-index: 1;
    transition: backdrop-filter var(--transition-base);
}

.hero-today-card:hover .hero-protection-layer {
    backdrop-filter: blur(34px) brightness(0.88) saturate(1.6) contrast(1.1);
    -webkit-backdrop-filter: blur(34px) brightness(0.88) saturate(1.6) contrast(1.1);
}

/* Hero 内容 */
.hero-content {
    position: relative;
    z-index: 3;
    color: var(--today-card-text-color);
}

.hero-badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    mix-blend-mode: plus-lighter;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    text-wrap: pretty;
    color: var(--today-card-text-color);
}

.hero-description {
    font-size: 20px;
    line-height: 1.4;
    color: var(--today-card-text-accent-color);
    margin-bottom: var(--spacing-md);
    text-wrap: pretty;
    mix-blend-mode: plus-lighter;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--today-card-accent-color);
    border-radius: var(--radius-xl);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-base);
    backdrop-filter: blur(10px);
}

.hero-action:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   3. 横向滚动货架（Shelf）
   ============================================ */
.shelf-container {
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.shelf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-sm);
}

.shelf-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--systemPrimary);
    line-height: 1.2;
}

.shelf-nav-arrows {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.shelf-container:hover .shelf-nav-arrows {
    opacity: 1;
}

.shelf-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    backdrop-filter: blur(10px);
}

.shelf-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.shelf-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.shelf-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--grid-column-gap) * 3)) / 4);
    gap: var(--grid-column-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--spacing-xs) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 优化滚动性能 */
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

.shelf-grid::-webkit-scrollbar {
    display: none;
}

.shelf-item {
    scroll-snap-align: start;
    position: relative;
    /* 优化渲染性能 */
    contain: layout style paint;
}

.shelf-item:not(.placeholder) {
    /* 非占位符项启用交互 */
    pointer-events: auto;
}

.shelf-item.placeholder {
    pointer-events: none;
}

/* ============================================
   4. 商品卡片（Apple Style）
   ============================================ */
.product-card-apple {
    background: var(--systemBackground-elevated);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 交错动画延迟 */
.product-card-apple:nth-child(1) { animation-delay: 0.1s; }
.product-card-apple:nth-child(2) { animation-delay: 0.2s; }
.product-card-apple:nth-child(3) { animation-delay: 0.3s; }
.product-card-apple:nth-child(4) { animation-delay: 0.4s; }
.product-card-apple:nth-child(5) { animation-delay: 0.5s; }
.product-card-apple:nth-child(6) { animation-delay: 0.6s; }
.product-card-apple:nth-child(7) { animation-delay: 0.7s; }
.product-card-apple:nth-child(8) { animation-delay: 0.8s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card-apple:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.product-card-image {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 宽高比 */
    overflow: hidden;
    background: var(--systemQuaternary);
}

.product-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card-apple:hover .product-card-image img {
    transform: scale(1.08);
}

.product-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.product-card-content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--systemPrimary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.product-card-title a:hover {
    color: var(--keyColor);
}

.product-card-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: auto;
    margin-bottom: var(--spacing-sm);
}

.product-card-action {
    width: 100%;
    padding: 12px;
    background: var(--keyColor);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    text-align: center;
    display: block;
}

.product-card-action:hover {
    background: color-mix(in srgb, var(--keyColor) 93%, black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   5. 分类卡片（Apple Style）
   ============================================ */
.category-card-apple {
    background: var(--systemBackground-elevated);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.category-card-apple:nth-child(1) { animation-delay: 0.1s; }
.category-card-apple:nth-child(2) { animation-delay: 0.2s; }
.category-card-apple:nth-child(3) { animation-delay: 0.3s; }
.category-card-apple:nth-child(4) { animation-delay: 0.4s; }

.category-card-apple:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.category-card-image {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color), var(--keyColor));
}

.category-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.category-card-apple:hover .category-card-image img {
    transform: scale(1.1);
}

.category-card-content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--systemPrimary);
    margin-bottom: var(--spacing-xs);
}

.category-card-description {
    font-size: 15px;
    color: var(--systemSecondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   6. 文章卡片（Apple Style）
   ============================================ */
.article-card-apple {
    background: var(--systemBackground-elevated);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.article-card-apple:nth-child(1) { animation-delay: 0.1s; }
.article-card-apple:nth-child(2) { animation-delay: 0.2s; }
.article-card-apple:nth-child(3) { animation-delay: 0.3s; }
.article-card-apple:nth-child(4) { animation-delay: 0.4s; }
.article-card-apple:nth-child(5) { animation-delay: 0.5s; }
.article-card-apple:nth-child(6) { animation-delay: 0.6s; }

.article-card-apple:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.article-card-category {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    background: rgba(142, 142, 147, 0.15);
    backdrop-filter: blur(10px);
    color: #6e6e73;
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    border: 1px solid rgba(142, 142, 147, 0.2);
    transition: var(--transition-fast);
}

.article-card-apple:hover .article-card-category {
    background: rgba(142, 142, 147, 0.25);
    color: #1d1d1f;
}

.article-card-content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--systemPrimary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.article-card-title a:hover {
    color: var(--keyColor);
}

.article-card-summary {
    font-size: 15px;
    color: var(--systemSecondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: 13px;
    color: var(--systemTertiary);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--systemQuaternary);
}

/* ============================================
   7. 区块标题（Apple Style）
   ============================================ */
.section-header-apple {
    margin-bottom: var(--spacing-lg);
    padding: 0 var(--spacing-sm);
}

.section-title-apple {
    font-size: 34px;
    font-weight: 700;
    color: var(--systemPrimary);
    line-height: 1.1;
    margin-bottom: var(--spacing-xs);
}

.section-subtitle-apple {
    font-size: 17px;
    color: var(--systemSecondary);
    line-height: 1.4;
}

/* ============================================
   8. 响应式设计
   ============================================ */
@media (max-width: 991px) {
    .hero-today-card {
        height: 400px;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-description {
        font-size: 17px;
    }
    
    .shelf-grid {
        grid-auto-columns: calc((100% - (var(--grid-column-gap) * 2)) / 3);
    }
}

/* 移动端：移除强制最小高度，避免底部空白 */
@media (max-width: 767px) {
    .app-container {
        min-height: auto !important;
        grid-template-rows: auto auto !important;
    }
    
    .app-main {
        min-height: auto !important;
        overflow-y: visible !important;
        height: auto !important;
    }
    
    /* 确保body和html不会产生额外高度 */
    html,
    body {
        height: auto !important;
        min-height: auto !important;
    }
}

@media (max-width: 767px) {
    /* Hero大卡片优化 */
    .hero-today-card {
        min-height: 280px;
        max-height: 45vh;
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-md);
        margin-left: 0;
        margin-right: 0;
    }
    
    .hero-title {
        font-size: clamp(22px, 5.5vw, 28px);
        line-height: 1.2;
        margin-bottom: var(--spacing-xs);
    }
    
    .hero-description {
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 1.4;
        margin-bottom: var(--spacing-sm);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .hero-content {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    .hero-badge {
        padding: 4px 10px;
        font-size: 11px;
        margin-bottom: var(--spacing-xs);
    }
    
    .hero-action {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* 热门商品横向滚动优化 */
    .shelf-container {
        margin-bottom: var(--spacing-md);
    }
    
    .shelf-header {
        padding: 0;
        margin-bottom: var(--spacing-sm);
    }
    
    .shelf-title {
        font-size: 22px;
        font-weight: 700;
    }
    
    .shelf-grid {
        grid-auto-columns: calc(85vw - var(--spacing-md));
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 商品卡片优化 */
    .product-card-apple {
        border-radius: var(--radius-md);
    }
    
    .product-card-content {
        padding: var(--spacing-sm);
    }
    
    .product-card-title {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: var(--spacing-xs);
        min-height: auto;
        -webkit-line-clamp: 2;
    }
    
    .product-card-price {
        font-size: 18px;
        margin-bottom: var(--spacing-xs);
    }
    
    .product-card-action {
        padding: 10px var(--spacing-sm);
        font-size: 13px;
    }
    
    .product-card-badge {
        font-size: 10px;
        padding: 3px 8px;
        top: 8px;
        right: 8px;
    }
    
    /* 区块标题优化 */
    .section-title-apple {
        font-size: 24px;
        margin-bottom: var(--spacing-xs);
    }
    
    .section-subtitle-apple {
        font-size: 14px;
    }
    
    .section-header-apple {
        margin-bottom: var(--spacing-md);
        padding: 0;
    }
    
    /* 商品分类优化 - 移动端2列布局 */
    .category-card-apple {
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .category-card-image {
        padding-bottom: 50%; /* 减小图片高度比例 */
    }
    
    .category-card-content {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .category-card-title {
        font-size: 14px;
        margin-bottom: 2px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .category-card-description {
        font-size: 11px;
        line-height: 1.3;
        -webkit-line-clamp: 1;
        margin: 0;
    }
    
    /* 移动端商品分类2列布局 - 使用flexbox */
    .section-header-apple + .row {
        display: flex !important;
        flex-wrap: wrap;
        margin-left: calc(-1 * var(--spacing-xs) / 2);
        margin-right: calc(-1 * var(--spacing-xs) / 2);
    }
    
    .section-header-apple + .row > .col-xs-12,
    .section-header-apple + .row > [class*="col-xs-12"] {
        width: calc(50% - var(--spacing-xs)) !important;
        padding-left: calc(var(--spacing-xs) / 2) !important;
        padding-right: calc(var(--spacing-xs) / 2) !important;
        margin-bottom: var(--spacing-sm) !important;
        flex: 0 0 calc(50% - var(--spacing-xs)) !important;
        max-width: calc(50% - var(--spacing-xs)) !important;
    }
    
    /* 清除浮动（备用方案） */
    .row::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* 文章卡片优化 */
    .article-card-apple {
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .article-card-content {
        padding: var(--spacing-sm);
    }
    
    .article-card-title {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: var(--spacing-xs);
        -webkit-line-clamp: 2;
    }
    
    .article-card-summary {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: var(--spacing-xs);
        -webkit-line-clamp: 2;
    }
    
    .article-card-meta {
        font-size: 11px;
        gap: var(--spacing-sm);
        padding-top: var(--spacing-xs);
    }
    
    .article-card-category {
        top: 8px;
        right: 8px;
        padding: 4px 10px;
        font-size: 11px;
    }
    
    /* SEO内容区域移动端优化 */
    .app-content > div[style*="margin: var(--spacing-xl)"] {
        margin: var(--spacing-md) 0 !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] > div[style*="background: var(--systemBackground-elevated)"] {
        padding: var(--spacing-md) var(--spacing-sm) !important;
        border-radius: var(--radius-md) !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] > div h2 {
        font-size: 18px !important;
        margin-bottom: var(--spacing-sm) !important;
        line-height: 1.4 !important;
    }
    
    /* SEO内容区域移动端横向滚动布局 */
    .app-content > div[style*="margin: var(--spacing-xl)"] .row {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: var(--spacing-sm) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: var(--spacing-xs) !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row::-webkit-scrollbar {
        display: none !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 {
        width: calc(85vw - var(--spacing-sm)) !important;
        min-width: calc(85vw - var(--spacing-sm)) !important;
        max-width: calc(85vw - var(--spacing-sm)) !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        flex: 0 0 calc(85vw - var(--spacing-sm)) !important;
        scroll-snap-align: start !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 h3 {
        font-size: 15px !important;
        margin-bottom: var(--spacing-xs) !important;
        white-space: nowrap !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 h3 i {
        font-size: 14px !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 ul {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 ul li {
        margin-bottom: 6px !important;
        font-size: 12px !important;
        padding: 2px 0 !important;
        gap: var(--spacing-xs) !important;
        white-space: nowrap !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 ul li i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    /* Hero大卡片超小屏优化 */
    .hero-today-card {
        min-height: 240px;
        max-height: 40vh;
        border-radius: var(--radius-md);
    }
    
    .hero-title {
        font-size: 20px;
        line-height: 1.15;
    }
    
    .hero-description {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .hero-action {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* 热门商品超小屏优化 */
    .shelf-grid {
        grid-auto-columns: calc(90vw - var(--spacing-md));
        gap: var(--spacing-xs);
    }
    
    .shelf-title {
        font-size: 20px;
    }
    
    /* 商品卡片超小屏优化 */
    .product-card-title {
        font-size: 13px;
    }
    
    .product-card-price {
        font-size: 16px;
    }
    
    .product-card-action {
        padding: 8px var(--spacing-xs);
        font-size: 12px;
    }
    
    /* 区块标题超小屏优化 */
    .section-title-apple {
        font-size: 22px;
    }
    
    /* 商品分类超小屏优化 - 保持2列但更紧凑 */
    .category-card-title {
        font-size: 13px;
    }
    
    .category-card-description {
        font-size: 10px;
    }
    
    .category-card-content {
        padding: var(--spacing-xs);
    }
    
    /* SEO内容区域超小屏优化 */
    .app-content > div[style*="margin: var(--spacing-xl)"] > div h2 {
        font-size: 16px !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 {
        width: calc(90vw - var(--spacing-sm)) !important;
        min-width: calc(90vw - var(--spacing-sm)) !important;
        max-width: calc(90vw - var(--spacing-sm)) !important;
        flex: 0 0 calc(90vw - var(--spacing-sm)) !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 h3 {
        font-size: 14px !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 ul li {
        font-size: 11px !important;
    }
    
    .app-content > div[style*="margin: var(--spacing-xl)"] .row > .col-md-4 ul li i {
        font-size: 10px !important;
    }
    
    /* 文章卡片超小屏优化 */
    .article-card-title {
        font-size: 14px;
    }
    
    .article-card-summary {
        font-size: 12px;
    }
}

/* ============================================
   9. SEO关键词区块（Apple Style）
   ============================================ */
.homepage-seo-header {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.homepage-seo-header h1 {
    margin: 0;
    font-size: 0;
    height: 0;
    overflow: hidden;
}

.seo-keywords-section {
    background: var(--systemBackground-elevated);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.seo-keywords-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--systemPrimary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.seo-keywords-section h2 i {
    color: #ffc107;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.keyword-tag {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--systemPrimary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-base);
    cursor: pointer;
    border: 1px solid transparent;
}

/* 确保作为链接的关键词标签样式正确 */
a.keyword-tag {
    color: var(--systemPrimary);
    text-decoration: none;
}

a.keyword-tag:visited {
    color: var(--systemPrimary);
}

.keyword-tag:hover {
    background: var(--keyColor);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--keyColor);
}

.seo-keywords-section p {
    margin-top: var(--spacing-sm);
    color: var(--systemSecondary);
    font-size: 15px;
    line-height: 1.6;
}

/* 移动端隐藏热门充值服务标签区域 */
@media (max-width: 1023px) {
    .seo-keywords-section {
        display: none;
    }
}

/* ============================================
   防止横向滚动 - 移动端优化
   ============================================ */
/* 确保所有图片不会溢出 */
img {
    max-width: 100%;
    height: auto;
}

/* 修复 Bootstrap row 在移动端的负边距溢出问题 */
@media (max-width: 767px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 确保所有容器都有正确的宽度限制 */
    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    /* 确保横向滚动组件不影响整体布局 */
    .shelf-grid {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* 移动端：确保占位符不显示空白 */
    .shelf-item.placeholder {
        display: none !important; /* 移动端隐藏占位符，避免空白 */
    }
    
    /* 移动端：确保所有商品项正常显示 */
    .shelf-item:not(.placeholder) {
        display: block !important;
    }
    
    /* 商品分类网格优化 - 移动端2列布局（已在上面定义） */
    
    /* 文章卡片网格优化 - 移动端单列布局 */
    .row .col-md-4.col-sm-6.col-xs-12 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: var(--spacing-sm);
    }
    
    /* 整体间距优化 - 确保有边缘间距 */
    .app-content {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    /* 确保Hero卡片和最近购买通知有边缘间距 */
    .hero-today-card,
    .recent-purchases-notification {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================
   10. 性能优化
   ============================================ */
.product-card-apple,
.category-card-apple,
.article-card-apple {
    will-change: transform;
}

.hero-media-layer img,
.product-card-image img,
.category-card-image img {
    will-change: transform;
}

/* ============================================
   11. 占位符样式（虚拟滚动）
   ============================================ */
.shelf-item.placeholder {
    min-height: var(--item-height, 200px);
    background: var(--systemQuaternary);
    border-radius: var(--radius-xl);
    opacity: 0.3;
}

.shelf-item.placeholder > * {
    display: none;
}

/* ============================================
   12. 搜索输入框增强
   ============================================ */
/* 搜索框占位符样式已合并到上方 */

/* ============================================
   13. 导航项图标动画（已合并到上方样式）
   ============================================ */

/* ============================================
   14. 滚动条美化
   ============================================ */
.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: background var(--transition-fast);
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.shelf-grid::-webkit-scrollbar {
    height: 8px;
}

.shelf-grid::-webkit-scrollbar-track {
    background: var(--systemQuaternary);
    border-radius: 4px;
}

.shelf-grid::-webkit-scrollbar-thumb {
    background: var(--systemTertiary);
    border-radius: 4px;
}

.shelf-grid::-webkit-scrollbar-thumb:hover {
    background: var(--systemSecondary);
}

/* ============================================
   15. 焦点样式优化
   ============================================ */
.sidebar-nav-item:focus,
.shelf-nav-arrow:focus,
.filter-tab:focus,
.product-card-action:focus {
    outline: 2px solid var(--keyColor);
    outline-offset: 2px;
}

/* ============================================
   16. 加载状态
   ============================================ */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--systemQuaternary) 0%,
        var(--systemTertiary) 50%,
        var(--systemQuaternary) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ============================================
   17. 减少动画（用户偏好）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .product-card-apple,
    .category-card-apple,
    .article-card-apple {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   18. 高对比度模式支持
   ============================================ */
@media (prefers-contrast: high) {
    .sidebar-nav-item.active {
        border-left-width: 4px;
    }
    
    .product-card-action,
    .filter-tab.active {
        border: 2px solid currentColor;
    }
}

/* ============================================
   19. 移动端底部导航栏
   ============================================ */
.mobile-bottom-nav {
    display: none; /* 默认隐藏，移动端显示 */
}

@media (max-width: 767px) {
    /* 移动端底部导航栏 */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--systemBackground-elevated);
        border-top: 1px solid var(--systemQuaternary);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        z-index: 1000;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: center;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--systemSecondary);
        transition: var(--transition-fast);
        flex: 1;
        min-width: 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item i {
        font-size: 20px;
        transition: var(--transition-fast);
    }

    .mobile-nav-item span {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        transition: var(--transition-fast);
    }

    .mobile-nav-item:active {
        opacity: 0.6;
        transform: scale(0.95);
    }

    .mobile-nav-item.active {
        color: var(--primary-color);
    }

    .mobile-nav-item.active i {
        color: var(--primary-color);
    }

    .mobile-nav-item.active span {
        color: var(--primary-color);
        font-weight: 600;
    }

    /* 为主内容区域添加底部padding，避免内容被导航栏遮挡 */
    /* 只在有底部导航栏的页面添加padding */
    .app-content:has(.mobile-bottom-nav),
    body:has(.mobile-bottom-nav) .app-content {
        padding-bottom: calc(var(--spacing-md) + 60px + env(safe-area-inset-bottom)) !important;
    }
    
    /* 兼容不支持:has()的浏览器 - 使用类名方式 */
    .has-mobile-nav .app-content {
        padding-bottom: calc(var(--spacing-md) + 60px + env(safe-area-inset-bottom)) !important;
    }
    
    /* 调整 Tawk.to 客服聊天按钮位置，避免被底部导航栏遮挡 */
    /* 使用多种选择器确保覆盖所有可能的 Tawk.to 容器 */
    #tawkchat-container,
    #tawkchat-container iframe,
    #tawkchat-container > div,
    .tawkchat-container,
    .tawkchat-container iframe,
    [id*="tawk"],
    [class*="tawk"],
    iframe[src*="tawk.to"],
    /* Tawk.to 最小化按钮容器 - 最高优先级 */
    .tawk-min-container,
    div.tawk-min-container,
    .tawk-min-container.tawk-button,
    #tawkchat-container .tawk-min-container,
    /* 使用更高优先级的选择器 */
    body #tawkchat-container .tawk-min-container,
    html body .tawk-min-container,
    html body div.tawk-min-container {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100vh - 70px - env(safe-area-inset-bottom)) !important;
    }
    
    /* Tawk.to 的最小化按钮 */
    #tawkchat-minified,
    #tawkchat-minified-wrapper,
    [id*="tawk"][id*="minif"],
    /* 确保最小化容器也被调整 */
    #tawkchat-container .tawk-min-container,
    body .tawk-min-container,
    /* 更高优先级 */
    body #tawkchat-container .tawk-min-container {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
    
    /* 隐藏返回顶部按钮 */
    .back-to-top,
    .back-to-top-apple {
        display: none !important;
    }
    
    /* 调整 Tawk.to 客服按钮到原来返回顶部按钮的位置（右下角） */
    .tawk-min-container,
    div.tawk-min-container,
    .tawk-min-container.tawk-button,
    #tawkchat-container .tawk-min-container,
    body #tawkchat-container .tawk-min-container,
    html body .tawk-min-container,
    html body div.tawk-min-container {
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
    }
}

@media (max-width: 480px) {
    .mobile-nav-item {
        padding: 6px 8px;
    }

    .mobile-nav-item i {
        font-size: 18px;
    }

    .mobile-nav-item span {
        font-size: 10px;
    }
}

/* ============================================
   20. 打印样式
   ============================================ */
@media print {
    .app-sidebar,
    .app-header,
    .shelf-nav-arrows,
    .mobile-bottom-nav {
        display: none !important;
    }
    
    .app-main {
        margin: 0;
        padding: 0;
    }
}