/* --- 1. 全局与重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 更直观的盒模型 */
}

html,
body {
    height: 100%;
    /* 确保页面占满整个视窗 */
    overflow: hidden;
    /* 防止动画背景导致滚动 */
}

body {
    /* 使用苹果的系统字体栈，提供最佳原生观感 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    /* 使用 Flex 布局将内容垂直和水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    color: #ffffff;
    /* 默认文字颜色（亮色） */
    position: relative;
    /* 用于背景定位 */
}

/* --- 2. 活泼的动画背景 --- */
.background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* 置于内容之后 */

    /* 这是一个时尚的渐变色 */
    background: linear-gradient(135deg, #6a11cb, #2575fc, #ec008c);

    /* 扩大背景尺寸以便动画 */
    background-size: 400% 400%;

    /* 定义动画：名称 时长 缓动 循环 */
    animation: gradientMove 15s ease infinite;
}

/* 定义背景移动的关键帧 */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* --- 3. 页面主容器 --- */
.page-container {
    width: 90%;
    /* 在移动设备上占 90% 宽度 */
    max-width: 1000px;
    /* 在桌面上最大 1000px */
    padding: 2rem;
    text-align: center;
}

/* --- 4. 页面标题 --- */
.page-header h1 {
    /* 使用 clamp 实现响应式字体大小 */
    /* 最小值 2.5rem, 推荐值 8vw, 最大值 4.5rem */
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 3rem;
    /* 增加一点阴影以提高在复杂背景下的可读性 */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- 5. 功能按钮网格 (核心设计) --- */
.function-grid {
    display: grid;

    /* * 关键的响应式布局：
             * - auto-fit: 自动填充尽可能多的列。
             * - minmax(280px, 1fr): 每列最小 280px，最大平分剩余空间 (1fr)。
             * - 这会自动处理竖屏（1列）、横屏和桌面（多列）。
            */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    /* 按钮之间的间距 */
}

/* --- 6. 毛玻璃卡片 (功能按钮) --- */
.function-card {
    /* 毛玻璃效果的核心 */
    background: rgba(255, 255, 255, 0.15);
    /* 1. 半透明背景 */
    backdrop-filter: blur(20px) saturate(150%);
    /* 2. 模糊 + 增加饱和度 */
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    /* 兼容 Safari */

    /* 边框和圆角 */
    border-radius: 24px;
    /* 苹果风格的大圆角 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 3. 模拟高光的亮边框 */

    /* 阴影 */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);

    /* 内部布局 */
    padding: 2.5rem 2rem;
    text-decoration: none;
    color: #ffffff;

    /* 动画过渡 */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* 鼠标悬停和触摸效果 */
.function-card:hover {
    transform: translateY(-8px) scale(1.02);
    /* 向上浮动并轻微放大 */
    background: rgba(255, 255, 255, 0.25);
    /* 悬停时更亮 */
}

.function-card h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.function-card p {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.8;
    line-height: 1.5;
}

/* --- 7. 针对超小屏幕的微调 --- */
@media (max-width: 480px) {
    .page-container {
        padding: 1rem;
        /* 减少内边距 */
    }

    .function-card {
        padding: 2rem 1.5rem;
        /* 减少卡片内边距 */
    }

    .function-card h2 {
        font-size: 1.5rem;
    }
}