﻿        /* 按钮容器（Flex兼容布局+你最初的样式） */
        .button-container {
            padding: 50px 20px;
            border-radius: 20px;
            background: rgba(0, 0, 0, 0.1); /* 你最初的背景透明效果 */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            width: 100%;
            max-width: 500px;
        }

        /* 通用按钮样式（你最初的，恢复渐变/圆角/阴影） */
        .fb-btn {
            text-align: center;
            padding: 16px 0;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
            width: calc(50% - 10px); /* 强制2列 */
        }

        /* 按钮1：蓝紫渐变（你最初的） */
        .btn-1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        /* 按钮2：橙红渐变（你最初的） */
        .btn-2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
        }

        /* 按钮3：琥珀渐变（你最初的） */
        .btn-3 {
            background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
            box-shadow: 0 4px 15px rgba(255, 112, 67, 0.4);
        }

        /* 按钮4：烈焰红橙渐变（你最初的） */
        .btn-4 {
            background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 80%);
            box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
        }

        /* 按钮hover效果（你最初的） */
        .fb-btn:hover {
            transform: translateY(-6px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* 按钮点击波纹（你最初的） */
        .fb-btn::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .fb-btn:active::after {
            width: 300px;
            height: 300px;
            opacity: 0;
        }

        /* 响应式适配（你最初的） */
        @media (max-width: 600px) {
            .button-container {
                flex-direction: column;
                padding: 30px 20px;
            }
            .fb-btn {
                width: 100%;
                padding: 14px 0;
                font-size: 16px;
            }
        }