/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 性能优化：减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 全局滚动性能优化 */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, 
        #faf5ff 0%, 
        #f3e8ff 25%,
        #e9d5ff 50%,
        #fce7f3 75%,
        #faf5ff 100%) !important;
    min-height: 100vh;
}

body {
    font-family: 'Inter', sans-serif;
    /* 优化滚动性能 */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 启用硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    background: linear-gradient(135deg, 
        rgba(168, 85, 247, 0.20) 0%, 
        rgba(236, 72, 153, 0.18) 15%,
        rgba(139, 92, 246, 0.22) 30%,
        rgba(219, 39, 119, 0.19) 45%,
        rgba(192, 132, 252, 0.21) 60%,
        rgba(244, 114, 182, 0.17) 75%,
        rgba(168, 85, 247, 0.20) 100%) !important;
    background-size: 400% 400% !important;
    background-attachment: fixed;
    animation: modernGradientFlow 35s ease infinite;
    min-height: 100vh;
    color: #1e293b;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@keyframes modernGradientFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 20px; /* 调整为常规底部留白 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 导航栏 - 全新粉紫色系设计 */
.navbar {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(250, 245, 255, 0.95) 30%,
        rgba(255, 240, 252, 0.95) 60%,
        rgba(255, 255, 255, 0.98) 100%);
    backdrop-filter: blur(6px) saturate(110%);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    border-radius: 0;
    padding: 22px 45px;
    margin-bottom: 24px;
    box-shadow: 
        0 2px 8px rgba(168, 85, 247, 0.08),
        0 1px 4px rgba(236, 72, 153, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: none;
    border-bottom: 2px solid rgba(168, 85, 247, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: box-shadow 0.2s ease;
    /* 性能优化 */
    contain: layout style paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.navbar:hover {
    box-shadow: 
        0 6px 20px rgba(168, 85, 247, 0.15),
        0 3px 10px rgba(236, 72, 153, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(168, 85, 247, 0.25);
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #ec4899 0%,
        #a855f7 25%,
        #f472b6 50%,
        #c084fc 75%,
        #ec4899 100%);
    background-size: 200% 100%;
    animation: navbarShimmer 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes navbarShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.navbar::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(168, 85, 247, 0.08) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: navbarRotate 20s linear infinite;
}

@keyframes navbarRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}


.nav-brand {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.nav-brand h1 {
    font-family: 'Poppins', 'Roboto', 'Arial', sans-serif;
    font-size: 26px;
    background: linear-gradient(135deg, 
        #a855f7 0%,
        #ec4899 50%,
        #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    text-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-block;
}

.nav-brand h1::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, 
        rgba(168, 85, 247, 0.6), 
        rgba(236, 72, 153, 0.8), 
        rgba(168, 85, 247, 0.6));
    background-size: 200% 100%;
    border-radius: 1px;
    animation: titleUnderline 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes titleUnderline {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.nav-brand h1:hover {
    transform: scale(1.05) translateY(-2px);
    filter: brightness(1.1);
}

.nav-brand h1:hover::after {
    opacity: 1;
    height: 2px;
}

.language-switch {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
}

.language-switch .lang-select {
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.8), rgba(204, 251, 241, 0.8));
    border: 1px solid rgba(45, 212, 191, 0.3);
    border-radius: 0; /* 移除圆角 */
    cursor: pointer;
    font-size: 9px;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    color: #6b7280;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-width: 50px;
    max-width: 60px;
    box-shadow: 
        0 1px 3px rgba(176, 196, 222, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 14px;
    text-align: center;
}

.language-switch .lang-select:hover {
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.9), rgba(204, 251, 241, 0.9));
    border-color: rgba(20, 184, 166, 0.5);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 2px 6px rgba(20, 184, 166, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.language-switch .lang-select:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 
        0 0 0 2px rgba(20, 184, 166, 0.1),
        0 2px 6px rgba(20, 184, 166, 0.1);
    transform: translateY(-1px) scale(1.03);
}

.language-switch .lang-select option {
    background: rgba(248, 250, 252, 0.95);
    color: #6b7280;
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 400;
    border: none;
    border-radius: 4px;
    margin: 1px;
    transition: background-color 0.2s ease;
    text-align: center;
}

.language-switch .lang-select option:hover {
    background: rgba(241, 245, 249, 0.95);
}

.language-switch .lang-select option:checked {
    background: linear-gradient(135deg, rgba(176, 196, 222, 0.8), rgba(147, 197, 253, 0.8));
    color: #374151;
}

.lang-btn {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    color: #1d1d1f;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.lang-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
    transition: left 0.5s ease;
}

.lang-btn:hover::before {
    left: 100%;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.lang-btn.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(29, 29, 31, 0.25);
    transform: translateY(-1px);
}

.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-tab {
    padding: 14px 28px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    color: #1d1d1f;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
    transition: left 0.5s ease;
}

.nav-tab:hover::before {
    left: 100%;
}

.nav-tab:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

.nav-tab.active {
    background: #1d1d1f;
    color: #fff;
    box-shadow: 
        0 6px 20px rgba(29, 29, 31, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid #1d1d1f;
    transform: translateY(-1px);
}

/* 统计面板 */
.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 4px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1d1d1f, #86868b, #1d1d1f);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-item:hover::before {
    opacity: 1;
}

.stat-item:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: none;
    letter-spacing: -0.8px;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-number {
    transform: scale(1.05);
    text-shadow: 0 2px 8px rgba(29, 29, 31, 0.1);
}

.stat-label {
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-label {
    color: #1d1d1f;
    font-weight: 600;
}

/* 内容区域 */
.content-area {
    /* 优化的玻璃感 - 降低模糊值提升性能 */
    background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.4));
    backdrop-filter: blur(6px) saturate(110%);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    /* 性能优化 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout style paint;
    /* 防止背景特效影响 */
    background-attachment: scroll;
    /* 使用 content-visibility 优化滚动 */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.content-area:hover {
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}


/* 融合式筛选系统 */
.unified-filter-system {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(250, 250, 255, 0.80) 100%);
    backdrop-filter: blur(6px) saturate(110%);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    border-radius: 16px;
    margin: 16px 0 20px;
    border: 1px solid rgba(251, 146, 60, 0.2);
    box-shadow: 
        0 4px 16px rgba(251, 146, 60, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
    opacity: 0.92;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
    /* 性能优化 */
    contain: layout style paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.unified-filter-system:hover {
    box-shadow: 
        0 12px 40px rgba(251, 146, 60, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}


/* 融合的内容头部 */
.content-header-unified {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 245, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.98) 100%);
    backdrop-filter: blur(6px) saturate(110%);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    border-top: 2px solid rgba(168, 85, 247, 0.2);
    border-radius: 0 0 16px 16px;
    flex-wrap: nowrap;
    gap: 24px;
    box-shadow: 
        0 2px 8px rgba(168, 85, 247, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px; /* 增加与 content-area 之间的间距 */
    /* 性能优化 */
    contain: layout style paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.content-header-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(168, 85, 247, 0.1), 
        transparent);
    transition: left 0.6s ease;
}

.content-header-unified:hover::before {
    left: 100%;
}

.category-title {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    padding: 4px 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    display: inline-block;
    border-radius: 8px;
    
    /* 精美的渐变文字效果 - 蓝色/青色系 */
    background: linear-gradient(135deg, 
        #0ea5e9 0%,
        #06b6d4 20%,
        #14b8a6 40%,
        #10b981 60%,
        #22d3ee 80%,
        #06b6d4 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* 增强文字阴影和光晕效果 */
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3)) 
            drop-shadow(0 1px 2px rgba(6, 182, 212, 0.2));
    
    /* 渐变动画 */
    animation: categoryTitleGradient 5s ease-in-out infinite;
}

@keyframes categoryTitleGradient {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3)) 
                drop-shadow(0 1px 2px rgba(6, 182, 212, 0.2));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 3px 6px rgba(14, 165, 233, 0.4)) 
                drop-shadow(0 2px 4px rgba(6, 182, 212, 0.3));
    }
}

/* 使用伪元素添加背景装饰 */
.category-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 10px;
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.08) 0%,
        rgba(6, 182, 212, 0.06) 50%,
        rgba(20, 184, 166, 0.08) 100%);
    border: 1.5px solid rgba(14, 165, 233, 0.2);
    box-shadow: 
        0 2px 8px rgba(14, 165, 233, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(14, 165, 233, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(14, 165, 233, 0.6) 20%,
        rgba(6, 182, 212, 0.8) 50%,
        rgba(14, 165, 233, 0.6) 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: categoryTitleUnderline 3s ease-in-out infinite;
    border-radius: 2px;
    opacity: 0.8;
}

@keyframes categoryTitleUnderline {
    0%, 100% {
        background-position: 0% 50%;
        width: 60%;
        opacity: 0.8;
    }
    50% {
        background-position: 100% 50%;
        width: 80%;
        opacity: 1;
    }
}

.category-title:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.4)) 
            drop-shadow(0 2px 4px rgba(6, 182, 212, 0.3))
            drop-shadow(0 0 12px rgba(14, 165, 233, 0.3));
    animation-duration: 2s;
}

.category-title:hover::before {
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.12) 0%,
        rgba(6, 182, 212, 0.1) 50%,
        rgba(20, 184, 166, 0.12) 100%);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 
        0 4px 12px rgba(14, 165, 233, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(14, 165, 233, 0.15),
        0 0 0 1px rgba(14, 165, 233, 0.2);
    opacity: 1;
}

.category-title:hover::after {
    width: 90%;
    height: 3.5px;
    opacity: 1;
    animation-duration: 1.5s;
}

.header-controls {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-left: auto;
    /* 确保始终在一行显示 */
    white-space: nowrap;
    min-width: fit-content;
}

.sort-select,
.search-input {
    padding: 8px 12px;
    font-size: 13px;
    border: 2px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(250, 245, 255, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 13px;
    color: #1d1d1f;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 
        0 2px 8px rgba(168, 85, 247, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.sort-select {
    min-width: 130px;
    cursor: pointer;
}

.search-input {
    min-width: 220px;
    flex: 1;
}

.sort-select:hover,
.search-input:hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 
        0 4px 12px rgba(168, 85, 247, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.sort-select:focus,
.search-input:focus {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 
        0 0 0 3px rgba(168, 85, 247, 0.15),
        0 4px 16px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* unified-filter-system 内部的筛选按钮和芯片列表 */
.unified-filter-system .filter-segments {
    display: flex;
    gap: 12px;
    padding: 20px 32px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%,
        rgba(236, 254, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border: none;
    border-radius: 20px;
    overflow-x: visible;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    box-shadow: 
        0 8px 32px rgba(14, 165, 233, 0.1),
        0 4px 16px rgba(20, 184, 166, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(14, 165, 233, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 确保内容居中 */
    text-align: center;
    /* 强制居中 - 使用多种方式确保兼容性 */
    place-content: center !important;
    place-items: center !important;
    /* 确保左右 padding 相等，视觉上居中 */
    padding-left: 32px !important;
    padding-right: 32px !important;
    /* 确保按钮组在容器中水平居中 */
    box-sizing: border-box;
}

.unified-filter-system .filter-segments::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.03) 0%,
        rgba(20, 184, 166, 0.02) 50%,
        rgba(6, 182, 212, 0.03) 100%);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.unified-filter-system .filter-segments:hover::before {
    opacity: 1;
}

.unified-filter-system .filter-segments::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.unified-filter-system .filter-segments:hover::after {
    width: 200%;
    height: 200%;
}

.unified-filter-system .filter-segments::-webkit-scrollbar {
    display: none;
}

/* 确保按钮组居中 - 移除第一个和最后一个按钮的特殊 margin，使用 flexbox 居中 */
.unified-filter-system .filter-segments > .segment-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.unified-filter-system .segment-btn {
    flex-shrink: 0;
    padding: 14px 28px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%,
        rgba(236, 254, 255, 0.95) 100%);
    border: 1.5px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #0c4a6e;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    box-shadow: 
        0 4px 12px rgba(14, 165, 233, 0.12),
        0 2px 6px rgba(20, 184, 166, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 0.3px;
    /* 确保按钮本身不影响居中 */
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.unified-filter-system .segment-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: 0;
}

.unified-filter-system .segment-btn:hover::before {
    width: 300%;
    height: 300%;
}

.unified-filter-system .segment-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.unified-filter-system .segment-btn:hover::after {
    left: 100%;
}

.unified-filter-system .segment-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(207, 250, 254, 0.98) 100%);
    border-color: rgba(14, 165, 233, 0.5);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 8px 24px rgba(14, 165, 233, 0.2),
        0 4px 12px rgba(20, 184, 166, 0.15),
        0 0 32px rgba(6, 182, 212, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    color: #075985;
}

.unified-filter-system .segment-btn.active {
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.15) 0%, 
        rgba(20, 184, 166, 0.12) 50%,
        rgba(6, 182, 212, 0.15) 100%);
    border-color: rgba(14, 165, 233, 0.5);
    color: #075985;
    box-shadow: 
        0 8px 28px rgba(14, 165, 233, 0.25),
        0 4px 16px rgba(20, 184, 166, 0.2),
        0 0 40px rgba(6, 182, 212, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(14, 165, 233, 0.2);
    transform: translateY(-3px) scale(1.04);
    font-weight: 700;
}

.unified-filter-system .segment-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(14, 165, 233, 0.9) 0%, 
        rgba(20, 184, 166, 1) 50%,
        rgba(14, 165, 233, 0.9) 100%);
    background-size: 200% 100%;
    animation: shimmerActive 2.5s ease-in-out infinite;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}

@keyframes shimmerActive {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.unified-filter-system .chip-lists {
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.3);
    min-height: 60px;
}

.unified-filter-system .chip-list {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.unified-filter-system .chip-list.active {
    display: flex;
}

.unified-filter-system .chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.unified-filter-system .chip:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(251, 146, 60, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.2);
}

.unified-filter-system .chip.active {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.2) 0%, 
        rgba(249, 115, 22, 0.15) 100%);
    border-color: rgba(251, 146, 60, 0.5);
    color: #1d1d1f;
    box-shadow: 
        0 2px 8px rgba(251, 146, 60, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 保留原有 content-header 样式以兼容 */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 12px 18px;
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.06) 0%, 
        rgba(249, 115, 22, 0.04) 100%);
    backdrop-filter: blur(12px) saturate(110%);
    border-radius: 12px;
    border: 1px solid rgba(251, 146, 60, 0.15);
    box-shadow: 
        0 2px 8px rgba(251, 146, 60, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-header:hover {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.08) 0%, 
        rgba(249, 115, 22, 0.06) 100%);
    box-shadow: 
        0 4px 12px rgba(251, 146, 60, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.content-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    color: #1d1d1f;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 700;
    margin-bottom: 0;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.9) 0%, 
        rgba(249, 115, 22, 0.95) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.content-header h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(251, 146, 60, 0.6) 0%, 
        rgba(249, 115, 22, 0.8) 50%,
        rgba(251, 146, 60, 0.6) 100%);
    background-size: 200% 100%;
    animation: shimmerUnderline 3s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes shimmerUnderline {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.content-header h2:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.filter-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

#sortSelect, #searchInput {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 248, 248, 0.8));
    color: #1d1d1f;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
}

#sortSelect::before, #searchInput::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

#sortSelect:hover::before, #searchInput:hover::before {
    left: 100%;
}

#sortSelect option {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.95));
    color: #1d1d1f;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin: 2px 0;
    transition: all 0.3s ease;
}

#sortSelect option:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.03));
    color: #1d1d1f;
    transform: translateX(4px);
}

#sortSelect option:checked {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.06));
    color: #1d1d1f;
    font-weight: 600;
}

#searchInput {
    min-width: 220px;
}

#sortSelect {
    min-width: 220px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 48px;
}

#sortSelect:hover, #searchInput:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#sortSelect:focus, #searchInput:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.1);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

#searchInput::placeholder {
    color: #86868b;
    font-style: italic;
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 8px;
}

.pagination button {
    padding: 12px 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.9));
    color: #1d1d1f;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 4px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.pagination button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.pagination button:hover::before {
    left: 100%;
}

.pagination button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 248, 248, 0.95));
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.pagination button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 
        0 4px 16px rgba(102, 126, 234, 0.3),
        0 2px 8px rgba(102, 126, 234, 0.2);
    transform: translateY(-1px);
}

.pagination button:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.pagination-info {
    font-size: 14px;
    color: #666;
    margin: 0 20px;
}

/* 帖子网格 */
.posts-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 28px !important;
    padding: 12px 0 !important;
    position: relative !important;
    z-index: 1 !important;
    /* 性能优化 - 启用硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: contents;
    /* 确保立即显示 - 强制可见 */
    opacity: 1 !important;
    visibility: visible !important;
    /* 优化渲染性能 */
    contain: layout style paint;
    /* 平滑加载动画 */
    animation: gridFadeIn 0.4s ease-out;
}

@keyframes gridFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* 帖子卡片样式 - 性能优化，丝滑加载 */
.post-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 255, 0.9));
    backdrop-filter: blur(4px) saturate(105%);
    -webkit-backdrop-filter: blur(4px) saturate(105%);
    border-radius: 16px;
    color: #1d1d1f;
    overflow: hidden;
    cursor: pointer;
    /* 优化过渡效果 - 使用GPU加速 */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    border: 1px solid rgba(142, 197, 252, 0.25);
    box-shadow: 
        0 4px 16px rgba(142, 197, 252, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex !important;
    flex-direction: column;
    /* 性能优化 - 启用硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout style paint;
    /* 防止背景特效影响 */
    isolation: isolate;
    z-index: 1;
    /* 确保卡片立即可见 */
    opacity: 1 !important;
    visibility: visible !important;
    /* 平滑淡入动画 */
    animation: cardFadeIn 0.5s ease-out backwards;
}

/* 卡片淡入动画 - 错开时间 */
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.15s; }
.post-card:nth-child(4) { animation-delay: 0.2s; }
.post-card:nth-child(5) { animation-delay: 0.25s; }
.post-card:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0) scale(1);
    }
}

.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #ea4335;
    opacity: 1;
    transition: none;
    z-index: 1;
    border-radius: 16px 16px 0 0;
}

.post-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    height: 17px;
    background: transparent;
    border-radius: 0 0 16px 16px;
    z-index: 3;
    pointer-events: none;
    border: 1px solid transparent;
    border-top: none;
    box-shadow: 0 0 0 1px transparent;
}

.post-card:hover::before {
    opacity: 1;
    background: #ea4335;
}

.post-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 8px 24px rgba(135, 206, 250, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(135, 206, 250, 0.35);
    /* 优化hover性能 */
    will-change: transform;
}

.post-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(16, 185, 129, 0.10));
    cursor: pointer;
    /* 优化过渡效果 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 启用硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 图片加载占位 */
    background-size: cover;
    background-position: center;
}

/* iOS 平台卡片图片高度增加 */
.post-card.platform-ios .post-image {
    height: 280px; /* 从 260px 增加到 280px */
}

/* iOS 平台卡片内容区域增加内边距 */
.post-card.platform-ios .post-content {
    padding: 20px 20px 18px; /* 从 18px 18px 16px 增加到 20px 20px 18px */
    min-height: 150px; /* 从 130px 增加到 150px */
}

.post-image:hover {
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 优化hover性能 */
    will-change: transform;
}

.post-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-card:hover .post-image::after {
    opacity: 0.1;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 图片性能优化 - 启用硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout style paint;
    /* 优化图片渲染 - 提升清晰度 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 平滑加载 */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 初始状态 */
    opacity: 0;
}

/* 图片加载完成后显示 */
.post-image img.loaded {
    opacity: 1;
    animation: imageFadeIn 0.4s ease-out;
}

/* 纯文本模式占位符样式 */
.post-image img.text-only-placeholder {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.95) 50%, rgba(71, 85, 105, 0.95) 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite, imageFadeIn 0.4s ease-out;
    border: 2px solid rgba(96, 165, 250, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(96, 165, 250, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
}

.post-image img.text-only-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.12) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.post-image img.text-only-placeholder:hover {
    transform: scale(1.02) translateZ(0);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
}

@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: scale(1.05) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}


/* 图片覆盖层和序列号 - 减少遮挡，提升清晰度 */
.post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 30%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px;
    pointer-events: none;
    z-index: 1;
}

.post-sequence {
    background: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
    font-family: 'Inter', 'SF Mono', 'Monaco', monospace;
    letter-spacing: 0.2px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 1.2;
    opacity: 0.9;
}

.post-content {
    padding: 16px 18px 14px; /* 从 14px 16px 12px 增加到 16px 18px 14px */
    min-height: 120px; /* 从 100px 增加到 120px */
    /* 全新色系 - 暖橙色系 */
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.1) 0%, 
        rgba(249, 115, 22, 0.08) 50%,
        rgba(234, 88, 12, 0.06) 100%);
    backdrop-filter: blur(4px) saturate(105%);
    -webkit-backdrop-filter: blur(4px) saturate(105%);
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    border: none;
    /* 性能优化 */
    contain: layout style paint;
    will-change: auto;
    /* 性能优化 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 去掉圆边，使用直线边框 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* 底部平台色条（美化 - 暖橙色系） */
.post-content::after {
    content: '';
    position: absolute;
    left: 0; 
    right: 0; 
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(251, 146, 60, 0.4) 0%, 
        rgba(249, 115, 22, 0.5) 25%,
        rgba(234, 88, 12, 0.45) 50%,
        rgba(249, 115, 22, 0.5) 75%,
        rgba(251, 146, 60, 0.4) 100%);
    background-size: 300% 100%;
    animation: shimmerLineCool 4s ease-in-out infinite;
    box-shadow: 0 -2px 6px rgba(251, 146, 60, 0.3), 0 -1px 2px rgba(249, 115, 22, 0.2);
}

@keyframes shimmerLineCool {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 1;
    }
    25% {
        background-position: 50% 50%;
        opacity: 0.9;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    75% {
        background-position: 50% 50%;
        opacity: 0.95;
    }
}
/* 统一底部分隔条样式 - 暖橙色系变体 */
.post-card.platform-ios .post-content::after {
    background: linear-gradient(90deg, 
        rgba(251, 146, 60, 0.45) 0%, 
        rgba(249, 115, 22, 0.55) 25%,
        rgba(234, 88, 12, 0.5) 50%,
        rgba(249, 115, 22, 0.55) 75%,
        rgba(251, 146, 60, 0.45) 100%);
    background-size: 300% 100%;
    box-shadow: 0 -2px 8px rgba(251, 146, 60, 0.35), 0 -1px 3px rgba(249, 115, 22, 0.25);
}

.post-card.platform-android .post-content::after {
    background: linear-gradient(90deg, 
        rgba(245, 158, 11, 0.45) 0%, 
        rgba(217, 119, 6, 0.55) 25%,
        rgba(194, 65, 12, 0.5) 50%,
        rgba(217, 119, 6, 0.55) 75%,
        rgba(245, 158, 11, 0.45) 100%);
    background-size: 300% 100%;
    box-shadow: 0 -2px 8px rgba(245, 158, 11, 0.35), 0 -1px 3px rgba(217, 119, 6, 0.25);
}

/* 平台区分的卡片内容背景 - 暖橙色系变体 */
.post-card.platform-ios .post-content {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.1) 0%, 
        rgba(249, 115, 22, 0.08) 50%,
        rgba(234, 88, 12, 0.06) 100%);
    padding: 16px 16px 14px !important;
    min-height: 120px !important;
}
.post-card.platform-android .post-content {
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.1) 0%, 
        rgba(217, 119, 6, 0.08) 50%,
        rgba(194, 65, 12, 0.06) 100%);
}

.post-content:hover {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.12) 0%, 
        rgba(249, 115, 22, 0.1) 50%,
        rgba(234, 88, 12, 0.08) 100%);
    backdrop-filter: blur(6px) saturate(108%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px) translateZ(0);
    /* 优化hover性能 */
    will-change: transform;
}

.account-info-section {
    text-align: center;
    position: relative;
    padding: 8px 0;
}

.account-info-section::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #1d1d1f, #86868b);
    border-radius: 1px;
}

.account-sequence {
    font-size: 10px;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 6px;
    line-height: 1.3;
    text-shadow: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
    position: relative;
}

.account-title {
    font-size: 15px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 12px;
    line-height: 1.4;
    text-shadow: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    position: relative;
}

.account-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.5px;
}

.account-details {
    font-size: 11px;
    color: #86868b;
    line-height: 1.5;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
    padding: 0 8px;
}

/* 账号信息标签 - 重点优化 */
.account-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.account-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.account-tag.verified {
    background: linear-gradient(135deg, #4caf50, #45a049);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.account-tag.personal {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.account-tag.enterprise {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.account-tag.year {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.account-tag.country {
    background: linear-gradient(135deg, #607d8b, #455a64);
    box-shadow: 0 2px 8px rgba(96, 125, 139, 0.3);
}

.account-tag.apps {
    background: linear-gradient(135deg, #ff5722, #e64a19);
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
}

.account-tag-icon {
    font-size: 14px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.post-meta span {
    font-size: 10px;
    color: #666;
    background: #f8f9fa;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* 加载状态 */
.loading {
    text-align: center;
    padding: 60px;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
    z-index: 10;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-posts {
    text-align: center;
    padding: 60px;
    color: #666;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    backdrop-filter: blur(20px);
}

/* 详情模态框 */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(20px);
    animation: modalFadeIn 0.3s ease;
    overflow: hidden;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(25px);
    margin: 2% auto;
    padding: 0;
    border-radius: 20px;
    width: 85%;
    max-width: 1000px;
    max-height: 96vh;
    overflow: hidden;
    box-shadow: 
        0 40px 120px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: modalSlideIn 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 2001;
    transform: translateZ(0);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.close {
    color: white;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
}

.close:hover {
    transform: scale(1.1) rotate(90deg);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.modal-body {
    padding: 20px;
    max-height: 75vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
}

.modal-image-container {
    text-align: center;
    margin-bottom: 16px;
}

.modal-image {
    width: 60%;
    max-height: 250px;
    object-fit: contain;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(3px);
    vertical-align: middle;
}

.modal-image:hover {
    transform: scale(1.02);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.4);
}

.modal-caption {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.caption-content {
    font-size: 14px;
    line-height: 1.6;
    color: #2c3e50;
    white-space: pre-line;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.loading-text {
    text-align: center;
    color: #666;
    font-style: italic;
}

.modal-caption a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.modal-caption a:hover {
    color: #764ba2;
    border-bottom-color: #764ba2;
    text-shadow: 0 1px 2px rgba(102, 126, 234, 0.2);
}

/* 版权信息 */
.footer {
    position: static;
    text-align: center;
    padding: 15px 20px;
}

.copyright {
    font-size: 12px;
    color: #000000;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    margin-bottom: 8px;
}

.copyright a {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.copyright a:hover {
    color: #333333;
}

.copyright-tagline {
    font-size: 14px;
    color: #4285f4;
    font-weight: 500;
    font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif;
    line-height: 1.8;
    margin-top: 12px;
    text-align: center;
    letter-spacing: 0.3px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(52, 168, 83, 0.08));
    border-radius: 12px;
    border: 1px solid rgba(66, 133, 244, 0.15);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1);
    transition: all 0.3s ease;
}

.copyright-tagline:hover {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(52, 168, 83, 0.15));
    border-color: rgba(66, 133, 244, 0.3);
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.2);
    transform: translateY(-2px);
}

/* 右侧悬浮客服按钮 - 全新文字设计，跟随页面滚动 */
.floating-service {
    position: fixed !important;
    top: 45% !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 999999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: auto !important;
    padding-right: env(safe-area-inset-right);
    min-width: auto;
    justify-content: center;
    align-items: flex-end;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    will-change: transform !important;
}

/* 移除浮动动画，使用sticky定位跟随滚动 */

/* 确保悬浮按钮在页面内容少时也能显示 */
@media (max-height: 600px) {
    .floating-service {
        top: 45% !important;
        right: 20px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }
}

.service-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 参考 new.googcp.com 的简洁风格 - 无背景容器 */
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}


.service-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px !important;
    width: auto !important;
    min-width: 120px;
    height: auto !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 25px !important;
    text-decoration: none;
    color: #1d1d1f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    letter-spacing: 0;
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.15),
            0 4px 12px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 12px 32px rgba(0, 0, 0, 0.2),
            0 6px 16px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    }
}


.service-btn:hover {
    transform: translateX(-4px) scale(1.02);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
    border-color: rgba(255, 255, 255, 1);
}

.service-btn:hover .service-text {
    opacity: 1;
}

.service-btn:active {
    transform: scale(0.9);
}

.service-icon {
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.service-btn:hover .service-icon {
    transform: scale(1.1);
}

.service-text {
    display: block !important;
    font-size: 11px;
    font-weight: 600;
    color: #1d1d1f;
    margin-left: 8px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* 联系客服按钮特殊样式 - 绿色系圆形 */
.contact-btn {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.95) 0%, 
        rgba(22, 163, 74, 0.95) 50%,
        rgba(16, 185, 129, 0.95) 100%) !important;
    box-shadow: 
        0 8px 24px rgba(34, 197, 94, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.6) !important;
}

.contact-btn:hover {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 1) 0%, 
        rgba(22, 163, 74, 1) 50%,
        rgba(16, 185, 129, 1) 100%) !important;
    box-shadow: 
        0 16px 40px rgba(34, 197, 94, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.15) translateY(-4px) !important;
    border-color: rgba(34, 197, 94, 0.9) !important;
    filter: brightness(1.15) !important;
}

.contact-btn::after {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.6),
        rgba(16, 185, 129, 0.6),
        rgba(34, 197, 94, 0.6)
    ) !important;
}

/* 频道按钮特殊样式 - 蓝色系圆形 */
/* 频道按钮特殊样式 - 参考 new.googcp.com 的简洁风格 */
.channel-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.95)) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.channel-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(99, 102, 241, 1)) !important;
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1.1) !important;
}

/* 响应式设计 - 融合筛选系统 */
@media (max-width: 768px) {
    .unified-filter-system {
        margin: 12px 0 16px;
        border-radius: 12px;
    }
    
    
    .unified-filter-system .filter-segments {
        padding: 16px 20px;
        gap: 10px;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        border-radius: 16px;
        overflow-x: visible;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        text-align: center;
        place-content: center !important;
        place-items: center !important;
    }
    
    .unified-filter-system .segment-btn {
        padding: 10px 18px;
        font-size: 12px;
        border-radius: 14px;
        flex-shrink: 0;
    }
    
    .unified-filter-system .chip-lists {
        padding: 10px 12px;
    }
    
    .unified-filter-system .chip {
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 14px;
    }
    
    .content-header-unified {
        flex-direction: row;
        gap: 16px;
        padding: 14px 16px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .category-title {
        font-size: 14px;
        text-align: left;
        flex-shrink: 0;
        padding: 4px 10px;
    }
    
    /* 确保 third-preview 样式在平板端也生效 */
    .preview-line.third-preview {
        padding: 13px 16px !important;
        min-height: 48px !important;
    }
    
    .header-controls {
        flex-direction: row;
        gap: 10px;
        width: auto;
        margin-left: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .sort-select,
    .search-input {
        width: auto;
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .search-input {
        min-width: 180px;
    }
    
    .floating-service {
        top: 45% !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .unified-filter-system {
        margin: 8px 0 12px;
        border-radius: 10px;
    }
    
    
    .unified-filter-system .filter-segments {
        padding: 12px 16px;
        gap: 8px;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        border-radius: 14px;
        overflow-x: visible;
        overflow-y: visible;
        width: 100%;
        text-align: center;
        place-content: center !important;
        place-items: center !important;
    }
    
    .unified-filter-system .segment-btn {
        padding: 8px 14px;
        font-size: 11px;
        border-radius: 12px;
    }
    
    .unified-filter-system .chip-lists {
        padding: 8px 10px;
    }
    
    .unified-filter-system .chip {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 12px;
    }
    
    .content-header-unified {
        padding: 12px 10px;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .category-title {
        font-size: 13px;
        padding: 4px 8px;
    }
    
    .header-controls {
        gap: 8px;
        margin-left: auto;
    }
    
    .sort-select,
    .search-input {
        padding: 7px 9px;
        font-size: 11px;
        min-width: auto;
    }
    
    .sort-select {
        min-width: 100px;
    }
    
    .search-input {
        min-width: 140px;
        flex: 1;
    }
    
    /* 确保 third-preview 样式在移动端也生效 */
    .preview-line.third-preview {
        padding: 12px 15px !important;
        min-height: 46px !important;
        font-size: 10px !important;
    }
    
    .service-buttons {
        flex-direction: row !important;
        padding: 8px 12px !important;
        border-radius: 40px !important;
        gap: 8px !important;
    }
    
    .service-btn {
        min-width: 100px !important;
        padding: 8px 12px !important;
        height: auto !important;
    }
    
    .service-icon {
        font-size: 16px !important;
    }
    
    .service-text {
        font-size: 10px !important;
    }
    
    .modal-content {
        width: 95%;
        margin: 5% auto;
        max-height: 90vh;
    }
    
    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-title {
        font-size: 16px;
    }
    
    .modal-body {
        padding: 20px;
        max-height: 65vh;
    }
    
    .modal-image {
        width: 100%;
        max-height: 250px;
    }
    
    .modal-caption {
        font-size: 14px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        margin: 2% auto;
        max-height: 96vh;
    }
    
    .modal-header {
        padding: 12px 16px;
    }
    
    .modal-title {
        font-size: 14px;
    }
    
    .modal-body {
        padding: 16px;
        max-height: 70vh;
    }
    
    .modal-image {
        max-height: 200px;
    }
    
    .modal-caption {
        font-size: 13px;
        padding: 12px;
    }
    
    /* 小屏幕筛选按钮适配 */
    .random-filter-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .random-filter-buttons .filter-btn.random-btn {
        grid-column: 1 / 2;
    }
    
    .random-filter-buttons .filter-btn.clear-btn {
        grid-column: 2 / 3;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 15px;
    }
    
    .navbar {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .nav-brand h1 {
        font-size: 20px;
    }
    
    .nav-tabs {
        gap: 8px;
    }
    
    .nav-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* 移动端筛选按钮适配 */
    .random-filter-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        max-width: 100%;
    }
    
    .random-filter-buttons .filter-btn.random-btn {
        grid-column: 2 / 3;
    }
    
    .random-filter-buttons .filter-btn.clear-btn {
        grid-column: 3 / 4;
    }
    
    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-item {
        padding: 20px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .content-area {
        padding: 20px;
    }
    
    .content-header {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 10px;
    }
    
    .content-header h2 {
        font-size: 13px;
        flex-shrink: 1;
        min-width: 0;
    }
    
    .filter-controls {
        flex-wrap: wrap;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    
    #searchInput {
        min-width: 120px;
        flex: 1;
    }
    
    #sortSelect {
        min-width: 100px;
        flex-shrink: 0;
    }
    
    .posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .post-image {
        height: 220px; /* 从 200px 增加到 220px */
    }
    
    .post-content {
        padding: 18px;
        min-height: 130px; /* 从 110px 增加到 130px */
    }
    
    .account-info {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .posts-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stats-panel {
        grid-template-columns: 1fr;
    }
    
    .account-info {
        grid-template-columns: 1fr;
    }
    
    .nav-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    
    .nav-tab {
        white-space: nowrap;
    }
}

/* 随机筛选按钮 */
.random-filter-btn, .select-filter-btn {
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.random-filter-btn::before, .select-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.random-filter-btn:hover::before, .select-filter-btn:hover::before {
    left: 100%;
}

.random-filter-btn:hover, .select-filter-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.select-filter-btn {
    margin-left: 8px;
}

/* 筛选条件下拉框容器 */
.filter-dropdown-container {
    position: relative;
    display: inline-block;
}

/* 筛选条件下拉框 */
.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px);
    border-radius: 14px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.3);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 筛选条件选项 */
.filter-option {
    padding: 14px 20px;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 15px;
    font-weight: 400;
    position: relative;
}

.filter-option:last-child {
    border-bottom: none;
}

.filter-option:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 500;
    transform: translateX(5px);
}

.filter-option:first-child {
    border-radius: 14px 14px 0 0;
}

.filter-option:last-child {
    border-radius: 0 0 14px 14px;
}

/* 下拉框滚动条样式 */
.filter-dropdown::-webkit-scrollbar {
    width: 6px;
}

.filter-dropdown::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.filter-dropdown::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 3px;
}

.filter-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}

/* 微妙的动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 为导航栏添加动画 */
.navbar {
    animation: fadeInUp 0.6s ease-out;
}

.nav-brand h1 {
    background: linear-gradient(90deg, #1d1d1f, #86868b, #1d1d1f);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

/* 为按钮添加微妙的脉冲效果 */
.nav-tab.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* 为统计面板添加交错动画 */
.stat-item:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.1s both; }
.stat-item:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.2s both; }
.stat-item:nth-child(3) { animation: fadeInUp 0.6s ease-out 0.3s both; }

/* 为内容区域添加动画 */
.content-area {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* 为筛选控件添加悬停时的微妙缩放 */
.filter-controls > * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-controls > *:hover {
    transform: scale(1.02);
}

/* 简洁按钮式筛选 */
.simple-filter-buttons {
    position: relative;
    width: 100%;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    margin: 16px 0;
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* 筛选标题栏 */
.filter-header-bar {
    position: relative;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.title-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
}

.title-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.title-section h3 {
    color: #1e293b;
    font-size: 26px;
    font-weight: 800;
    font-family: 'Poppins', 'Roboto', 'Arial', sans-serif;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
}

@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
        transform: scale(1.02);
    }
}

.filter-count {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.count-number {
    font-size: 16px;
    font-weight: 700;
}

.control-section {
    display: flex;
    gap: 12px;
}

.action-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.random-btn {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.random-btn:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #1d4ed8;
}

.clear-btn {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.clear-btn:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
}

.center-display {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, 
        rgba(59, 130, 246, 0.1) 0%,
        rgba(37, 99, 235, 0.05) 70%,
        transparent 100%);
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 4px 16px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.display-ring {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    animation: displayRotate 8s linear infinite;
}

.center-icon {
    font-size: 24px;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.center-text {
    font-size: 10px;
    font-weight: 600;
    color: #1e40af;
    text-align: center;
    line-height: 1.2;
}

/* 筛选按钮网格 */
.filter-buttons-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* 筛选按钮 */
.filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-height: 50px;
    text-align: center;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
    color: #1d4ed8;
    animation: buttonPulse 0.6s ease-in-out;
}

@keyframes buttonPulse {
    0% { transform: translateY(-2px) scale(1.05); }
    50% { transform: translateY(-2px) scale(1.08); }
    100% { transform: translateY(-2px) scale(1.05); }
}

/* 按钮表情符号 */
.btn-emoji {
    font-size: 16px;
    margin-bottom: 4px;
    display: block;
}

/* 按钮文字 */
.filter-btn .btn-text {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.filter-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
    color: #1d4ed8;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
}

.card-icon {
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin-right: 2px;
}

.card-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    color: #1d4ed8;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15);
}

.card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.card-content h4 {
    color: #2c5aa0;
    font-size: 11px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    max-height: 2.4em;
}

.card-content p {
    color: #4a90e2;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}

.card-footer {
    padding: 6px 16px 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.4);
}

.card-stats {
    display: flex;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-value {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

.stat-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.wheel-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.ring-1 {
    width: 200px;
    height: 200px;
    animation: ringRotate 20s linear infinite;
}

.ring-2 {
    width: 280px;
    height: 280px;
    animation: ringRotate 30s linear infinite reverse;
}

/* 轮盘按钮 */
.wheel-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform-origin: center;
}

.wheel-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.btn-icon {
    font-size: 12px;
    margin-bottom: 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.btn-text {
    font-size: 9px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 设置按钮位置 */
.ring-1 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-100px) rotate(0deg); }
.ring-1 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateY(-100px) rotate(-60deg); }
.ring-1 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateY(-100px) rotate(-120deg); }
.ring-1 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateY(-100px) rotate(-180deg); }
.ring-1 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateY(-100px) rotate(-240deg); }
.ring-1 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateY(-100px) rotate(-300deg); }

.ring-2 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(30deg) translateY(-140px) rotate(-30deg); }
.ring-2 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg) translateY(-140px) rotate(-90deg); }
.ring-2 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(150deg) translateY(-140px) rotate(-150deg); }
.ring-2 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(210deg) translateY(-140px) rotate(-210deg); }
.ring-2 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(270deg) translateY(-140px) rotate(-270deg); }
.ring-2 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(330deg) translateY(-140px) rotate(-330deg); }

.header-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.filter-header h3 {
    color: #334155;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-stats {
    display: flex;
    align-items: center;
}

.stat-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 筛选按钮网格 */
.filter-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.filter-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 筛选按钮 */
.filter-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-width: 80px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-icon {
    font-size: 20px;
    margin-bottom: 6px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.btn-text {
    font-size: 11px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 卡片颜色主题 */
.hot-card {
    border-color: rgba(239, 68, 68, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 242, 242, 0.98) 100%);
}

.hot-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 242, 242, 1) 100%);
}

.hot-card .card-badge {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.premium-card {
    border-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(239, 246, 255, 0.98) 100%);
}

.premium-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 1) 100%);
}

.premium-card .card-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.verified-card {
    border-color: rgba(16, 185, 129, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.98) 100%);
}

.verified-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 1) 100%);
}

.verified-card .card-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.personal-card {
    border-color: rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.98) 100%);
}

.personal-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 255, 1) 100%);
}

.personal-card .card-badge {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.enterprise-card {
    border-color: rgba(245, 158, 11, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 235, 0.98) 100%);
}

.enterprise-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 251, 235, 1) 100%);
}

.enterprise-card .card-badge {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.gaming-card {
    border-color: rgba(236, 72, 153, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 242, 248, 0.98) 100%);
}

.gaming-card:hover {
    border-color: rgba(236, 72, 153, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 242, 248, 1) 100%);
}

.gaming-card .card-badge {
    background: rgba(236, 72, 153, 0.1);
    color: #be185d;
}

.region-card {
    border-color: rgba(34, 197, 94, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.98) 100%);
}

.region-card:hover {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 1) 100%);
}

.region-card .card-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.source-card {
    border-color: rgba(168, 85, 247, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.98) 100%);
}

.source-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 255, 1) 100%);
}

.source-card .card-badge {
    background: rgba(168, 85, 247, 0.1);
    color: #7c2d12;
}

.multi-card {
    border-color: rgba(6, 182, 212, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 254, 255, 0.98) 100%);
}

.multi-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 254, 255, 1) 100%);
}

.multi-card .card-badge {
    background: rgba(6, 182, 212, 0.1);
    color: #0e7490;
}

.tools-card {
    border-color: rgba(251, 146, 60, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 247, 237, 0.98) 100%);
}

.tools-card:hover {
    border-color: rgba(251, 146, 60, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 237, 1) 100%);
}

.tools-card .card-badge {
    background: rgba(251, 146, 60, 0.1);
    color: #c2410c;
}

.all-card {
    border-color: rgba(107, 114, 128, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.all-card:hover {
    border-color: rgba(107, 114, 128, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 1) 100%);
}

.all-card .card-badge {
    background: rgba(107, 114, 128, 0.1);
    color: #374151;
}

.wheel-btn.premium {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.wheel-btn.premium:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #1d4ed8;
}

.wheel-btn.verified {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.wheel-btn.verified:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    color: #047857;
}

.wheel-btn.personal {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
}

.wheel-btn.personal:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
    color: #7c3aed;
}

.wheel-btn.enterprise {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.wheel-btn.enterprise:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
    color: #b45309;
}

.wheel-btn.gaming {
    border-color: rgba(236, 72, 153, 0.3);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.05) 100%);
}

.wheel-btn.gaming:hover {
    border-color: rgba(236, 72, 153, 0.5);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.1) 100%);
    color: #be185d;
}

.wheel-btn.region {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%);
}

.wheel-btn.region:hover {
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
    color: #15803d;
}

.wheel-btn.source {
    border-color: rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%);
}

.wheel-btn.source:hover {
    border-color: rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.1) 100%);
    color: #7c2d12;
}

.wheel-btn.multi {
    border-color: rgba(6, 182, 212, 0.3);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%);
}

.wheel-btn.multi:hover {
    border-color: rgba(6, 182, 212, 0.5);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%);
    color: #0e7490;
}

.wheel-btn.tools {
    border-color: rgba(251, 146, 60, 0.3);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
}

.wheel-btn.tools:hover {
    border-color: rgba(251, 146, 60, 0.5);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
    color: #c2410c;
}

.wheel-btn.all {
    border-color: rgba(107, 114, 128, 0.3);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(75, 85, 99, 0.05) 100%);
}

.wheel-btn.all:hover {
    border-color: rgba(107, 114, 128, 0.5);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.1) 100%);
    color: #374151;
}

.neural-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(138, 43, 226, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(75, 0, 130, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: neuralGrid 15s linear infinite;
    z-index: 1;
}

.neural-connections {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 40%, rgba(138, 43, 226, 0.05) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(75, 0, 130, 0.05) 50%, transparent 60%);
    animation: neuralConnections 8s ease-in-out infinite;
    z-index: 2;
}

.neural-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.neural-particles::before,
.neural-particles::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(138, 43, 226, 0.6);
    border-radius: 50%;
    animation: neuralParticles 12s linear infinite;
}

.neural-particles::before {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.neural-particles::after {
    top: 70%;
    right: 25%;
    animation-delay: -6s;
}

/* 中央神经网络核心 */
.neural-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    z-index: 10;
}

.core-brain {
    position: relative;
    width: 100%;
    height: 100%;
}

.brain-layers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer {
    position: absolute;
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: 50%;
    animation: brainLayer 6s ease-in-out infinite;
}

.layer-1 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation-duration: 8s;
}

.layer-2 {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    animation-duration: 12s;
    animation-direction: reverse;
}

.layer-3 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    animation-duration: 16s;
}

.brain-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(138, 43, 226, 0.8) 0%,
        rgba(75, 0, 130, 0.6) 70%,
        rgba(25, 25, 112, 0.4) 100%);
    box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.6),
        0 0 40px rgba(75, 0, 130, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: brainPulse 2s ease-in-out infinite;
}

.center-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    animation: centerPulse 1s ease-in-out infinite;
}

.center-text {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #8a2be2;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
    white-space: nowrap;
}

.projector-base {
    position: relative;
    width: 100%;
    height: 100%;
}

.base-ring {
    position: absolute;
    border: 2px solid rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    animation: ringRotate 8s linear infinite;
}

.ring-1 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation-duration: 10s;
}

.ring-2 {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    animation-duration: 15s;
    animation-direction: reverse;
}

.ring-3 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    animation-duration: 20s;
}

.projector-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(0, 255, 255, 0.8) 0%,
        rgba(0, 200, 255, 0.6) 50%,
        rgba(0, 150, 255, 0.4) 100%);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 60px rgba(0, 200, 255, 0.4);
    animation: corePulse 2s ease-in-out infinite;
}

.core-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    animation: lightFlicker 0.5s ease-in-out infinite;
}

.core-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 200px;
    background: linear-gradient(to bottom, 
        rgba(0, 255, 255, 0.8) 0%,
        rgba(0, 255, 255, 0.4) 50%,
        transparent 100%);
    animation: beamScan 3s ease-in-out infinite;
}

/* 神经网络节点 */
.neural-nodes {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.node-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.primary-nodes { gap: 20px; }
.secondary-nodes { gap: 18px; }
.region-nodes { gap: 16px; }
.feature-nodes { gap: 14px; }

/* 神经网络节点 */
.neural-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.node-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(138, 43, 226, 0.2) 0%,
        rgba(75, 0, 130, 0.1) 70%,
        transparent 100%);
    animation: nodeCore 3s ease-in-out infinite;
}

.node-connection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(138, 43, 226, 0.3) 50%, 
        transparent 100%);
    animation: nodeConnection 4s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neural-node:hover .node-connection {
    opacity: 1;
}

.node-icon {
    font-size: 20px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px currentColor);
    z-index: 2;
    position: relative;
}

.node-label {
    font-size: 9px;
    line-height: 1.2;
    z-index: 2;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.node-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(138, 43, 226, 0.4);
    animation: nodePulse 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neural-node:hover .node-pulse {
    opacity: 1;
}

/* 不同类型节点的颜色主题 */
.primary-node {
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.2);
}

.primary-node:hover {
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.4);
    transform: scale(1.1);
}

.secondary-node {
    border-color: rgba(75, 0, 130, 0.5);
    box-shadow: 0 0 15px rgba(75, 0, 130, 0.2);
}

.secondary-node:hover {
    border-color: rgba(75, 0, 130, 0.8);
    box-shadow: 0 0 25px rgba(75, 0, 130, 0.4);
    transform: scale(1.1);
}

.region-node {
    border-color: rgba(25, 25, 112, 0.5);
    box-shadow: 0 0 15px rgba(25, 25, 112, 0.2);
}

.region-node:hover {
    border-color: rgba(25, 25, 112, 0.8);
    box-shadow: 0 0 25px rgba(25, 25, 112, 0.4);
    transform: scale(1.1);
}

.feature-node {
    border-color: rgba(72, 61, 139, 0.5);
    box-shadow: 0 0 15px rgba(72, 61, 139, 0.2);
}

.feature-node:hover {
    border-color: rgba(72, 61, 139, 0.8);
    box-shadow: 0 0 25px rgba(72, 61, 139, 0.4);
    transform: scale(1.1);
}

.panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.6) 50%, 
        transparent 100%);
}

.panel-header h3 {
    color: #00ffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    white-space: nowrap;
}

.filter-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.filter-row.primary { gap: 15px; }
.filter-row.secondary { gap: 12px; }
.filter-row.tertiary { gap: 10px; }
.filter-row.quaternary { gap: 8px; }

/* 全息按钮 */
.holo-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-width: 80px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.btn-holo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(0, 255, 255, 0.1) 50%, 
        transparent 70%);
    animation: holoScan 2s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.holo-btn:hover .btn-holo {
    opacity: 1;
}

.btn-icon {
    font-size: 20px;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 8px currentColor);
    z-index: 2;
    position: relative;
}

.btn-text {
    font-size: 10px;
    line-height: 1.2;
    z-index: 2;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: scanLine 1.5s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.holo-btn:hover .btn-scan {
    opacity: 1;
}

/* 不同类型按钮的颜色主题 */
.primary-btn {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.primary-btn:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.secondary-btn {
    border-color: rgba(0, 255, 100, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 100, 0.2);
}

.secondary-btn:hover {
    border-color: rgba(0, 255, 100, 0.8);
    box-shadow: 0 0 25px rgba(0, 255, 100, 0.4);
    transform: translateY(-2px);
}

.tertiary-btn {
    border-color: rgba(255, 255, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.2);
}

.tertiary-btn:hover {
    border-color: rgba(255, 255, 0, 0.8);
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.4);
    transform: translateY(-2px);
}

.quaternary-btn {
    border-color: rgba(255, 100, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 100, 255, 0.2);
}

.quaternary-btn:hover {
    border-color: rgba(255, 100, 255, 0.8);
    box-shadow: 0 0 25px rgba(255, 100, 255, 0.4);
    transform: translateY(-2px);
}

.orb-core {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.3) 0%,
        rgba(138, 43, 226, 0.4) 20%,
        rgba(75, 0, 130, 0.6) 60%,
        rgba(25, 25, 112, 0.8) 100%);
    box-shadow: 
        0 0 80px rgba(138, 43, 226, 0.6),
        0 0 120px rgba(75, 0, 130, 0.4),
        inset 0 0 50px rgba(255, 255, 255, 0.1);
    animation: orbPulse 4s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.core-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: ringRotate 8s linear infinite;
}

.ring-1 {
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-color: rgba(255, 100, 255, 0.4);
    animation-duration: 10s;
}

.ring-2 {
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    border-color: rgba(100, 255, 255, 0.3);
    animation-duration: 15s;
    animation-direction: reverse;
}

.ring-3 {
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    border-color: rgba(255, 255, 100, 0.2);
    animation-duration: 20s;
}

.orb-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.center-icon {
    font-size: 40px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    animation: iconGlow 3s ease-in-out infinite alternate;
}

.center-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 悬浮筛选标签 */
.floating-tags {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.tag-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    animation: orbitRotate 30s linear infinite;
}

.orbit-1 {
    width: 350px;
    height: 350px;
    margin: -175px 0 0 -175px;
    animation-duration: 25s;
}

.orbit-2 {
    width: 450px;
    height: 450px;
    margin: -225px 0 0 -225px;
    animation-duration: 35s;
    animation-direction: reverse;
}

.filter-tag {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.2) 0%,
        rgba(138, 43, 226, 0.3) 60%,
        rgba(75, 0, 130, 0.5) 100%);
    backdrop-filter: blur(15px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
    animation: tagFloat 6s ease-in-out infinite;
}

.filter-tag:nth-child(1) { transform: rotate(0deg) translate(175px) rotate(0deg); animation-delay: 0s; }
.filter-tag:nth-child(2) { transform: rotate(60deg) translate(175px) rotate(-60deg); animation-delay: -1s; }
.filter-tag:nth-child(3) { transform: rotate(120deg) translate(175px) rotate(-120deg); animation-delay: -2s; }
.filter-tag:nth-child(4) { transform: rotate(180deg) translate(175px) rotate(-180deg); animation-delay: -3s; }
.filter-tag:nth-child(5) { transform: rotate(240deg) translate(175px) rotate(-240deg); animation-delay: -4s; }
.filter-tag:nth-child(6) { transform: rotate(300deg) translate(175px) rotate(-300deg); animation-delay: -5s; }

.orbit-2 .filter-tag:nth-child(1) { transform: rotate(30deg) translate(225px) rotate(-30deg); }
.orbit-2 .filter-tag:nth-child(2) { transform: rotate(90deg) translate(225px) rotate(-90deg); }
.orbit-2 .filter-tag:nth-child(3) { transform: rotate(150deg) translate(225px) rotate(-150deg); }
.orbit-2 .filter-tag:nth-child(4) { transform: rotate(210deg) translate(225px) rotate(-210deg); }
.orbit-2 .filter-tag:nth-child(5) { transform: rotate(270deg) translate(225px) rotate(-270deg); }
.orbit-2 .filter-tag:nth-child(6) { transform: rotate(330deg) translate(225px) rotate(-330deg); }

.filter-tag:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(138, 43, 226, 0.6) 60%,
        rgba(255, 255, 255, 0.3) 100%);
    z-index: 100;
}

.tag-icon {
    font-size: 20px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px currentColor);
}

.tag-label {
    font-size: 9px;
    text-align: center;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 不同类型标签的特色样式 */
.filter-tag.hot { border-color: rgba(255, 100, 100, 0.6); }
.filter-tag.premium { border-color: rgba(255, 215, 0, 0.6); }
.filter-tag.verified { border-color: rgba(100, 255, 100, 0.6); }
.filter-tag.personal { border-color: rgba(100, 150, 255, 0.6); }
.filter-tag.enterprise { border-color: rgba(255, 150, 100, 0.6); }
.filter-tag.gaming { border-color: rgba(255, 100, 255, 0.6); }
.filter-tag.region { border-color: rgba(100, 255, 255, 0.6); }
.filter-tag.special { border-color: rgba(200, 100, 255, 0.6); }
.filter-tag.tools { border-color: rgba(150, 255, 150, 0.6); }
.filter-tag.all { border-color: rgba(255, 255, 255, 0.8); }

/* 底部控制栏 */
.wheel-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.control-group {
    display: flex;
    gap: 12px;
}

.control-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.control-btn.random {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.control-btn.random:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #1d4ed8;
}

.control-btn.clear {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.control-btn.clear:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #059669;
    font-size: 12px;
    font-weight: 500;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.6);
    animation: statusPulse 2s ease-in-out infinite;
}

.control-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.control-btn.random {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.control-btn.random:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #1d4ed8;
}

.control-btn.clear {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.control-btn.clear:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
}

.control-panel {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}

.header-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8a2be2;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a2be2;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
    animation: indicatorPulse 1.5s ease-in-out infinite;
}

.network-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.stat-label {
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #8a2be2;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
}

.control-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.neural-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.btn-neural-core {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(138, 43, 226, 0.1) 50%, 
        transparent 70%);
    animation: neuralCore 2s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neural-btn:hover .btn-neural-core {
    opacity: 1;
}

.neural-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.4);
}

.random-neural {
    border-color: rgba(138, 43, 226, 0.5);
}

.random-neural:hover {
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.4);
}

.clear-neural {
    border-color: rgba(75, 0, 130, 0.5);
}

.clear-neural:hover {
    border-color: rgba(75, 0, 130, 0.8);
    box-shadow: 0 0 25px rgba(75, 0, 130, 0.4);
}

/* 神经网络数据流 */
.neural-data-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.data-stream {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(138, 43, 226, 0.8) 50%, 
        transparent 100%);
    animation: neuralDataFlow 5s linear infinite;
    animation-delay: var(--delay, 0s);
}

.data-stream:nth-child(1) {
    top: 15%;
    left: 0;
    width: 35%;
}

.data-stream:nth-child(2) {
    top: 35%;
    right: 0;
    width: 30%;
    animation-direction: reverse;
}

.data-stream:nth-child(3) {
    top: 55%;
    left: 10%;
    width: 40%;
}

.data-stream:nth-child(4) {
    top: 75%;
    right: 15%;
    width: 25%;
    animation-direction: reverse;
}

.console-display {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.display-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.6) 50%, 
        transparent 100%);
}

.display-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #00ffff;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.status-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.filter-count {
    font-size: 10px;
    opacity: 0.8;
}

.count {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.console-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.console-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.btn-frame {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 6px;
    animation: frameGlow 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.console-btn:hover .btn-frame {
    opacity: 1;
}

.console-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
}

.random-btn {
    border-color: rgba(0, 255, 100, 0.5);
}

.random-btn:hover {
    border-color: rgba(0, 255, 100, 0.8);
    box-shadow: 0 0 25px rgba(0, 255, 100, 0.4);
}

.clear-btn {
    border-color: rgba(255, 100, 100, 0.5);
}

.clear-btn:hover {
    border-color: rgba(255, 100, 100, 0.8);
    box-shadow: 0 0 25px rgba(255, 100, 100, 0.4);
}

/* 全息数据流 */
.holo-data-stream {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.data-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.8) 50%, 
        transparent 100%);
    animation: dataFlow 4s linear infinite;
    animation-delay: var(--delay, 0s);
}

.data-line:nth-child(1) {
    top: 20%;
    left: 0;
    width: 30%;
}

.data-line:nth-child(2) {
    top: 40%;
    right: 0;
    width: 25%;
    animation-direction: reverse;
}

.data-line:nth-child(3) {
    top: 60%;
    left: 10%;
    width: 35%;
}

.data-line:nth-child(4) {
    top: 80%;
    right: 20%;
    width: 20%;
    animation-direction: reverse;
}

/* 能量指示器 */
.energy-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.energy-bar {
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.energy-label {
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.energy-fill {
    height: 100%;
    width: 85%;
    background: linear-gradient(90deg, 
        rgba(138, 43, 226, 0.8) 0%,
        rgba(255, 100, 255, 0.9) 50%,
        rgba(255, 255, 100, 0.8) 100%);
    border-radius: 10px;
    animation: energyPulse 3s ease-in-out infinite;
    position: relative;
}

.energy-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: energyFlow 2s linear infinite;
}

.filter-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.count-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.count-number {
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    animation: countGlow 2s ease-in-out infinite alternate;
}

/* 神经网络动画效果 */
@keyframes neuralGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

@keyframes neuralConnections {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

@keyframes neuralParticles {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-40px) scale(0.8); opacity: 0; }
}

@keyframes brainLayer {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes brainPulse {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(138, 43, 226, 0.6),
            0 0 40px rgba(75, 0, 130, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.8),
            0 0 60px rgba(75, 0, 130, 0.5);
    }
}

@keyframes centerPulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes nodeCore {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes nodeConnection {
    0% { transform: translate(-50%, -50%) scaleX(0); }
    50% { transform: translate(-50%, -50%) scaleX(1); }
    100% { transform: translate(-50%, -50%) scaleX(0); }
}

@keyframes nodePulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes neuralCore {
    0% { transform: translateX(-100%) rotate(0deg); }
    100% { transform: translateX(100%) rotate(360deg); }
}

@keyframes neuralDataFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100vw); }
}

@keyframes orbPulse {
    0%, 100% { 
        box-shadow: 
            0 0 80px rgba(138, 43, 226, 0.6),
            0 0 120px rgba(75, 0, 130, 0.4),
            inset 0 0 50px rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 120px rgba(138, 43, 226, 0.8),
            0 0 160px rgba(75, 0, 130, 0.6),
            inset 0 0 80px rgba(255, 255, 255, 0.2);
    }
}

@keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes iconGlow {
    0% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    100% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); }
}

@keyframes orbitRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes tagFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

@keyframes btnFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes glowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes energyPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes energyFlow {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes countGlow {
    0% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); }
    100% { text-shadow: 0 0 25px rgba(255, 255, 255, 1); }
}

/* 动画效果 */
@keyframes displayRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes statusPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.2);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .creative-filter-wheel {
        height: 180px;
        padding: 16px;
        margin: 15px auto;
    }
    
    .center-display {
        width: 70px;
        height: 70px;
    }
    
    .center-icon {
        font-size: 20px;
        margin-bottom: 3px;
    }
    
    .center-text {
        font-size: 9px;
    }
    
    .ring-1 {
        width: 180px;
        height: 180px;
    }
    
    .ring-2 {
        width: 250px;
        height: 250px;
    }
    
    .wheel-btn {
        width: 45px;
        height: 45px;
        font-size: 9px;
    }
    
    .btn-icon {
        font-size: 14px;
        margin-bottom: 2px;
    }
    
    .btn-text {
        font-size: 7px;
    }
    
    /* 调整按钮位置 */
    .ring-1 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-90px) rotate(0deg); }
    .ring-1 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateY(-90px) rotate(-60deg); }
    .ring-1 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateY(-90px) rotate(-120deg); }
    .ring-1 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateY(-90px) rotate(-180deg); }
    .ring-1 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateY(-90px) rotate(-240deg); }
    .ring-1 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateY(-90px) rotate(-300deg); }
    
    .ring-2 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(30deg) translateY(-125px) rotate(-30deg); }
    .ring-2 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg) translateY(-125px) rotate(-90deg); }
    .ring-2 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(150deg) translateY(-125px) rotate(-150deg); }
    .ring-2 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(210deg) translateY(-125px) rotate(-210deg); }
    .ring-2 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(270deg) translateY(-125px) rotate(-270deg); }
    .ring-2 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(330deg) translateY(-125px) rotate(-330deg); }
    
    .wheel-controls {
        padding: 10px 16px;
    }
    
    .control-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .status-indicator {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .creative-filter-wheel {
        height: 160px;
        padding: 12px;
        margin: 10px auto;
    }
    
    .center-display {
        width: 60px;
        height: 60px;
    }
    
    .center-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
    
    .center-text {
        font-size: 8px;
    }
    
    .ring-1 {
        width: 160px;
        height: 160px;
    }
    
    .ring-2 {
        width: 220px;
        height: 220px;
    }
    
    .wheel-btn {
        width: 40px;
        height: 40px;
        font-size: 8px;
    }
    
    .btn-icon {
        font-size: 12px;
        margin-bottom: 1px;
    }
    
    .btn-text {
        font-size: 6px;
    }
    
    /* 调整按钮位置 */
    .ring-1 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-80px) rotate(0deg); }
    .ring-1 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateY(-80px) rotate(-60deg); }
    .ring-1 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateY(-80px) rotate(-120deg); }
    .ring-1 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateY(-80px) rotate(-180deg); }
    .ring-1 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateY(-80px) rotate(-240deg); }
    .ring-1 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateY(-80px) rotate(-300deg); }
    
    .ring-2 .wheel-btn:nth-child(1) { transform: translate(-50%, -50%) rotate(30deg) translateY(-110px) rotate(-30deg); }
    .ring-2 .wheel-btn:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg) translateY(-110px) rotate(-90deg); }
    .ring-2 .wheel-btn:nth-child(3) { transform: translate(-50%, -50%) rotate(150deg) translateY(-110px) rotate(-150deg); }
    .ring-2 .wheel-btn:nth-child(4) { transform: translate(-50%, -50%) rotate(210deg) translateY(-110px) rotate(-210deg); }
    .ring-2 .wheel-btn:nth-child(5) { transform: translate(-50%, -50%) rotate(270deg) translateY(-110px) rotate(-270deg); }
    .ring-2 .wheel-btn:nth-child(6) { transform: translate(-50%, -50%) rotate(330deg) translateY(-110px) rotate(-330deg); }
    
    .wheel-controls {
        padding: 8px 12px;
    }
    
    .control-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .status-indicator {
        font-size: 10px;
    }
}
    
    .filter-header {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    
    .header-icon {
        font-size: 20px;
    }
    
    .filter-header h3 {
        font-size: 18px;
    }
    
    .stat-badge {
        padding: 3px 10px;
        font-size: 11px;
    }
    
    .filter-grid {
        gap: 10px;
    }
    
    .filter-row {
        gap: 8px;
    }
    
    .filter-btn {
        padding: 10px 12px;
        min-width: 70px;
        font-size: 11px;
    }
    
    .btn-icon {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .btn-text {
        font-size: 10px;
    }
    
    .filter-controls {
        gap: 12px;
        margin-top: 16px;
    }
    
    .control-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
 

@media (max-width: 480px) {
    .light-filter-system {
        min-height: 200px;
        padding: 16px 12px;
        margin: 10px auto;
    }
    
    .filter-header {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }
    
    .header-icon {
        font-size: 18px;
    }
    
    .filter-header h3 {
        font-size: 16px;
    }
    
    .stat-badge {
        padding: 2px 8px;
        font-size: 10px;
    }
    
    .filter-grid {
        gap: 8px;
    }
    
    .filter-row {
        gap: 6px;
    }
    
    .filter-btn {
        padding: 8px 10px;
        min-width: 60px;
        font-size: 10px;
    }
    
    .btn-icon {
        font-size: 16px;
        margin-bottom: 3px;
    }
    
    .btn-text {
        font-size: 9px;
    }
    
    .filter-controls {
        gap: 10px;
        margin-top: 12px;
    }
    
    .control-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: statusPulse 2s ease-in-out infinite;
}

.console-header h3 {
    color: #00ffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.header-right {
    display: flex;
    align-items: center;
}

.filter-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #00ff88;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.counter-value {
    font-size: 18px;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

/* 筛选矩阵 */
.filter-matrix {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.matrix-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    color: #00ffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.label-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 5px currentColor);
}

.matrix-buttons {
    display: flex;
    gap: 6px;
    flex: 1;
}

/* 矩阵按钮 */
.matrix-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 50px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-code {
    font-size: 9px;
    color: #888;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-label {
    font-size: 10px;
    color: #00ffff;
    font-weight: 500;
    margin-top: 2px;
    text-align: center;
    line-height: 1.2;
}

/* 不同类型按钮的颜色主题 */
.hot-btn {
    border-color: rgba(255, 100, 100, 0.4);
}

.hot-btn .btn-label {
    color: #ff6464;
}

.hot-btn:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: rgba(255, 100, 100, 0.6);
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.3);
}

.type-btn {
    border-color: rgba(100, 255, 100, 0.4);
}

.type-btn .btn-label {
    color: #64ff64;
}

.type-btn:hover {
    background: rgba(100, 255, 100, 0.1);
    border-color: rgba(100, 255, 100, 0.6);
    box-shadow: 0 0 15px rgba(100, 255, 100, 0.3);
}

.region-btn {
    border-color: rgba(255, 255, 100, 0.4);
}

.region-btn .btn-label {
    color: #ffff64;
}

.region-btn:hover {
    background: rgba(255, 255, 100, 0.1);
    border-color: rgba(255, 255, 100, 0.6);
    box-shadow: 0 0 15px rgba(255, 255, 100, 0.3);
}

.feature-btn {
    border-color: rgba(255, 100, 255, 0.4);
}

.feature-btn .btn-label {
    color: #ff64ff;
}

.feature-btn:hover {
    background: rgba(255, 100, 255, 0.1);
    border-color: rgba(255, 100, 255, 0.6);
    box-shadow: 0 0 15px rgba(255, 100, 255, 0.3);
}

.matrix-btn:hover {
    transform: translateY(-2px);
}

.matrix-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.matrix-btn:hover::before {
    left: 100%;
}

/* 控制面板 */
.control-panel {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ctrl-icon {
    font-size: 12px;
}

.ctrl-text {
    font-size: 10px;
}

.control-btn.primary {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.control-btn.primary:hover {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.control-btn.secondary {
    background: rgba(0, 255, 100, 0.1);
    border: 1px solid rgba(0, 255, 100, 0.3);
    color: #00ff64;
}

.control-btn.secondary:hover {
    background: rgba(0, 255, 100, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
    transform: translateY(-2px);
}

.control-btn.danger {
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff6464;
}

.control-btn.danger:hover {
    background: rgba(255, 100, 100, 0.2);
    box-shadow: 0 0 20px rgba(255, 100, 100, 0.4);
    transform: translateY(-2px);
}

/* 动画效果 */
@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

@keyframes dotsMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tech-filter-hub {
        padding: 12px;
        margin: 12px 0;
    }
    
    .filter-console {
        padding: 12px;
    }
    
    .console-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .matrix-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .row-label {
        min-width: auto;
        justify-content: center;
    }
    
    .matrix-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .matrix-btn {
        min-width: 50px;
        height: 40px;
    }
    
    .control-panel {
        flex-direction: column;
        gap: 6px;
    }
    
    .control-btn {
        justify-content: center;
    }
}

/* 筛选头部 */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.filter-title {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.filter-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    animation: float 3s ease-in-out infinite;
}

.filter-text h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.filter-text p {
    font-size: 16px;
    color: #86868b;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    max-width: 500px;
}

.filter-stats {
    display: flex;
    align-items: center;
}

.stat-badge {
    background: linear-gradient(135deg, #007aff 0%, #0071e3 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 
        0 8px 24px rgba(0, 122, 255, 0.25),
        0 4px 12px rgba(0, 113, 227, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-label {
    opacity: 0.9;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
}

/* 筛选分类 */
.filter-categories {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.filter-category {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-category:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.04);
}

.filter-category.featured {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
    border: 1px solid rgba(255, 193, 7, 0.2);
    box-shadow: 
        0 8px 24px rgba(255, 193, 7, 0.1),
        0 4px 12px rgba(255, 193, 7, 0.05);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.category-icon {
    font-size: 20px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
}

.category-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 智能筛选按钮 */
.smart-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.smart-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.smart-filter-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

.smart-filter-btn:hover::before {
    left: 100%;
}

.smart-filter-btn.featured-btn {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border-color: rgba(255, 193, 7, 0.3);
    color: #d97706;
}

.smart-filter-btn.featured-btn:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    border-color: rgba(255, 193, 7, 0.5);
    transform: translateY(-2px) scale(1.02);
}

.btn-icon {
    font-size: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.btn-text {
    font-weight: 500;
    white-space: nowrap;
}

/* 操作按钮区 */
.filter-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.action-btn:hover::before {
    left: 100%;
}

.primary-action {
    background: linear-gradient(135deg, #007aff 0%, #0071e3 100%);
    color: white;
    box-shadow: 
        0 8px 24px rgba(0, 122, 255, 0.25),
        0 4px 12px rgba(0, 113, 227, 0.15);
}

.primary-action:hover {
    background: linear-gradient(135deg, #0077ed 0%, #005bb5 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(0, 122, 255, 0.35),
        0 6px 16px rgba(0, 113, 227, 0.25);
}

.secondary-action {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    box-shadow: 
        0 8px 24px rgba(52, 211, 153, 0.25),
        0 4px 12px rgba(16, 185, 129, 0.15);
}

.secondary-action:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(52, 211, 153, 0.35),
        0 6px 16px rgba(16, 185, 129, 0.25);
}

.tertiary-action {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    box-shadow: 
        0 8px 24px rgba(248, 113, 113, 0.25),
        0 4px 12px rgba(239, 68, 68, 0.15);
}

.tertiary-action:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(248, 113, 113, 0.35),
        0 6px 16px rgba(239, 68, 68, 0.25);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .smart-filter-area {
        padding: 20px;
        margin: 16px 0;
        border-radius: 16px;
    }
    
    .filter-header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .filter-text h3 {
        font-size: 24px;
    }
    
    .filter-text p {
        font-size: 14px;
    }
    
    .filter-categories {
        gap: 16px;
    }
    
    .filter-category {
        padding: 16px;
    }
    
    .category-buttons {
        gap: 8px;
    }
    
    .smart-filter-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .filter-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .action-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

.random-filter-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(240, 147, 251, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.random-filter-header {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.random-filter-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    color: #1d1d1f;
    margin-bottom: 2px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: titleGlow 5s ease-in-out infinite alternate;
    z-index: 2;
    background: linear-gradient(135deg, #1d1d1f 0%, #434343 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.random-filter-header h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.3) 50%, 
        transparent 100%);
    border-radius: 1px;
    animation: borderPulse 4s ease-in-out infinite;
}

.random-filter-header h3::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    animation: titleOrb 5s ease-in-out infinite;
    z-index: -1;
}

.random-filter-header p {
    color: #86868b;
    font-size: 10px;
    margin: 0;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.2px;
    opacity: 0.8;
    text-shadow: none;
}

/* 添加动画效果 */
@keyframes titleGlow {
    0% {
        text-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }
    100% {
        text-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
}

@keyframes filterAreaGlow {
    0% {
        box-shadow: 
            0 12px 40px rgba(0, 0, 0, 0.06),
            0 4px 16px rgba(102, 126, 234, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    100% {
        box-shadow: 
            0 16px 50px rgba(0, 0, 0, 0.08),
            0 6px 20px rgba(102, 126, 234, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
}

@keyframes buttonPulse {
    0% {
        transform: translateY(-4px) scale(1.03);
    }
    50% {
        transform: translateY(-4px) scale(1.05);
    }
    100% {
        transform: translateY(-4px) scale(1.03);
    }
}

@keyframes backgroundFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, -10px) rotate(1deg);
    }
    50% {
        transform: translate(-5px, 5px) rotate(-1deg);
    }
    75% {
        transform: translate(-10px, -5px) rotate(0.5deg);
    }
}

@keyframes shimmerEffect {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

@keyframes titleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes randomButtonGlow {
    0% {
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes clearButtonGlow {
    0% {
        box-shadow: 
            0 4px 16px rgba(80, 80, 80, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 
            0 8px 25px rgba(80, 80, 80, 0.25),
            0 4px 12px rgba(80, 80, 80, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translateY(-5px) scale(0.8);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-15px) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes borderPulse {
    0%, 100% {
        width: 60px;
        opacity: 0.8;
    }
    50% {
        width: 80px;
        opacity: 1;
    }
}

@keyframes titleOrb {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(-50%) scale(1.2);
        opacity: 0.6;
    }
}

@keyframes borderGlow {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.random-filter-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    justify-content: center;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0;
}

/* 为随机筛选和清除筛选按钮创建特殊的容器 */
.random-filter-buttons::after {
    content: '';
    display: block;
    grid-column: 1 / -1;
    height: 0;
    margin: 8px 0;
}

/* 为随机筛选和清除筛选按钮创建特殊的网格布局 - 第三排居中 */
.random-filter-buttons .filter-btn.random-btn {
    grid-column: 3 / 4;
    justify-self: center;
    margin: 8px 12px 4px 12px;
    max-width: 120px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.random-filter-buttons .filter-btn.clear-btn {
    grid-column: 4 / 5;
    justify-self: center;
    margin: 8px 12px 4px 12px;
    max-width: 120px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 随机筛选按钮特殊样式 */
.random-filter-buttons .filter-btn.random-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
    color: #fff;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 
        0 4px 15px rgba(102, 126, 234, 0.25),
        0 2px 8px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* 清除筛选按钮特殊样式 */
.random-filter-buttons .filter-btn.clear-btn {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(238, 90, 82, 0.9));
    color: #fff;
    border: 1px solid rgba(255, 107, 107, 0.3);
    box-shadow: 
        0 4px 15px rgba(255, 107, 107, 0.25),
        0 2px 8px rgba(255, 107, 107, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* 悬停效果 */
.random-filter-buttons .filter-btn.random-btn:hover {
    background: linear-gradient(135deg, rgba(90, 111, 216, 0.95), rgba(106, 65, 144, 0.95));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.35),
        0 4px 12px rgba(102, 126, 234, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.random-filter-buttons .filter-btn.clear-btn:hover {
    background: linear-gradient(135deg, rgba(224, 133, 232, 0.95), rgba(229, 75, 95, 0.95));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(255, 107, 107, 0.35),
        0 4px 12px rgba(255, 107, 107, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 点击效果 */
.random-filter-buttons .filter-btn.random-btn:active,
.random-filter-buttons .filter-btn.clear-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}



/* 确保这两个按钮在网格中居中显示 */
.random-filter-buttons {
    justify-items: center;
    justify-content: center;
}

.filter-btn {
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.95));
    color: #1d1d1f;
    border-radius: 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.04),
        0 1px 6px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    letter-spacing: 0.2px;
    min-width: 100px;
    text-align: center;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    text-shadow: none;
}

/* 空规则集已删除 */

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%);
    transition: left 1s ease;
    z-index: 1;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        transparent 30%, 
        rgba(0, 0, 0, 0.1) 70%, 
        rgba(255, 255, 255, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 17px;
    z-index: -1;
}

.filter-btn:hover::after {
    opacity: 1;
    animation: borderGlow 1.5s ease-in-out infinite alternate;
}

.filter-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    animation: buttonPulse 0.6s ease-out;
    filter: brightness(1.05) contrast(1.05);
    border-color: rgba(0, 0, 0, 0.12);
}

.filter-btn:active {
    transform: translateY(-1px) scale(0.99);
    transition: all 0.1s ease;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.06),
        0 3px 10px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.15);
}

.filter-btn.active {
    background: linear-gradient(135deg, #1d1d1f 0%, #2a2a2a 100%);
    color: #fff;
    border-color: #1d1d1f;
    font-weight: 700;
    box-shadow: 
        0 8px 25px rgba(29, 29, 31, 0.3),
        0 4px 12px rgba(29, 29, 31, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.filter-btn.active::after {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    opacity: 1;
}

.filter-btn.random-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 16px;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer;
}

.filter-btn.random-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}



.filter-btn.clear-btn {
    background: #fefefe;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 16px;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer;
}

.filter-btn.clear-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}



/* 通知样式 */
.notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(25px);
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 1000;
    animation: slideInTop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 280px;
    min-width: 220px;
    opacity: 0.95;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.notification-message {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex: 1;
    text-align: left;
}

.notification-close {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #86868b;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.notification-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* 通知悬停效果 */
.notification:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

/* 浏览器语言检测提醒 */
.browser-language-tip {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    background: rgba(59, 130, 246, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2000;
    animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(59, 130, 246, 0.15),
        0 2px 8px rgba(99, 102, 241, 0.1);
}

.language-tip-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    width: 100%;
}

.language-tip-icon {
    font-size: 12px;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.language-tip-text {
    font-size: 11px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
    text-align: center;
    flex: 1;
    line-height: 1.1;
}

.language-tip-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.8;
}

.language-tip-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    opacity: 1;
}

.tip-timer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #666;
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

#countdown {
    font-weight: bold;
    color: #3b82f6;
}

/* 移动端响应式 */
@media (max-width: 480px) {
    .language-tip-content {
        padding: 6px 16px;
        gap: 8px;
    }
    
    .language-tip-text {
        font-size: 12px;
    }
    
    .language-tip-icon {
        font-size: 14px;
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* 分页样式 - 现代化胶囊设计 */
.pagination-container {
    margin-top: 16px;
    text-align: center;
    padding: 10px 0;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 16px;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination-container::before,
.pagination-container::after {
    display: none !important;
}

.pagination-info {
    font-size: 12px;
    color: #475569;
    margin-bottom: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(71, 85, 105, 0.1);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 15px;
}

.page-btn {
    padding: 6px 12px;
    border: none;
    background: linear-gradient(135deg, rgba(148,163,184,0.7) 0%, rgba(100,116,139,0.7) 100%);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    min-width: 32px;
    height: 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(148, 163, 184, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.2px;
    text-transform: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
}

.page-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.page-btn:hover::before {
    left: 100%;
}

.page-btn:hover::after {
    opacity: 1;
}

.page-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 4px 12px rgba(148, 163, 184, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12);
}

.page-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 700;
    box-shadow: 
        0 3px 10px rgba(59, 130, 246, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px) scale(1.03);
    position: relative;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
    }
    50% {
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.5);
    }
    100% {
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
    }
}

.page-btn.active::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.page-btn.active::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 1;
}

.page-btn:disabled {
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    color: #9e9e9e;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0.7;
}

.page-btn:disabled::before,
.page-btn:disabled::after {
    display: none;
}

.pagination-ellipsis {
    color: #94a3b8;
    font-size: 12px;
    padding: 0 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 28px;
}

@keyframes ellipsisPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.pagination-ellipsis::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .pagination-container {
        padding: 20px 0;
        margin-top: 30px;
    }
    
    .pagination-controls {
        gap: 6px;
        padding: 0 16px;
    }
    
    .page-btn {
        padding: 12px 14px;
        min-width: 42px;
        font-size: 13px;
    }
    
    .pagination-ellipsis {
        padding: 0 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .pagination-container {
        padding: 16px 0;
        margin-top: 24px;
    }
    
    .pagination-controls {
        gap: 4px;
        padding: 0 12px;
    }
    
    .page-btn {
        padding: 10px 12px;
        min-width: 38px;
        font-size: 12px;
        border-radius: 12px;
    }
    
    .pagination-ellipsis {
        padding: 0 8px;
        font-size: 13px;
    }
}

/* 详情弹窗样式 - 重新设计 */
.detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.detail-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.detail-container {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.9));
    border-radius: 20px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    animation: detailSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes detailSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 248, 0.8));
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.detail-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.detail-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.detail-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    transform: scale(1.1);
}

.detail-content {
    max-height: calc(85vh - 70px);
    overflow-y: auto;
}

.detail-main {
    display: flex;
    flex-direction: column;
}

.detail-image-section {
    position: relative;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.detail-image {
    max-width: 100%;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.detail-image-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.detail-sequence {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.detail-info-section {
    padding: 20px;
    background: rgba(255, 255, 255, 0.3);
}

.detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 16px;
    line-height: 1.3;
    text-align: center;
}

.detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.detail-description {
    background: rgba(255, 255, 255, 0.7);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    text-align: center;
}

.description-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.detail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.action-btn {
    flex: 1;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.info-btn {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.info-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

.action-icon {
    font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .detail-container {
        width: 95%;
        max-height: 95vh;
    }
    
    .detail-header {
        padding: 16px 20px;
    }
    
    .detail-title {
        font-size: 16px;
    }
    
    .detail-content {
        max-height: calc(95vh - 70px);
    }
    
    .detail-image-wrapper {
        padding: 16px;
    }
    
    .detail-image {
        max-height: 300px;
    }
    
    .detail-info {
        padding: 16px 20px;
    }
    
    .detail-sequence {
        font-size: 14px;
        padding: 10px 14px;
    }
    
    .detail-description {
        font-size: 13px;
        padding: 14px;
    }
    
    .detail-contact {
        padding: 14px;
    }
    
    .detail-contact p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .detail-container {
        width: 98%;
        max-height: 98vh;
    }
    
    .detail-header {
        padding: 12px 16px;
    }
    
    .detail-title {
        font-size: 14px;
    }
    
    .detail-content {
        max-height: calc(98vh - 60px);
    }
    
    .detail-image-wrapper {
        padding: 12px;
    }
    
    .detail-image {
        max-height: 250px;
    }
    
    .detail-info {
        padding: 12px 16px;
    }
    
    .detail-sequence {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .detail-description {
        font-size: 12px;
        padding: 12px;
    }
    
    .detail-contact {
        padding: 12px;
    }
    
    .detail-contact p {
        font-size: 12px;
    }
}

/* 文章卡片预览样式 - 新色系设计 - 统一对齐 */
.caption-preview {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    min-height: 120px;
    justify-content: flex-start;
    width: 100%;
}

.preview-line {
    font-size: 12px;
    color: #1d1d1f;
    line-height: 1.4;
    font-weight: 500;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    max-width: 100%;
}

.preview-line.first-preview {
    color: #000000 !important;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    letter-spacing: 0.3px;
    align-self: flex-start;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
    padding: 4px 0;
    line-height: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    display: block;
    border-radius: 0;
    text-transform: none;
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


.preview-line.second-preview {
    color: #1d1d1f;
    font-weight: 400;
    font-size: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    position: relative;
    text-align: left;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    display: block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    width: 100%;
}

.preview-line.third-preview {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 0 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    width: 100% !important;
    text-align: left !important;
}

/* 悬停效果 - 优化 */
.post-card:hover .preview-line:not(.third-preview) {
    transform: translateY(-2px);
}

.post-card:hover .preview-line.first-preview {
    color: #000000 !important;
    background: rgba(8, 145, 178, 0.12);
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.2);
}

.post-card:hover .preview-line.second-preview {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.12), 
        rgba(249, 115, 22, 0.08));
    border-color: rgba(251, 146, 60, 0.3);
    color: #1d1d1f;
    box-shadow: 
        0 2px 6px rgba(251, 146, 60, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* 移除 third-preview 的悬停效果 */
.post-card:hover .preview-line.third-preview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #475569 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.detail-time {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.detail-status {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.detail-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.detail-status.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ============================================
   Google Play Games 风格 - 桌面端设计
   ============================================ */
@media (min-width: 769px) {
    /* 整体背景 - Google Play 风格：简洁的白色背景 */
    body {
        background: #ffffff !important;
        background-size: 100% 100% !important;
        animation: none !important;
        color: #202124 !important;
    }
    
    html {
        background: #ffffff !important;
        animation: none !important;
    }
    
    /* 移除所有背景特效 */
    body::before,
    body::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
    
    .bg-decoration,
    .bg-decoration *,
    .tech-grid,
    .tech-lines,
    .tech-scanline,
    .tech-corner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        animation: none !important;
    }
    
    /* 容器样式 - Google Material Design 3 精确间距 */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
        background: transparent;
    }
    
    /* 内容区域间距 - 添加边距让卡片和边缘有距离 */
    .content-area {
        padding: 24px 20px !important;
        max-width: 100% !important;
    }
    
    /* 导航栏 - Google Material Design 3 + Google Logo 色系（单一蓝色） */
    .navbar {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 8px 16px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
        border: none !important;
        border-bottom: 2px solid #4285f4 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .navbar::before,
    .navbar::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
    
    .navbar:hover {
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    }
    
    /* 品牌标题 - Google Logo 色系（单一蓝色） */
    .nav-brand h1 {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 28px !important;
        color: #4285f4 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #4285f4 !important;
        background-clip: unset !important;
        text-shadow: none !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        animation: none !important;
    }
    
    .nav-brand h1::after {
        display: none !important;
    }
    
    .nav-brand h1:hover {
        transform: none !important;
        filter: none !important;
    }
    
    /* 内容区域 - 添加边距让卡片和边缘有距离 - 往上移动 */
    .content-area {
        background: transparent !important;
        padding: 16px 20px 24px 20px !important;
        max-width: 100% !important;
        margin-top: -8px !important;
    }
    
    /* 内容头部 - Google Material Design 3 精确样式 - 降低高度 */
    .content-header-unified {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 16px 20px 12px 20px !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .content-header-unified::before {
        display: none !important;
    }
    
    .category-title {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        color: #202124 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #202124 !important;
        background-clip: unset !important;
        filter: none !important;
        animation: none !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
    }
    
    .category-title::before,
    .category-title::after {
        display: none !important;
    }
    
    /* 筛选系统 - Google Material Design 3 精确样式 */
    .unified-filter-system {
        background: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(218, 220, 224, 1) !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }
    
    .unified-filter-system::before {
        display: none !important;
    }
    
    .filter-segments {
        background: transparent !important;
        border-bottom: 1px solid rgba(218, 220, 224, 1) !important;
        padding: 0 20px !important;
        margin: 0 !important;
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .filter-segments::-webkit-scrollbar {
        display: none !important;
    }
    
    .segment-btn {
        background: transparent !important;
        border: none !important;
        color: #5f6368 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        padding: 8px 12px !important;
        border-radius: 20px !important;
        transition: background-color 0.1s ease !important;
        white-space: nowrap !important;
        min-height: 36px !important;
    }
    
    .segment-btn:hover {
        background: rgba(60, 64, 67, 0.08) !important;
        transform: none !important;
    }
    
    .segment-btn.active {
        background: rgba(66, 133, 244, 0.1) !important;
        color: #4285f4 !important;
        font-weight: 500 !important;
        border: 1px solid rgba(66, 133, 244, 0.3) !important;
    }
    
    /* Google Logo 色系 - Segment按钮按功能分配颜色 */
    /* 黄色：时间相关的segment */
    .segment-btn[data-target*="time"],
    .segment-btn[data-zh*="时间"],
    .segment-btn[data-en*="Time"] {
        border-bottom: 2px solid transparent !important;
    }
    
    .segment-btn[data-target*="time"].active,
    .segment-btn[data-zh*="时间"].active,
    .segment-btn[data-en*="Time"].active {
        background: rgba(251, 188, 4, 0.1) !important;
        color: #fbbc04 !important;
        border: 1px solid rgba(251, 188, 4, 0.3) !important;
        border-bottom: 2px solid #fbbc04 !important;
    }
    
    /* 红色：验证状态相关的segment */
    .segment-btn[data-target*="verification"],
    .segment-btn[data-zh*="验证"],
    .segment-btn[data-en*="Verification"] {
        border-bottom: 2px solid transparent !important;
    }
    
    .segment-btn[data-target*="verification"].active,
    .segment-btn[data-zh*="验证"].active,
    .segment-btn[data-en*="Verification"].active {
        background: rgba(234, 67, 53, 0.1) !important;
        color: #ea4335 !important;
        border: 1px solid rgba(234, 67, 53, 0.3) !important;
        border-bottom: 2px solid #ea4335 !important;
    }
    
    /* 绿色：常用/成功相关的segment */
    .segment-btn[data-target*="common"],
    .segment-btn[data-zh*="常用"],
    .segment-btn[data-en*="Common"] {
        border-bottom: 2px solid transparent !important;
    }
    
    .segment-btn[data-target*="common"].active,
    .segment-btn[data-zh*="常用"].active,
    .segment-btn[data-en*="Common"].active {
        background: rgba(52, 168, 83, 0.1) !important;
        color: #34a853 !important;
        border: 1px solid rgba(52, 168, 83, 0.3) !important;
        border-bottom: 2px solid #34a853 !important;
    }
    
    .chip-lists {
        background: #ffffff !important;
        padding: 8px 16px 16px 16px !important;
    }
    
    .chip {
        background: #f1f3f4 !important;
        border: none !important;
        color: #202124 !important;
        border-radius: 16px !important;
        padding: 6px 12px !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        min-height: 32px !important;
        transition: background-color 0.1s ease !important;
    }
    
    .chip:hover {
        background: #e8eaed !important;
        transform: none !important;
    }
    
    .chip.active {
        background: #4285f4 !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        animation: none !important;
    }
    
    /* Google Logo 色系 - Chip按钮按功能分配颜色 */
    /* 绿色：成功/确认相关的chip */
    .chip[onclick*="已验证"],
    .chip[onclick*="Verified"],
    .chip[onclick*="在线账号"],
    .chip[onclick*="Live"],
    .chip[onclick*="IDVerified"] {
        border-left: 3px solid #34a853 !important;
    }
    
    .chip[onclick*="已验证"].active,
    .chip[onclick*="Verified"].active,
    .chip[onclick*="在线账号"].active,
    .chip[onclick*="Live"].active,
    .chip[onclick*="IDVerified"].active {
        background: #34a853 !important;
        color: #ffffff !important;
        border-left: none !important;
    }
    
    /* 黄色：时间/警告相关的chip */
    .chip[onclick*="今日账号"],
    .chip[onclick*="Today"],
    .chip[onclick*="最近7天"],
    .chip[onclick*="Last 7 Days"],
    .chip[onclick*="开发者时间"],
    .chip[onclick*="Developer Time"] {
        border-left: 3px solid #fbbc04 !important;
    }
    
    .chip[onclick*="今日账号"].active,
    .chip[onclick*="Today"].active,
    .chip[onclick*="最近7天"].active,
    .chip[onclick*="Last 7 Days"].active,
    .chip[onclick*="开发者时间"].active,
    .chip[onclick*="Developer Time"].active {
        background: #fbbc04 !important;
        color: #202124 !important;
        border-left: none !important;
    }
    
    /* 红色：错误/未验证相关的chip */
    .chip[onclick*="未验证"],
    .chip[onclick*="Not Verified"],
    .chip[onclick*="IDNotVerified"],
    .chip[onclick*="失败"],
    .chip[onclick*="Failed"] {
        border-left: 3px solid #ea4335 !important;
    }
    
    .chip[onclick*="未验证"].active,
    .chip[onclick*="Not Verified"].active,
    .chip[onclick*="IDNotVerified"].active,
    .chip[onclick*="失败"].active,
    .chip[onclick*="Failed"].active {
        background: #ea4335 !important;
        color: #ffffff !important;
        border-left: none !important;
    }
    
    /* 帖子网格 - Google Material Design 3 精确样式 - 每行5个，更大 */
    .posts-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* 帖子卡片 - Google Material Design 3 精确样式 */
    .post-card {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }
    
    .post-card::before {
        display: none !important;
    }
    
    .post-card::after {
        content: '' !important;
        position: absolute !important;
        bottom: -1px !important;
        left: -1px !important;
        right: -1px !important;
        height: 17px !important;
        background: #ffffff !important;
        border-radius: 0 0 16px 16px !important;
        z-index: 3 !important;
        pointer-events: none !important;
        border: 1px solid transparent !important;
        border-top: none !important;
        box-shadow: 0 0 0 1px transparent !important;
    }
    
    .post-card:hover {
        box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
        transform: none !important;
    }
    
    .post-image {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        background: #f1f3f4 !important;
        border-radius: 16px 16px 0 0 !important;
    }
    
    .post-content {
        background: #ffffff !important;
        padding: 14px 18px 18px 18px !important;
        color: #202124 !important;
        min-height: 160px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .post-content h3 {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 22px !important;
        color: #202124 !important;
        margin: 0 0 6px 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-height: 44px !important;
    }
    
    .post-content p {
        font-size: 13px !important;
        line-height: 18px !important;
        color: #5f6368 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-height: 36px !important;
    }
    
    /* 分页 - Google Material Design 3 精确样式 */
    .pagination-container {
        background: transparent !important;
        padding: 16px 0 32px 0 !important;
    }
    
    .pagination-controls {
        gap: 8px !important;
    }
    
    .page-btn {
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        color: #202124 !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        transition: background-color 0.1s ease, border-color 0.1s ease !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    .page-btn:hover {
        background: #f8f9fa !important;
        border-color: #dadce0 !important;
        transform: none !important;
    }
    
    .page-btn.active {
        background: #4285f4 !important;
        color: #ffffff !important;
        border-color: #4285f4 !important;
        animation: none !important;
    }
    
    .page-btn:active {
        background: #3367d6 !important;
        border-color: #3367d6 !important;
    }
    
    /* Google Logo 色系 - 分页按钮交替使用颜色 */
    .page-btn:nth-child(3n+1):not(.active):hover {
        background: rgba(66, 133, 244, 0.08) !important;
        border-color: rgba(66, 133, 244, 0.3) !important;
    }
    
    .page-btn:nth-child(3n+2):not(.active):hover {
        background: rgba(251, 188, 4, 0.08) !important;
        border-color: rgba(251, 188, 4, 0.3) !important;
    }
    
    .page-btn:nth-child(3n+3):not(.active):hover {
        background: rgba(234, 67, 53, 0.08) !important;
        border-color: rgba(234, 67, 53, 0.3) !important;
    }
    
    /* 搜索和排序输入框 - Google Material Design 3 精确样式 */
    .search-input,
    .sort-select,
    #searchInput,
    #sortSelect {
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        border-radius: 28px !important;
        padding: 10px 16px !important;
        color: #202124 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        min-height: 40px !important;
    }
    
    .search-input:focus,
    .sort-select:focus,
    #searchInput:focus,
    #sortSelect:focus {
        border-color: #4285f4 !important;
        box-shadow: 0 0 0 1px #4285f4 !important;
        outline: none !important;
        transform: none !important;
    }
    
    .search-input:hover,
    .sort-select:hover,
    #searchInput:hover,
    #sortSelect:hover {
        border-color: rgba(0, 0, 0, 0.38) !important;
        transform: none !important;
    }
    
    .search-input::placeholder,
    #searchInput::placeholder {
        color: rgba(0, 0, 0, 0.38) !important;
    }
    
    /* 头部控制区域 */
    .header-controls {
        gap: 12px !important;
        align-items: center !important;
    }
    
    /* 语言切换 - Google Material Design 3 精确样式 */
    .language-switch {
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }
    
    .language-switch .lang-select {
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        border-radius: 4px !important;
        color: #202124 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        padding: 8px 32px 8px 12px !important;
        min-height: 40px !important;
        font-weight: 400 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        min-width: auto !important;
        max-width: none !important;
    }
    
    .language-switch .lang-select:hover {
        background: #f8f9fa !important;
        border-color: rgba(0, 0, 0, 0.38) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .language-switch .lang-select:focus {
        border-color: #4285f4 !important;
        box-shadow: 0 0 0 1px #4285f4 !important;
        outline: none !important;
        transform: none !important;
    }
    
    /* 主题切换按钮 - Google Material Design 3 精确样式 */
    .theme-toggle {
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        transition: background-color 0.1s ease !important;
        color: #5f6368 !important;
    }
    
    .theme-toggle:hover {
        background: rgba(60, 64, 67, 0.08) !important;
        transform: none !important;
    }
    
    /* 筛选按钮 - Google Material Design 3 精确样式 */
    .random-btn,
    .clear-btn {
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        color: #202124 !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        min-height: 36px !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        transition: background-color 0.1s ease, border-color 0.1s ease !important;
    }
    
    .random-btn:hover,
    .clear-btn:hover {
        background: #f8f9fa !important;
        border-color: #dadce0 !important;
        transform: none !important;
    }
    
    .random-btn:active,
    .clear-btn:active {
        background: #e8eaed !important;
    }
    
    /* 悬浮按钮 - Google Material Design 3 精确样式 - 更小更靠右 */
    .floating-service {
        filter: none !important;
        gap: 6px !important;
        right: 12px !important;
    }
    
    .service-buttons {
        gap: 6px !important;
    }
    
    .service-btn {
        background: #ffffff !important;
        border: 1px solid #dadce0 !important;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
        border-radius: 18px !important;
        color: #202124 !important;
        padding: 5px 10px !important;
        min-height: 28px !important;
        min-width: 75px !important;
        font-size: 11px !important;
        line-height: 14px !important;
        font-weight: 500 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        gap: 3px !important;
    }
    
    .service-btn:hover {
        box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
        transform: none !important;
    }
    
    .service-btn:active {
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    }
    
    .service-icon {
        font-size: 12px !important;
    }
    
    .service-text {
        font-size: 10px !important;
        line-height: 12px !important;
        margin-left: 3px !important;
    }
    
    /* 服务按钮特殊样式 - 更小版 */
    .service-btn.contact-btn {
        background: #34a853 !important;
        border-color: #34a853 !important;
        color: #ffffff !important;
    }
    
    .service-btn.contact-btn:hover {
        background: #2d8f47 !important;
        border-color: #2d8f47 !important;
    }
    
    .service-btn.channel-btn {
        background: #4285f4 !important;
        border-color: #4285f4 !important;
        color: #ffffff !important;
    }
    
    .service-btn.channel-btn:hover {
        background: #3367d6 !important;
        border-color: #3367d6 !important;
    }
    
    /* 加载状态 - Google Play 风格 */
    .loading {
        background: transparent !important;
        color: #5f6368 !important;
    }
    
    .spinner {
        border-color: #dadce0 !important;
        border-top-color: #1a73e8 !important;
    }
    
    /* 空状态 - Google Play 风格 */
    .no-posts {
        background: transparent !important;
        color: #5f6368 !important;
        padding: 48px 24px !important;
    }
    
    /* 详情弹窗 - Google Play 风格 */
    .detail-modal {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    .detail-container {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }
    
    .detail-header {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    
    .detail-close {
        color: #5f6368 !important;
    }
    
    .detail-close:hover {
        background: #f8f9fa !important;
    }
    
    /* 页脚 - Google Play 风格 */
    .footer {
        background: transparent !important;
        color: #5f6368 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
        margin-top: 48px !important;
        padding: 24px 0 !important;
    }
    
    .copyright {
        color: #5f6368 !important;
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }
    
    .copyright a {
        color: #1a73e8 !important;
        text-decoration: none !important;
    }
    
    .copyright a:hover {
        text-decoration: underline !important;
    }
    
    .copyright-tagline {
        color: #4285f4 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        line-height: 1.8 !important;
        margin-top: 16px !important;
        text-align: center !important;
        letter-spacing: 0.4px !important;
        padding: 12px 20px !important;
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(52, 168, 83, 0.1)) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(66, 133, 244, 0.2) !important;
        box-shadow: 0 2px 12px rgba(66, 133, 244, 0.15) !important;
        transition: all 0.3s ease !important;
    }
    
    .copyright-tagline:hover {
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(52, 168, 83, 0.15)) !important;
        border-color: rgba(66, 133, 244, 0.3) !important;
        box-shadow: 0 4px 16px rgba(66, 133, 244, 0.2) !important;
        transform: translateY(-2px) !important;
    }
    
    /* 卡片预览内容 - Google Play 风格 - 统一对齐 */
    .caption-preview {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
        min-height: 120px !important;
        justify-content: flex-start !important;
    }
    
    .preview-line {
        background: transparent !important;
        border: none !important;
        color: #5f6368 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        width: 100% !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 第一行 - 统一高度 */
    .preview-line.first-preview {
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #202124 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* 第二行 - 统一高度 */
    .preview-line.second-preview {
        min-height: 22px !important;
        max-height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #5f6368 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* 第三行 - 统一高度，允许两行 */
    .preview-line.third-preview {
        min-height: 40px !important;
        max-height: 40px !important;
        line-height: 20px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #5f6368 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .preview-line strong,
    .preview-line b {
        color: #202124 !important;
        font-weight: 500 !important;
    }
    
    /* 卡片序列号 - Google Play 风格 - 缩小版 */
    .post-sequence {
        background: rgba(0, 0, 0, 0.6) !important;
        color: #ffffff !important;
        border-radius: 3px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        font-family: 'Roboto', 'Arial', sans-serif !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        line-height: 1.2 !important;
    }
    
    /* 卡片图片覆盖层 - 减少遮挡，提升清晰度 */
    .post-overlay {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, transparent 25%) !important;
    }
    
    .post-image::after {
        display: none !important;
    }
    
    .post-image:hover {
        transform: none !important;
    }
    
    /* 统一字体 - Google Sans */
    body {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-weight: 400 !important;
    }
    
    /* 移除所有渐变和特效动画 */
    * {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }
    
    /* 确保所有文本颜色正确 */
    .brand-subtitle {
        color: #5f6368 !important;
    }
    
    .brand-subtitle-highlight {
        background: linear-gradient(135deg, #4285f4 0%, #34a853 25%, #fbbc04 50%, #ea4335 75%, #4285f4 100%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 600 !important;
        animation: brandHighlightGradient 3s ease infinite;
        position: relative;
        display: inline-block;
        letter-spacing: 0.5px;
    }
    
    /* 为不支持 background-clip: text 的浏览器提供备用颜色 */
    @supports not (-webkit-background-clip: text) {
        .brand-subtitle-highlight {
            color: #4285f4 !important;
            background: none !important;
            -webkit-text-fill-color: #4285f4 !important;
        }
    }
    
    @keyframes brandHighlightGradient {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    
    .brand-subtitle-highlight::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2px;
        right: -2px;
        bottom: 0;
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.15) 0%, rgba(52, 168, 83, 0.15) 25%, rgba(251, 188, 4, 0.15) 50%, rgba(234, 67, 53, 0.15) 75%, rgba(66, 133, 244, 0.15) 100%);
        background-size: 200% 200%;
        animation: brandHighlightGradient 3s ease infinite;
        filter: blur(6px);
        z-index: -1;
        opacity: 0.5;
        border-radius: 4px;
    }
    
    .brand-subtitle-highlight:hover {
        animation-duration: 1.5s;
    }
    
    /* 优化间距 */
    .content-header-unified .header-controls {
        gap: 12px !important;
    }
    
    /* 卡片内容区域优化 */
    .post-content {
        background: #ffffff !important;
    }
    
    /* 移除卡片的所有特效 */
    .post-card::before,
    .post-card::after {
        display: none !important;
    }
    
    /* 卡片加载动画简化 */
    .post-card {
        animation: none !important;
    }
    
    .post-image img {
        transition: opacity 0.2s ease !important;
    }
    
    /* 网格加载动画简化 */
    .posts-grid {
        animation: none !important;
    }
    
    /* 确保所有链接颜色正确 */
    a {
        color: #1a73e8 !important;
    }
    
    a:hover {
        color: #1557b0 !important;
        text-decoration: underline !important;
    }
    
    /* 按钮文字颜色 */
    button,
    .btn {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-weight: 500 !important;
    }
    
    /* 输入框文字 */
    input,
    select,
    textarea {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    /* 确保导航栏品牌区域正确显示 */
    .brand-container {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* 移除导航栏的所有特效 */
    .navbar::before,
    .navbar::after {
        display: none !important;
    }
    
    /* 确保筛选系统的所有元素都符合 Google Play 风格 */
    .unified-filter-system .filter-segments::after {
        display: none !important;
    }
    
    /* 优化卡片网格间距 */
    .posts-grid {
        margin-bottom: 32px !important;
    }
    
    /* 确保内容区域有足够的留白 */
    .content-area {
        padding-top: 0 !important;
    }
    
    /* 大屏幕优化 - 更宽的容器 */
    @media (min-width: 1200px) {
        .container {
            max-width: 1400px !important;
            padding: 0 32px !important;
        }
        
        .content-area {
            padding: 32px 28px !important;
        }
        
        .posts-grid {
            grid-template-columns: repeat(5, 1fr) !important;
        }
    }
    
    /* 超大屏幕优化 */
    @media (min-width: 1600px) {
        .container {
            max-width: 1600px !important;
            padding: 0 40px !important;
        }
        
        .content-area {
            padding: 40px 36px !important;
        }
        
        .posts-grid {
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 24px !important;
        }
    }
    
    /* 确保所有交互状态都符合 Google Play 风格 */
    button:active,
    .btn:active,
    .chip:active,
    .segment-btn:active {
        transform: none !important;
        opacity: 0.7 !important;
    }
    
    /* 移除所有不必要的变换效果 */
    .post-card:hover .post-image {
        transform: none !important;
    }
    
    /* 确保滚动条样式（如果浏览器支持） */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f3f4;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #dadce0;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #bdc1c6;
    }
    
    /* 确保选择文本的颜色 */
    ::selection {
        background: #e8f0fe !important;
        color: #202124 !important;
    }
    
    ::-moz-selection {
        background: #e8f0fe !important;
        color: #202124 !important;
    }
    
    /* 优化焦点可见性 */
    *:focus-visible {
        outline: 2px solid #1a73e8 !important;
        outline-offset: 2px !important;
    }
    
    /* 确保所有图标按钮都符合 Google Play 风格 */
    .service-icon {
        font-size: 20px !important;
    }
    
    /* 优化卡片内容的行高和间距 */
    .post-content p {
        margin-bottom: 8px !important;
    }
    
    .post-content p:last-child {
        margin-bottom: 0 !important;
    }
    
    /* 确保分页信息样式 */
    .pagination-info {
        color: #5f6368 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }
    
    /* 优化省略号样式 */
    .pagination-ellipsis {
        color: #5f6368 !important;
    }
    
    /* 加载状态 - Google Play 风格 */
    .loading {
        background: transparent !important;
        color: #5f6368 !important;
        padding: 80px 24px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .loading p {
        color: #5f6368 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        margin-top: 16px !important;
    }
    
    .spinner {
        width: 40px !important;
        height: 40px !important;
        border: 3px solid #e8eaed !important;
        border-top-color: #1a73e8 !important;
        border-radius: 50% !important;
        animation: spin 1s linear infinite !important;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* 空状态 - Google Play 风格 */
    .no-posts,
    .no-results {
        background: transparent !important;
        color: #5f6368 !important;
        padding: 80px 24px !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
    }
    
    .no-posts p,
    .no-results p {
        color: #5f6368 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }
    
    /* 详情弹窗完整样式 - Google Play 风格 */
    .detail-modal {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .detail-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    .detail-container {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
        max-width: 900px !important;
        width: 90% !important;
        max-height: 90vh !important;
        overflow: hidden !important;
    }
    
    .detail-header {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        padding: 16px 24px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .detail-badge {
        color: #202124 !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    .detail-close {
        background: transparent !important;
        border: none !important;
        color: #5f6368 !important;
        font-size: 24px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
    }
    
    .detail-close:hover {
        background: #f8f9fa !important;
    }
    
    .detail-content {
        background: #ffffff !important;
        padding: 24px !important;
        overflow-y: auto !important;
    }
    
    .detail-image-section {
        background: #f8f9fa !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .detail-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    .detail-info-section {
        color: #202124 !important;
    }
    
    .detail-title {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        color: #202124 !important;
        margin-bottom: 16px !important;
    }
    
    .detail-stats {
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .stat-item {
        color: #5f6368 !important;
        font-size: 14px !important;
    }
    
    .stat-label {
        color: #5f6368 !important;
        font-weight: 500 !important;
    }
    
    .stat-value {
        color: #202124 !important;
        font-weight: 400 !important;
    }
    
    /* 模态框样式 - Google Play 风格 */
    .modal {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    .modal-content {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .modal-header {
        background: #ffffff !important;
        color: #202124 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        padding: 16px 24px !important;
    }
    
    .modal-header::before {
        display: none !important;
    }
    
    /* 确保所有文本输入框都符合 Google Play 风格 */
    input[type="text"],
    input[type="search"],
    textarea {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    /* 优化标签和徽章样式 */
    .badge,
    .tag {
        background: #e8f0fe !important;
        color: #1a73e8 !important;
        border-radius: 12px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    
    /* 确保所有链接样式一致 */
    .post-card a,
    .detail-content a {
        color: #1a73e8 !important;
        text-decoration: none !important;
    }
    
    .post-card a:hover,
    .detail-content a:hover {
        text-decoration: underline !important;
    }
    
    /* 筛选系统完整优化 - Google Play 风格 */
    .unified-filter-system .filter-segments {
        background: #f8f9fa !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        padding: 12px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .unified-filter-system .filter-segments::before,
    .unified-filter-system .filter-segments::after {
        display: none !important;
    }
    
    .unified-filter-system .chip-lists {
        background: #ffffff !important;
        padding: 16px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .unified-filter-system .chip-list {
        animation: none !important;
    }
    
    .unified-filter-system .chip-list.active {
        display: flex !important;
    }
    
    .unified-filter-system .chip {
        background: #f1f3f4 !important;
        border: none !important;
        color: #202124 !important;
        border-radius: 16px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        transition: background-color 0.2s ease !important;
    }
    
    .unified-filter-system .chip:hover {
        background: #e8eaed !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .unified-filter-system .chip.active {
        background: #1a73e8 !important;
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    
    .unified-filter-system .chip:active {
        transform: none !important;
        opacity: 0.7 !important;
    }
    
    /* 随机和清除按钮 - Google Play 风格 */
    .random-btn,
    .clear-btn {
        font-size: 14px !important;
        font-weight: 500 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    /* 确保筛选按钮的图标和文字 */
    .btn-icon,
    .btn-text {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    /* 优化卡片网格的加载状态 */
    .posts-grid:empty::before {
        content: none !important;
    }
    
    /* 确保所有按钮的字体一致 */
    button,
    .btn,
    .chip,
    .segment-btn,
    .page-btn {
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
    }
    
    /* 优化卡片标题的显示 - Material Design 3 规范 */
    .post-content h3 {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-height: 40px !important;
        line-height: 20px !important;
        margin-bottom: 4px !important;
    }
    
    /* 卡片内容区域最小高度 */
    .post-content {
        min-height: 72px !important;
    }
    
    /* 确保图片加载占位符 */
    .post-image::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #f1f3f4 !important;
        z-index: 0 !important;
    }
    
    .post-image img {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* 优化卡片的最小高度 */
    .post-card {
        min-height: auto !important;
    }
    
    /* 确保所有过渡效果都符合 Material Design 3 */
    * {
        transition-duration: 0.15s !important;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Material Design 3 标准颜色值 + Google Logo 色系（单一颜色分配） */
    :root {
        --md-sys-color-primary: #1a73e8;
        --md-sys-color-on-primary: #ffffff;
        --md-sys-color-surface: #ffffff;
        --md-sys-color-on-surface: #202124;
        --md-sys-color-surface-variant: #f8f9fa;
        --md-sys-color-outline: #dadce0;
        --md-sys-color-outline-variant: #e8eaed;
        /* Google Logo 经典色系 - 单一颜色分配 */
        --google-blue: #4285f4;      /* 用于：按钮激活、链接、焦点状态 */
        --google-red: #ea4335;       /* 用于：清除/删除操作、错误状态 */
        --google-yellow: #fbbc04;    /* 用于：警告、随机操作 */
        --google-green: #34a853;     /* 用于：成功状态、确认操作 */
    }
    
    /* 使用 Material Design 3 标准间距（8dp grid） */
    .navbar {
        margin-bottom: 0 !important;
    }
    
    .unified-filter-system {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .content-header-unified {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .posts-grid {
        margin-top: 16px !important;
    }
    
    /* 移除所有复杂的动画 */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .unified-filter-system .chip-list.active {
        animation: fadeIn 0.2s ease !important;
    }
    
    /* 确保容器背景透明 */
    .container {
        background: transparent !important;
    }
    
    /* 优化导航栏内的所有元素 */
    .navbar * {
        color: inherit !important;
    }
    
    /* 确保品牌副标题样式 - Material Design 3 */
    .brand-subtitle {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 400 !important;
        font-family: 'Google Sans', 'Roboto', 'Arial', sans-serif !important;
        color: #5f6368 !important;
        margin-top: 4px !important;
        text-align: left !important;
    }
    
    /* Material Design 3 标准阴影系统 */
    .post-card {
        /* Elevation 1 */
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
    }
    
    .post-card:hover {
        /* Elevation 2 */
        box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
    }
    
    .navbar {
        /* Elevation 1 */
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
    }
    
    /* 确保所有边框颜色使用 Material Design 3 标准 */
    .unified-filter-system {
        border-bottom-color: rgba(218, 220, 224, 1) !important;
    }
    
    .filter-segments {
        border-bottom-color: rgba(218, 220, 224, 1) !important;
    }
    
    /* 优化按钮的 ripple 效果（如果浏览器支持） */
    button,
    .btn,
    .chip,
    .segment-btn {
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* 确保所有文本都使用正确的行高 */
    body {
        line-height: 1.5 !important;
    }
    
    p {
        line-height: 1.5 !important;
    }
    
    /* Material Design 3 标准圆角 */
    .post-card {
        border-radius: 16px !important;
    }
    
    .chip {
        border-radius: 16px !important;
    }
    
    .segment-btn {
        border-radius: 20px !important;
    }
    
    .page-btn {
        border-radius: 20px !important;
    }
    
    /* 确保所有交互元素都有正确的触摸目标大小（至少 48x48px） */
    button,
    .btn,
    .chip,
    .segment-btn,
    .page-btn,
    .service-btn {
        min-height: 40px !important;
        min-width: 40px !important;
    }
    
    /* 优化焦点状态 - Material Design 3 + Google 色系 */
    button:focus-visible,
    .btn:focus-visible,
    .chip:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 2px solid #4285f4 !important;
        outline-offset: 2px !important;
    }
    
    /* Google Logo 色系装饰元素 */
    .post-card::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, 
            #4285f4 0%, 
            #ea4335 33.33%, 
            #fbbc04 66.66%, 
            #34a853 100%) !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }
    
    .post-card:hover::after {
        opacity: 1 !important;
    }
    
    /* 服务按钮使用 Google 色系（单一颜色） */
    .service-btn.contact-btn {
        background: #34a853 !important;
        border-color: #34a853 !important;
        color: #ffffff !important;
    }
    
    .service-btn.contact-btn:hover {
        background: #2d8f47 !important;
        border-color: #2d8f47 !important;
    }
    
    .service-btn.channel-btn {
        background: #4285f4 !important;
        border-color: #4285f4 !important;
        color: #ffffff !important;
    }
    
    .service-btn.channel-btn:hover {
        background: #3367d6 !important;
        border-color: #3367d6 !important;
    }
    
    /* 随机按钮使用黄色系 */
    .random-btn {
        background: #fbbc04 !important;
        border-color: #fbbc04 !important;
        color: #202124 !important;
    }
    
    .random-btn:hover {
        background: #e6a800 !important;
        border-color: #e6a800 !important;
    }
    
    /* 清除按钮使用红色系 */
    .clear-btn {
        background: #ea4335 !important;
        border-color: #ea4335 !important;
        color: #ffffff !important;
    }
    
    .clear-btn:hover {
        background: #d33b2c !important;
        border-color: #d33b2c !important;
    }
    
    /* 加载状态使用 Google 蓝色 */
    .spinner {
        border-top-color: #4285f4 !important;
    }
    
    /* 链接颜色使用 Google 蓝色 */
    a {
        color: #4285f4 !important;
    }
    
    a:hover {
        color: #3367d6 !important;
    }
    
    /* 详情弹窗标题使用 Google 蓝色 */
    .detail-title {
        color: #4285f4 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #4285f4 !important;
        background-clip: unset !important;
        animation: none !important;
    }
    
    /* 卡片序列号使用 Google 蓝色 - 缩小版 */
    .post-sequence {
        background: rgba(66, 133, 244, 0.9) !important;
        animation: none !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
        border-radius: 3px !important;
        line-height: 1.2 !important;
    }
    
    /* 内容头部标题使用 Google 蓝色 */
    .category-title {
        color: #4285f4 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #4285f4 !important;
        background-clip: unset !important;
        animation: none !important;
    }
    
    /* 筛选系统顶部装饰线 - 移除，使用边框 */
    .unified-filter-system::before {
        display: none !important;
    }
    
    /* 分页信息使用 Google 蓝色 */
    .pagination-info {
        color: #4285f4 !important;
    }
    
    /* 成功状态使用 Google 绿色 */
    .detail-status.success,
    .stat-value.success,
    .stat-item.success {
        color: #34a853 !important;
        background: rgba(52, 168, 83, 0.1) !important;
        border-color: rgba(52, 168, 83, 0.2) !important;
    }
    
    /* 失败状态使用 Google 红色 */
    .detail-status.failed,
    .stat-value.failed,
    .stat-item.failed {
        color: #ea4335 !important;
        background: rgba(234, 67, 53, 0.1) !important;
        border-color: rgba(234, 67, 53, 0.2) !important;
    }
    
    /* 警告状态使用 Google 黄色 */
    .detail-status.warning,
    .stat-value.warning,
    .stat-item.warning {
        color: #fbbc04 !important;
        background: rgba(251, 188, 4, 0.1) !important;
        border-color: rgba(251, 188, 4, 0.2) !important;
    }
    
    /* 链接颜色使用 Google 蓝色 */
    .post-card a,
    .detail-content a,
    .copyright a {
        color: #4285f4 !important;
    }
    
    .post-card a:hover,
    .detail-content a:hover,
    .copyright a:hover {
        color: #3367d6 !important;
    }
    
    /* 徽章使用 Google 色系 - 根据类型分配 */
    .badge,
    .tag {
        background: rgba(66, 133, 244, 0.1) !important;
        color: #4285f4 !important;
        border: 1px solid rgba(66, 133, 244, 0.2) !important;
    }
    
    /* 成功/确认相关的徽章使用绿色 */
    .badge.success,
    .badge.ok,
    .tag.success {
        background: rgba(52, 168, 83, 0.1) !important;
        color: #34a853 !important;
        border: 1px solid rgba(52, 168, 83, 0.2) !important;
    }
    
    /* 警告相关的徽章使用黄色 */
    .badge.warning,
    .tag.warning {
        background: rgba(251, 188, 4, 0.1) !important;
        color: #fbbc04 !important;
        border: 1px solid rgba(251, 188, 4, 0.2) !important;
    }
    
    /* 错误/失败相关的徽章使用红色 */
    .badge.error,
    .badge.fail,
    .badge.failed,
    .tag.error {
        background: rgba(234, 67, 53, 0.1) !important;
        color: #ea4335 !important;
        border: 1px solid rgba(234, 67, 53, 0.2) !important;
    }
    
    /* 按钮悬停状态使用 Google 色系 - 交替使用 */
    button:not(.random-btn):not(.clear-btn):not(.service-btn):not(.page-btn):not(.chip):not(.segment-btn):nth-child(4n+1):hover {
        background: rgba(66, 133, 244, 0.08) !important;
        border-color: rgba(66, 133, 244, 0.3) !important;
    }
    
    button:not(.random-btn):not(.clear-btn):not(.service-btn):not(.page-btn):not(.chip):not(.segment-btn):nth-child(4n+2):hover {
        background: rgba(251, 188, 4, 0.08) !important;
        border-color: rgba(251, 188, 4, 0.3) !important;
    }
    
    button:not(.random-btn):not(.clear-btn):not(.service-btn):not(.page-btn):not(.chip):not(.segment-btn):nth-child(4n+3):hover {
        background: rgba(234, 67, 53, 0.08) !important;
        border-color: rgba(234, 67, 53, 0.3) !important;
    }
    
    button:not(.random-btn):not(.clear-btn):not(.service-btn):not(.page-btn):not(.chip):not(.segment-btn):nth-child(4n+4):hover {
        background: rgba(52, 168, 83, 0.08) !important;
        border-color: rgba(52, 168, 83, 0.3) !important;
    }
    
    /* 输入框焦点状态使用 Google 色系 - 交替使用 */
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #4285f4 !important;
        box-shadow: 0 0 0 1px #4285f4 !important;
    }
    
    /* 搜索输入框使用黄色焦点 */
    #searchInput:focus,
    .search-input:focus {
        border-color: #fbbc04 !important;
        box-shadow: 0 0 0 1px #fbbc04 !important;
    }
    
    /* 排序选择框使用红色焦点 */
    #sortSelect:focus,
    .sort-select:focus {
        border-color: #ea4335 !important;
        box-shadow: 0 0 0 1px #ea4335 !important;
    }
    
    /* 卡片顶部统一红色装饰线 */
    .post-card::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: #ea4335 !important;
        opacity: 1 !important;
        transition: none !important;
        z-index: 1 !important;
    }
    
    /* 卡片悬停时保持红色顶部线，边框使用红色 */
    .post-card:hover {
        border: 1px solid rgba(234, 67, 53, 0.2) !important;
    }
    
    .post-card:hover::after {
        opacity: 1 !important;
        background: #ea4335 !important;
    }
    
    /* 详情弹窗标题使用 Google 蓝色 */
    .detail-title {
        color: #4285f4 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #4285f4 !important;
        background-clip: unset !important;
        animation: none !important;
    }
}