@layer utilities {
    .safe-area {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-container {
        @apply h-[200px] sm:h-[250px] md:h-[300px] overflow-y-auto;
    }
    .nav-shadow {
        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.1);
    }
    .message-appear {
        animation: fadeIn 0.3s ease forwards;
    }
    .pulse-effect {
        animation: pulse 2s infinite;
    }
    .mobile-btn {
        @apply py-2 text-center rounded-lg transition-colors text-sm font-medium;
    }
    .trophy-1 {
        color: #FFD700; /* 金牌 */
    }
    .trophy-2 {
        color: #C0C0C0; /* 银牌 */
    }
    .trophy-3 {
        color: #CD7F32; /* 铜牌 */
    }
.qrcode-container {
    position: relative;
    width: 200px; /* 调整宽度 */
    height: 200px; /* 调整高度（与宽度保持一致） */
    margin: 0 auto;
}
    /* 新增模态框动画 */
    .modal-fade-in {
        animation: modalFadeIn 0.3s ease-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); }
        100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
    }
    @keyframes modalFadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
}