/* AI2Six 合并后的 CSS 文件 */
/* 生成时间: Wed Mar 25 15:02:55 CST 2026 */

/* ========== 基础样式 ========== */
/* CSS变量定义 - 「秋日午后的图书馆」主题 */

:root {
    /* ===== 品牌色 ===== */
    --color-primary:       #D4A574;  /* 琥珀暖棕 */
    --color-primary-hover: #C4955E;  /* 深琥珀 */
    --color-primary-active:#B3854E;  /* 更深琥珀 */
    --color-secondary:     #2C3E6B;  /* 星夜靛蓝 */
    --color-secondary-dark:#1A2744;  /* 星空深蓝 */

    /* ===== 中性色 ===== */
    --color-bg:            #FFF8F0;  /* 暖米白主背景 */
    --color-bg-alt:        #FBF3E8;  /* 奶茶白次背景 */
    --color-text:          #3D2E1F;  /* 墨棕正文 */
    --color-text-secondary:#7A6B5D;  /* 烟灰棕辅助 */
    --color-text-muted:    #B8A898;  /* 浅米灰 */
    --color-border:        #E8DDD0;  /* 淡暖灰边框 */

    /* ===== 点缀色 ===== */
    --color-pink:          #FFB7C5;  /* 樱花粉 */
    --color-gold:          #F0C75E;  /* 星光金 */
    --color-purple:        #C8A8E9;  /* 薰衣草紫 */
    --color-blue:          #B8D4E3;  /* 淡天蓝 */

    /* ===== 状态色 ===== */
    --color-success:       #7FB069;
    --color-warning:       #F0C75E;
    --color-error:         #D4726A;

    /* ===== 兼容旧变量名映射 ===== */
    --primary-color:       #D4A574;
    --primary-dark:        #C4955E;
    --primary-light:       #EDD9C0;
    --secondary-color:     #FFF8F0;
    --accent-color:        #D4A574;
    --accent-dark:         #C4955E;
    --accent-light:        #F0C75E;
    --highlight:           #2C3E6B;
    --highlight-dark:      #1A2744;
    --text-dark:           #3D2E1F;
    --text-light:          #7A6B5D;
    --text-on-dark:        #FFF8F0;
    --success:             #7FB069;
    --info:                #B8D4E3;
    --warning:             #F0C75E;
    --danger:              #D4726A;

    /* ===== 渐变 ===== */
    --ai-gradient-1: linear-gradient(180deg, #2C3E6B 0%, #1A2744 100%);       /* 星夜渐变 - 页脚/深色区块 */
    --ai-gradient-2: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 40%, #EDD9C0 100%); /* 温暖黄昏 - Hero区 */
    --ai-gradient-3: linear-gradient(135deg, #D4A574 0%, #E0B88A 50%, #D4A574 100%); /* 琥珀微光 - 按钮 */
    --gradient-hero: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 40%, #EDD9C0 100%);
    --gradient-footer: linear-gradient(180deg, #2C3E6B 0%, #1A2744 100%);
    --gradient-button: linear-gradient(135deg, #D4A574 0%, #E0B88A 50%, #D4A574 100%);
    --gradient-card-special: linear-gradient(135deg, #FFF8F0 0%, #FFE8E8 50%, #FFF0F5 100%);
    --gradient-info: linear-gradient(135deg, #EDF2F7 0%, #E8EEF5 100%);

    /* App区域 - 温暖色系 */
    --app-bg: #FFF8F0;
    --app-card-bg: #FBF3E8;
    --app-primary: #D4A574;
    --app-primary-hover: #C4955E;
    --app-secondary: #2C3E6B;
    --app-secondary-hover: #1A2744;
    --app-text: #3D2E1F;
    --app-text-light: #7A6B5D;

    /* Game区域 - 深色系 */
    --game-bg: linear-gradient(135deg, #1A2744, #2C3E6B);
    --game-card-bg: linear-gradient(135deg, #2C3E6B, #1A2744);
    --game-primary: #D4A574;
    --game-primary-hover: #C4955E;
    --game-secondary: #F0C75E;
    --game-secondary-hover: #D4A574;
    --game-text: #FFF8F0;
    --game-text-light: #B8D4E3;

    /* 品牌主色兼容 */
    --brand-primary: #D4A574;
    --brand-gradient: linear-gradient(135deg, #D4A574, #2C3E6B);

    /* ===== 字体 ===== */
    --font-sans:  'Noto Sans SC', 'Inter', -apple-system, sans-serif;
    --font-serif: 'Noto Serif SC', 'Georgia', serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    /* ===== 字号 ===== */
    --text-hero:    2.5rem;
    --text-h1:      2rem;
    --text-h2:      1.5rem;
    --text-h3:      1.25rem;
    --text-body:    1rem;
    --text-small:   0.875rem;
    --text-caption: 0.75rem;

    /* ===== 圆角 ===== */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* 兼容旧圆角变量 */
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-2xl: 24px;

    /* ===== 阴影（温暖色调） ===== */
    --shadow-sm:    0  2px  8px  rgba(180, 150, 120, 0.08);
    --shadow-md:    0  4px  16px rgba(180, 150, 120, 0.12);
    --shadow-lg:    0  8px  32px rgba(180, 150, 120, 0.16);
    --shadow-xl:    0 12px 40px rgba(180, 150, 120, 0.20);
    --shadow-hover: 0 12px 40px rgba(180, 150, 120, 0.20);

    /* ===== 动效 ===== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== 字号变量 - 移动端优先 ===== */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    /* PC端字体变量 */
    --font-size-pc-xs: 0.8rem;
    --font-size-pc-sm: 0.95rem;
    --font-size-pc-base: 1.1rem;
    --font-size-pc-lg: 1.3rem;
    --font-size-pc-xl: 1.5rem;
    --font-size-pc-2xl: 1.8rem;
    --font-size-pc-3xl: 2.2rem;
    --font-size-pc-4xl: 2.8rem;
    --font-size-pc-5xl: 3.6rem;

    /* ===== 间距变量 ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;
    --spacing-5xl: 6rem;

    /* PC端间距变量 */
    --spacing-pc-xs: 0.375rem;
    --spacing-pc-sm: 0.75rem;
    --spacing-pc-md: 1.25rem;
    --spacing-pc-lg: 2rem;
    --spacing-pc-xl: 2.5rem;
    --spacing-pc-2xl: 3.5rem;
    --spacing-pc-3xl: 5rem;
    --spacing-pc-4xl: 6rem;
    --spacing-pc-5xl: 8rem;

    /* 暗色模式变量（深夜书房风格） */
    --dark-bg-primary: #1A1A2E;
    --dark-bg-secondary: #242442;
    --dark-bg-tertiary: #2A2A4A;
    --dark-surface: #333366;
    --dark-border: #4A4A7A;

    --dark-text-primary: #F0E6D8;
    --dark-text-secondary: #D4C5B5;
    --dark-text-tertiary: #A89B8C;
    --dark-text-muted: #8A7D6E;

    --dark-accent-primary: #E0B88A;
    --dark-accent-secondary: #4A6FA5;
    --dark-accent-tertiary: #C8A8E9;

    --dark-gradient-1: linear-gradient(135deg, #1A1A2E, #242442);
    --dark-gradient-2: linear-gradient(135deg, #242442, #2A2A4A);
    --dark-gradient-3: linear-gradient(135deg, #2A2A4A, #333366);
}

/* 应用颜色类 */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-dark {
    background-color: var(--color-primary-hover);
}

.bg-primary-light {
    background-color: var(--primary-light);
}

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

.bg-secondary-alt {
    background-color: var(--color-bg-alt);
}

.bg-accent {
    background-color: var(--color-primary);
}

.bg-accent-dark {
    background-color: var(--color-primary-hover);
}

.bg-accent-light {
    background-color: var(--accent-light);
}

.bg-highlight {
    background-color: var(--color-secondary);
}

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

.bg-gradient-1 {
    background: var(--ai-gradient-1);
}

.bg-gradient-2 {
    background: var(--ai-gradient-2);
}

.bg-gradient-3 {
    background: var(--ai-gradient-3);
}

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

.text-accent {
    color: var(--color-primary);
}

.text-highlight {
    color: var(--color-secondary);
}

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

.text-light {
    color: var(--color-text-secondary);
}

.text-on-dark {
    color: var(--text-on-dark);
}

.text-success {
    color: var(--color-success);
}

.text-info {
    color: var(--info);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-error);
}

.text-accent-light {
    color: var(--accent-light);
}

/* 全局深色模式覆盖 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg-primary) !important;
        color: var(--dark-text-primary) !important;
    }

    .bg-secondary {
        background-color: var(--dark-bg-primary) !important;
    }

    .bg-secondary-alt {
        background-color: var(--dark-bg-secondary) !important;
    }
}

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

.dark .bg-secondary {
    background-color: var(--dark-bg-primary) !important;
}

.dark .bg-secondary-alt {
    background-color: var(--dark-bg-secondary) !important;
}

/* 动画效果定义 */

/* 基础动画关键帧 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

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

/* 动画类 */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}

.animate-float {
    animation: float 3s infinite ease-in-out;
}

.animate-slide-right {
    animation: slideInRight 0.5s ease-out;
}

.animate-slide-left {
    animation: slideInLeft 0.5s ease-out;
}

.animate-bounce {
    animation: bounce 2s ease-in-out;
}

/* 延迟动画 */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* 统计数字动画 */
.feedback-stats {
    animation: countUp 0.6s ease-out;
}

/* 性能优化 - 减少重绘和回流 */
.app-card, .game-card {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 页面隐藏时暂停动画 */
.page-hidden * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* 优化滚动性能 */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* 预加载关键资源的占位符 */
.resource-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* 减少布局抖动 */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* 优化渐变性能 */
.bg-gradient-1, .bg-gradient-2 {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .bg-gradient-1, .bg-gradient-2 {
        background-attachment: scroll; /* 移动端使用 scroll 避免性能问题 */
    }
}

/* ========== 组件样式 ========== */
/* 按钮组件样式 */

/* 基础按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
    border: none;
    font-size: var(--font-size-base);
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

/* 胶囊形状按钮 */
.btn-pill {
    border-radius: var(--radius-full);
}

.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* 按钮尺寸 */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
}

.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: var(--font-size-xl);
}

/* 按钮变体 */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-accent {
    background-color: var(--accent-color);
    color: white;
}

.btn-accent:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-highlight {
    background-color: var(--highlight);
    color: white;
}

.btn-highlight:hover {
    background-color: var(--highlight-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-gradient {
    /* 默认在浅色模式下使用琥珀色渐变 - 「秋日午后」风格 */
    background: var(--ai-gradient-3);
    color: white !important;
    border: none;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
}

.btn-gradient:hover {
    /* 悬停时通过调整背景和阴影增加反馈感 */
    background: var(--ai-gradient-3);
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(212, 165, 116, 0.4);
    transform: translateY(-2px);
}

/* 深色模式下的按钮渐变覆盖 - 回归星夜蓝风格 */
@media (prefers-color-scheme: dark) {
    .btn-gradient {
        background: var(--ai-gradient-1);
        box-shadow: 0 4px 12px rgba(26, 39, 68, 0.3);
    }
    
    .btn-gradient:hover {
        background: var(--ai-gradient-1);
        filter: brightness(1.2);
        box-shadow: 0 8px 24px rgba(26, 39, 68, 0.5);
    }
}

.dark .btn-gradient {
    background: var(--ai-gradient-1);
    box-shadow: 0 4px 12px rgba(26, 39, 68, 0.3);
}

.dark .btn-gradient:hover {
    background: var(--ai-gradient-1);
    filter: brightness(1.2);
    box-shadow: 0 8px 24px rgba(26, 39, 68, 0.5);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* 平台下载按钮样式 */
.current-platform-btn {
    transform: scale(1.05);
    font-weight: bold;
    box-shadow: 0 0 15px rgba(124, 77, 255, 0.5);
    background: var(--ai-gradient-3);
    border-color: var(--highlight);
    position: relative;
}

.current-platform-btn::after {
    content: '推荐';
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--highlight);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: var(--shadow-sm);
}

.current-platform-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 25px rgba(124, 77, 255, 0.7);
}

/* 反馈表单按钮 */
.feedback-submit-btn {
    background: linear-gradient(135deg, #f97316, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: var(--border-radius-lg) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: var(--transition-normal) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-md) !important;
}

.feedback-submit-btn:hover {
    background: linear-gradient(135deg, #ea580c, #b91c1c) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
}

.feedback-submit-btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition: var(--transition-fast) !important;
}

.feedback-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.requirement-submit-btn {
    background: linear-gradient(135deg, #14b8a6, #3b82f6) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: var(--border-radius-lg) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: var(--transition-normal) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-md) !important;
}

.requirement-submit-btn:hover {
    background: linear-gradient(135deg, #0d9488, #2563eb) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
}

.requirement-submit-btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition: var(--transition-fast) !important;
}

.requirement-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 按钮图标 */
.btn i {
    margin-right: 0.5rem;
}

.btn i:last-child {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* 按钮加载状态 */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* 联系我们按钮容器样式 */
.contact-buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

/* 联系我们按钮样式 */
.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: var(--font-size-base);
    line-height: 1.5;
    min-width: 140px;
    white-space: nowrap;
}

.contact-btn i {
    margin-right: 0.5rem;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 平板端及以上：横向排列 */
@media (min-width: 768px) {
    .contact-buttons-container {
        flex-direction: row;
        gap: 2rem;
    }

    .contact-btn {
        min-width: 160px;
    }
}

/* 桌面端优化 */
@media (min-width: 1024px) {
    .contact-buttons-container {
        gap: 2.5rem;
    }

    .contact-btn {
        padding: 1rem 2rem;
        font-size: var(--font-size-lg);
        min-width: 180px;
    }
}

/* 大屏幕优化 */
@media (min-width: 1440px) {
    .contact-buttons-container {
        gap: 3rem;
    }

    .contact-btn {
        min-width: 200px;
    }
}

/* 响应式按钮 */
@media (max-width: 768px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-size-base);
    }

    .current-platform-btn {
        transform: scale(1.02);
    }

    .current-platform-btn:hover {
        transform: scale(1.05) translateY(-1px);
    }

    /* 移动端联系按钮优化 */
    .contact-btn {
        width: 100%;
        max-width: 280px;
        padding: 0.875rem 1.5rem;
        font-size: var(--font-size-base);
    }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
    .contact-btn {
        max-width: 240px;
        padding: 0.75rem 1.25rem;
        font-size: var(--font-size-sm);
    }

    .contact-buttons-container {
        gap: 0.75rem;
    }
}

/* 超小屏幕设备优化 */
@media (max-width: 360px) {
    .contact-btn {
        max-width: 200px;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .contact-buttons-container {
        gap: 0.5rem;
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .contact-buttons-container {
        flex-direction: row;
        gap: 1.5rem;
    }

    .contact-btn {
        min-width: 120px;
        padding: 0.5rem 1rem;
        font-size: var(--font-size-sm);
    }
}

/* 确保按钮在所有情况下都不会换行 */
.contact-btn {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 错误页面按钮容器样式 */
.error-buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* 平板端及以上：横向排列，增加间距 */
@media (min-width: 768px) {
    .error-buttons-container {
        flex-direction: row;
        gap: 2rem; /* 增加PC端间距 */
    }
}

/* 桌面端进一步优化间距 */
@media (min-width: 1024px) {
    .error-buttons-container {
        gap: 3rem; /* 更大的间距 */
    }
}

/* 大屏幕最大间距 */
@media (min-width: 1440px) {
    .error-buttons-container {
        gap: 4rem; /* 最大间距 */
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .contact-btn {
        border: 2px solid currentColor;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .contact-btn {
        transition: none;
    }

    .contact-btn:hover {
        transform: none;
    }
}

/* 卡片组件样式 */

/* 基础卡片样式 */
.card {
    background: var(--app-card-bg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    overflow: hidden;
    position: relative;
}

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

/* AI风格卡片 */
.ai-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-2xl);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-normal);
}

.ai-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* 应用卡片包装链接 - 确保无下划线 */
.app-card-wrapper {
    text-decoration: none !important;
    color: inherit;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.app-card-wrapper:hover,
.app-card-wrapper:focus,
.app-card-wrapper:active {
    text-decoration: none !important;
    outline: none;
}

/* 应用卡片样式 - 「秋日午后的图书馆」美化版 */
.app-card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(180, 150, 120, 0.1);
}

.app-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(180, 150, 120, 0.3);
}

/* 卡片内边距 */
.app-card .app-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* 卡片图标 */
.app-card .app-icon-container {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
}

.app-card .app-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(180, 150, 120, 0.15);
    transition: transform 0.4s ease;
    object-fit: cover;
}

.app-card:hover .app-icon {
    transform: scale(1.1) rotate(3deg);
}

.app-card .app-icon-placeholder {
    width: 4rem;
    height: 4rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(180, 150, 120, 0.1);
    background: #EDD9C0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* 卡片标题 */
.app-card .app-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.app-card:hover .app-title {
    color: var(--color-primary);
}

/* 卡片描述 */
.app-card .app-desc {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* 游戏标签 */
.app-card .game-tag {
    background: rgba(200, 168, 233, 0.2);
    color: #8B6BB5;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* 平台标签容器 */
.app-card .platform-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* 查看详情链接 */
.app-card .view-details {
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.app-card:hover .view-details {
    gap: 0.5rem;
    border-bottom-color: var(--color-primary);
}


/* 迷你应用卡片 - 用于推荐列表 */
.mini-app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
    background: var(--color-bg);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    transition: all 0.3s ease;
    padding: 1rem;
    box-sizing: border-box;
}

.mini-app-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--color-bg-alt);
    border-color: var(--color-primary);
}

.mini-app-card .mini-app-icon {
    width: 80px;
    height: 80px;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.mini-app-card:hover .mini-app-icon {
    transform: scale(1.05);
}

.mini-app-card .mini-app-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    padding: 0 0.5rem;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 游戏卡片样式 */
.game-card {
    background: var(--game-card-bg);
    color: var(--game-text);
    border-radius: var(--border-radius-2xl);
    overflow: hidden;
    position: relative;
    transition: var(--transition-normal);
    min-height: 300px;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: var(--transition-normal);
}

.game-card:hover::before {
    opacity: 1;
}

/* 平台卡片样式 */
.platform-card {
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.non-current-platform {
    opacity: 0.8;
    filter: grayscale(20%);
    transform: scale(0.98);
}

.non-current-platform:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-5px);
}

/* 反馈卡片样式 */
.feedback-card, .requirement-card {
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-xl);
    transition: var(--transition-normal);
}

.feedback-card:hover, .requirement-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.feedback-card::before, .requirement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: var(--transition-normal);
}

.feedback-card:hover::before, .requirement-card:hover::before {
    opacity: 1;
}

/* 反馈卡片图标动画 */
.feedback-card .fa-comment-dots, .requirement-card .fa-lightbulb {
    transition: var(--transition-normal);
}

.feedback-card:hover .fa-comment-dots {
    animation: pulse 1.5s infinite;
}

.requirement-card:hover .fa-lightbulb {
    animation: float 2s ease-in-out infinite;
}

/* 反馈按钮悬停效果 */
.feedback-card .bg-white, .requirement-card .bg-white {
    transition: var(--transition-normal);
}

.feedback-card:hover .bg-white, .requirement-card:hover .bg-white {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
}

/* 下载卡片样式 */
.download-card {
    transition: var(--transition-normal);
    border-radius: var(--border-radius-xl);
    position: relative;
    overflow: hidden;
}

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

/* 卡片内容样式 */
.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

/* 卡片标题 */
.card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-dark);
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

/* 卡片文本 */
.card-text {
    color: var(--text-dark);
    line-height: 1.6;
}

/* 响应式卡片优化 */
@media (max-width: 768px) {
    .app-card {
        backdrop-filter: blur(15px);
        border-radius: var(--border-radius-xl);
        padding: 1.5rem;
    }

    .app-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow:
            0 12px 24px -4px rgba(124, 77, 255, 0.2),
            0 4px 8px -2px rgba(0, 0, 0, 0.1);
    }

    .app-card img {
        width: 4rem;
        height: 4rem;
    }

    .app-card:hover img {
        transform: scale(1.1) rotate(1deg);
    }

    .app-card h3 {
        font-size: 1.125rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }

    .app-card p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .app-card .platform-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }

    .feedback-card, .requirement-card {
        margin-bottom: var(--spacing-md);
    }

    .feedback-card:hover, .requirement-card:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .card-header, .card-body, .card-footer {
        padding: var(--spacing-md);
    }

    .game-card {
        min-height: 280px;
    }

    .game-card:hover {
        transform: translateY(-3px) scale(1.01);
    }
}

/* PC端卡片优化 */
@media (min-width: 1024px) {
    .app-card {
        padding: 2rem;
        min-height: 320px;
    }

    .app-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    }

    .app-card img {
        width: 5rem;
        height: 5rem;
        margin-bottom: 1rem;
    }

    .app-card h3 {
        font-size: 1.375rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .app-card p {
        font-size: 1.125rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    .game-card {
        min-height: 380px;
        padding: 2.5rem;
    }

    .game-card:hover {
        transform: translateY(-10px) scale(1.04);
        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.35);
    }

    .card-header, .card-body, .card-footer {
        padding: 2rem;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .card-subtitle {
        font-size: 1.125rem;
    }
}

/* 设备类型特定样式可以在此处根据需要补充 */

@media (min-width: 1440px) {
    .app-card {
        min-height: auto;
        padding: var(--spacing-pc-lg);
    }

    .game-card {
        min-height: 420px;
        padding: var(--spacing-pc-xl);
    }

    .card-header, .card-body, .card-footer {
        padding: var(--spacing-pc-xl);
    }

    .card-title {
        font-size: var(--font-size-pc-2xl);
    }
}

@media (min-width: 2560px) {
    .app-card {
        min-height: auto;
        padding: var(--spacing-pc-xl);
    }

    .game-card {
        min-height: 500px;
        padding: var(--spacing-pc-2xl);
    }

    .card-header, .card-body, .card-footer {
        padding: var(--spacing-pc-2xl);
    }

    .card-title {
        font-size: var(--font-size-pc-3xl);
    }
}

/* 暗色模式卡片优化 */
@media (prefers-color-scheme: dark) {
    .app-card {
        background: var(--dark-bg-secondary) !important;
        border: 1px solid var(--dark-border);
    }

    .app-card:hover {
        background: var(--dark-bg-secondary) !important;
        border-color: var(--dark-accent-primary);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    .game-card {
        background: var(--dark-gradient-1);
        border: 1px solid var(--dark-border);
    }

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

    .card-subtitle {
        color: var(--dark-text-secondary);
    }

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

    /* 应用卡片深色模式样式补丁 */
    .app-card .app-title {
        color: var(--dark-text-primary);
    }

    .app-card:hover .app-title {
        color: var(--dark-accent-primary);
    }

    .app-card .app-desc {
        color: var(--dark-text-secondary);
    }

    .app-card .view-details {
        color: var(--dark-accent-primary);
    }

    .app-card:hover .view-details {
        border-bottom-color: var(--dark-accent-primary);
    }

    .app-card .app-icon-placeholder {
        background: var(--dark-bg-tertiary);
        color: var(--dark-text-tertiary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .mini-app-card {
        background: var(--dark-bg-tertiary);
        border: 1px solid var(--dark-border);
    }

    .mini-app-card .mini-app-title {
        color: var(--dark-text-primary);
    }
}

.dark .app-card {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border);
}

.dark .game-card {
    background: var(--dark-gradient-1);
}

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

/* 应用卡片深色模式样式补丁 - 暗色类 */
.dark .app-card .app-title {
    color: var(--dark-text-primary);
}

.dark .app-card:hover .app-title {
    color: var(--dark-accent-primary);
}

.dark .app-card .app-desc {
    color: var(--dark-text-secondary);
}

.dark .app-card .view-details {
    color: var(--dark-accent-primary);
}

.dark .app-card:hover .view-details {
    border-bottom-color: var(--dark-accent-primary);
}

.dark .app-card .app-icon-placeholder {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-tertiary);
}

.dark .mini-app-card {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
}

.dark .mini-app-card .mini-app-title {
    color: var(--dark-text-primary);
}

/* 性能优化 */
.app-card {
    contain: layout style paint;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少重绘和回流 */
.app-card:hover {
    contain: layout style paint;
}

/* 动画性能优化 */
@media (prefers-reduced-motion: reduce) {
    .app-card,
    .app-card img,
    .app-card h3,
    .app-card p,
    .app-card .platform-tag {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .app-card:hover {
        transform: none !important;
    }
}

/* GPU加速优化 */
.app-card {
    transform: translateZ(0);
}

/* 卡片加载动画 */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-card.animate-fade-in {
    animation: cardFadeIn 0.6s ease-out forwards;
}

/* 卡片脉冲效果 */
@keyframes cardPulse {
    0%, 100% {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 8px 12px -2px rgba(124, 77, 255, 0.2);
    }
}

.app-card.pulse {
    animation: cardPulse 2s ease-in-out infinite;
}

/* 卡片聚焦状态 */
.app-card:focus-within {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px rgba(124, 77, 255, 0.1),
        0 20px 40px -4px rgba(124, 77, 255, 0.25);
}

/* 卡片链接无障碍优化 */
.app-card-link:focus {
    outline: none;
}

.app-card-link:focus .app-card {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
}

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


/* 密度开关：桌面端紧凑模式 */
@media (min-width: 1024px) {
    .density-compact .app-card { padding: var(--spacing-pc-sm); }
    .density-compact .card-header, .density-compact .card-body, .density-compact .card-footer { padding: var(--spacing-pc-sm); }
}

/* 平台标识样式 - 更显眼、更美观 */
.platform-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
}

.platform-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Android 平台 - 绿色渐变 */
.platform-badge.android {
    background: linear-gradient(135deg, #3DDC84 0%, #2DB872 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(61, 220, 132, 0.4);
}

.platform-badge.android:hover {
    box-shadow: 0 4px 12px rgba(61, 220, 132, 0.5);
}

/* iOS 平台 - 蓝色渐变 */
.platform-badge.ios {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
}

.platform-badge.ios:hover {
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.5);
}

/* Web 平台 - 紫色渐变 */
.platform-badge.web {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
}

.platform-badge.web:hover {
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.5);
}

/* Windows 平台 - 蓝色渐变 */
.platform-badge.windows {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4);
}

.platform-badge.windows:hover {
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.5);
}

/* macOS 平台 - 灰色渐变 */
.platform-badge.macos {
    background: linear-gradient(135deg, #5E5E5E 0%, #3E3E3E 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(94, 94, 94, 0.4);
}

.platform-badge.macos:hover {
    box-shadow: 0 4px 12px rgba(94, 94, 94, 0.5);
}

/* Linux 平台 - 橙色渐变 */
.platform-badge.linux {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4);
}

.platform-badge.linux:hover {
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.5);
}

/* 平台标识图标 */
.platform-badge i {
    margin-right: 6px;
    font-size: 14px;
}

/* 暗色模式下的平台标识 */
@media (prefers-color-scheme: dark) {
    .platform-badge {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .platform-badge:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }
}

.dark .platform-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dark .platform-badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* 轮播组件样式 */

/* 截图轮播容器 */
.screenshot-carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.screenshot-container {
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--app-card-bg);
    box-shadow: var(--shadow-md);
}

.screenshot-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

.screenshot-slide {
    flex-shrink: 0;
    width: 100%;
    position: relative;
}

.screenshot-slide img {
    width: 100%;
    height: 24rem; /* h-96 equivalent */
    object-fit: contain;
    background: #f3f4f6;
    border-radius: var(--border-radius-lg);
    transition: var(--transition-normal);
}

.screenshot-slide img:hover {
    transform: scale(1.02);
}

/* 轮播控制按钮 */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-prev {
    left: 1rem;
}

.carousel-next {
    right: 1rem;
}

.carousel-btn i {
    font-size: 1.25rem;
}

/* 轮播指示器 */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-md);
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    background: #d1d5db; /* gray-300 */
}

.indicator-dot:hover {
    background: #9ca3af; /* gray-400 */
    transform: scale(1.2);
}

.indicator-dot.active,
.indicator-dot.bg-blue-500 {
    background: #3b82f6; /* blue-500 */
    transform: scale(1.3);
}

/* 轮播加载状态 */
.carousel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24rem;
    background: #f3f4f6;
    border-radius: var(--border-radius-lg);
}

.carousel-loading::after {
    content: '';
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 轮播错误状态 */
.carousel-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 24rem;
    background: #fef2f2;
    border-radius: var(--border-radius-lg);
    color: #dc2626;
    text-align: center;
    padding: var(--spacing-lg);
}

.carousel-error i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.carousel-error p {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* 轮播缩略图 */
.carousel-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-md);
    overflow-x: auto;
    padding: 0.5rem 0;
}

.carousel-thumbnail {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-normal);
    border: 2px solid transparent;
}

.carousel-thumbnail:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.carousel-thumbnail.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.carousel-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 响应式轮播 */
@media (max-width: 768px) {
    .screenshot-slide img {
        height: 16rem; /* 移动端降低高度 */
    }
    
    .carousel-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .carousel-btn i {
        font-size: 1rem;
    }
    
    .carousel-prev {
        left: 0.5rem;
    }
    
    .carousel-next {
        right: 0.5rem;
    }
    
    .indicator-dot {
        width: 0.625rem;
        height: 0.625rem;
    }
    
    .carousel-loading,
    .carousel-error {
        height: 16rem;
    }
    
    .carousel-thumbnail {
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 480px) {
    .screenshot-slide img {
        height: 12rem;
    }
    
    .carousel-loading,
    .carousel-error {
        height: 12rem;
    }
    
    .carousel-btn {
        width: 2rem;
        height: 2rem;
    }
    
    .carousel-btn i {
        font-size: 0.875rem;
    }
}

/* 轮播键盘导航提示 */
.carousel-keyboard-hint {
    text-align: center;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-light);
    opacity: 0.7;
}

/* 轮播全屏模式 */
.carousel-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-fullscreen .screenshot-slide img {
    max-width: 90vw;
    max-height: 90vh;
    height: auto;
    width: auto;
}

.carousel-fullscreen .carousel-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.carousel-fullscreen .carousel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 关闭全屏按钮 */
.carousel-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    backdrop-filter: blur(4px);
}

.carousel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* 特效组件样式 */

/* AI发光效果 */
.ai-glow {
    position: relative;
    transition: var(--transition-normal);
}

.ai-glow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: var(--ai-gradient-1);
    z-index: -1;
    filter: blur(15px);
    opacity: 0;
    transition: var(--transition-normal);
    border-radius: inherit;
}

.ai-glow:hover::before {
    opacity: 0.7;
}

/* AI文本渐变 */
.ai-text-gradient {
    background: var(--ai-gradient-3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* AI边框效果 */
.ai-border {
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.ai-border::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: var(--ai-gradient-2);
}

/* 毛玻璃效果 */
.glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-effect-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 悬停提升效果 */
.hover-lift {
    transition: var(--transition-normal);
}

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

/* 悬停缩放效果 */
.hover-scale {
    transition: var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 悬停旋转效果 */
.hover-rotate {
    transition: var(--transition-normal);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* 悬停发光效果 */
.hover-glow {
    transition: var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* 脉冲边框效果 */
.pulse-border {
    position: relative;
    overflow: hidden;
}

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

.pulse-border:hover::before {
    left: 100%;
}

/* 渐变文本效果 */
.gradient-text {
    background: var(--ai-gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

/* 霓虹灯效果 */
.neon-effect {
    color: #fff;
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 15px currentColor,
        0 0 20px var(--accent-color),
        0 0 35px var(--accent-color),
        0 0 40px var(--accent-color);
    animation: neon-flicker 2s infinite alternate;
}

@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 15px currentColor,
            0 0 20px var(--accent-color),
            0 0 35px var(--accent-color),
            0 0 40px var(--accent-color);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* 波纹效果 */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::after {
    width: 300px;
    height: 300px;
}

/* 粒子效果背景 */
.particle-bg {
    position: relative;
    overflow: hidden;
}

.particle-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
    animation: particle-float 20s ease-in-out infinite;
}

@keyframes particle-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-30px) rotate(120deg); }
    66% { transform: translateY(30px) rotate(240deg); }
}

/* 打字机效果 */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-color); }
}

/* 3D翻转效果 */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius-lg);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* 滚动显示效果 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 磁性悬停效果 */
.magnetic-hover {
    transition: var(--transition-normal);
    cursor: pointer;
}

.magnetic-hover:hover {
    transform: translate(var(--mouse-x, 0), var(--mouse-y, 0)) scale(1.05);
}

/* 彩虹边框效果 */
.rainbow-border {
    position: relative;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    border-radius: var(--border-radius-lg);
    padding: 2px;
    animation: rainbow-border 2s linear infinite;
}

.rainbow-border::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--app-card-bg);
    border-radius: calc(var(--border-radius-lg) - 2px);
}

@keyframes rainbow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 响应式特效优化 */
@media (max-width: 768px) {
    .ai-glow::before {
        filter: blur(8px);
    }
    
    .neon-effect {
        text-shadow: 
            0 0 3px currentColor,
            0 0 6px currentColor,
            0 0 9px currentColor,
            0 0 12px var(--accent-color);
    }
    
    .hover-lift:hover {
        transform: translateY(-2px);
    }
    
    .hover-scale:hover {
        transform: scale(1.02);
    }
    
    /* 移动端禁用某些特效以提升性能 */
    .particle-bg::before {
        display: none;
    }
    
    .typewriter {
        border-right: none;
        animation: none;
    }
}

/* 减少动画以提升性能 */
@media (prefers-reduced-motion: reduce) {
    .ai-glow::before,
    .neon-effect,
    .particle-bg::before,
    .typewriter,
    .rainbow-border {
        animation: none;
    }
    
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-rotate:hover {
        transform: none;
    }
}

/* 头部导航组件样式 */

/* 头部标题链接样式 - 去除悬浮下划线 */
.header-title-link {
    text-decoration: none !important;
    color: var(--text-on-dark);
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
}

.header-title-link:hover {
    text-decoration: none !important;
    color: var(--text-on-dark);
    /* 保持AI发光效果，但不显示下划线 */
}

.header-title-link:focus {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
    text-decoration: none !important;
}

/* AI发光效果优化 */
.header-title-link.ai-glow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: var(--ai-gradient-1);
    z-index: -1;
    filter: blur(15px);
    opacity: 0;
    transition: var(--transition-normal);
    border-radius: inherit;
}

.header-title-link.ai-glow:hover::before {
    opacity: 0.7;
}

/* 导航链接样式优化 */
.nav-link {
    color: var(--text-on-dark);
    text-decoration: none;
    transition: var(--transition-normal);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md);
    position: relative;
}

.nav-link:hover {
    color: var(--accent-light);
    text-decoration: none !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-link:focus {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
    text-decoration: none !important;
}

/* 当前页面导航链接 */
.nav-link.active {
    color: var(--accent-light);
    font-weight: 600;
    background-color: rgba(178, 235, 242, 0.15);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
    color: var(--text-on-dark);
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-normal);
    cursor: pointer;
}

.mobile-menu-btn:hover {
    color: var(--accent-light);
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-btn:focus {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

/* 移动端菜单样式 */
.mobile-menu {
    background: var(--ai-gradient-1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-menu .nav-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.mobile-menu .nav-link:last-child {
    border-bottom: none;
}

.mobile-menu .nav-link i {
    margin-right: 0.75rem;
    width: 1.25rem;
    text-align: center;
}

/* 头部容器样式 */
.header-container {
    background: var(--ai-gradient-1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 50;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .header-title-link {
        font-size: 1.5rem;
    }
    
    .header-title-link span:last-child {
        font-size: 1rem;
    }
    
    .nav-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .header-title-link {
        font-size: 2rem;
    }
    
    .header-title-link span:last-child {
        font-size: 1.25rem;
    }
    
    .nav-link {
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }
}

@media (min-width: 1280px) {
    .header-title-link {
        font-size: 2.5rem;
    }
    
    .header-title-link span:last-child {
        font-size: 1.5rem;
    }
    
    .nav-link {
        padding: 0.75rem 1.25rem;
        font-size: 1.125rem;
    }
}

/* 无障碍优化 */
.nav-link:focus-visible,
.header-title-link:focus-visible,
.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

/* 打印样式 */
@media print {
    .header-container {
        background: none !important;
        box-shadow: none !important;
    }
    
    .header-title-link,
    .nav-link {
        color: #000 !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .nav-link.active {
        background-color: rgba(178, 235, 242, 0.2);
    }
    
    .mobile-menu-btn:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
}

/* 动画效果 */
@keyframes headerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-container {
    animation: headerFadeIn 0.3s ease-out;
}

/* 导航链接悬浮动画 */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-light);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link.active::after {
    width: 80%;
}

/* 移动端隐藏底部装饰线 */
@media (max-width: 768px) {
    .nav-link::after {
        display: none;
    }
}

/* Tailwind 替代样式 - 补充缺失的工具类 */

/* ========== 基础重置和布局 ========== */
* {
    box-sizing: border-box;
}

/* ========== 显示类型 ========== */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* ========== Flexbox 布局 ========== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }

/* ========== 网格布局 ========== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ========== 间距 - Margin ========== */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }

/* ========== 间距 - Padding ========== */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* ========== 宽度和高度 ========== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-64 { height: 16rem; }
.h-80 { height: 20rem; }
.h-96 { height: 24rem; }

.min-h-screen { min-height: 100vh; }
.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* ========== 背景颜色 ========== */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }

.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }

.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-blue-300 { background-color: #93c5fd; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.bg-blue-900 { background-color: #1e3a8a; }

.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-300 { background-color: #86efac; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-800 { background-color: #166534; }
.bg-green-900 { background-color: #14532d; }

.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }

.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-500 { background-color: #a855f7; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7c3aed; }
.bg-purple-800 { background-color: #6b21a8; }
.bg-purple-900 { background-color: #581c87; }

.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-yellow-500 { background-color: #eab308; }

.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-indigo-800 { background-color: #3730a3; }

.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }

.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }

.bg-cyan-50 { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }

/* ========== 文本颜色 ========== */
.text-transparent { color: transparent; }
.text-white { color: #ffffff; }
.text-black { color: #000000; }

.text-gray-50 { color: #f9fafb; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }

.text-blue-50 { color: #eff6ff; }
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }

.text-green-50 { color: #f0fdf4; }
.text-green-100 { color: #dcfce7; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }

.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }

.text-purple-200 { color: #e9d5ff; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7c3aed; }
.text-purple-800 { color: #6b21a8; }

.text-yellow-500 { color: #eab308; }
.text-orange-600 { color: #ea580c; }
.text-orange-800 { color: #9a3412; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }

/* ========== 字体大小 ========== */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }

/* ========== 字体粗细 ========== */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ========== 文本对齐 ========== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ========== 行高 ========== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* ========== 圆角 ========== */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* ========== 边框 ========== */
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }

.border-transparent { border-color: transparent; }
.border-white { border-color: #ffffff; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-400 { border-color: #9ca3af; }
.border-gray-500 { border-color: #6b7280; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-300 { border-color: #93c5fd; }
.border-blue-400 { border-color: #60a5fa; }
.border-blue-500 { border-color: #3b82f6; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-500 { border-color: #22c55e; }
.border-purple-200 { border-color: #e9d5ff; }
.border-purple-400 { border-color: #c084fc; }
.border-orange-200 { border-color: #fed7aa; }
.border-teal-200 { border-color: #99f6e4; }

/* ========== 阴影 ========== */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ========== 透明度 ========== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ========== 定位 ========== */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-2 { top: 0.5rem; }
.right-2 { right: 0.5rem; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }

/* ========== Z-index ========== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ========== 溢出 ========== */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }

/* ========== 变换 ========== */
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.-translate-y-1\/2 { --tw-translate-y: -50%; }
.translate-x-full { --tw-translate-x: 100%; }

/* ========== 过渡动画 ========== */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ========== 悬停效果 ========== */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-blue-50:hover { background-color: #eff6ff; }
.hover\:bg-blue-100:hover { background-color: #dbeafe; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-green-50:hover { background-color: #f0fdf4; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-purple-50:hover { background-color: #faf5ff; }
.hover\:bg-purple-700:hover { background-color: #7c3aed; }

.hover\:text-blue-600:hover { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:text-green-600:hover { color: #16a34a; }
.hover\:text-purple-600:hover { color: #9333ea; }
.hover\:text-orange-600:hover { color: #ea580c; }
.hover\:text-teal-600:hover { color: #0d9488; }

.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }

.group:hover .group-hover\:scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.group:hover .group-hover\:text-blue-600 { color: #2563eb; }
.group:hover .group-hover\:text-purple-600 { color: #9333ea; }

/* ========== 焦点效果 ========== */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-primary:focus { --tw-ring-color: var(--primary-color); }
.focus\:ring-opacity-50:focus { --tw-ring-opacity: 0.5; }

/* ========== 响应式设计 ========== */
@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:hidden { display: none; }
    .sm\:flex { display: flex; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
}

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1536px) {
    .xxl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xxl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 2560px) {
    .ultra\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ========== 文本截断 ========== */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== 间距工具 ========== */
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }

.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* ========== 光标样式 ========== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default { cursor: default; }

/* ========== 用户选择 ========== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ========== 白空间处理 ========== */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ========== 背景渐变 ========== */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }

.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0)); }
.from-blue-100 { --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 234, 254, 0)); }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0)); }
.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 253, 244, 0)); }
.from-green-600 { --tw-gradient-from: #16a34a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0)); }
.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0)); }
.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0)); }
.from-purple-800 { --tw-gradient-from: #6b21a8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(107, 33, 168, 0)); }
.from-gray-800 { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 41, 55, 0)); }
.from-gray-900 { --tw-gradient-from: #111827; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0)); }

.to-blue-100 { --tw-gradient-to: #dbeafe; }
.to-blue-700 { --tw-gradient-to: #1d4ed8; }
.to-green-100 { --tw-gradient-to: #dcfce7; }
.to-green-700 { --tw-gradient-to: #15803d; }
.to-purple-100 { --tw-gradient-to: #f3e8ff; }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.to-gray-800 { --tw-gradient-to: #1f2937; }
.to-gray-900 { --tw-gradient-to: #111827; }
.to-indigo-50 { --tw-gradient-to: #eef2ff; }
.to-indigo-800 { --tw-gradient-to: #3730a3; }

/* ========== 特殊效果 ========== */
.backdrop-filter { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-sm { --tw-backdrop-blur: blur(4px); }

/* ========== 动画 ========== */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

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

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

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ========== 特殊背景色 ========== */
.bg-secondary {
    background-color: #f9fafb;
}

/* ========== AI 文本渐变 ========== */
.ai-text-gradient {
    background: linear-gradient(135deg, #3F51B5, #7C4DFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== 延迟动画 ========== */
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* ========== 性能优化 ========== */
.will-change-transform { will-change: transform; }
.will-change-auto { will-change: auto; }

/* ========== 无障碍优化 ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== 打印样式 ========== */
@media print {
    .print\:hidden { display: none; }
    .print\:block { display: block; }
}

/* 主题切换按钮样式 */

/* 基础按钮样式 */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 60;
    outline: none;
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode-toggle:focus {
    outline: 2px solid #B2EBF2;
    outline-offset: 2px;
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

/* 按钮图标样式 */
.dark-mode-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover svg {
    transform: rotate(15deg);
}

/* 暗色模式下的按钮样式 */
.dark .dark-mode-toggle {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f9fafb;
}

.dark .dark-mode-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 桌面端固定定位样式 */
@media (min-width: 769px) {
    .dark-mode-toggle.desktop-fixed {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 60;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #374151;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .dark .dark-mode-toggle.desktop-fixed {
        background: rgba(31, 41, 55, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
        color: #f9fafb;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    
    .dark-mode-toggle.desktop-fixed:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .dark .dark-mode-toggle.desktop-fixed:hover {
        background: rgba(31, 41, 55, 1);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    }
}

/* 移动端导航栏集成样式 */
@media (max-width: 768px) {
    .dark-mode-toggle.mobile-nav {
        position: relative;
        top: auto;
        right: auto;
        margin-left: 0;
        width: 2.25rem;
        height: 2.25rem;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
    }

    .dark-mode-toggle.mobile-nav:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .dark-mode-toggle.mobile-nav:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0.95);
    }

    .dark-mode-toggle.mobile-nav svg {
        width: 1rem;
        height: 1rem;
    }

    /* 确保在移动端导航栏中正确对齐 */
    .mobile-nav-tools {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    /* 移动端导航栏布局优化 */
    header nav > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    /* 确保标题不会被挤压 */
    header nav a[href="/"] {
        flex-shrink: 0;
        min-width: 0;
    }

    /* 桌面端导航菜单在移动端隐藏 */
    .nav-desktop {
        display: none !important;
    }

    /* 移动端菜单按钮样式优化 */
    .mobile-menu-toggle {
        width: 2.25rem;
        height: 2.25rem;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0.375rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-menu-toggle:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0.95);
    }

    /* 汉堡菜单线条样式 */
    .hamburger-line {
        width: 1rem;
        height: 2px;
        background: #ffffff;
        border-radius: 1px;
        transition: all 0.3s ease;
        display: block;
    }

    /* 菜单激活状态的动画 */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(0.25rem, 0.25rem);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(0.25rem, -0.25rem);
    }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
    .dark-mode-toggle.mobile-nav {
        width: 2.25rem;
        height: 2.25rem;
        margin-left: 0.5rem;
    }
    
    .dark-mode-toggle.mobile-nav svg {
        width: 1rem;
        height: 1rem;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .dark-mode-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    
    .dark-mode-toggle:hover {
        transform: none;
    }
    
    .dark-mode-toggle:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.3);
    }
    
    .dark .dark-mode-toggle:active {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .dark-mode-toggle {
        border: 2px solid currentColor;
        background: transparent;
    }
    
    .dark-mode-toggle:hover {
        background: currentColor;
        color: white;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .dark-mode-toggle,
    .dark-mode-toggle svg {
        transition: none;
    }
    
    .dark-mode-toggle:hover {
        transform: none;
    }
    
    .dark-mode-toggle:hover svg {
        transform: none;
    }
}

/* 按钮状态指示器 */
.dark-mode-toggle::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dark .dark-mode-toggle::after {
    background: #fbbf24;
}

.dark-mode-toggle.active::after {
    opacity: 1;
}

/* 键盘导航支持 */
.dark-mode-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 动画效果 */
@keyframes themeToggleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

.dark-mode-toggle.animate-in {
    animation: themeToggleIn 0.3s ease-out;
}

.dark-mode-toggle.switching svg {
    animation: themeSwitch 0.6s ease-in-out;
}

/* 主题切换时的脉冲效果 */
@keyframes themePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.dark-mode-toggle.pulse {
    animation: themePulse 0.6s ease-out;
}

/* 工具提示样式 */
.dark-mode-toggle[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 70;
    margin-bottom: 0.5rem;
}

.dark-mode-toggle[data-tooltip]:hover::before {
    opacity: 1;
}

@media (max-width: 768px) {
    .dark-mode-toggle[data-tooltip]::before {
        display: none;
    }
}

/* ========== 布局样式 ========== */
/* 基于设备类型的自适应布局样式 */

/* 防止布局闪烁的预加载样式 */
.app-grid:not(.layout-initialized) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-grid.layout-initialized {
    opacity: 1;
}

/* 基础网格样式 - 改为Flexbox居中布局 */
.app-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    transition: all 0.2s ease;
}

.device-adaptive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    transition: all 0.2s ease;
}

/* 移动端默认样式 - 在设备检测前就生效 */
@media (max-width: 768px) {
    .app-grid,
    .device-adaptive-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        max-width: 400px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .app-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 350px;
        padding: 1.5rem;
        margin: 0 auto;
    }
}

/* 桌面设备 - 最大4列居中布局 */
.device-desktop .app-grid,
.device-desktop .device-adaptive-grid {
    gap: 2rem;
    max-width: 1200px;
}

.device-desktop .app-card {
    flex: 0 0 auto;
    width: 280px;
    min-width: 260px;
    max-width: 320px;
    padding: 1.5rem;
    min-height: auto;
}

.device-desktop .app-card .p-6 {
    padding: 1.5rem;
}

.device-desktop .app-card img {
    width: 4.5rem;
    height: 4.5rem;
}

.device-desktop .app-card h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.device-desktop .app-card p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* 平板设备 - 最大3列居中布局 */
.device-tablet .app-grid,
.device-tablet .device-adaptive-grid {
    gap: 1.5rem;
    max-width: 900px;
}

.device-tablet .app-card {
    flex: 0 0 auto;
    width: 260px;
    min-width: 240px;
    max-width: 280px;
    padding: 1.5rem;
}

.device-tablet .app-card .p-6 {
    padding: 1.5rem;
}

.device-tablet .app-card img {
    width: 4rem;
    height: 4rem;
}

.device-tablet .app-card h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.device-tablet .app-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* 手机设备 - 单列居中布局 */
.device-mobile .app-grid,
.device-mobile .device-adaptive-grid {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
}

.device-mobile .app-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 350px !important;
    padding: 1.5rem !important;
    margin: 0 auto !important;
}

.device-mobile .app-card .p-6 {
    padding: 1.5rem;
}

.device-mobile .app-card img {
    width: 4.5rem;
    height: 4.5rem;
}

.device-mobile .app-card h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.device-mobile .app-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* 未知设备 - 响应式居中布局 */
.device-unknown .app-grid,
.device-unknown .device-adaptive-grid {
    gap: 1.5rem;
    max-width: 400px;
}

.device-unknown .app-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 350px;
    padding: 1.5rem;
}

/* 未知设备的响应式断点 */
@media (min-width: 768px) {
    .device-unknown .app-grid,
    .device-unknown .device-adaptive-grid {
        max-width: 600px;
        gap: 1.5rem;
    }

    .device-unknown .app-card {
        flex: 0 0 auto;
        width: 280px;
        min-width: 240px;
        max-width: 300px;
    }
}

@media (min-width: 1024px) {
    .device-unknown .app-grid,
    .device-unknown .device-adaptive-grid {
        max-width: 900px;
        gap: 2rem;
    }

    .device-unknown .app-card {
        flex: 0 0 auto;
        width: 280px;
        min-width: 260px;
        max-width: 300px;
    }
}

@media (min-width: 1280px) {
    .device-unknown .app-grid,
    .device-unknown .device-adaptive-grid {
        max-width: 1200px;
    }

    .device-unknown .app-card {
        flex: 0 0 auto;
        width: 280px;
        min-width: 260px;
        max-width: 300px;
    }
}

/* 桌面设备的大屏幕优化 - 保持最大4列 */
@media (min-width: 1440px) {
    .device-desktop .app-grid,
    .device-desktop .device-adaptive-grid {
        max-width: 1400px;
        gap: 2.5rem;
    }

    .device-desktop .app-card {
        min-width: 280px;
        max-width: 320px;
    }
}

@media (min-width: 1600px) {
    .device-desktop .app-grid,
    .device-desktop .device-adaptive-grid {
        max-width: 1600px;
        gap: 3rem;
    }

    .device-desktop .app-card {
        min-width: 300px;
        max-width: 350px;
    }
}

@media (min-width: 1920px) {
    .device-desktop .app-grid,
    .device-desktop .device-adaptive-grid {
        max-width: 1800px;
        gap: 3.5rem;
    }

    .device-desktop .app-card {
        min-width: 320px;
        max-width: 380px;
    }
}

/* 平板设备的横屏优化 - 最大4列 */
@media (min-width: 1024px) and (orientation: landscape) {
    .device-tablet .app-grid,
    .device-tablet .device-adaptive-grid {
        max-width: 1200px;
    }

    .device-tablet .app-card {
        flex: 0 0 auto;
        width: 280px;
        min-width: 240px;
        max-width: 300px;
    }
}

/* 卡片悬停效果优化 */
.device-desktop .app-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.device-tablet .app-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.device-mobile .app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* 平台标签优化 */
.device-desktop .app-card .bg-blue-100 {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.device-desktop .app-card .bg-purple-100 {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* 容器间距优化 */
.device-desktop .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.device-tablet .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.device-mobile .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 标题区域优化 */
.device-desktop .text-center.mb-12 {
    margin-bottom: 2rem;
}

.device-desktop .text-3xl {
    font-size: 1.875rem;
    margin-bottom: 1rem;
}

.device-tablet .text-center.mb-12 {
    margin-bottom: 2.5rem;
}

.device-mobile .text-center.mb-12 {
    margin-bottom: 3rem;
}

/* 特殊布局：不同数量卡片的居中优化 */
/* 由于:has()选择器兼容性问题，使用JavaScript动态添加类名 */
.app-grid.cards-1,
.app-grid.cards-2,
.app-grid.cards-3,
.app-grid.cards-4 {
    justify-content: center;
}

/* 确保所有情况下都居中对齐 */
.app-grid,
.device-adaptive-grid {
    justify-content: center;
}

/* 限制最大列数为4列 */
.app-grid {
    max-width: calc(4 * 320px + 3 * 2rem); /* 4个卡片 + 3个间距 */
}

.device-adaptive-grid {
    max-width: calc(4 * 320px + 3 * 2rem); /* 4个卡片 + 3个间距 */
}

/* 卡片数量特定的布局优化 */
.app-grid.cards-1 .app-card {
    /* 单个卡片时稍微缩小 */
    max-width: 320px;
}

.app-grid.cards-2 .app-card {
    /* 两个卡片时保持合适间距 */
    margin: 0 1rem;
}

.app-grid.cards-3 .app-card {
    /* 三个卡片时优化间距 */
    margin: 0 0.5rem;
}

/* 超过4个卡片时的换行处理 */
.app-grid.cards-more {
    max-width: calc(4 * 320px + 3 * 2rem);
}

/* 响应式优化：小屏幕上的布局调整 */
@media (max-width: 768px) {
    .app-grid.cards-1,
    .app-grid.cards-2,
    .app-grid.cards-3,
    .app-grid.cards-4,
    .app-grid.cards-more {
        flex-direction: column !important;
        align-items: center !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }

    .app-grid .app-card,
    .app-grid.cards-1 .app-card,
    .app-grid.cards-2 .app-card,
    .app-grid.cards-3 .app-card,
    .app-grid.cards-4 .app-card,
    .app-grid.cards-more .app-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
}

/* 性能优化：减少不必要的动画 */
.device-desktop .app-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.device-tablet .app-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.device-mobile .app-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 文本截断优化 */
.device-desktop .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    max-height: 2.5em;
}

.device-tablet .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: 2.6em;
}

.device-mobile .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: 2.8em;
}

/* 图片加载优化 */
.device-desktop .app-card img {
    border-radius: 0.75rem;
}

.device-tablet .app-card img {
    border-radius: 0.75rem;
}

.device-mobile .app-card img {
    border-radius: 0.75rem;
}

/* 响应式布局样式 */

/* 基础容器 */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* 响应式断点 - 优化PC端显示效果 */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding: 0 var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding: 0 var(--spacing-xl);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding: 0 var(--spacing-2xl);
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        padding: 0 var(--spacing-2xl);
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1520px;
        padding: 0 var(--spacing-3xl);
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1680px;
        padding: 0 var(--spacing-3xl);
    }
}

@media (min-width: 2560px) {
    .container {
        max-width: 2200px;
        padding: 0 var(--spacing-3xl);
    }
}

/* 网格系统 - 增强PC端布局 */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

/* 响应式网格 */
@media (min-width: 640px) {
    .sm\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .md\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .lg\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

    /* 桌面端网格间距优化 */
    .grid {
        gap: var(--spacing-md);
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 移动端标题调整 */
    .text-6xl {
        font-size: var(--font-size-4xl);
    }
    
    .text-5xl {
        font-size: var(--font-size-3xl);
    }
    
    .text-4xl {
        font-size: var(--font-size-2xl);
    }
    
    /* 移动端间距调整 */
    .px-6 {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .py-8 {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    
    .mb-8 {
        margin-bottom: var(--spacing-lg);
    }
    
    /* 移动端卡片调整 */
    .app-card, .game-card {
        margin-bottom: var(--spacing-md);
    }
    
    /* 移动端按钮调整 */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* 移动端导航调整 */
    .nav-mobile {
        display: block;
    }
    
    .nav-desktop {
        display: none;
    }
    
    /* 移动端表格调整 */
    .table-responsive {
        overflow-x: auto;
    }
    
    .table-responsive table {
        min-width: 600px;
    }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 平板端游戏卡片调整 */
    .game-card .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 平板端标题调整 */
    .text-6xl {
        font-size: var(--font-size-5xl);
    }
    
    /* 平板端导航调整 */
    .nav-mobile {
        display: none;
    }
    
    .nav-desktop {
        display: block;
    }
}

/* 桌面端优化 */
@media (min-width: 1025px) {
    .nav-mobile {
        display: none;
    }

    .nav-desktop {
        display: block;
    }

    /* 桌面端字体优化 */
    .text-xs { font-size: var(--font-size-pc-xs); }
    .text-sm { font-size: var(--font-size-pc-sm); }
    .text-base { font-size: var(--font-size-pc-base); }
    .text-lg { font-size: var(--font-size-pc-lg); }
    .text-xl { font-size: var(--font-size-pc-xl); }
    .text-2xl { font-size: var(--font-size-pc-2xl); }
    .text-3xl { font-size: var(--font-size-pc-3xl); }
    .text-4xl { font-size: var(--font-size-pc-4xl); }
    .text-5xl { font-size: var(--font-size-pc-5xl); }
    .text-6xl { font-size: var(--font-size-pc-6xl); }

    /* 桌面端间距优化 - 针对详情页优化 */
    .px-6 { padding-left: var(--spacing-pc-lg); padding-right: var(--spacing-pc-lg); }
    .py-4 { padding-top: var(--spacing-pc-md); padding-bottom: var(--spacing-pc-md); }
    .py-8 { padding-top: var(--spacing-pc-xl); padding-bottom: var(--spacing-pc-xl); }
    .py-16 { padding-top: var(--spacing-pc-3xl); padding-bottom: var(--spacing-pc-3xl); }
    .mb-4 { margin-bottom: var(--spacing-pc-md); }
    .mb-6 { margin-bottom: var(--spacing-pc-lg); }
    .mb-8 { margin-bottom: var(--spacing-pc-lg); } /* 从xl调整为lg，减少区块间距 */
    .mb-12 { margin-bottom: var(--spacing-pc-2xl); }

    /* 详情页专用间距优化 */
    .p-6 { padding: var(--spacing-pc-md); } /* 从lg调整为md，减少内边距 */
    .p-8 { padding: var(--spacing-pc-lg); } /* 从xl调整为lg */

    /* 桌面端悬停效果 - 减弱动效 */
    .hover\\:scale-105:hover {
        transform: scale(1.01); /* 从1.05减弱到1.01 */
    }

    .hover\\:shadow-lg:hover {
        box-shadow: var(--shadow-lg);
    }
}

/* 大屏幕优化 - 1440px+ */
@media (min-width: 1440px) {
    .xl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .xl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

    /* 大屏幕网格间距增加 */
    .grid {
        gap: var(--spacing-pc-xl);
    }

    /* 大屏幕字体进一步优化 */
    .text-3xl { font-size: var(--font-size-4xl); }
    .text-4xl { font-size: var(--font-size-5xl); }
    .text-5xl { font-size: var(--font-size-6xl); }
    .text-6xl { font-size: var(--font-size-7xl); }

    /* 大屏幕间距进一步优化 */
    .py-16 { padding-top: var(--spacing-pc-4xl); padding-bottom: var(--spacing-pc-4xl); }
    .mb-12 { margin-bottom: var(--spacing-pc-3xl); }

    /* 游戏卡片优化 */
    .game-card {
        min-height: 420px;
    }
}

/* 超宽屏优化 - 1600px+ */
@media (min-width: 1600px) {
    .xxl\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .xxl\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xxl\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xxl\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xxl\\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xxl\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
    .xxl\\:grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
    .xxl\\:grid-cols-8 { grid-template-columns: repeat(8, 1fr); }
}

/* 4K屏幕优化 - 2560px+ */
@media (min-width: 2560px) {
    .ultra\\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
    .ultra\\:grid-cols-8 { grid-template-columns: repeat(8, 1fr); }
    .ultra\\:grid-cols-10 { grid-template-columns: repeat(10, 1fr); }

    /* 4K屏幕网格间距进一步增加 */
    .grid {
        gap: var(--spacing-pc-2xl);
    }

    /* 4K屏幕字体最大化 */
    .text-3xl { font-size: var(--font-size-5xl); }
    .text-4xl { font-size: var(--font-size-6xl); }
    .text-5xl { font-size: var(--font-size-7xl); }
    .text-6xl { font-size: var(--font-size-8xl); }

    /* 4K屏幕间距最大化 */
    .py-16 { padding-top: var(--spacing-pc-5xl); padding-bottom: var(--spacing-pc-5xl); }
    .px-6 { padding-left: var(--spacing-pc-2xl); padding-right: var(--spacing-pc-2xl); }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* 小屏幕标题调整 */
    .text-6xl {
        font-size: var(--font-size-3xl);
    }
    
    .text-5xl {
        font-size: var(--font-size-2xl);
    }
    
    .text-4xl {
        font-size: var(--font-size-xl);
    }
    
    /* 小屏幕间距调整 */
    .px-6 {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .py-8 {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
    
    /* 小屏幕卡片调整 */
    .card-body {
        padding: var(--spacing-sm);
    }
    
    /* 小屏幕按钮调整 */
    .btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-sm);
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        min-height: 80vh;
    }
    
    .mobile-menu {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-res-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .btn {
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
    }
}

/* 可访问性优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg: var(--dark-bg-primary);
        --secondary-bg: var(--dark-bg-secondary);
        --surface-bg: var(--dark-bg-tertiary);
        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --border-color: var(--dark-border);
    }

    body {
        background-color: var(--dark-bg-primary);
        color: var(--dark-text-primary);
    }

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

    .bg-gray-50 {
        background-color: var(--dark-bg-primary) !important;
    }

    .bg-gray-100 {
        background-color: var(--dark-bg-tertiary) !important;
    }

    .text-gray-800 {
        color: var(--dark-text-primary) !important;
    }

    .text-gray-600 {
        color: var(--dark-text-secondary) !important;
    }

    .text-gray-500 {
        color: var(--dark-text-tertiary) !important;
    }

    .app-card {
        background-color: var(--dark-bg-secondary);
        border: 1px solid var(--dark-border);
    }

    .game-card {
        background: var(--dark-gradient-1);
    }

    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }

    .shadow-xl {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    }
}

/* 手动暗色模式切换 */
.dark {
    --primary-bg: var(--dark-bg-primary);
    --secondary-bg: var(--dark-bg-secondary);
    --surface-bg: var(--dark-bg-tertiary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-border);
}

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

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

.dark .bg-gray-50 {
    background-color: var(--dark-bg-primary) !important;
}

.dark .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.dark .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .hover-effect:hover {
        transform: none;
    }
    
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn {
        min-height: 44px;
    }
}

/* ========== 工具类样式 ========== */
/* 工具类样式 */

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
    transition: var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

::-webkit-scrollbar-corner {
    background: var(--secondary-color);
}

/* Firefox滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}

/* 文本工具类 */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* 间距工具类 */
.space-y-1 > * + * {
    margin-top: 0.25rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-8 > * + * {
    margin-top: 2rem;
}

.space-x-1 > * + * {
    margin-left: 0.25rem;
}

.space-x-2 > * + * {
    margin-left: 0.5rem;
}

.space-x-3 > * + * {
    margin-left: 0.75rem;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}

.space-x-6 > * + * {
    margin-left: 1.5rem;
}

.space-x-8 > * + * {
    margin-left: 2rem;
}

/* 显示/隐藏工具类 */
.hidden {
    display: none !important;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 定位工具类 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

/* 层级工具类 */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* 溢出工具类 */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* 弹性布局工具类 */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

/* 网格布局工具类 */
.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }

.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }

/* 圆角工具类 */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius-md); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-full { border-radius: 9999px; }

/* 阴影工具类 */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* 透明度工具类 */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* 变换工具类 */
.transform {
    transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-0 { transform: rotate(0deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* 过渡工具类 */
.transition-none {
    transition-property: none;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* 光标工具类 */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }

/* 用户选择工具类 */
.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
}

.select-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
}