/* --- 核心视觉样式定义 --- */
:root {
    /* 移动端弹性适配变量 */
    --app-height: 100dvh;
    --font-base: clamp(14px, 1rem + 1vw, 18px);
    --safe-bottom: max(env(safe-area-inset-bottom), 16px);
    --safe-top: max(env(safe-area-inset-top), 0px);
    
    /* 浅色主题变量 */
    --bg-primary: #cccccc;
    --bg-secondary: #d9d9d9;
    --text-primary: #000000;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.03);
    --accent-color: #ec4899;
    --accent-light: rgba(236, 72, 153, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.65);
    
    /* 深色主题变量 */
    --dark-bg-primary: #0f172a;
    --dark-bg-secondary: #1e293b;
    --dark-text-primary: #f8fafc;
    --dark-text-secondary: #cbd5e1;
    --dark-text-tertiary: #94a3b8;
    --dark-border-color: rgba(255, 255, 255, 0.05);
    --dark-shadow-color: rgba(0, 0, 0, 0.1);
    --dark-accent-color: #ec4899;
    --dark-accent-light: rgba(236, 72, 153, 0.1);
    --dark-glass-bg: rgba(15, 23, 42, 0.65);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================================
   Glassmorphism Design System: 全局亚克力面板
   视觉规范：
   - blur: 12px
   - 亮色背景: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6))
   - 深色背景: linear-gradient(135deg, rgba(30,30,30,0.85), rgba(20,20,20,0.6))
   - 边框: rgba(255, 255, 255, 0.18) / rgba(255, 255, 255, 0.08)
   ========================================= */

:root {
    --acrylic-blur: 12px;
    --acrylic-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%);
    --acrylic-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 100%);
    --acrylic-border: rgba(255, 255, 255, 0.18);
    --acrylic-border-hover: rgba(255, 255, 255, 0.25);
    --acrylic-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --acrylic-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.18);
}

body.dark {
    --acrylic-bg: linear-gradient(135deg, rgba(30, 30, 30, 0.85) 0%, rgba(20, 20, 20, 0.6) 100%);
    --acrylic-bg-hover: linear-gradient(135deg, rgba(40, 40, 40, 0.92) 0%, rgba(30, 30, 30, 0.75) 100%);
    --acrylic-border: rgba(255, 255, 255, 0.08);
    --acrylic-border-hover: rgba(255, 255, 255, 0.12);
    --acrylic-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --acrylic-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.acrylic-panel {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
    will-change: transform, backdrop-filter;
    transform: translateZ(0);
    transition: background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.acrylic-panel:hover {
    background: var(--acrylic-bg-hover);
    border-color: var(--acrylic-border-hover);
    box-shadow: var(--acrylic-shadow-hover);
}

@media (prefers-reduced-transparency: reduce) {
    .acrylic-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgb(248, 249, 250) !important;
    }
    body.dark .acrylic-panel {
        background: rgb(33, 37, 41) !important;
    }
}

.glass-card {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
    border-radius: 16px;
    will-change: transform, backdrop-filter;
    transform: translateZ(0);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-card:hover {
    background: var(--acrylic-bg-hover);
    border-color: var(--acrylic-border-hover);
    box-shadow: var(--acrylic-shadow-hover);
}

.glass-card-pill {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
    border-radius: 9999px;
    will-change: transform, backdrop-filter;
    transform: translateZ(0);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.glass-card-pill:hover {
    background: var(--acrylic-bg-hover);
    border-color: var(--acrylic-border-hover);
    box-shadow: var(--acrylic-shadow-hover);
}

/* Logo下拉菜单样式 */
div#logo-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

div#logo-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

#logo-menu-arrow.rotated {
    transform: rotate(180deg);
}

#logo-menu button {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

#logo-menu button:last-child {
    border-bottom: none;
}

#logo-menu button:hover {
    color: var(--accent-color);
}

body.dark #logo-menu button {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border-color);
}

body.dark #logo-menu button:hover {
    color: var(--dark-accent-color);
}

/* 添加平滑过渡效果到所有文本颜色 */
.text-gray-400, .text-gray-500, .text-gray-600, .text-pink-600, .text-red-500, .text-green-500, .text-blue-500, .text-black, .text-white {
    transition: color 0.3s ease;
}

/* 添加平滑过渡效果到背景颜色 */
.bg-gray-50, .bg-gray-100, .bg-white, .bg-pink-100, .bg-pink-600 {
    transition: background-color 0.3s ease;
}

/* 添加平滑过渡效果到边框颜色 */
.border-gray-100, .border-gray-200, .border-pink-500\/50, .border-b {
    transition: border-color 0.3s ease;
}

/* 添加平滑过渡效果到图标颜色 */
i[class^="ri-"] {
    transition: color 0.3s ease;
}

/* 动画定义 */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes fadeInFromRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInFromLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes stepFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes stepFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInFromRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutToLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } }
@keyframes slideOutToRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes slideItemsLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes slideItemsRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes slideItemsInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideItemsInFromLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* 搜索结果卡片错开入场动画 */
@keyframes cardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 卡片入场动画类 - 支持交错延迟 */
.animate-card-in {
    opacity: 0;
    animation: cardFadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--card-delay, 0s);
}

/* 卡片入场动画类 - 交错延迟版本（使用 CSS 变量） */
.animate-card-in-staggered {
    opacity: 0;
    animation: cardFadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--card-delay, 0s);
}

/* 原地刷新动画 - 改进版：使用 opacity 渐变 + 轻微模糊效果 */
@keyframes refreshFadeOut {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes refreshFadeIn {
    from {
        opacity: 0;
        filter: blur(4px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* 排序/筛选按钮激活动画 */
@keyframes btnActivate {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* 骨架屏脉冲动画 - 更流畅的版本 */
@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
.animate-fade-out { animation: fadeOut 0.3s ease-out forwards; }
.animate-fade-in-right { animation: fadeInFromRight 0.4s ease-out forwards; }
.animate-fade-in-left { animation: fadeInFromLeft 0.4s ease-out forwards; }
.animate-step-fade-out { animation: stepFadeOut 0.3s ease-out forwards; }
.animate-step-fade-in { animation: stepFadeIn 0.3s ease-out forwards; }
.animate-slide-in-left { animation: slideInFromLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-slide-in-right { animation: slideInFromRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-slide-out-left { animation: slideOutToLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-slide-out-right { animation: slideOutToRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-items-slide-left { animation: slideItemsLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-items-slide-right { animation: slideItemsRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-items-in-from-right { animation: slideItemsInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-items-in-from-left { animation: slideItemsInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* 搜索结果卡片动画类 */
.animate-card-in {
    opacity: 0;
    animation: cardFadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 原地刷新动画类 */
.animate-refresh-out {
    animation: refreshFadeOut 0.25s ease-out forwards;
}

.animate-refresh-in {
    animation: refreshFadeIn 0.3s ease-out forwards;
}

/* 排序/筛选按钮样式 */
.sort-btn,
.filter-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 按钮点击波纹效果 */
.sort-btn::after,
.filter-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.sort-btn:active::after,
.filter-btn:active::after {
    width: 200%;
    height: 200%;
}

.sort-btn:hover,
.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

.sort-btn:active,
.filter-btn:active {
    animation: btnActivate 0.2s ease-out;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
}

.sort-btn.btn-clicking,
.filter-btn.btn-clicking,
.filter-btn-mobile.btn-clicking {
    animation: btnClickBounce 0.15s ease-out;
}

@keyframes btnClickBounce {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.sort-btn.bg-pink-600,
.filter-btn.bg-pink-600 {
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

/* 搜索骨架屏样式 */
.search-skeleton-card {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 16px;
    overflow: hidden;
}

.skeleton-image {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.05) 25%, 
        rgba(0, 0, 0, 0.08) 50%, 
        rgba(0, 0, 0, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

body.dark .skeleton-image {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
}

.skeleton-text {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.05) 25%, 
        rgba(0, 0, 0, 0.08) 50%, 
        rgba(0, 0, 0, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 9999px;
}

body.dark .skeleton-text {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
}

.skeleton-tag {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.05) 25%, 
        rgba(0, 0, 0, 0.08) 50%, 
        rgba(0, 0, 0, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 9999px;
    height: 20px;
    width: 50px;
}

body.dark .skeleton-tag {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
}

/* FLIP 动画支持 - 列表项过渡 */
.flip-container {
    position: relative;
}

.flip-item {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease-out;
}

.flip-item.flip-move {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.flip-item.flip-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.flip-item.flip-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.flip-item.flip-leave {
    opacity: 1;
    transform: scale(1);
}

.flip-item.flip-leave-active {
    opacity: 0;
    transform: scale(0.9);
    position: absolute;
    width: 100%;
}

/* 游戏卡片容器过渡支持 */
.game-cards-container .glass-card {
    --stagger-index: 0;
    transition: transform 0.3s ease,
                opacity 0.3s ease,
                box-shadow 0.3s ease;
    transition-delay: calc(var(--stagger-index) * 50ms);
    z-index: 1;
}

/* 卡片悬停增强 - 即时响应 */
.game-cards-container .glass-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(236, 72, 153, 0.2);
    z-index: 10;
    transition-delay: 0s !important;
}

body.dark .game-cards-container .glass-card:hover {
    box-shadow: 0 8px 30px rgba(236, 72, 153, 0.25);
}

/* 卡片初始隐藏状态 - 用于加载进入动效 */
.game-cards-container .glass-card.is-hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* 卡片加载完成状态 */
.game-cards-container .glass-card.is-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* 卡片退出状态 - 用于刷新退出动效 */
.game-cards-container .glass-card.is-exiting {
    opacity: 0;
    transform: translateY(-20px);
}

/* 页面切换容器样式 */
.page-transition-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-transition-old,
.page-transition-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 隐藏滚动条但允许滚动 */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 点击波纹/形变效果 */
.btn-active:active {
    transform: scale(0.96);
    transition: transform 0.1s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 禁用按钮样式 */
.btn-active:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

button:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* 底部导航栏点击反馈 */
.nav-item:active {
    transform: translateY(1px);
    transition: transform 0.1s;
}

/* 媒体滑动容器和项 (增强滑动反馈) */
.media-scroll-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.media-item {
    scroll-snap-align: center;
}

/* 深色模式样式 */
body.dark {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

body.dark .bg-gray-50 {
    background-color: var(--dark-bg-secondary);
}

body.dark .text-gray-400 {
    color: var(--dark-text-tertiary);
}

body.dark .text-gray-500 {
    color: var(--dark-text-secondary);
}

body.dark .text-gray-600 {
    color: var(--dark-text-primary);
}

body.dark .border-gray-100 {
    border-color: #334155;
}

body.dark .border-gray-200 {
    border-color: #475569;
}

body.dark .bg-white {
    background-color: var(--dark-bg-secondary);
}

body.dark input {
    color: var(--dark-text-primary);
}

body.dark input::placeholder {
    color: var(--dark-text-tertiary);
}

input {
    color: #1f2937;
}

input::placeholder {
    color: #9ca3af;
}

/* 移动端表单优化 - 防 iOS 自动放大 */
@media (pointer: coarse) {
    input,
    textarea,
    select {
        font-size: 16px !important;
        appearance: none;
        -webkit-appearance: none;
    }
}

body.dark .border-b {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--dark-bg-primary), rgba(15, 23, 42, 0.8), transparent);
}

body.dark .nav-item {
    color: rgba(248, 250, 252, 0.4);
}

body.dark .nav-item:hover {
    color: var(--dark-text-primary);
}

/* 游戏卡片标签深色模式样式 */
body.dark .text-pink-600 {
    color: var(--dark-accent-color);
}

body.dark .bg-pink-50\/50 {
    background-color: var(--dark-accent-light);
}

body.dark .border-pink-500\/50 {
    border-color: rgba(236, 72, 153, 0.3);
}

/* 功能图标深色模式样式 */
body.dark i[class^="ri-"] {
    color: var(--dark-text-secondary);
}

body.dark .nav-item i[class^="ri-"] {
    color: rgba(248, 250, 252, 0.4);
}

body.dark .nav-item:hover i[class^="ri-"] {
    color: var(--dark-text-primary);
}

body.dark .text-gray-300 {
    color: var(--dark-text-tertiary);
}

body.dark .bg-pink-600 {
    background-color: #db2777;
}

body.dark .bg-pink-100 {
    background-color: rgba(219, 39, 119, 0.1);
}

body.dark .border-b-\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

/* detail页面样式优化 */
body.dark .bg-gray-100 {
    background-color: #334155;
}

body.dark .border-dashed {
    border-style: dashed;
}

body.dark .border-gray-200 {
    border-color: #475569;
}

body.dark .text-black {
    color: var(--dark-text-primary);
}

body.dark .text-red-500 {
    color: #f87171;
}

body.dark .text-green-500 {
    color: #34d399;
}

body.dark .text-blue-500 {
    color: #60a5fa;
}

body.dark .shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 首页最新推荐标签 */
body.dark .text-gray-500 {
    color: var(--dark-text-secondary);
}

/* 导航栏文字颜色修复 */
body.dark .text-black\/40 {
    color: rgba(248, 250, 252, 0.4);
}

body.dark .hover\:text-black:hover {
    color: var(--dark-text-primary);
}

body.dark .\!text-black {
    color: var(--dark-text-primary) !important;
}

/* 导航项激活状态样式 - 统一粉色 */
.nav-item.active {
    color: var(--accent-color) !important;
}

.nav-item.active i[class^="ri-"] {
    color: var(--accent-color) !important;
}

body.dark .nav-item.active {
    color: var(--dark-accent-color) !important;
}

body.dark .nav-item.active i[class^="ri-"] {
    color: var(--dark-accent-color) !important;
}

/* 响应式游戏卡片布局 */
.game-cards-container {
    display: grid;
    gap: 1.5rem;
}

/* 手机端 - 每行1列 */
@media (max-width: 640px) {
    .game-cards-container {
        grid-template-columns: 1fr;
    }
    /* 手机横屏 - 每行2列 */
    @media (orientation: landscape) {
        .game-cards-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
}

/* 平板端 - 每行2列 */
@media (min-width: 641px) and (max-width: 1023px) {
    .game-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 平板横屏 - 每行3列 */
    @media (orientation: landscape) {
        .game-cards-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* 桌面端 - 每行3列 */
@media (min-width: 1024px) {
    .game-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏幕桌面端 - 每行4列 */
@media (min-width: 1400px) {
    .game-cards-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 响应式登录卡片样式 - 类似微软登录界面 */
.responsive-card {
    /* 固定卡片大小，避免交互时变化 */
    width: 95vw;
    max-width: 400px;
    /* 居中显示 */
    margin: 0 auto;
    /* 增加内边距以适应不同屏幕 */
    padding: clamp(2rem, 7vw, 3rem);
    /* 固定最小高度，确保内容有足够空间 */
    min-height: 500px;
    box-sizing: border-box;
}

/* 更宽的引力搜索卡片样式 - 与注册登录卡片保持一致 */
.wide-card {
    /* 固定卡片大小，避免交互时变化 */
    width: 95vw;
    max-width: 400px;
    /* 居中显示 */
    margin: 0 auto;
    /* 增加内边距以适应不同屏幕 */
    padding: clamp(2rem, 7vw, 3rem);
    /* 固定最小高度，确保内容有足够空间 */
    min-height: 500px;
    box-sizing: border-box;
}

/* 响应式分类卡片布局 - 与首页游戏卡片一致 */
.category-cards-container {
    display: grid;
    gap: 1.5rem;
}

/* 手机端 - 每行1列 */
@media (max-width: 640px) {
    .category-cards-container {
        grid-template-columns: 1fr;
    }
    /* 手机横屏 - 每行2列 */
    @media (orientation: landscape) {
        .category-cards-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
}

/* 平板端 - 每行2列 */
@media (min-width: 641px) and (max-width: 1023px) {
    .category-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 平板横屏 - 每行3列 */
    @media (orientation: landscape) {
        .category-cards-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* 桌面端 - 每行3列 */
@media (min-width: 1024px) {
    .category-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏幕桌面端 - 每行4列 */
@media (min-width: 1400px) {
    .category-cards-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 分类卡片交互效果 */
.category-cards-container .glass-card {
    -webkit-tap-highlight-color: transparent;
}

.category-cards-container .glass-card:hover {
    background-color: rgba(236, 72, 153, 0.05);
}

.category-cards-container .glass-card:active {
    background-color: rgba(236, 72, 153, 0.1);
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* 确保在小屏幕上也有合适的最小尺寸 */
@media (max-width: 480px) {
    .responsive-card,
    .wide-card {
        width: 95vw;
        max-width: none;
        padding: clamp(1.5rem, 5vw, 2rem);
    }
}

/* 简化的Flexbox父容器居中 */
.flex.flex-col.items-center.justify-center {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 登录和引力搜索页面的父容器 - 向下偏移 */
.auth-page-container {
    width: 100%;
    padding: 0 1rem;
    padding-top: 4rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 5rem);
}

/* 统一的卡片居中样式 */
.wide-card,
.responsive-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: clamp(2rem, 7vw, 3rem);
    min-height: 500px;
    box-sizing: border-box;
    display: block;
}

/* 搜索联想结果样式 */
#search-suggestions {
    max-height: 425px; /* 增加高度，确保显示分页按钮 */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 40px;
}

/* 联想项容器 - 用于左右滑动动画 */
.suggestions-items-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}




/* 确保搜索框位置稳定，联想栏与搜索栏保持适当间距 */
#search-suggestions {
    margin-top: 0.5rem;
    left: 0;
    right: 0;
    position: absolute;
    transform: none !important;
}

/* 分页按钮样式优化 */
.pagination-btn {
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
}

.pagination-btn:hover {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.pagination-btn:active {
    transform: translateY(0);
}

/* 确保搜索框容器尺寸稳定 */
.relative.w-full.max-w-2xl.mx-auto {
    height: auto;
    min-height: 48px;
}

/* 确保搜索框本身尺寸稳定 */
.flex.items-center.rounded-full.px-4.py-2.w-full.glass-card.shadow-sm {
    height: auto;
    min-height: 40px;
}

/* 搜索栏样式 - 亚克力质感与微交互 */
#desktop-search-container {
    width: 100%;
    max-width: 380px;
}

#desktop-search-bar {
    transition: background 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    opacity: 1;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
    will-change: transform, backdrop-filter;
    transform: translateZ(0);
}

#desktop-search-bar:hover {
    background: var(--acrylic-bg-hover);
    border-color: var(--acrylic-border-hover);
    box-shadow: var(--acrylic-shadow-hover);
}

#desktop-search-bar:focus-within {
    border-color: rgba(236, 72, 153, 0.3);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 顶部导航栏安全区适配 */
header.fixed.top-0 {
    padding-top: max(env(safe-area-inset-top), 12px);
}

/* 输入框包裹层 - 承载底部横线与 Focus-within 侦测 */
.search-input-wrapper {
    position: relative;
    flex: 1;
    height: 40px;
    display: flex;
}

/* 底部横线 - 初始状态 (宽度缩放为0) */
.search-input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    width: calc(100% - 32px);
    height: 2px;
    background: #FE007F;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
    border-radius: 2px;
    pointer-events: none;
}

/* 焦点激活时横线展开 */
.search-input-wrapper:focus-within::after {
    transform: scaleX(1);
    transform-origin: left;
}

#header-search {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    outline: none;
    border: none;
    border-radius: 9999px;
    font-size: 16px;
    color: #6b7280;
    background: transparent;
    transition: background-color 0.3s ease;
}

#header-search::placeholder {
    color: #9ca3af;
}

#header-search:focus {
    background: #e3e5e7;
}

#header-search-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 9999px;
    transition: background 0.3s ease;
}

#header-search-btn:hover {
    background: #e3e5e7;
}

body.dark #header-search {
    color: #9ca3af;
}

body.dark #header-search::placeholder {
    color: #6b7280;
}

body.dark #header-search:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark .search-input-wrapper::after {
    background: #9A1238;
}

/* 搜索栏清除按钮样式 */
#header-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#header-search::-webkit-search-cancel-button:hover {
    opacity: 0.8;
}

body.dark #header-search::-webkit-search-cancel-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
    opacity: 0.6;
}

body.dark #header-search::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* A11y 无障碍降级 - 减弱动态效果 */
@media (prefers-reduced-motion: reduce) {
    #desktop-search-bar,
    #header-search,
    .search-input-wrapper::after {
        transition: none !important;
    }
}

/* ============================================
   表单输入框 Focus 动画
   ============================================ */

.form-input-wrapper {
    position: relative;
    width: 100%;
}

.form-input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #FE007F;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}

.form-input-wrapper:focus-within::after {
    transform: scaleX(1);
    transform-origin: left;
}

.form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    outline: none;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    border-bottom-color: transparent;
}

body.dark .form-input {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark .form-input-wrapper::after {
    background: #9A1238;
}

@media (prefers-reduced-motion: reduce) {
    .form-input-wrapper::after {
        transition: none !important;
    }
}

/* 悬浮长条全圆角docker栏样式 */
nav.fixed.bottom-4.left-1\/2.transform.-translate-x-1\/2 {
    width: min(600px, 95vw);
    margin: 0 auto;
    border: 1px solid var(--acrylic-border);
    box-shadow: var(--acrylic-shadow);
    padding-bottom: var(--safe-bottom);
}

/* 响应式调整docker栏高度和内边距 */
@media (max-width: 640px) {
    nav.fixed.bottom-4.left-1\/2.transform.-translate-x-1\/2 {
        height: 56px;
        padding: 0 1rem;
        padding-bottom: var(--safe-bottom);
    }
}

/* 桌面端调整 */
@media (min-width: 1024px) {
    nav.fixed.bottom-4.left-1\/2.transform.-translate-x-1\/2 {
        width: min(600px, 50vw);
    }
}

/* 搜索结果项样式 */
.search-suggestion-item {
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
}

/* 移除单个项的伪元素竖条 */
.search-suggestion-item::before {
    display: none;
}

.search-suggestion-item:hover {
    background-color: transparent;
}

/* 选中状态样式 */
.search-suggestion-item.bg-pink-50,
.search-suggestion-item.bg-pink-900\/30 {
    background-color: transparent !important;
}

.search-suggestion-item.bg-pink-50 span,
.search-suggestion-item.bg-pink-900\/30 span {
    transform: translateY(-2px) scale(1.05);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    display: inline;
}

/* 粉色半透明荧光笔效果 */
.search-suggestion-item.bg-pink-50 span::after,
.search-suggestion-item.bg-pink-900\/30 span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 50%;
    background-color: rgba(255, 0, 128, 0.7);
    z-index: -1;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

/* 密码输入框实心圆样式 */
input[type="password"] {
    -webkit-text-security: disc;
    text-security: disc;
}

/* 深色模式下的荧光笔效果 */
body.dark .search-suggestion-item.bg-pink-900\/30 span::after {
    background-color: rgba(255, 105, 180, 0.8);
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.6);
}

/* 深色模式下的搜索结果样式 */
body.dark .search-suggestion-item:hover {
    background-color: transparent;
}

body.dark .search-suggestion-item {
    color: var(--dark-text-primary);
}



/* 滚动条样式 */
#search-suggestions::-webkit-scrollbar {
    width: 6px;
}

#search-suggestions::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

#search-suggestions::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

body.dark #search-suggestions::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark #search-suggestions::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* 加载状态样式 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 骨架屏样式 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* 骨架屏 shimmer 动画 - 优化版：更流畅的光影效果 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 骨架屏脉冲动画 - 交错版本 */
@keyframes skeletonPulseWave {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* 骨架屏元素 - 默认使用 shimmer */
.skeleton-shimmer {
    animation: shimmer 1.8s ease-in-out infinite;
}

/* 骨架屏元素 - 脉冲版本 */
.skeleton-pulse {
    animation: skeletonPulseWave 1.5s ease-in-out infinite;
}

/* 骨架屏交错延迟 - 制造波浪效果 */
.skeleton-delay-1 { animation-delay: 0.1s; }
.skeleton-delay-2 { animation-delay: 0.2s; }
.skeleton-delay-3 { animation-delay: 0.3s; }
.skeleton-delay-4 { animation-delay: 0.4s; }

.lazy-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    transition: opacity 0.3s ease-out, transform 0.7s ease-out;
}

.lazy-image.img-loaded {
    animation: none;
    background: transparent;
}

.lazy-image.img-error {
    animation: none;
    background: #f5f5f5;
}

.video-placeholder {
    position: relative;
    background: linear-gradient(90deg, #e5e5e5 25%, #d5d5d5 50%, #e5e5e5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
}

/* 通知提示样式 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
}

.notification.success {
    background-color: #10b981;
}

.notification.error {
    background-color: #ef4444;
}

.notification.info {
    background-color: #3b82f6;
}

.notification.warning {
    background-color: #f59e0b;
}

/* 手势支持 */
@media (pointer: coarse) {
    .nav-item {
        min-width: 44px;
        min-height: 44px;
    }
    
    button {
        min-width: 44px;
        min-height: 44px;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        min-height: 44px;
    }
}

/* ============================================
   响应式 Header 搜索栏适配
   基于 DPI 和可用宽度动态切换搜索栏/搜索按钮
   ============================================ */

:root {
    --header-height: 64px;
    --logo-btn-width: 120px;
    --left-padding: 40px;
    --right-min-padding: 40px;
    --search-min-width: 280px;
    --search-max-width: 672px;
    --min-gap-width: 20px;
}

#desktop-search-container.hidden-mobile {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

#desktop-search-container.slide-down {
    animation: slideDown 0.3s ease-out;
}

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

#mobile-search-btn {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

#mobile-search-btn.mobile-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#mobile-search-btn.mobile-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#mobile-search-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overscroll-behavior-y: contain;
}

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

#mobile-search-panel {
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-search-overlay.show #mobile-search-panel {
    transform: translateY(0);
}

#search-suggestions {
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 768px) {
    #search-suggestions {
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 20px;
    }
}

#mobile-search-suggestions {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#mobile-search-suggestions::-webkit-scrollbar {
    display: none;
}

.mobile-search-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 12px;
}

.mobile-search-item:hover {
    background-color: rgba(236, 72, 153, 0.1);
}

.mobile-search-item:active {
    background-color: rgba(236, 72, 153, 0.2);
}

body.dark .mobile-search-item:hover {
    background-color: rgba(236, 72, 153, 0.15);
}

body.dark .mobile-search-item:active {
    background-color: rgba(236, 72, 153, 0.25);
}

/* 移动端搜索输入框焦点效果 */
#mobile-search-input:focus {
    box-shadow: inset 0 -50% 0 rgba(255, 0, 128, 0.3);
    transition: all 0.3s ease;
}

body.dark #mobile-search-input:focus {
    box-shadow: inset 0 -50% 0 rgba(255, 105, 180, 0.4);
}

/* 响应式断点 - 使用 CSS 变量便于 JS 动态计算 */
@media (max-width: 480px) {
    #logo-container .glass-card-pill {
        padding-left: 12px;
        padding-right: 12px;
    }

    #logo-container h1 {
        font-size: 14px;
    }

    #logo-container .ri-arrow-down-s-line {
        display: none;
    }
}

/* ============================================
   搜索页面全新 UI 样式
   ============================================ */

/* 搜索头部容器 */
.search-header {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.search-keyword {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

body.dark .search-label {
    color: var(--dark-text-secondary);
}

.search-term {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent-color);
}

body.dark .search-term {
    color: var(--dark-accent-color);
}

.search-count {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.count-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

body.dark .count-number {
    color: var(--dark-accent-color);
}

.count-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

body.dark .count-text {
    color: var(--dark-text-secondary);
}

/* 筛选器容器 */
.search-filters {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.desktop-filters {
    display: flex;
    flex-direction: column;
}

.mobile-filters {
    display: none;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 40px;
}

body.dark .filter-label {
    color: var(--dark-text-secondary);
}

.filter-label i {
    font-size: 1rem;
    color: var(--accent-color);
}

body.dark .filter-label i {
    color: var(--dark-accent-color);
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* 排序/筛选按钮新样式 */
.sort-btn,
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

body.dark .sort-btn,
body.dark .filter-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.sort-btn:hover,
.filter-btn:hover:not(.disabled) {
    background: rgba(236, 72, 153, 0.15);
    color: var(--accent-color);
    transform: translateY(-1px);
}

body.dark .sort-btn:hover,
body.dark .filter-btn:hover:not(.disabled) {
    background: rgba(236, 72, 153, 0.2);
    color: var(--dark-accent-color);
}

.sort-btn.active,
.filter-btn.active {
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

body.dark .sort-btn.active,
body.dark .filter-btn.active {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.sort-btn:active,
.filter-btn:active:not(.disabled) {
    transform: scale(0.95);
}

.sort-btn.disabled,
.filter-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.sort-btn i,
.filter-btn i {
    font-size: 0.875rem;
}

/* 激活状态时的图标颜色 */
.sort-btn.active i,
.filter-btn.active i {
    color: white;
}

/* 移动端筛选按钮 */
.filter-btn-mobile {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

body.dark .filter-btn-mobile {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.filter-btn-mobile:hover:not(.disabled) {
    background: rgba(236, 72, 153, 0.15);
    color: var(--accent-color);
}

body.dark .filter-btn-mobile:hover:not(.disabled) {
    background: rgba(236, 72, 153, 0.2);
    color: var(--dark-accent-color);
}

.filter-btn-mobile.active {
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

body.dark .filter-btn-mobile.active {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

/* 移动端折叠筛选器 */
.filter-group-collapsible {
    position: relative;
}

.filter-expand-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

body.dark .filter-expand-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.filter-expand-btn:hover {
    background: rgba(236, 72, 153, 0.15);
    color: var(--accent-color);
}

body.dark .filter-expand-btn:hover {
    background: rgba(236, 72, 153, 0.2);
    color: var(--dark-accent-color);
}

.filter-expand-btn .filter-label {
    margin: 0;
}

.expand-icon {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.filter-expand-btn[aria-expanded="true"] .expand-icon {
    transform: rotate(180deg);
}

.filter-badge {
    background: var(--accent-color);
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    margin-left: 0.25rem;
}

body.dark .filter-badge {
    background: var(--dark-accent-color);
}

.filter-buttons-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 12px;
    padding: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 50;
    box-shadow: var(--acrylic-shadow);
    margin-top: 0.5rem;
}

.filter-group-collapsible.expanded .filter-buttons-mobile {
    display: flex;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .desktop-filters {
        display: none;
    }

    .mobile-filters {
        display: flex;
    }
}

/* ============================================
   空状态页面样式
   ============================================ */
.empty-state {
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);
}

body.dark .icon-circle {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
}

.icon-circle i {
    font-size: 1.75rem;
    color: white;
}

.icon-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    animation: iconRingPulse 2s ease-out infinite;
}

body.dark .icon-ring {
    border-color: var(--dark-accent-color);
}

.icon-ring.delay-1 {
    animation-delay: 0.5s;
}

.icon-ring.delay-2 {
    animation-delay: 1s;
}

@keyframes iconRingPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.empty-state-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body.dark .empty-state-title {
    color: var(--dark-text-primary);
}

.empty-state-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

body.dark .empty-state-desc {
    color: var(--dark-text-secondary);
}

.empty-state-tips {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    padding: 0.5rem 1rem;
    background: rgba(107, 114, 128, 0.08);
    border-radius: 9999px;
}

body.dark .tip-item {
    color: var(--dark-text-tertiary);
    background: rgba(255, 255, 255, 0.05);
}

.tip-item i {
    color: var(--accent-color);
}

body.dark .tip-item i {
    color: var(--dark-accent-color);
}

/* ============================================
   无结果页面样式
   ============================================ */
.no-results-state {
    padding: 3rem 2rem;
    text-align: center;
}

.no-results-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(107, 114, 128, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

body.dark .icon-wrapper {
    background: rgba(255, 255, 255, 0.08);
}

.icon-wrapper i {
    font-size: 2rem;
    color: var(--text-tertiary);
}

body.dark .icon-wrapper i {
    color: var(--dark-text-tertiary);
}

.searching-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
}

.searching-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: searchingDot 1.4s ease-in-out infinite;
}

body.dark .searching-dots span {
    background: var(--dark-accent-color);
}

.searching-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.searching-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes searchingDot {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.no-results-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body.dark .no-results-title {
    color: var(--dark-text-primary);
}

.no-results-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

body.dark .no-results-desc {
    color: var(--dark-text-secondary);
}

.keyword-highlight {
    color: var(--accent-color);
    font-weight: 600;
}

body.dark .keyword-highlight {
    color: var(--dark-accent-color);
}

.no-results-suggestions {
    background: rgba(107, 114, 128, 0.05);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.dark .no-results-suggestions {
    background: rgba(255, 255, 255, 0.03);
}

.suggestions-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

body.dark .suggestions-title {
    color: var(--dark-text-secondary);
}

.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.suggestions-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

body.dark .suggestions-list li {
    color: var(--dark-text-tertiary);
}

.suggestions-list li i {
    font-size: 0.5rem;
    color: var(--accent-color);
}

body.dark .suggestions-list li i {
    color: var(--dark-accent-color);
}

.no-results-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-clear-filters,
.btn-browse-categories {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-clear-filters {
    background: rgba(236, 72, 153, 0.1);
    color: var(--accent-color);
}

body.dark .btn-clear-filters {
    background: rgba(236, 72, 153, 0.15);
    color: var(--dark-accent-color);
}

.btn-clear-filters:hover {
    background: rgba(236, 72, 153, 0.2);
    transform: translateY(-2px);
}

body.dark .btn-clear-filters:hover {
    background: rgba(236, 72, 153, 0.25);
}

.btn-browse-categories {
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

body.dark .btn-browse-categories {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.btn-browse-categories:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

body.dark .btn-back-home {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.btn-back-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

/* ============================================
   网络异常页面样式
   ============================================ */
.network-error-state {
    padding: 3rem 2rem;
    text-align: center;
}

.error-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

body.dark .error-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}

.error-icon i {
    font-size: 2rem;
    color: white;
}

.error-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.3);
    transform: translate(-50%, -50%);
    animation: errorPulse 2s ease-out infinite;
}

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

.error-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body.dark .error-title {
    color: var(--dark-text-primary);
}

.error-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

body.dark .error-desc {
    color: var(--dark-text-secondary);
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.btn-retry,
.btn-reload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-retry {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.btn-reload {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

body.dark .btn-reload {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.btn-reload:hover {
    background: rgba(107, 114, 128, 0.15);
    transform: translateY(-2px);
}

body.dark .btn-reload:hover {
    background: rgba(255, 255, 255, 0.12);
}

.error-tips {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

body.dark .error-tips {
    color: var(--dark-text-tertiary);
}

.error-tips i {
    color: #3b82f6;
    margin-right: 0.375rem;
}

/* ============================================
   搜索骨架屏样式
   ============================================ */
.search-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.skeleton-header {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-keyword {
    height: 24px;
    width: 180px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

body.dark .skeleton-keyword {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
}

.skeleton-count {
    height: 32px;
    width: 60px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

body.dark .skeleton-count {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
}

.skeleton-filters {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.skeleton-label {
    height: 16px;
    width: 40px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

body.dark .skeleton-label {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

.skeleton-buttons {
    display: flex;
    gap: 0.5rem;
}

.skeleton-btn {
    height: 32px;
    width: 60px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 9999px;
}

body.dark .skeleton-btn {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

.skeleton-cards-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
    .skeleton-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .skeleton-cards-grid {
        grid-template-columns: 1fr;
    }
}

.skeleton-card {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    animation: skeletonCardFadeIn 0.5s ease-out forwards;
}

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

.skeleton-image-wrapper {
    height: 160px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

body.dark .skeleton-image-wrapper {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
}

.skeleton-content {
    padding: 1rem;
}

.skeleton-title {
    height: 20px;
    width: 70%;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

body.dark .skeleton-title {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
}

.skeleton-tags {
    display: flex;
    gap: 0.5rem;
}

.skeleton-tag {
    height: 20px;
    width: 50px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 9999px;
}

body.dark .skeleton-tag {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

/* ============================================
   正倒序切换按钮样式
   ============================================ */

/* 按钮容器 - 行内排列，与排序按钮保持间距 */
.order-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(107, 114, 128, 0.08);
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

body.dark .order-toggle-group {
    background: rgba(255, 255, 255, 0.08);
}

/* 按钮基础样式 */
.order-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1rem;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

body.dark .order-toggle-btn {
    color: var(--dark-text-secondary);
}

/* 按钮点击波纹效果 */
.order-toggle-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.order-toggle-btn:active::after {
    width: 200%;
    height: 200%;
}

/* 悬停状态 */
.order-toggle-btn:hover:not(:disabled) {
    background: rgba(236, 72, 153, 0.15);
    color: var(--accent-color);
    transform: scale(1.05);
}

body.dark .order-toggle-btn:hover:not(:disabled) {
    background: rgba(236, 72, 153, 0.2);
    color: var(--dark-accent-color);
}

/* 激活状态 */
.order-toggle-btn.active {
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

body.dark .order-toggle-btn.active {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

/* 激活状态时图标旋转动画 */
.order-toggle-btn.active i {
    animation: orderIconBounce 0.3s ease-out;
}

@keyframes orderIconBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 禁用状态 */
.order-toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.order-toggle-btn:disabled:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
}

/* 按钮点击反馈 */
.order-toggle-btn:active:not(:disabled) {
    transform: scale(0.92);
    animation: btnActivate 0.2s ease-out;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .order-toggle-group {
        gap: 0.125rem;
        padding: 0.25rem;
    }

    .order-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }
}

/* 确保与排序按钮的视觉一致性 - 当排序按钮激活时，正倒序按钮也保持一致间距 */
.filter-group .order-toggle-group {
    margin-left: 0.5rem;
}

/* 触摸设备优化 */
@media (pointer: coarse) {
    .order-toggle-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

/* ============================================
   正倒序切换按钮增强动效
   ============================================ */

/* 按钮状态切换 - 平滑过渡 */
.order-toggle-btn {
    transition: 
        background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 改进的点击反馈动画 - 带有缩放和波纹组合效果 */
.order-toggle-btn.clicked {
    animation: btnClickFeedback 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes btnClickFeedback {
    0% { transform: scale(1); }
    30% { transform: scale(0.88); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 波纹效果增强 */
.order-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: none;
}

.order-toggle-btn.clicked::before {
    animation: rippleEffect 0.4s ease-out;
}

@keyframes rippleEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

/* 增强的图标弹跳+旋转效果 */
.order-toggle-btn.active i {
    animation: orderIconBounceRotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes orderIconBounceRotate {
    0% { 
        transform: scale(1) rotate(0deg); 
    }
    30% { 
        transform: scale(0.8) rotate(-10deg); 
    }
    50% { 
        transform: scale(1.2) rotate(10deg); 
    }
    70% { 
        transform: scale(0.95) rotate(-5deg); 
    }
    100% { 
        transform: scale(1) rotate(0deg); 
    }
}

/* 状态切换过渡 - 背景和颜色的平滑过渡 */
.order-toggle-btn {
    transition: 
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

/* 非激活状态到激活状态的过渡 */
.order-toggle-btn:not(.active) {
    transition: 
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s ease,
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   列表重新排序过渡动画
   ============================================ */

/* 游戏卡片容器排序过渡支持 */
.game-cards-container.reordering .glass-card {
    transition: 
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease-out;
}

/* 卡片位置变化时的过渡 */
.game-cards-container .glass-card.reorder-item {
    transition: 
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease-out,
        box-shadow 0.3s ease;
}

/* 卡片入场动画（重新排序后） */
.game-cards-container .glass-card.reorder-enter {
    opacity: 0;
    transform: translateY(-15px) scale(0.95);
}

.game-cards-container .glass-card.reorder-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 卡片离场动画 */
.game-cards-container .glass-card.reorder-leave {
    opacity: 1;
    transform: scale(1);
}

.game-cards-container .glass-card.reorder-leave-active {
    opacity: 0;
    transform: scale(0.9);
    transition: 
        opacity 0.3s ease-out,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
}

/* 卡片移动中的视觉效果 */
.game-cards-container .glass-card.moving {
    z-index: 10;
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.25);
}

body.dark .game-cards-container .glass-card.moving {
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.35);
}

/* 排序切换时的整体容器动画 */
.game-cards-container.order-animating {
    overflow: hidden;
}

/* 列表项交错入场动画 - 配合正倒序切换 */
@keyframes reorderStaggerIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.game-cards-container.reordering .glass-card {
    animation: reorderStaggerIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

/* 偶数项延迟入场 */
.game-cards-container.reordering .glass-card:nth-child(even) {
    animation-delay: 0.05s;
}

/* 奇数项更早入场 */
.game-cards-container.reordering .glass-card:nth-child(odd) {
    animation-delay: 0s;
}

/* 深色模式适配 - 动效变量覆盖 */
body.dark .order-toggle-btn.clicked::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

body.dark .game-cards-container .glass-card.reorder-enter {
    transform: translateY(-15px) scale(0.95);
}

/* 性能优化 - 使用 transform 和 opacity */
.order-toggle-btn,
.order-toggle-btn i,
.game-cards-container .glass-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .order-toggle-btn,
    .order-toggle-btn i,
    .order-toggle-btn.clicked,
    .order-toggle-btn.clicked::before,
    .order-toggle-btn.active i,
    .game-cards-container .glass-card,
    .game-cards-container.reordering .glass-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================
   搜索页局部刷新 - CSS 样式引擎层
   ============================================ */

/* --- 动效参数 CSS 变量 --- */
:root {
    /* 动效时长 */
    --refresh-duration: 300ms;
    /* 缓动函数 */
    --refresh-easing: ease-out;
    /* 基础交错延迟 */
    --refresh-stagger-base: 50ms;
    /* 最大交错延迟（前 15 个卡片） */
    --refresh-stagger-max: 750ms;
}

/* --- 卡片离开动效（淡出+上移）--- */
.is-leaving {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    animation: none !important;
    transition: opacity var(--refresh-duration) var(--refresh-easing) !important, transform var(--refresh-duration) var(--refresh-easing) !important;
    transition-delay: var(--delay, 0ms) !important;
    pointer-events: none;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* --- 卡片载入动效（淡入+上移）--- */
.is-entering {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    animation: none !important;
    transition: opacity var(--refresh-duration) var(--refresh-easing) !important, transform var(--refresh-duration) var(--refresh-easing) !important;
    transition-delay: var(--delay, 0ms) !important;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* 卡片入场完成状态 */
.is-entering.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- 交错延迟 CSS 变量生成类 --- */
/* 前 15 个卡片的交错延迟，每张卡片 50ms */
.stagger-delay-1 { --delay: 50ms; }
.stagger-delay-2 { --delay: 100ms; }
.stagger-delay-3 { --delay: 150ms; }
.stagger-delay-4 { --delay: 200ms; }
.stagger-delay-5 { --delay: 250ms; }
.stagger-delay-6 { --delay: 300ms; }
.stagger-delay-7 { --delay: 350ms; }
.stagger-delay-8 { --delay: 400ms; }
.stagger-delay-9 { --delay: 450ms; }
.stagger-delay-10 { --delay: 500ms; }
.stagger-delay-11 { --delay: 550ms; }
.stagger-delay-12 { --delay: 600ms; }
.stagger-delay-13 { --delay: 650ms; }
.stagger-delay-14 { --delay: 700ms; }
.stagger-delay-15 { --delay: 750ms; }

/* 第 16 个及以后的卡片使用最大延迟（同时出现） */
.stagger-delay-default { --delay: 750ms; }

/* --- 卡片容器刷新状态 --- */
.cards-container-refreshing {
    min-height: 200px;
    position: relative;
}

/* 刷新时的容器过渡 */
.cards-container-refreshing .glass-card {
    transition: 
        opacity var(--refresh-duration) var(--refresh-easing),
        transform var(--refresh-duration) var(--refresh-easing);
}

/* ============================================
   加载骨架屏样式 - 增强版
   ============================================ */

/* 骨架屏容器 */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 骨架屏卡片 - 带交错入场 */
.skeleton-card-item {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
    border: 1px solid var(--acrylic-border);
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    animation: skeletonEnter 0.4s var(--refresh-easing) forwards;
    animation-delay: var(--delay, 0ms);
}

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

/* 骨架屏闪烁动画 - 改进版 */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 骨架屏脉冲动画 */
@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* 骨架屏元素基础样式 */
.skeleton-element {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 25%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.08) 75%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
    border-radius: 6px;
}

body.dark .skeleton-element {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
}

/* 骨架屏图片区域 */
.skeleton-image-area {
    height: 160px;
    width: 100%;
    border-radius: 0;
}

/* 骨架屏内容区域 */
.skeleton-content-area {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 骨架屏标题 */
.skeleton-title-line {
    height: 18px;
    width: 75%;
}

/* 骨架屏副标题 */
.skeleton-subtitle-line {
    height: 14px;
    width: 50%;
}

/* 骨架屏标签组 */
.skeleton-tags-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* 骨架屏标签 */
.skeleton-tag-item {
    height: 20px;
    width: 50px;
    border-radius: 9999px;
}

/* 骨架屏元信息 */
.skeleton-meta-line {
    height: 12px;
    width: 100px;
}

/* 骨架屏加载指示器 */
.skeleton-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

body.dark .skeleton-loading-indicator {
    color: var(--dark-text-tertiary);
}

.skeleton-loading-indicator i {
    animation: spin 1s linear infinite;
    color: var(--accent-color);
}

body.dark .skeleton-loading-indicator i {
    color: var(--dark-accent-color);
}

/* ============================================
   空状态缺省页样式 - 增强版
   ============================================ */

/* 空状态容器 */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
    animation: emptyStateEnter 0.5s var(--refresh-easing);
}

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

/* 空状态图标容器 */
.empty-state-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
}

/* 空状态主图标 */
.empty-state-main-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.3);
    z-index: 2;
}

body.dark .empty-state-main-icon {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.4);
}

.empty-state-main-icon i {
    font-size: 2rem;
    color: white;
}

/* 空状态装饰环 */
.empty-state-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    animation: emptyStateRingPulse 2.5s ease-out infinite;
}

body.dark .empty-state-ring {
    border-color: var(--dark-accent-color);
}

.empty-state-ring.ring-1 {
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.empty-state-ring.ring-2 {
    width: 100px;
    height: 100px;
    animation-delay: 0.5s;
}

.empty-state-ring.ring-3 {
    width: 120px;
    height: 120px;
    animation-delay: 1s;
}

@keyframes emptyStateRingPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* 空状态标题 */
.empty-state-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

body.dark .empty-state-heading {
    color: var(--dark-text-primary);
}

/* 空状态描述 */
.empty-state-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 320px;
    line-height: 1.6;
}

body.dark .empty-state-description {
    color: var(--dark-text-secondary);
}

/* 空状态关键词高亮 */
.empty-state-keyword {
    color: var(--accent-color);
    font-weight: 600;
}

body.dark .empty-state-keyword {
    color: var(--dark-accent-color);
}

/* 空状态建议列表 */
.empty-state-suggestions {
    background: rgba(107, 114, 128, 0.05);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
    width: 100%;
    max-width: 360px;
}

body.dark .empty-state-suggestions {
    background: rgba(255, 255, 255, 0.03);
}

.empty-state-suggestions-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.dark .empty-state-suggestions-title {
    color: var(--dark-text-secondary);
}

.empty-state-suggestions-title i {
    color: var(--accent-color);
    font-size: 1rem;
}

body.dark .empty-state-suggestions-title i {
    color: var(--dark-accent-color);
}

.empty-state-suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.empty-state-suggestions-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

body.dark .empty-state-suggestions-list li {
    color: var(--dark-text-tertiary);
}

.empty-state-suggestions-list li i {
    font-size: 0.375rem;
    color: var(--accent-color);
    margin-top: 0.375rem;
    flex-shrink: 0;
}

body.dark .empty-state-suggestions-list li i {
    color: var(--dark-accent-color);
}

/* 空状态操作按钮组 */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* 空状态按钮 - 主要 */
.empty-state-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--accent-color), #db2777);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

body.dark .empty-state-btn-primary {
    background: linear-gradient(135deg, var(--dark-accent-color), #be185d);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.empty-state-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}

.empty-state-btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* 空状态按钮 - 次要 */
.empty-state-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark .empty-state-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.empty-state-btn-secondary:hover {
    background: rgba(236, 72, 153, 0.15);
    color: var(--accent-color);
    transform: translateY(-2px);
}

body.dark .empty-state-btn-secondary:hover {
    background: rgba(236, 72, 153, 0.2);
    color: var(--dark-accent-color);
}

.empty-state-btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================
   网络异常页样式 - 增强版
   ============================================ */

/* 网络错误容器 */
.network-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
    animation: networkErrorEnter 0.5s var(--refresh-easing);
}

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

/* 网络错误图标容器 */
.network-error-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
}

/* 网络错误主图标 */
.network-error-main-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3);
    z-index: 2;
}

.network-error-main-icon i {
    font-size: 2rem;
    color: white;
}

/* 网络错误脉冲动画 */
.network-error-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.2);
    transform: translate(-50%, -50%);
    animation: networkErrorPulse 2s ease-out infinite;
    z-index: 1;
}

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

/* 网络错误装饰线 */
.network-error-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

.network-error-line {
    position: absolute;
    width: 2px;
    height: 20px;
    background: rgba(245, 158, 11, 0.3);
    border-radius: 1px;
}

.network-error-line:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.network-error-line:nth-child(2) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.network-error-line:nth-child(3) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.network-error-line:nth-child(4) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* 网络错误标题 */
.network-error-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

body.dark .network-error-heading {
    color: var(--dark-text-primary);
}

/* 网络错误描述 */
.network-error-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 320px;
    line-height: 1.6;
}

body.dark .network-error-description {
    color: var(--dark-text-secondary);
}

/* 网络错误操作按钮组 */
.network-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* 网络错误按钮 - 重试 */
.network-error-btn-retry {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.network-error-btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.network-error-btn-retry:active {
    transform: translateY(0) scale(0.98);
}

/* 重试按钮加载状态 */
.network-error-btn-retry.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

.network-error-btn-retry.is-loading i {
    animation: spin 1s linear infinite;
}

/* 网络错误按钮 - 刷新 */
.network-error-btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark .network-error-btn-refresh {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.network-error-btn-refresh:hover {
    background: rgba(107, 114, 128, 0.15);
    transform: translateY(-2px);
}

body.dark .network-error-btn-refresh:hover {
    background: rgba(255, 255, 255, 0.12);
}

.network-error-btn-refresh:active {
    transform: translateY(0) scale(0.98);
}

/* 网络错误提示 */
.network-error-tips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
}

body.dark .network-error-tips {
    color: var(--dark-text-tertiary);
    background: rgba(59, 130, 246, 0.1);
}

.network-error-tips i {
    color: #3b82f6;
    font-size: 1rem;
}

/* ============================================
   无障碍动画回退
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* 卡片动效回退 */
    .is-leaving,
    .is-entering,
    .is-entering.is-visible {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    
    /* 骨架屏动画回退 */
    .skeleton-card-item,
    .skeleton-element {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* 空状态动画回退 */
    .empty-state-container,
    .empty-state-ring {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .empty-state-ring {
        display: none;
    }
    
    /* 网络错误动画回退 */
    .network-error-container,
    .network-error-pulse {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .network-error-pulse {
        display: none;
    }
    
    /* 按钮动效回退 */
    .empty-state-btn-primary,
    .empty-state-btn-secondary,
    .network-error-btn-retry,
    .network-error-btn-refresh {
        transition-duration: 0.01ms !important;
    }
    
    .empty-state-btn-primary:hover,
    .empty-state-btn-secondary:hover,
    .network-error-btn-retry:hover,
    .network-error-btn-refresh:hover {
        transform: none !important;
    }
    
    /* 交错延迟回退 */
    .stagger-delay-1,
    .stagger-delay-2,
    .stagger-delay-3,
    .stagger-delay-4,
    .stagger-delay-5,
    .stagger-delay-6,
    .stagger-delay-7,
    .stagger-delay-8,
    .stagger-delay-9,
    .stagger-delay-10,
    .stagger-delay-11,
    .stagger-delay-12,
    .stagger-delay-13,
    .stagger-delay-14,
    .stagger-delay-15,
    .stagger-delay-default {
        --delay: 0ms !important;
    }
}

/* ============================================
   刷新状态指示器
   ============================================ */

/* 刷新加载遮罩 */
.refresh-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.dark .refresh-overlay {
    background: rgba(15, 23, 42, 0.6);
}

.refresh-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 刷新加载图标 */
.refresh-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(236, 72, 153, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

body.dark .refresh-spinner {
    border-color: rgba(236, 72, 153, 0.2);
    border-top-color: var(--dark-accent-color);
}

/* 刷新进度条 */
.refresh-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), #db2777);
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
    z-index: 11;
}

body.dark .refresh-progress-bar {
    background: linear-gradient(90deg, var(--dark-accent-color), #be185d);
}

/* ============================================
   GPU 加速优化
   ============================================ */

/* 强制 GPU 加速 */
.is-leaving,
.is-entering,
.skeleton-card-item,
.empty-state-container,
.network-error-container,
.refresh-overlay,
.refresh-spinner {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 优化动画性能 */
.cards-container-refreshing .glass-card,
.skeleton-element,
.empty-state-ring,
.network-error-pulse {
    will-change: transform, opacity;
}

/* ============================================
   搜索页全局入场动效 - 上下滑动
   ============================================ */

/* 搜索页自下而上进入动画 */
.page-slide-up-enter-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    z-index: 100;
}

.page-slide-up-enter-active.is-visible {
    transform: translateY(0);
}

/* 搜索页向下退出动画 */
.page-slide-down-exit-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    z-index: 100;
}

.page-slide-down-exit-active.is-leaving {
    transform: translateY(100%);
}

/* 搜索页页面过渡容器 */
.search-page-transition-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* 底层页面（搜索页进入时露出的页面） */
.search-page-underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 搜索页覆盖层 */
.search-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/* 无障碍动画回退 - 搜索页滑动 */
@media (prefers-reduced-motion: reduce) {
    .page-slide-up-enter-active,
    .page-slide-down-exit-active {
        transition-duration: 0.01ms !important;
        transform: none !important;
    }
    
    .page-slide-up-enter-active {
        transform: translateY(0) !important;
    }
    
    .page-slide-down-exit-active {
        transform: translateY(100%) !important;
    }
}

/* ============================================
   按钮水波纹点击效果
   ============================================ */

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(254, 0, 127, 0.3);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

[data-theme="dark"] .btn-ripple .ripple {
    background: rgba(225, 156, 187, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .btn-ripple .ripple {
        animation: none !important;
        display: none !important;
    }
}

/* ============================================
   移动端 Hover 隔离 - 仅在鼠标设备上启用 Hover
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .sort-btn:hover,
    .filter-btn:hover,
    .filter-btn-mobile:hover:not(.disabled),
    .order-toggle-btn:hover:not(:disabled),
    .search-suggestion-item:hover,
    .mobile-search-item:hover,
    .btn-clear-filters:hover,
    .btn-browse-categories:hover,
    .btn-back-home:hover,
    .btn-retry:hover,
    .btn-reload:hover,
    .empty-state-btn-primary:hover,
    .empty-state-btn-secondary:hover,
    .network-error-btn-retry:hover,
    .network-error-btn-refresh:hover,
    .pagination-btn:hover,
    .filter-expand-btn:hover,
    #desktop-search-bar:hover,
    #header-search-btn:hover,
    #logo-menu button:hover,
    .game-cards-container .glass-card:hover,
    .category-cards-container .glass-card:hover {
        background: inherit;
        opacity: inherit;
        transform: none;
        box-shadow: inherit;
    }
    
    body.dark .sort-btn:hover,
    body.dark .filter-btn:hover,
    body.dark .filter-btn-mobile:hover:not(.disabled),
    body.dark .order-toggle-btn:hover:not(:disabled),
    body.dark .search-suggestion-item:hover,
    body.dark .mobile-search-item:hover,
    body.dark .btn-clear-filters:hover,
    body.dark .btn-reload:hover,
    body.dark .empty-state-btn-secondary:hover,
    body.dark .network-error-btn-refresh:hover {
        background: inherit;
        opacity: inherit;
    }
    
    .sort-btn:active,
    .filter-btn:active,
    .filter-btn-mobile:active,
    .order-toggle-btn:active,
    .btn-clear-filters:active,
    .btn-browse-categories:active,
    .btn-back-home:active,
    .btn-retry:active,
    .btn-reload:active,
    .empty-state-btn-primary:active,
    .empty-state-btn-secondary:active,
    .network-error-btn-retry:active,
    .network-error-btn-refresh:active,
    .pagination-btn:active,
    .filter-expand-btn:active,
    .glass-card:active {
        transform: scale(0.96);
        opacity: 0.8;
        transition: transform 0.1s, opacity 0.1s;
    }
    
    .icon-small,
    .nav-item i,
    button.btn-ripple i {
        position: relative;
    }
    
    .icon-small::after,
    .nav-item i::after {
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
    }
}