{% extends "base.html" %}

{% block content %}
<!-- 修改网站标题区域 -->
<div class="site-header">
    <div class="site-title">
        <h1>应用</h1>
    </div>
    <div class="header-actions">
        {% if settings.donate_enabled == '1' %}
        <div class="donate-new-button" onclick="showDonateModal()">
            <button type="button" class="button">
                <span class="fold"></span>
                <div class="points_wrapper">
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                    <i class="point"></i>
                </div>
                <span class="inner">
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
                        <polyline points="13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37"></polyline>
                    </svg>
                    充电
                </span>
            </button>
        </div>
        {% endif %}
    </div>
</div>

<style>
/* 修改网站标题样式 */
.site-header {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 15px 3px 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0px solid rgba(0, 0, 0, 0.05);
}

.site-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-logo {
    height: 40px;
    width: auto;
    margin-right: 5px;
    display: none;
}

.light-mode-logo {
    display: block;
}

[data-theme="dark"] .light-mode-logo {
    display: none;
}

[data-theme="dark"] .dark-mode-logo {
    display: block;
}

.site-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 0;
    text-align: left;
    padding: 0;
}

/* 暗色模式适配 */
[data-theme="dark"] .site-header {
    background: rgba(26, 26, 26, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .site-header h1 {
    color: #fff;
}
</style>

<!-- 修改搜索栏部分 -->
<div class="search-bar {% if search %}search-bar-results{% endif %}">
    <div class="search-container">
        {% if search %}
        <a href="javascript:void(0)" onclick="handleBackClick()" class="back-arrow">
            <i class="fas fa-arrow-left"></i>
        </a>
        {% endif %}
        <form class="search-form" method="GET" action="{{ url_for('index') }}">
            <div class="search-wrapper {% if search %}search-wrapper-results{% endif %}">
                <i class="fas fa-search search-icon-input"></i>
                <input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
                <div class="search-divider"></div>
                <button type="submit" class="search-button">搜索</button>
            </div>
        </form>
    </div>
</div>

<div class="app-showcase">

    <!-- 添加说明文字和群聊链接 -->
    <div class="site-notice-container">
        <div class="site-notice-header" onclick="toggleNotice()">
            <div class="notice-icon">
                <i class="fas fa-bullhorn"></i>
            </div>
            <div class="notice-preview">{{ settings.site_notice }}</div>
            <div class="notice-toggle">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        <div class="site-notice-content collapsed">
            <div class="notice-text">{{ settings.site_notice }}</div>
        </div>
    </div>

    <!-- 修改 join-group 区域，隐藏第一个 platform-switch -->
    <div class="join-group">
        <div class="group-buttons">
            {% if settings and settings.qq_group_link %}
            <button class="group-btn qq-btn" onclick="showQQModal()">
                <i class="fab fa-qq"></i>
                <span class="btn-text">{{ settings.qq_group_text or 'QQ群' }}</span>
            </button>
            {% endif %}
            
            {% if settings and settings.wechat_group_qrcode %}
            <button class="group-btn wechat-btn" onclick="showWeChatModal()">
                <i class="fab fa-weixin"></i>
                <span class="btn-text">{{ settings.wechat_group_text or '微信群' }}</span>
            </button>
            {% endif %}
        </div>
        <!-- 在搜索结果页面隐藏第一个 platform-switch -->
        <div class="platform-switch" {% if search %}style="display: none;"{% endif %}>
            <label class="switch">
                <input type="checkbox" id="platformToggle">
                <span class="slider">
                    <i class="fas fa-mobile-alt"></i>
                    <i class="fas fa-tablet-alt"></i>
                </span>
            </label>
        </div>
    </div>
    
    <!-- 搜索结果区域 -->
{% if search %}
<div class="search-bar search-bar-results">
    <div class="search-container">
        <a href="javascript:void(0)" onclick="handleBackClick()" class="back-arrow">
            <i class="fas fa-arrow-left"></i>
        </a>
        <form class="search-form" method="GET" action="{{ url_for('index') }}">
            <div class="search-wrapper search-wrapper-results">
                <i class="fas fa-search search-icon-input"></i>
                <input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
                <div class="search-divider"></div>
                <button type="submit" class="search-button">搜索</button>
            </div>
        </form>
    </div>
</div>

<!-- 添加搜索结果的平台切换开关 -->
<div class="platform-switch search-platform-switch">
    <label class="switch">
        <input type="checkbox" id="searchPlatformToggle">
        <span class="slider">
            <i class="fas fa-mobile-alt"></i>
            <i class="fas fa-tablet-alt"></i>
        </span>
    </label>
</div>

<div class="apps-grid mobile-results" style="margin: 0; padding: 0;">
    {% set mobile_apps = [] %}
    {% for app in apps %}
        {% if app.platform and ('mobile' in app.platform.split(',')) %}
            {% set _ = mobile_apps.append(app) %}
        {% endif %}
    {% endfor %}

    {% if mobile_apps|length == 0 %}
    <div class="no-results">
        <div class="no-results-icon">
            <i class="fas fa-search"></i>
        </div>
        <div class="no-results-text">
            未找到相关应用
        </div>
        {% if settings.feedback_link %}
        <div class="no-results-feedback">
            <a href="{{ settings.feedback_link }}" target="_blank">
                <i class="fas fa-paper-plane"></i>
                反馈给我们
            </a>
        </div>
        {% endif %}
    </div>
    {% else %}
        {% for app in mobile_apps %}
        <div class="app-card" onclick="window.location.href='/app/{{ app.id }}'">
            <div class="app-icon">
                {% if 'http' in app.icon_path %}
                    <img data-src="{{ app.icon_path }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                {% else %}
                    <img data-src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                {% endif %}
            </div>
            <div class="app-info">
                <h3>{{ app.name }}</h3>
            </div>
        </div>
        {% endfor %}
    {% endif %}
</div>

<div class="apps-grid tablet-results" style="margin: 0; padding: 0; display: none;">
    {% set tablet_apps = [] %}
    {% for app in apps %}
        {% if app.platform and 'tablet' in app.platform.split(',') %}
            {% set _ = tablet_apps.append(app) %}
        {% endif %}
    {% endfor %}

    {% if tablet_apps|length == 0 %}
    <div class="no-results">
        <div class="no-results-icon">
            <i class="fas fa-search"></i>
        </div>
        <div class="no-results-text">
            未找到相关应用
        </div>
        {% if settings.feedback_link %}
        <div class="no-results-feedback">
            <a href="{{ settings.feedback_link }}" target="_blank">
                <i class="fas fa-paper-plane"></i>
                反馈给我们
            </a>
        </div>
        {% endif %}
    </div>
    {% else %}
        {% for app in tablet_apps %}
        <div class="app-card" onclick="window.location.href='/app/{{ app.id }}'">
            <div class="app-icon">
                {% if 'http' in app.icon_path %}
                    <img data-src="{{ app.icon_path }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                {% else %}
                    <img data-src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                {% endif %}
            </div>
            <div class="app-info">
                <h3>{{ app.name }}</h3>
            </div>
        </div>
        {% endfor %}
    {% endif %}
</div>
{% else %}


<!-- 分类磁贴区域 -->
<div class="categories-grid mobile-apps">
    <!-- 添加全部应用磁贴 -->
    <div class="category-tile category-color-0" onclick="window.location.href='{{ url_for('all_apps') }}';">
        <i class="category-icon fas fa-th-large"></i>
        <div class="category-tile-header">
            <h3>全部应用</h3>
            <span class="app-count">{{ apps|length }}个应用</span>
        </div>
    </div>

    {% for category in categories %}
        {% set category_apps = [] %}
        {% for app in apps %}
            {% if app.category_id == category.id %}
                {% set _ = category_apps.append(app) %}
            {% endif %}
        {% endfor %}
        
        {% if category_apps|length > 0 %}
        <div class="category-tile category-color-{{ loop.index % 16 }}" onclick="window.location.href='{{ url_for('view_category', category_id=category.id) }}';">
            <i class="category-icon fas {{ category.name|get_category_icon }}"></i>
            <div class="category-tile-header">
                <h3>{{ category.name }}</h3>
                <span class="app-count">{{ category_apps|length }}个应用</span>
            </div>
        </div>
        {% endif %}
    {% endfor %}
</div>

<!-- 平板应用区域 -->
<div class="categories-grid tablet-apps" style="display: none;">
    {% for category in categories %}
        {% set category_apps = [] %}
        {% for app in apps %}
            {% if app.category_id == category.id and app.platform and 'tablet' in app.platform.split(',') %}
                {% set _ = category_apps.append(app) %}
            {% endif %}
        {% endfor %}
        
        {% if category_apps|length > 0 %}
        <div class="category-tile category-color-{{ loop.index % 16 }}" onclick="window.location.href='{{ url_for('view_category', category_id=category.id) }}?platform=tablet';">
            <i class="category-icon fas {{ category.name|get_category_icon }}"></i>
            <div class="category-tile-header">
                <h3>{{ category.name }}</h3>
                <span class="app-count">{{ category_apps|length }}个应用</span>
            </div>
        </div>
        {% endif %}
    {% endfor %}
</div>

{% endif %}
</div>

<!-- 充电弹窗 -->
<div id="donate-modal" class="modal" style="display: none;">
    <div class="modal-content donate-modal">
        <div class="modal-header">
            <span class="close" onclick="closeDonateModal()">&times;</span>
            <h3>赞赏支持</h3>
        </div>
        <div class="modal-body">
            <div class="donate-container">
                <p class="donate-text">{{ settings.donate_text }}</p>
                {% if settings.donate_image %}
                <img src="{{ settings.donate_image }}" alt="赞赏码" class="donate-qr">
                {% endif %}
                <p class="donate-note" style="color: rgb(201, 180, 60);"><a href="{{ url_for('donors_page') }}" style="color: inherit; text-decoration: underline;">{{ settings.donate_note }}</a></p>
            </div>
        </div>
    </div>
</div>

<style>
/* 充电弹窗样式 */
.donate-modal {
    max-width: 360px;
    background: linear-gradient(145deg, #ffffff, #f5f5f7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.donate-modal .modal-header {
    background: linear-gradient(135deg, #7a5af8, #01b4ff);
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.donate-modal .modal-header h3 {
    color: white;
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.donate-modal .close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
}

.donate-modal .close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.donate-modal .modal-body {
    padding: 20px;
}

.donate-container {
    text-align: center;
}

.donate-text {
    color: #333;
    font-size: 15px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.donate-qr {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.donate-qr:hover {
    transform: scale(1.02);
}

.donate-note {
    color: #666;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    display: inline-block;
}

/* 添加动画效果 */
@keyframes donateModalShow {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.donate-modal {
    animation: donateModalShow 0.3s ease forwards;
}

/* 暗色模式适配 */
[data-theme="dark"] .donate-modal {
    background: linear-gradient(145deg, #1c1c1e, #2c2c2e);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .donate-text {
    color: #fff;
}

[data-theme="dark"] .donate-note {
    color: #999;
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .donate-qr {
    filter: brightness(0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .donate-modal {
        width: 90%;
        max-width: 320px;
    }
    
    .donate-text {
        font-size: 15px;
        margin: 0 0 15px 0;
    }
    
    .donate-qr {
        width: 180px;
        height: 180px;
        margin: 0 auto 15px;
    }
    
    .donate-note {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* 修改二维码样式，保持原始尺寸 */
.qr-code {
    max-width: 100%;  /* 改为100%最大宽度 */
    height: auto;     /* 高度自适应 */
    margin: 0px auto;
    display: block;
    border-radius: 8px;
    object-fit: contain;  /* 保持图片比例 */
}

/* 调整弹窗内容区域的宽度以适应二维码 */
.modal-content {
    background: white;
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 400px;  /* 增加最大宽度 */
    position: relative;
    animation: modalShow 0.3s ease;
}

/* 调整弹窗内容的内边距 */
.modal-body {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>

<script>
function showDonateModal() {
    const modal = document.getElementById('donate-modal');
    if (modal) {
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
}

function closeDonateModal() {
    const modal = document.getElementById('donate-modal');
    if (modal) {
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }
}

// 点击弹窗外部关闭
window.onclick = function(event) {
    const modal = document.getElementById('donate-modal');
    if (event.target === modal) {
        closeDonateModal();
    }
}
</script>

<!-- 在页面底部添加赞赏名单 -->
{% if settings.donate_enabled == '1' %}
<div class="donors-section">
    <h3>赞赏名单</h3>
    {% if donors_section %}
        {% set latest_donor = donors_section|sort(attribute='created_at', reverse=true)|first %}
        {% if latest_donor and latest_donor.created_at %}
            <p class="update-time">更新时间：{{ latest_donor.created_at|datetime_format }}</p>
        {% endif %}
    {% endif %}
    <div class="donors-wall">
        {# 移动端显示 #}
        {% for donor in donors_section[:mobile_limit] %}
        <div class="donor-card mobile-only" {% if donor.link %}onclick="window.location.href='{{ donor.link }}'"{% endif %}>
            <div class="donor-info">
                <div class="donor-name">{{ donor.name }}</div>
                <div class="donor-amount">
                    {% set amount = donor.amount.replace('¥', '').strip() %}
                    {% set float_amount = amount|float %}
                    ¥{{ "%.2f"|format(float_amount) }}
                </div>
            </div>
            {% if donor.link %}
            <div class="link-icon">
                <i class="fas fa-link"></i>
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {% if donors_section|length > mobile_limit %}
        <div class="donor-card mobile-only view-all-card" onclick="saveScrollPosition(); window.location.href='{{ url_for('donors_page') }}';">
            <div class="donor-info">
                <div class="view-all-text">查看全部</div>
                <div class="view-all-count">共{{ donors_section|length }}条</div>
            </div>
        </div>
        {% endif %}
        
        {# PC端��示 #}
        {% for donor in donors_section[:pc_limit] %}
        <div class="donor-card pc-only" {% if donor.link %}onclick="window.location.href='{{ donor.link }}'"{% endif %}>
            <div class="donor-info">
                <div class="donor-name">{{ donor.name }}</div>
                <div class="donor-amount">
                    {% set amount = donor.amount.replace('¥', '').strip() %}
                    {% set float_amount = amount|float %}
                    ¥{{ "%.2f"|format(float_amount) }}
                </div>
            </div>
            {% if donor.link %}
            <div class="link-icon">
                <i class="fas fa-link"></i>
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {% if donors_section|length > pc_limit %}
        <div class="donor-card pc-only view-all-card" onclick="saveScrollPosition(); window.location.href='{{ url_for('donors_page') }}';">
            <div class="donor-info">
                <div class="view-all-text">查看全部</div>
                <div class="view-all-count">共{{ donors_section|length }}条</div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<style>
/* 修改 donors-section 的样式 */
.donors-section {
    margin: 0 auto;  /* 移除上下边距，只保留左右居中 */
    padding: 0 15px 15px 15px;  /* 移除顶部内边距，保留底部和左右内边距 */
    max-width: 1200px;
}

/* 修改 donors-section 标题样式 */
.donors-section h3 {
    text-align: center;
    margin-bottom: 5px;
    padding-top: 15px;  /* 添加顶部内边距来替代外边距 */
    font-size: 16px;
    color: #333;
}


.credits-section {
    margin-bottom: 0;  /* 移除底部边距 */
    padding-bottom: 30px;  /* 添加底部内边距 */
}

/* 确保暗色模式下的样式正确 */
[data-theme="dark"] .donors-section h3 {
    color: #fff;
}

.update-time {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin: 0 0 15px 0;
}

.donors-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.donor-card {
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    position: relative;  /* 添加相对定位 */
}

.donor-card:hover {
    transform: translateY(-2px);
}

.donor-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.donor-name {
    color: #333;
    font-size: 12px;
    line-height: 1.3;
}

.donor-amount {
    color: #007AFF;
    font-size: 12px;
    line-height: 1.3;
}

.donor-message {
    color: #666;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .donors-wall {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .donor-card {
        padding: 6px;
    }
    
    .donor-name {
        font-size: 11px;
    }
    
    .donor-amount {
        font-size: 11px;
    }
    
    .donor-message {
        font-size: 10px;
    }
}

/* 添加查看全部卡片样式 */
.view-all-card {
    cursor: pointer;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.view-all-card:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.view-all-text {
    color: #007AFF;
    font-size: 12px;
    font-weight: 500;
}

.view-all-count {
    color: #666;
    font-size: 11px;
    margin-top: 2px;
}

/* 应式显示控��� */
@media (max-width: 768px) {
    .pc-only {
        display: none;
    }
    
    .donors-wall {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
    
    .donors-wall {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
}



/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    /* 添加弹性布局以实现居中 */
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 20px;
    /* 移除之前的 margin */
    margin: 0;
    /* 添加最大高度限制 */
    max-height: 90vh;
    overflow-y: auto;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .modal-content {
        width: 85%;
        padding: 16px;
        /* 确保在小屏幕上也能完整显示 */
        max-height: 80vh;
    }
    

    .donate-qr {
        max-width: 180px;
        margin: 0 auto;
    }
    
    .close {
        right: 12px;
        top: 8px;
    }
}

/* 暗色模式适配 */
[data-theme="dark"] .modal-content {
    background: #242424;
}

[data-theme="dark"] .donate-text {
    color: #fff;
}

[data-theme="dark"] .close {
    color: #999;
}

.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
}

.donate-container {
    text-align: center;
}


.donate-qr {
    max-width: 200px;
    border-radius: 8px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 0px 15px 15px 15px;
    margin-top: 0px;
}

.category-tile {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 20px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

.category-tile:active {
    transform: translateY(0);
}

.category-icon {
    position: relative;
    z-index: 1;
}

.category-tile-header {
    position: relative;
    z-index: 1;
}

.category-tile-header h3 {
    font-size: 16px;
    color: #fff;
    margin: 0;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.app-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    font-weight: 500;
}

/* 分类颜色 - 通过伪像素设置背景颜色 */
.category-color-0::before { background: #FF6B6B !important; }  /* 红色 */
.category-color-1::before { background: #4ECDC4 !important; }  /* 青色 */
.category-color-2::before { background: #45B7D1 !important; }  /* 蓝色 */
.category-color-3::before { background: #96CEB4 !important; }  /* 绿色 */
.category-color-4::before { background: #FFB75E !important; }  /* 橙色 */
.category-color-5::before { background: #D4A5A5 !important; }  /* 粉色 */
.category-color-6::before { background: #9B59B6 !important; }  /* 紫色 */
.category-color-7::before { background: #3498DB !important; }  /* 深蓝色 */
.category-color-8::before { background: #2ECC71 !important; }  /* 翠绿色 */
.category-color-9::before { background: #F1C40F !important; }  /* 金黄色 */
.category-color-10::before { background: #E74C3C !important; } /* 深红色 */
.category-color-11::before { background: #1ABC9C !important; } /* 青绿色 */
.category-color-12::before { background: #8E44AD !important; } /* 深紫色 */
.category-color-13::before { background: #D35400 !important; } /* 褐色 */
.category-color-14::before { background: #16A085 !important; } /* 墨绿色 */
.category-color-15::before { background: #E67E22 !important; } /* 橘色 */

/* 移除所有可能的背景色变化 */
.category-tile,
.category-tile:hover,
.category-tile:active,
[data-theme="dark"] .category-tile,
[data-theme="dark"] .category-tile:hover,
[data-theme="dark"] .category-tile:active {
    background: none !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .category-tile {
        padding: 15px 10px;
    }

    .category-tile-header {
        gap: 6px;
    }

    .category-tile-header h3 {
        font-size: 15px;
    }

    .app-count {
        font-size: 12px;
        padding: 3px 8px;
    }

    .category-icon {
        font-size: 36px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .category-tile {
        padding: 12px 8px;
    }

    .category-tile-header h3 {
        font-size: 14px;
    }

    .app-count {
        font-size: 11px;
        padding: 3px 6px;
    }

    .category-icon {
        font-size: 32px;
    }
}

/* ���改查看全部磁贴的样式 */
.view-all-tile {
    background: #34495e;  /* 使用单一深色背景 */
    position: relative;
    overflow: hidden;
}

.view-all-tile .category-icon {
    font-size: 48px;
    opacity: 0.15;
    color: white;
}

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

.view-all-tile:hover .category-icon {
    transform: rotate(0deg);
    opacity: 0.2;
}

.view-all-tile .category-tile-header h3 {
    font-weight: 600;
    color: white;
}

.view-all-tile .app-count {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* 确保查看全部磁贴在网格末尾 */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 0px 15px 15px 15px;
    margin-top: 0px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .view-all-tile .category-icon {
        font-size: 36px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
    .view-all-tile .category-icon {
        font-size: 32px;
    }
}

/* 修改搜索结果区域的应用网格样式 */
.apps-grid {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 15px;
    background: #fff;  /* 默认亮色背景 */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;  /* 添加过渡效果 */
}

/* 搜索结果中的应用卡片样式 */
.apps-grid .app-card {
    background: #fff;  /* 默认亮色背景 */
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apps-grid .app-card:hover {
    transform: translateY(-2px);
    background: #f5f5f5;  /* 亮色模式下的悬停背景 */
}

/* 无结果状态样式 */
.no-results {
    background: #fff;  /* 默认亮色背景 */
    transition: background-color 0.3s ease;
}

.no-results-icon {
    color: #ccc;
}

.no-results-text {
    color: #666;
}

/* 暗色模式样式 */
[data-theme="dark"] .apps-grid {
    background: #242424;
}

[data-theme="dark"] .apps-grid .app-card {
    background: #242424;
}

[data-theme="dark"] .apps-grid .app-card:hover {
    background: #333;
}

[data-theme="dark"] .no-results {
    background: #242424;
}

[data-theme="dark"] .no-results-icon {
    color: #666;
}

[data-theme="dark"] .no-results-text {
    color: #ccc;
}

/* 确��其他区域也有��确的背景色过渡 */
.header,
.search-bar,
.site-header {
    transition: background-color 0.3s ease;
}

/* 亮色模式下的背景色 */
.hot-apps-section {
    background: #fff;
}

.header {
    background: #fff;
}

.search-bar {
    background: #f5f5f7;
}

.site-header {
    background: #f5f5f7;
}

/* 暗色模式下的背景色 */
[data-theme="dark"] .hot-apps-section {
    background: #242424;
}

[data-theme="dark"] .header {
    background: #242424;
}

[data-theme="dark"] .search-bar {
    background: #1a1a1a;
}

[data-theme="dark"] .site-header {
    background: #242424;
}

/* 添加赞说明文字样式 */
.donate-note {
    margin-top: 15px;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

/* 平台切换按钮样式 */
.platform-switch {
    margin: 15px auto;
    width: 200px; /* 和搜索栏下面的开关一样宽 */
    display: flex;
    justify-content: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 34px;
    cursor: pointer;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}

.slider:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 48%;
    left: 4px;
    bottom: 3px;
    background-color: #007AFF;
    transition: 0.4s;
    border-radius: 17px;
    z-index: 1;
}

.slider i {
    color: #666;
    position: relative;
    z-index: 2;
    width: 48%;
    text-align: center;
    transition: color 0.4s;
}

/* 选中状态样式 */
input:checked + .slider:before {
    transform: translateX(96%);
}

input:checked + .slider i.fa-tablet-alt {
    color: white;
}

input:checked + .slider i.fa-mobile-alt {
    color: #666;
}

/* 未选中状态样式 */
input:not(:checked) + .slider i.fa-mobile-alt {
    color: white;
}

input:not(:checked) + .slider i.fa-tablet-alt {
    color: #666;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .platform-switch {
        width: 160px; /* 移动端稍微窄一点 */
    }

    .switch {
        height: 30px;
    }

    .slider:before {
        height: 22px;
    }

    .slider i {
        font-size: 14px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
    .platform-switch {
        width: 140px;
    }
}

/* 应用区域切换动画 */
.categories-grid {
    transition: opacity 0.3s ease;
}

.categories-grid.mobile-apps,
.categories-grid.tablet-apps {
    opacity: 1;
}

.categories-grid.mobile-apps.hidden,
.categories-grid.tablet-apps.hidden {
    opacity: 0;
    display: none;
}

/* 隐搜索结果界面的勾选框 */
.search-platform-switch .switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 修改搜索结果界面的滑块样式 */
.search-platform-switch .switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 34px;
    cursor: pointer;
}

.search-platform-switch .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}

.search-platform-switch .slider:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 48%;
    left: 4px;
    bottom: 3px;
    background-color: #007AFF;
    transition: 0.4s;
    border-radius: 17px;
    z-index: 1;
}

.search-platform-switch .slider i {
    color: #666;
    position: relative;
    z-index: 2;
    width: 48%;
    text-align: center;
    transition: color 0.4s;
}

/* 选中状态样式 */
.search-platform-switch input:checked + .slider:before {
    transform: translateX(96%);
}

.search-platform-switch input:checked + .slider i.fa-tablet-alt {
    color: white;
}

.search-platform-switch input:checked + .slider i.fa-mobile-alt {
    color: #666;
}

/* 未选中状态样式 */
.search-platform-switch input:not(:checked) + .slider i.fa-mobile-alt {
    color: white;
}

.search-platform-switch input:not(:checked) + .slider i.fa-tablet-alt {
    color: #666;
}

/* 搜索结果平台切换开关样式 */
.search-platform-switch {
    margin: 15px auto;
    width: 200px; /* 增加宽度到 200px */
    display: flex;
    justify-content: center;
}

.search-platform-switch .switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 34px;
    cursor: pointer;
}

.search-platform-switch .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}

.search-platform-switch .slider:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 48%;
    left: 4px;
    bottom: 3px;
    background-color: #007AFF;
    transition: 0.4s;
    border-radius: 17px;
    z-index: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .search-platform-switch {
        width: 160px; /* 移动端稍微窄一点 */
    }

    .search-platform-switch .switch {
        height: 30px;
    }

    .search-platform-switch .slider:before {
        height: 22px;
    }
}

.no-results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px auto;
    width: 100%;
    max-width: 400px;
}

.no-results-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 15px;
}

.no-results-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.no-results-feedback {
    margin-top: 10px;
}

.no-results-feedback a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #007AFF;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.no-results-feedback a:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.no-results-feedback i {
    font-size: 14px;
}

/* 添加链接图标的样式 */
.donor-card {
    position: relative;  /* 添加相对定位 */
}

.link-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #007AFF;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.donor-card:hover .link-icon {
    opacity: 1;
}

/* 调整移动端样 */
@media (max-width: 768px) {
    .link-icon {
        top: 6px;
        right: 6px;
        font-size: 10px;
    }
}


/* 优化返回按钮的触摸反馈 */
.back-arrow {
    -webkit-tap-highlight-color: rgba(0,0,0,0);  /* 移除移动端点击高亮 */
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.back-arrow:active {
    opacity: 0.7;  /* 点击时的视觉反馈 */
}

@media (hover: hover) {
    .back-arrow:hover {
        opacity: 0.8;
    }
}

/* 暗色模式样式 */
[data-theme="dark"] .site-header {
    background: #242424;
}

[data-theme="dark"] .site-header h1 {
    color: #fff;
}

[data-theme="dark"] .search-bar {
    background: #242424;
}

[data-theme="dark"] .search-wrapper {
    background: #333;
}

[data-theme="dark"] .search-wrapper input {
    color: #fff;
}

[data-theme="dark"] .search-wrapper input::placeholder {
    color: #999;
}

[data-theme="dark"] .search-icon-input {
    color: #999;
}

[data-theme="dark"] .search-button {
    background: #333;
    color: #fff;
}

[data-theme="dark"] .app-showcase {
    background: #1a1a1a;
}

[data-theme="dark"] .hot-apps-section {
    background: #242424;
}

[data-theme="dark"] .section-title h2 {
    color: #fff;
}

[data-theme="dark"] .app-card {
    background: #333;
}

[data-theme="dark"] .app-card .app-info h3 {
    color: #fff;
}

[data-theme="dark"] .view-all {
    background: #333;
    color: #ccc;
}

[data-theme="dark"] .view-all:hover {
    background: #444;
    color: #fff;
}

[data-theme="dark"] .site-notice {
    color: #ccc;
}

[data-theme="dark"] .join-group a {
    color: #fff;
}

[data-theme="dark"] .join-group .group-number {
    color: #ccc;
}

[data-theme="dark"] .donors-section {
    background: #1a1a1a;
}

[data-theme="dark"] .donors-section h3 {
    color: #fff;
}

[data-theme="dark"] .update-time {
    color: #999;
}

[data-theme="dark"] .donor-card {
    background: #333;
}

[data-theme="dark"] .donor-name {
    color: #fff;
}

[data-theme="dark"] .donor-amount {
    color: #007AFF;
}

[data-theme="dark"] .view-all-card {
    background: #242424;
}

[data-theme="dark"] .view-all-text {
    color: #007AFF;
}

[data-theme="dark"] .view-all-count {
    color: #ccc;
}

/* 平台切换开关暗色模式样式 */
[data-theme="dark"] .switch .slider {
    background-color: #333;
    border-color: #444;
}

[data-theme="dark"] .switch .slider i {
    color: #999;
}

[data-theme="dark"] .switch input:checked + .slider i.fa-tablet-alt,
[data-theme="dark"] .switch input:not(:checked) + .slider i.fa-mobile-alt {
    color: #fff;
}

/* 修改热门应用区域的样式 */
.hot-apps-section {
    margin: 0 15px;  /* 移除顶部间距，只保留左右间距 */
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px 0px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}


.hot-apps-section::after {
    content: none; 
}

[data-theme="dark"] .hot-apps-section::after {
    content: none;
}


.apps-scroll::after,
.apps-row::after {
    content: none;
}

[data-theme="dark"] .apps-scroll::after,
[data-theme="dark"] .apps-row::after {
    content: none;
}

[data-theme="dark"] .hot-apps-section .app-card {
    background: #242424;  
}

[data-theme="dark"] .hot-apps-section .app-card .app-info h3 {
    color: #fff;
}

[data-theme="dark"] .apps-grid .app-card {
    background: #242424;  /
}

[data-theme="dark"] .categories-grid .app-card {
    background: #242424;  
}


[data-theme="dark"] .app-card {
    background: initial;
}



[data-theme="dark"] .app-card {
    background: initial;
}

[data-theme="dark"] .app-card .app-info h3 {
    color: #fff;
}


[data-theme="dark"] .hot-apps-section .app-card {
    background: #242424; 
}

[data-theme="dark"] .hot-apps-section .app-card .app-info h3 {
    color: #fff;
}


[data-theme="dark"] .apps-grid .app-card {
    background: #242424; 
}

[data-theme="dark"] .categories-grid .app-card {
    background: #242424;  
}

[data-theme="dark"] .app-card {
    background: initial;
}



/* 波浪渐变动画 */
@keyframes waveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 光效移动动画 */
@keyframes lightMove {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}


/* 充电按钮样式 */
.button {
    --h-button: 42px;  /* 减小高度 */
    --w-button: 88px;  /* 减���宽度 */
    --round: 0.75rem;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.25s ease;
    background: radial-gradient(
        65.28% 65.28% at 50% 100%,
        rgba(223, 113, 255, 0.8) 0%,
        rgba(223, 113, 255, 0) 100%
),
linear-gradient(0deg, #7a5af8, #7a5af8);
    border-radius: var(--round);
    border: none;
    outline: none;
    padding: 10px 16px;  /* 减小内边距 */
}

.button::before,
.button::after {
    content: "";
    position: absolute;
    inset: var(--space);
    transition: all 0.5s ease-in-out;
    border-radius: calc(var(--round) - var(--space));
    z-index: 0;
}

.button::before {
    --space: 1px;
    background: linear-gradient(
        177.95deg,
        rgba(255, 255, 255, 0.19) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.button::after {
    --space: 2px;
    background: radial-gradient(
        65.28% 65.28% at 50% 100%,
        rgba(223, 113, 255, 0.8) 0%,
        rgba(223, 113, 255, 0) 100%
    ),
    linear-gradient(0deg, #7a5af8, #7a5af8);
}

.button:active {
    transform: scale(0.95);
}

.fold {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    height: 0.8rem;  /* 减小折角大小 */
    width: 0.8rem;
    display: inline-block;
    transition: all 0.5s ease-in-out;
    background: radial-gradient(
        100% 75% at 55%,
        rgba(223, 113, 255, 0.8) 0%,
        rgba(223, 113, 255, 0) 100%
    );
    box-shadow: 0 0 3px black;
    border-bottom-left-radius: 0.5rem;
    border-top-right-radius: var(--round);
}

.fold::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150%;
    height: 150%;
    transform: rotate(45deg) translateX(0%) translateY(-18px);
    background-color: #e8e8e8;
    pointer-events: none;
}

.button:hover .fold {
    margin-top: -1rem;
    margin-right: -1rem;
}

.points_wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.points_wrapper .point {
    bottom: -10px;
    position: absolute;
    animation: floating-points infinite ease-in-out;
    pointer-events: none;
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 9999px;
}

@keyframes floating-points {
    0% {
        transform: translateY(0);
    }
    85% {
        opacity: 0;
    }
    100% {
        transform: translateY(-55px);
        opacity: 0;
    }
}

    /* 设置每个点的位置和动画 */
    .points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
    .points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
    .points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
    .points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
    .points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
    .points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
    .points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }

    .inner {
        z-index: 2;
        font-size: 14px;  /* 减小文字大小 */
        gap: 4px;  /* 减小图标和文字的间距 */
        position: relative;
        width: 100%;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease-in-out;
    }

    .inner svg.icon {
        width: 16px;  /* 减小图标大小 */
        height: 16px;
        transition: fill 0.1s linear;
    }

    .button:focus svg.icon {
        fill: white;
    }

    .button:hover svg.icon {
        fill: transparent;
        animation:
            dasharray 1s linear forwards,
            filled 0.1s linear forwards 0.95s;
    }

    @keyframes dasharray {
        from {
            stroke-dasharray: 0 0 0 0;
        }
        to {
            stroke-dasharray: 68 68 0 0;
        }
    }

    @keyframes filled {
        to {
            fill: white;
        }
    }

    /* 暗色模式适配 */
    [data-theme="dark"] .fold::after {
        background-color: #333;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .button {
            --h-button: 36px;
            --w-button: 80px;
            padding: 8px 14px;
        }
        
        .inner {
            font-size: 13px;
        }
        
        .inner svg.icon {
            width: 14px;
            height: 14px;
        }
        
        .fold {
            height: 0.7rem;
            width: 0.7rem;
        }
    }

    

    /* 共享按钮基础样式 */
    .share-button button,
    .theme-toggle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .share-button button:hover,
    .theme-toggle:hover {
        transform: scale(1.1);
    }

    /* 主题切换按钮样式 */
    .theme-toggle {
        padding: 0;
    }

    .st-sunMoonThemeToggleBtn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .st-sunMoonThemeToggleBtn svg {
        width: 20px;
        height: 20px;
    }

    /* 暗色模式样式 */
    [data-theme="dark"] .share-button button,
    [data-theme="dark"] .theme-toggle {
        background: #333;
        color: #fff;
    }




    /* 修改磁贴悬停样式 - 移除颜色变化效果 */
    .app-tile:hover {
        transform: translateY(-2px);  /* 只保留上浮效果 */
        background: none !important;  /* 移除背景色变化 */
    }

    .app-tile:active {
        transform: translateY(0);     /* 点击时回到原位 */
        background: none !important;  /* 确保点击时也不改变背景色 */
    }

    /* 修改充电按钮的样式，增加右侧间距 */
    .donate-button {
        margin-right: 12px;  /* 增加右侧间距 */
    }

    /* 暗色模式下也保持磁贴不变色 */
    [data-theme="dark"] .app-tile:hover,
    [data-theme="dark"] .app-tile:active {
        background: none !important;
    }

    /* 修改分类颜色样式，使用伪元素实现背景色 */
    .category-color-0::before { background: #FF6B6B; }  /* 红色 */
    .category-color-1::before { background: #4ECDC4; }  /* 青色 */
    .category-color-2::before { background: #45B7D1; }  /* 蓝色 */
    /* ... 其他颜色保持不变 ... */

    /* 添加伪元素作为背景 */
    .category-tile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        z-index: 0;
    }

    /* 修改分类磁贴的基础样式 */
    .category-tile {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        padding: 20px 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* 恢复原来的背景图标样式 */
    .category-icon {
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-size: 48px;
        opacity: 0.1;
        transform: rotate(-15deg);
        transition: all 0.3s ease;
    }

    .category-tile:hover .category-icon {
        transform: rotate(0deg);
        opacity: 0.15;
    }

    /* 分类颜色 - 扩充为16种颜色 */
    .category-color-0 { background: #FF6B6B; }  /* 红色 */
    .category-color-1 { background: #4ECDC4; }  /* 青色 */
    .category-color-2 { background: #45B7D1; }  /* 蓝色 */
    .category-color-3 { background: #96CEB4; }  /* 绿色 */
    .category-color-4 { background: #FFB75E; }  /* 橙色 */
    .category-color-5 { background: #D4A5A5; }  /* 粉色 */
    .category-color-6 { background: #9B59B6; }  /* 紫色 */
    .category-color-7 { background: #3498DB; }  /* 深蓝色 */
    .category-color-8 { background: #2ECC71; }  /* 翠绿色 */
    .category-color-9 { background: #F1C40F; }  /* 金黄色 */
    .category-color-10 { background: #E74C3C; } /* 深红色 */
    .category-color-11 { background: #1ABC9C; } /* 青绿色 */
    .category-color-12 { background: #8E44AD; } /* 深紫色 */
    .category-color-13 { background: #D35400; } /* 褐色 */
    .category-color-14 { background: #16A085; } /* 绿 */
    .category-color-15 { background: #E67E22; } /* 橘色 */

    /* 修改磁贴悬停效果 - 只保留上浮效，移除背景色变化 */
    .category-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .category-tile:active {
        transform: translateY(0);
    }

    /* 确保内容在最上层 */
    .category-tile-header {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    /* 群组按钮样式 */
    .join-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        
    }

    .group-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .group-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .qq-btn {
        background: #12B7F5;
        color: white;
    }

    .wechat-btn {
        background: #07C160;
        color: white;
    }

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

    /* 群组弹窗样式 */
    .group-container {
        text-align: center;
        padding: 20px;
    }

    .group-qr {
        max-width: 200px;
        margin: 20px auto;
        border-radius: 8px;
    }

    .group-number {
        font-size: 16px;
        color: #666;
        margin: 10px 0;
    }

    .group-tip {
        font-size: 14px;
        color: #666;
        margin: 10px 0;
    }

    .join-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        background: #12B7F5;
        color: white;
        text-decoration: none;
        border-radius: 20px;
        transition: all 0.3s ease;
    }

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

    <!-- 添加QQ群弹窗 -->
    <div id="qq-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeQQModal()">&times;</span>
                <h3>QQ交流群</h3>
            </div>
            <div class="modal-body">
                {% if settings.qq_group_qrcode %}
                <img src="{{ settings.qq_group_qrcode }}" alt="QQ群二维码" class="qr-code">
                {% endif %}
                <div class="group-number-container">
                    <p class="group-number">{{ settings.qq_group_number }}</p>
                    <button class="copy-btn" onclick="copyGroupNumber()">
                        <i class="far fa-copy"></i>
                    </button>
                </div>
                <div id="copy-notification" class="copy-notification">
                    群号已复制到剪贴板
                </div>
                <a href="{{ settings.qq_group_link }}" class="join-btn qq-join-btn" target="_blank">
                    <i class="fab fa-qq"></i>
                    立即加入
                </a>
            </div>
        </div>
    </div>

    <style>
    /* 群号码容器样式 */
    .group-number-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 15px 0;
    }

    .group-number {
        margin: 0;
        color: #666;
        font-size: 16px;
    }

    /* 复制按钮样式 */
    .copy-btn {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 16px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .copy-btn:hover {
        background: #f5f5f5;
        color: #333;
    }

    /* 复制成功提示样式 */
    .copy-notification {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 2000;
    }

    .copy-notification.show {
        opacity: 1;
        visibility: visible;
    }

    /* 暗色模式样式 */
    [data-theme="dark"] .copy-btn {
        color: #999;
    }

    [data-theme="dark"] .copy-btn:hover {
        background: #333;
        color: #fff;
    }
    </style>

    <script>
    // 复制群号功能
    function copyGroupNumber() {
        // 从群号文本中提取纯数字
        const groupNumber = document.querySelector('.group-number').textContent.match(/\d+/)[0];
        
        // 使用 Clipboard API 复制文本
        navigator.clipboard.writeText(groupNumber).then(() => {
            // 显示复制成功提示
            const notification = document.getElementById('copy-notification');
            notification.classList.add('show');
            
            // 1.5秒后藏提示
            setTimeout(() => {
                notification.classList.remove('show');
            }, 1500);
        }).catch(err => {
            console.error('复制失败:', err);
            // 使用备用方案
            const textarea = document.createElement('textarea');
            textarea.value = groupNumber;
            document.body.appendChild(textarea);
            textarea.select();
            try {
                document.execCommand('copy');
                // 显示复制成功提示
                const notification = document.getElementById('copy-notification');
                notification.classList.add('show');
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 1500);
            } catch (err) {
                console.error('备用复制方案失败:', err);
            }
            document.body.removeChild(textarea);
        });
    }

    // 其他现有的弹窗相关代码保持不变...
    </script>

    <!-- 添加微信群弹窗 -->
    <div id="wechat-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeWeChatModal()">&times;</span>
                <h3>微信交流群</h3>
            </div>
            <div class="modal-body">
                {% if settings.wechat_group_qrcode %}
                <img src="{{ settings.wechat_group_qrcode }}" alt="微信群二维码" class="qr-code">
                {% endif %}
                <p class="group-tip">请扫码加入微信群</p>
            </div>
        </div>
    </div>

    <style>
    /* 群组按钮和平台换的容器样式 */
    .join-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    .group-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    /* 群组按钮样式 */
    .group-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .qq-btn {
        background: #12B7F5;
        color: white;
    }

    .wechat-btn {
        background: #07C160;
        color: white;
    }

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

    /* 弹窗样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-content {
        background: white;
        border-radius: 12px;
        padding: 0;
        width: 90%;
        max-width: 320px;
        position: relative;
        animation: modalShow 0.3s ease;
    }

    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .modal-body {
        padding: 0px 20px 20px 20px;
        text-align: center;
    }

    .close {
        position: absolute;
        right: 15px;
        top: 12px;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        line-height: 1;
    }

    .qr-code {
        width: 200px;
        height: 200px;
        margin: 0px auto;
        display: block;
        border-radius: 8px;
    }

    .group-number-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 15px 0;
    }

    .group-number {
        margin: 0;
        color: #666;
        font-size: 16px;
    }

    .copy-btn {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 16px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .copy-btn:hover {
        background: #f5f5f5;
        color: #333;
    }

    .group-tip {
        margin: 15px 0;
        color: #666;
        font-size: 16px;
    }

    .join-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 15px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .qq-join-btn {
        background: #12B7F5;
        color: white;
    }

    .wechat-join-btn {
        background: #07C160;
        color: white;
    }

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

    .copy-notification {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 2000;
    }

    .copy-notification.show {
        opacity: 1;
        visibility: visible;
    }

    /* 暗色模式样式 */
    [data-theme="dark"] .modal-content {
        background: #242424;
    }

    [data-theme="dark"] .close {
        color: #999;
    }

    [data-theme="dark"] .group-number,
    [data-theme="dark"] .group-tip {
        color: #999;
    }

    [data-theme="dark"] .copy-btn {
        color: #999;
    }

    [data-theme="dark"] .copy-btn:hover {
        background: #333;
        color: #fff;
    }

    [data-theme="dark"] .qr-code {
        filter: brightness(0.8);
    }

    @keyframes modalShow {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    </style>

    <script>
    // 群组弹窗相关函数
    function showQQModal() {
        const modal = document.getElementById('qq-modal');
        if (modal) {
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    }

    function closeQQModal() {
        const modal = document.getElementById('qq-modal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }
    }

    function showWeChatModal() {
        const modal = document.getElementById('wechat-modal');
        if (modal) {
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    }

    function closeWeChatModal() {
        const modal = document.getElementById('wechat-modal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }
    }

    // 点击弹窗外部关闭
    window.onclick = function(event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
            document.body.style.overflow = '';
        }
    }
    </script>


    <!-- QQ群弹窗 -->
    <div id="qq-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeQQModal()">&times;</span>
                <h3>QQ交流群</h3>
            </div>
            <div class="modal-body">
                {% if settings.qq_group_qrcode %}
                <img src="{{ settings.qq_group_qrcode }}" alt="QQ群二维码" class="qr-code">
                {% endif %}
                <div class="group-number-container">
                    <p class="group-number">{{ settings.qq_group_number }}</p>
                    <button class="copy-btn" onclick="copyGroupNumber()" title="复制群号">
                        <i class="far fa-copy"></i>
                    </button>
                </div>
                <div id="copy-notification" class="copy-notification">
                    群号已复制到剪贴板
                </div>
                <div class="join-btn-container">
                    <a href="{{ settings.qq_group_link }}" class="join-btn qq-join-btn" target="_blank">
                        <i class="fab fa-qq"></i>
                        立即加入
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 微信群弹窗 -->
    <div id="wechat-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeWeChatModal()">&times;</span>
                <h3>微信交流群</h3>
            </div>
            <div class="modal-body">
                {% if settings.wechat_group_qrcode %}
                <img src="{{ settings.wechat_group_qrcode }}" alt="微信群二维码" class="qr-code">
                {% endif %}
                <p class="group-tip">请扫码加入微信群</p>
            </div>
        </div>
    </div>

    <style>
    /* 弹窗样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-content {
        background: white;
        border-radius: 12px;
        padding: 0;
        width: 90%;
        max-width: 320px;
        position: relative;
        animation: modalShow 0.3s ease;
    }

    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .modal-body {
        padding: 20px;
        text-align: center;
    }

    .close {
        position: absolute;
        right: 15px;
        top: 12px;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        line-height: 1;
    }

    .qr-code {
        width: 200px;
        height: 200px;
        margin: 0px auto;
        display: block;
        border-radius: 8px;
    }

    .group-number-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 15px 0;
    }

    .group-number {
        margin: 0;
        color: #666;
        font-size: 16px;
    }

    .group-tip {
        margin: 15px 0;
        color: #666;
        font-size: 16px;
    }

    .join-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 15px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .qq-join-btn {
        background: #12B7F5;
        color: white;
    }

    .wechat-join-btn {
        background: #07C160;
        color: white;
    }

    .join-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(18, 183, 245, 0.2);
    }

    /* 暗色模式样式 */
    [data-theme="dark"] .modal-content {
        background: #242424;
    }

    [data-theme="dark"] .modal-header {
        border-bottom-color: #333;
    }

    [data-theme="dark"] .modal-header h3 {
        color: #fff;
    }

    [data-theme="dark"] .group-number,
    [data-theme="dark"] .group-tip {
        color: #999;
    }

    @keyframes modalShow {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    </style>

    <script>
    // 群组弹窗相关函数
    function showQQModal() {
        const modal = document.getElementById('qq-modal');
        if (modal) {
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    }

    function closeQQModal() {
        const modal = document.getElementById('qq-modal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }
    }

    function showWeChatModal() {
        const modal = document.getElementById('wechat-modal');
        if (modal) {
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    }

    function closeWeChatModal() {
        const modal = document.getElementById('wechat-modal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }
    }

    // 点击弹窗外部关闭
    window.onclick = function(event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
            document.body.style.overflow = '';
        }
    }
    </script>

   

    <style>
    /* 站点通知样式 */
    .site-notice-container {
        margin: 15px;
        background: white;
        border-radius: 16px;  /* 增大圆角 */
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);  /* 调整阴影 */
        overflow: hidden;
    }

    .site-notice-header {
        display: flex;
        align-items: center;  /* 改为居中对齐 */
        padding: 15px;  /* 增加内边距 */
        cursor: pointer;
        transition: all 0.3s ease;  /* 添加过渡效果 */
        position: relative;
        background: linear-gradient(to right, rgba(0,122,255,0.03), rgba(0,122,255,0.01));  /* 添加渐变背景 */
    }

    .site-notice-header:hover {
        background: linear-gradient(to right, rgba(0,122,255,0.06), rgba(0,122,255,0.02));  /* 悬停时加深背景 */
    }

    .notice-icon {
        color: #007AFF;
        margin-right: 12px;  /* 增加图标右边距 */
        flex-shrink: 0;
        width: 20px;
        text-align: center;
        font-size: 16px;  /* 调整图标大小 */
        animation: noticeIconBounce 2s infinite;  /* 添加弹跳动画 */
    }

    .notice-preview {
        flex: 1;
        font-size: 14px;
        color: #333;  /* 加深文字颜色 */
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 32px;
        text-align: left;
        font-weight: 500;  /* 稍微加粗 */
    }

    .notice-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .notice-toggle i {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 14px;
    }

    .notice-toggle.expanded i {
        transform: rotate(180deg);
    }

    /* 添加图标弹跳动画 */
    @keyframes noticeIconBounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2px);
        }
    }

    /* 暗色模式适配 */
    [data-theme="dark"] .site-notice-container {
        background: #242424;
    }

    [data-theme="dark"] .site-notice-header {
        background: linear-gradient(to right, rgba(0,122,255,0.06), rgba(0,122,255,0.02));
    }

    [data-theme="dark"] .site-notice-header:hover {
        background: linear-gradient(to right, rgba(0,122,255,0.1), rgba(0,122,255,0.04));
    }

    [data-theme="dark"] .notice-preview {
        color: #e0e0e0;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .site-notice-container {
            margin: 12px;
            border-radius: 14px;
        }
        
        .site-notice-header {
            padding: 12px;
        }
        
        .notice-preview {
            font-size: 13px;
        }
    }

    .site-notice-content {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 15px;
        margin-left: 39px;
    }

    .site-notice-content.expanded {
        height: auto;
        opacity: 1;
        padding: 0 15px 15px 39px;
    }

    .notice-text {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
        text-align: left;
        padding-right: 24px; /* 确保展开后的文字也不会和箭头重叠 */
    }
    </style>

    <script>
    // 修改展开/收起功能
    function toggleNotice() {
        const content = document.querySelector('.site-notice-content');
        const toggle = document.querySelector('.notice-toggle');
        const isExpanded = content.classList.contains('expanded');
        
        if (isExpanded) {
            content.style.height = content.scrollHeight + 'px';
            // 触发重排
            content.offsetHeight;
            content.style.height = '0';
            content.classList.remove('expanded');
            toggle.classList.remove('expanded');
        } else {
            content.classList.add('expanded');
            toggle.classList.add('expanded');
            content.style.height = content.scrollHeight + 'px';
            // 动画完成后移除固定高度，允许内容自适应
            setTimeout(() => {
                content.style.height = 'auto';
            }, 300);
        }
    }

    // 页面加载时初始化通知内容高度
    document.addEventListener('DOMContentLoaded', () => {
        const content = document.querySelector('.site-notice-content');
        content.style.height = '0';
    });
    </script>

    {% endblock %}

    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
    <style>
    /* 修改网站标题样式 */
    .site-header {
        background: #F5F8FB;
        padding: px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site-header h1 {
        font-size: 24px;
        font-weight: 600;
        color: #000;
        margin: 0;
        text-align: left;
        padding: 0 20px;
    }

    /* 修改搜索栏样式 */
    .search-bar {
        background: #F5F8FB;
        padding-top: 3px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 5px;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 999;
        transition: transform 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .search-form {
        display: flex;
        align-items: center;
        max-width: 800px;
        width: 100%;
    }

    /* 搜索结果页的搜栏样式 */
    .search-bar-results .search-wrapper {
        max-width: 700px;
    }

    .search-wrapper {
        max-width: 700px;
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        background: white;
        border-radius: 25px;
        padding-right: 5px;
    }

    /* 调整搜索图标位置和样式 */
    .search-icon-input {
        position: absolute;
        left: 15px;
        color: #666;
        font-size: 16px;
    }

    /* 整输入框样式 */
    .search-wrapper input {
        width: 100%;
        height: 44px;
        padding: 0 5px 0 40px;
        border: none;
        border-radius: 25px;
        background: transparent;
        font-size: 16px;
        outline: none;
    }

    .search-wrapper input:focus {
        background: transparent;  /* 保持透明背景 */
    }

    /* 搜索按钮样 */
    .search-button {
        background: white;  /* 改为白色背景 */
        color: #0066cc;    /* 改为蓝色文字 */
        border: none;      /* 移除边框 */
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: opacity 0.3s ease;
        box-shadow: none;  /* 移除阴影 */
    }

    .search-button:hover,
    .search-button:focus {
        opacity: 0.9;
        background: white;  /* 保持白色背景 */
        color: #0066cc;    /* 保持蓝色文 */
        box-shadow: none;  /* 保持无阴影 */
    }

    .search-button i {
        font-size: 14px;
        color: #0066cc;  /* 图标也改为蓝 */
    }

    /* 移除放镜图标相关式 */
    .search-icon {
        display: none;
    }

    /* 调整 app-showcase 的 margin-top */
    .app-showcase {
        margin-top: 75px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .site-header {
            padding: 10px;
        }
        
        .site-header h1 {
            font-size: 20px;
            padding: 0 15px;
        }
        
        .search-wrapper {
            padding-right: 4px;
        }
        
        .search-wrapper input {
            padding: 10px 5px 10px 35px;
            font-size: 14px;
        }
        
        .search-button {
            padding: 6px 20px;
            min-width: 80px;
        }
        
        .search-icon {
            width: 36px;
            height: 36px;
        }
        
        .search-icon i {
            font-size: 16px;
        }
    }

    /* 修改搜索栏容器样式 */
    .search-container {
        display: flex;
        align-items: center;  /* 垂居中对齐 */
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        height: 44px;  /* 设置固定高度 */
    }

    /* 返回箭头样式 */
    .back-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #666;
        text-decoration: none;
        transition: color 0.3s ease;
        margin-right: 10px;
    }

    .back-arrow i {
        font-size: 20px;
    }

    /* 搜索表单样式 */
    .search-form {
        display: flex;
        align-items: center;
        flex: 1;
        height: 44px;  /* 与容器高度一致 */
    }

    /* 搜索框样式 */
    .search-wrapper {
        width: 100%;
        height: 44px;  /* 与容器高度一致 */
        display: flex;
        align-items: center;
        background: white;
        border-radius: 25px;
        padding-right: 5px;
    }

    /* 搜索图标样式 */
    .search-icon-input {
        position: absolute;
        left: 15px;
        color: #666;
        font-size: 16px;
    }

    /* 搜索输入框样式 */
    .search-wrapper input {
        width: 100%;
        height: 44px;  /* 与容器高度一致 */
        padding: 0 5px 0 40px;  /* 调整内边距 */
        border: none;
        border-radius: 25px;
        background: transparent;
        font-size: 16px;
        outline: none;
    }

    /* 修改热门应用区域的样式 */
    .hot-apps-section {
        margin: 0 15px;  /* 移除顶部间距，只保留左右间距 */
        background: #fff;
        border-radius: 20px;
        padding: 10px 20px 0px 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: relative;
    }

    .hot-apps-section .apps-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 -20px;
        padding: 10px 15px 10px 15px;
        height: 120px;
        
        /* 隐滚动条但保留滚动功能 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hot-apps-section .apps-scroll::-webkit-scrollbar {
        display: none;
    }

    /* 优化应用卡片布局 */
    .hot-apps-section .apps-row {
        display: flex;
        gap: 0;  /* 移除卡片之间的间距 */
        padding-bottom: 10px;
    }

    .hot-apps-section .app-card {
        flex: 0 0 auto;
        width: 64px;
        height: 74px;
        padding: 4px;
        transition: transform 0.3s ease;  /* 添加过渡效果 */
    }

    /* 加悬停效果 */
    .hot-apps-section .app-card:hover {
        transform: translateY(-2px);
    }

    .hot-apps-section .app-card .app-icon {
        width: 55px;
        height: 55px;
        margin: 0 auto 4px;
    }

    .hot-apps-section .app-card .app-info h3 {
        font-size: 11px;
        margin: 0;
        line-height: 1.2;
        height: auto;
        max-height: 2.4em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    /* 添加滚动提示 */
    .hot-apps-section::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
        pointer-events: none;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0px;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .section-title i {
        font-size: 16px;
    }

    .section-title i.fa-star {
        color: #FFB800;  /* 今日上新图标颜色 */
    }

    .section-title i.fa-fire {
        color: #ff3b30;  /* 热门应用图颜 */
    }

    .section-title h2 {
        font-size: 15px;
        margin: 0;
        color: #333;  /* 热门应用标题改为黑色 */
        font-weight: 500;
    }

 
    .search-count {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
    }

    /* 修改应用卡片样式以适应搜索次数显示 */
    .app-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    @keyframes fadeInOut {
        0% { opacity: 0; transform: translateY(20px); }
        10% { opacity: 1; transform: translateY(0); }
        90% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-20px); }
    }


    /* 改原有的 new-apps-header 相关样式 */
    .new-apps-header {
        display: none;  /* 隐藏旧的标题样式 */
    }

    .new-apps-title {
        display: none;  /* 隐旧的标题样式 */
    }

    /* 修改看全部链接样式 */
    .new-apps-count {
        display: flex;
        align-items: center;
        gap: 4px;
        color: white;
        text-decoration: none;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
        padding: 3px 8px;
        border-radius: 12px;
    }

    .new-apps-count i {
        font-size: 10px;
    }

    .view-all {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #666;
        text-decoration: none;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        background: #f5f5f5;
        transition: all 0.3s ease;
    }

    .view-all:hover {
        background: #e5e5e5;
        color: #333;
    }

    .view-all i {
        font-size: 10px;
    }

    /* 修改应用卡片中的名称样式 */
    .app-card .app-info h3 {
        font-size: 11px;
        margin: 0;
        line-height: 1.2;
        height: auto;
        max-height: 2.4em;  /* 允显示两行文字 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;  /* 限制最多显示两行 */
        -webkit-box-orient: vertical;
        word-wrap: break-word;  /* 允许单词内行 */
        word-break: break-all;  /* 允许在任意字符间换行 */
    }

    /* 调整卡高度以适应两行文字 */
    .app-card {
        flex: 0 0 auto;
        width: 64px;
        height: auto;  /* 改为自适应高度 */
        min-height: 74px;  /* 设置最小高 */
        padding: 4px;
    }
    </style>

    <script>
    let lastScrollTop = 0;

    // 将滚事件监听器装在 DOMContentLoaded 事件中
    document.addEventListener('DOMContentLoaded', () => {
        const searchBar = document.querySelector('.search-bar');
        const searchIcon = document.querySelector('.search-icon');
        
        // 只有当这些元素存在时才添加滚动监听
        if (searchBar && searchIcon) {
            window.addEventListener('scroll', () => {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                // 下滚动超过搜索栏高度时
                if (scrollTop > lastScrollTop && scrollTop > 60) {
                    searchBar.classList.add('hidden');
                    searchIcon.classList.add('visible');
                } 
                // 向上滚动或回到顶部时
                else if (scrollTop < lastScrollTop || scrollTop <= 60) {
                    searchBar.classList.remove('hidden');
                    searchIcon.classList.remove('visible');
                }
                
                lastScrollTop = scrollTop;
            });
        }
    });

    // 点击放大镜图标显示搜索栏
    function toggleSearch() {
        const searchBar = document.querySelector('.search-bar');
        const searchIcon = document.querySelector('.search-icon');
        
        if (searchBar && searchIcon) {
            searchBar.classList.remove('hidden');
            searchIcon.classList.remove('visible');
            // 聚到搜索输入框
            const searchInput = document.querySelector('.search-wrapper input');
            if (searchInput) {
                searchInput.focus();
            }
            // 滚动到顶部
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    }

    // 创建 Intersection Observer
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);  // 加载后取消观
            }
        });
    }, {
        rootMargin: '50px 0px',  // 提前50px开始加载
        threshold: 0.01
    });

    // 添���保存和恢复滚动位置的功能
    window.addEventListener('beforeunload', () => {
        // 保存垂直滚动位置
        sessionStorage.setItem('scrollPosition', window.scrollY);
        
        // 保存热门应用区域的横向滚动位置
        const hotAppsScroll = document.querySelector('.hot-apps-section .apps-scroll');
        if (hotAppsScroll) {
            sessionStorage.setItem('hotAppsScrollPosition', hotAppsScroll.scrollLeft);
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        // 检查是否是从应用详情页返回
        if (document.referrer.includes('/app/')) {
            // 恢复垂直滚动位置
            const scrollPosition = sessionStorage.getItem('scrollPosition');
            if (scrollPosition) {
                window.scrollTo(0, parseInt(scrollPosition));
            }
            
            // 恢复热门应用区域的横向滚动位置
            const hotAppsScroll = document.querySelector('.hot-apps-section .apps-scroll');
            const hotAppsScrollPosition = sessionStorage.getItem('hotAppsScrollPosition');
            if (hotAppsScroll && hotAppsScrollPosition) {
                hotAppsScroll.scrollLeft = parseInt(hotAppsScrollPosition);
            }
            
            // 清除保存位置
            sessionStorage.removeItem('scrollPosition');
            sessionStorage.removeItem('hotAppsScrollPosition');
        }
        
        // 原有图片懒载初始化
        document.querySelectorAll('img[data-src]').forEach(img => {
            imageObserver.observe(img);
        });
    });

    // 修应用点击处理
    function handleAppClick(event, appId) {
        window.location.href = '/app/' + appId;  // 统一跳到应用详情页
    }

    // 添加保存分类滚动位置的函数
    function saveCategoryScrollPosition() {
        sessionStorage.setItem('indexScrollPosition', window.scrollY);
    }

    // 在页面加载时检查是分类页面返回
    document.addEventListener('DOMContentLoaded', () => {
        // 检查是是从分类页面返回
        if (document.referrer.includes('/category/')) {
            const scrollPosition = sessionStorage.getItem('indexScrollPosition');
            if (scrollPosition) {
                window.scrollTo(0, parseInt(scrollPosition));
                sessionStorage.removeItem('indexScrollPosition');
            }
        }
        // ... 其他现有的代码 ...
    });

    function showDonateModal() {
        document.getElementById('donate-modal').style.display = 'flex';  // 使用 flex 而不是 block
        
        // 防止背景滚动
        document.body.style.overflow = 'hidden';
    }

    function closeDonateModal() {
        document.getElementById('donate-modal').style.display = 'none';
        
        // 恢复背景滚动
        document.body.style.overflow = '';
    }

    // 点击弹窗外部关闭
    window.onclick = function(event) {
        const modal = document.getElementById('donate-modal');
        if (event.target == modal) {
            closeDonateModal();
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // 检查是否是从赞赏名单页面返回
        if (document.referrer.includes('/donors')) {
            const scrollPosition = sessionStorage.getItem('indexScrollPosition');
            if (scrollPosition) {
                window.scrollTo(0, parseInt(scrollPosition));
                sessionStorage.removeItem('indexScrollPosition');
            }
        }
        
        // 其他现有的代码...
    });

    // 保存滚动位置
    function saveScrollPosition() {
        sessionStorage.setItem('indexScrollPosition', window.scrollY);
    }

    // 在面加载时检查是否需要恢复位置
    document.addEventListener('DOMContentLoaded', () => {
        // 检查是否是从赞赏名单页面返回
        if (document.referrer.includes('/donors')) {
            const scrollPosition = sessionStorage.getItem('indexScrollPosition');
            if (scrollPosition) {
                window.scrollTo({
                    top: parseInt(scrollPosition),
                    behavior: 'instant'  // 使用 instant 而不是 smooth
                });
                sessionStorage.removeItem('indexScrollPosition');
            }
        }
    });

    // 根分类名称回应的图标类名
    function get_category_icon(categoryName) {
        const iconMap = {
            '元服务板块': 'fa-rocket',
            '工具': 'fa-tools',
            '社交': 'fa-comments',
            '娱乐': 'fa-gamepad',
            '音乐': 'fa-music',
            '视频': 'fa-video',
            '图片': 'fa-images',
            '阅读': 'fa-book-reader',
            '新闻': 'fa-newspaper',
            '购物': 'fa-shopping-cart',
            '教育': 'fa-graduation-cap',
            '金融': 'fa-money-bill-wave',
            '美食': 'fa-utensils',
            '旅游': 'fa-plane',
            '运动': 'fa-running',
            '天气': 'fa-cloud-sun',
            '导航': 'fa-compass',
            '办公': 'fa-briefcase',
            '其他': 'fa-ellipsis-h',
            '汽车': 'fa-car',
            '阅读与工具书': 'fa-book',
            '出行导航': 'fa-taxi'
        };
        
        return iconMap[categoryName] || 'fa-folder';  // 默认图标
    }

    // 修改切换功能的JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        // 主页平台切换
        const platformToggle = document.getElementById('platformToggle');
        const mobileApps = document.querySelector('.mobile-apps');
        const tabletApps = document.querySelector('.tablet-apps');

        if (platformToggle && mobileApps && tabletApps) {
            // 切换功能
            platformToggle.addEventListener('change', function() {
                if (this.checked) {
                    // 平应用
                    mobileApps.style.opacity = '0';
                    setTimeout(() => {
                        mobileApps.style.display = 'none';
                        tabletApps.style.display = 'grid';
                        setTimeout(() => {
                            tabletApps.style.opacity = '1';
                        }, 50);
                    }, 300);
                } else {
                    // 手应用
                    tabletApps.style.opacity = '0';
                    setTimeout(() => {
                        tabletApps.style.display = 'none';
                        mobileApps.style.display = 'grid';
                        setTimeout(() => {
                            mobileApps.style.opacity = '1';
                        }, 50);
                    }, 300);
                }
                
                // 保存用户选择
                localStorage.setItem('selectedPlatform', this.checked ? 'tablet' : 'mobile');
            });

            // 恢复用户之前的选择
            const savedPlatform = localStorage.getItem('selectedPlatform');
            if (savedPlatform === 'tablet') {
                platformToggle.checked = true;
                platformToggle.dispatchEvent(new Event('change'));
            }
        }

        // 搜索结果平台切换
        const searchToggle = document.getElementById('searchPlatformToggle');
        const mobileResults = document.querySelector('.mobile-results');
        const tabletResults = document.querySelector('.tablet-results');

        if (searchToggle && mobileResults && tabletResults) {
            // 切换功能
            searchToggle.addEventListener('change', function() {
                if (this.checked) {
                    // 平板应用
                    mobileResults.style.opacity = '0';
                    setTimeout(() => {
                        mobileResults.style.display = 'none';
                        tabletResults.style.display = 'grid';
                        setTimeout(() => {
                            tabletResults.style.opacity = '1';
                        }, 50);
                    }, 300);
                } else {
                    // 手机应用
                    tabletResults.style.opacity = '0';
                    setTimeout(() => {
                        tabletResults.style.display = 'none';
                        mobileResults.style.display = 'grid';
                        setTimeout(() => {
                            mobileResults.style.opacity = '1';
                        }, 50);
                    }, 300);
                }
                
                // 保存用户选择
                localStorage.setItem('searchPlatform', this.checked ? 'tablet' : 'mobile');
            });

            // ��复用户之前的选择
            const savedSearchPlatform = localStorage.getItem('searchPlatform');
            if (savedSearchPlatform === 'tablet') {
                searchToggle.checked = true;
                searchToggle.dispatchEvent(new Event('change'));
            }
        }
    });

    // 添加平滑切换动画样式
    const style = document.createElement('style');
    style.textContent = `
        .categories-grid {
            transition: opacity 0.3s ease;
        }

        .mobile-apps,
        .tablet-apps {
            opacity: 1;
        }

        .mobile-apps.hidden,
        .tablet-apps.hidden {
            opacity: 0;
        }
    `;
    document.head.appendChild(style);

    // 添加返回按钮处理函数
    function handleBackClick() {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.value = '';
            searchInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
        
        // 更新 URL，移除搜索参数
        const url = new URL(window.location.href);
        if (url.searchParams.has('search')) {
            url.searchParams.delete('search');
            window.history.replaceState({}, '', url);
        }
        
        // 清搜索状态
        sessionStorage.removeItem('isSearching');
        
        // 直接跳转到首页，而是使用浏览后退
        window.location.href = '/';
    }

    // 监听浏览器后退按钮
    window.addEventListener('popstate', function(event) {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.value = '';
            searchInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
        // 清除搜索状态
        sessionStorage.removeItem('isSearching');
    });

    // 添加搜索表单提交处理
    document.querySelector('.search-form').addEventListener('submit', function(event) {
        const searchInput = document.querySelector('input[name="search"]');
        if (!searchInput.value.trim()) {
            event.preventDefault();
            sessionStorage.removeItem('isSearching');
            window.location.href = '/';
        } else {
            sessionStorage.setItem('isSearching', 'true');
        }
    });

    // 添加页面可见性变化监听
    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'visible' && sessionStorage.getItem('isSearching') !== 'true') {
            const searchInput = document.querySelector('input[name="search"]');
            if (searchInput) {
                searchInput.value = '';
                searchInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        }
    });

    // 添加页面卸载前的清理
    window.addEventListener('beforeunload', function() {
        if (!window.location.href.includes('search=')) {
            sessionStorage.removeItem('isSearching');
        }
    });
    </script>

    <div class="group-buttons">
        {% if settings and settings.qq_group_link %}
        <button class="group-btn qq-btn" onclick="showQQModal()">
            <i class="fab fa-qq"></i>
            <span class="btn-text">{{ settings.qq_group_text or 'QQ群' }}</span>
        </button>
        {% endif %}
        
        {% if settings and settings.wechat_group_qrcode %}
        <button class="group-btn wechat-btn" onclick="showWeChatModal()">
            <i class="fab fa-weixin"></i>
            <span class="btn-text">{{ settings.wechat_group_text or '微信群' }}</span>
        </button>
        {% endif %}
    </div>

    <style>
    /* 群组按钮容器样式 */
    .group-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 0px;
    }

    /* 群组按钮基础样式 */
    .group-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
        min-width: 120px;
        justify-content: center;
    }

    /* 图标样式 */
    .group-btn i {
        font-size: 16px;
    }

    /* 按钮文字样式 */
    .group-btn .btn-text {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* QQ群按钮样式 */
    .qq-btn {
        background: #12B7F5;
    }

    /* 微信群按钮样式 */
    .wechat-btn {
        background: #07C160;
    }

    /* 悬停效果 */
    .group-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* 暗色模式适配 */
    [data-theme="dark"] .group-btn {
        color: white;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .group-buttons {
            margin-bottom: 0px;
            gap: 10px;
        }
        
        .group-btn {
            padding: 5px 12px;
            min-width: 100px;
        }
        
        .group-btn i {
            font-size: 14px;
        }
        
        .group-btn .btn-text {
            font-size: 13px;
        }
    }

    /* 超小屏幕适配 */
    @media (max-width: 360px) {
        .group-buttons {
            gap: 8px;
        }
        
        .group-btn {
            padding: 4px 10px;
            min-width: 90px;
        }
        
        .group-btn .btn-text {
            font-size: 12px;
        }
    }



    /* 充电按钮样式 */
    .button {
        --h-button: 42px;  /* 减小高度 */
        --w-button: 88px;  /* 减小宽度 */
        --round: 0.75rem;
        cursor: pointer;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: all 0.25s ease;
        background: radial-gradient(
            65.28% 65.28% at 50% 100%,
            rgba(223, 113, 255, 0.8) 0%,
            rgba(223, 113, 255, 0) 100%
        ),
        linear-gradient(0deg, #7a5af8, #7a5af8);
        border-radius: var(--round);
        border: none;
        outline: none;
        padding: 10px 16px;  /* 减小内边距 */
    }

    .button::before {
        --space: 1px;
        background: linear-gradient(
            177.95deg,
            rgba(255, 255, 255, 0.19) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .button::after {
        --space: 2px;
        background: radial-gradient(
            65.28% 65.28% at 50% 100%,
            rgba(223, 113, 255, 0.8) 0%,
            rgba(223, 113, 255, 0) 100%
        ),
        linear-gradient(0deg, #7a5af8, #7a5af8);
    }

    .button:active {
        transform: scale(0.95);
    }

    .fold {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        height: 0.8rem;  /* 减小折角大小 */
        width: 0.8rem;
        display: inline-block;
        transition: all 0.5s ease-in-out;
        background: radial-gradient(
            100% 75% at 55%,
            rgba(223, 113, 255, 0.8) 0%,
            rgba(223, 113, 255, 0) 100%
        );
        box-shadow: 0 0 3px black;
        border-bottom-left-radius: 0.5rem;
        border-top-right-radius: var(--round);
    }

    .fold::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 150%;
        height: 150%;
        transform: rotate(45deg) translateX(0%) translateY(-18px);
        background-color: #e8e8e8;
        pointer-events: none;
    }

    .button:hover .fold {
        margin-top: -1rem;
        margin-right: -1rem;
    }

    .points_wrapper {
        overflow: hidden;
        width: 100%;
        height: 100%;
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }

    .points_wrapper .point {
        bottom: -10px;
        position: absolute;
        animation: floating-points infinite ease-in-out;
        pointer-events: none;
        width: 2px;
        height: 2px;
        background-color: #fff;
        border-radius: 9999px;
    }

    @keyframes floating-points {
        0% {
            transform: translateY(0);
        }
        85% {
            opacity: 0;
        }
        100% {
            transform: translateY(-55px);
            opacity: 0;
        }
    }

    /* 设置每个点的位置和动画 */
    .points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
    .points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
    .points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
    .points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
    .points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
    .points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
    .points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
    .points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }

    .inner {
        z-index: 2;
        font-size: 14px;  /* 减小文字大小 */
        gap: 4px;  /* 减小图标和文字的间距 */
        position: relative;
        width: 100%;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease-in-out;
    }

    .inner svg.icon {
        width: 16px;  /* 减小图标大小 */
        height: 16px;
        transition: fill 0.1s linear;
    }

    .button:focus svg.icon {
        fill: white;
    }

    .button:hover svg.icon {
        fill: transparent;
        animation:
            dasharray 1s linear forwards,
            filled 0.1s linear forwards 0.95s;
    }

    @keyframes dasharray {
        from {
            stroke-dasharray: 0 0 0 0;
        }
        to {
            stroke-dasharray: 68 68 0 0;
        }
    }

    @keyframes filled {
        to {
            fill: white;
        }
    }
     /* 修改充电按钮的样式，增加右侧间距 */
     .donate-new-button {
        margin-right: 15px;  /* 增加右侧间距 */
    }

    </style>
    {% endblock %} 

<style>
/* 修改底部链接样式 */
.footer-links .footer-link,
.footer-links .icp-link {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
    padding: 6px 12px;
    border-radius: 6px;
}

.footer-links .footer-link:hover,
.footer-links .icp-link:hover {
    color: #333;  /* 只改变文字颜色，移除背景色变化 */
}

/* 暗色模式适配 */
[data-theme="dark"] .footer-links .footer-link:hover,
[data-theme="dark"] .footer-links .icp-link:hover {
    color: #fff;  /* 只改变文字颜色，移除背景色变化 */
}
</style>

<!-- 在文件末尾，在最后的 </div> 之前添加 -->
{% include 'nav_bar.html' %}

<!-- 修改 app-showcase 的样式，添加底部边距 -->
<style>
.app-showcase {
    margin-bottom: 60px; /* 为底部导航栏留出空间 */
}
</style>

{% block footer %}{% endblock %}