/* 自定义样式补充 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            background-color: #ffffff;
            color: #333333;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        /* 隐藏滚动条但保持滚动功能 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 动画关键帧：轻微浮动效果 (仅用于卡片容器，不用于卡片本身) */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        /* 按钮点击效果 */
        .btn-active:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        /* 卡片切换时的过渡效果 */
        .card-transition {
            transition: opacity 0.1s ease;
        }
        
        /* 结果展示时的强调动画 */
        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .pop-in {
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        /* 输入框聚焦时的线条动画 */
        .input-underline {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 0;
            background-color: #333;
            transition: width 0.3s ease;
        }
        input:focus ~ .input-underline {
            width: 100%;
        }

        /* 分享面板样式 */
        #share-panel {
            backdrop-filter: blur(5px);
        }
        #share-panel.active {
            opacity: 1;
            pointer-events: auto;
            animation: fadeIn 0.3s ease forwards;
        }
        #share-panel.active > div {
            transform: scale(1);
            animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* 分享选项样式 */
        .share-option {
            transition: all 0.3s ease;
        }
        .share-option:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 社交媒体分享按钮样式 */
        .social-share {
            transition: all 0.3s ease;
        }
        .social-share:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 分享成功提示动画 */
        #share-success.show {
            opacity: 1;
            pointer-events: auto;
            animation: slideDown 0.3s ease forwards, fadeOut 0.3s ease 2s forwards;
        }

        @keyframes slideDown {
            0% {
                transform: translate(-50%, -20px);
                opacity: 0;
            }
            100% {
                transform: translate(-50%, 0);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            #share-panel > div {
                margin: 0 20px;
            }
            .social-share {
                width: 10px;
                height: 10px;
            }
            .social-share svg {
                width: 20px;
                height: 20px;
            }
        }