/* 样式设置：页面和网格容器 */
/*body {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 115vh;*/
/*    margin: 0;*/
/*    background-color: #f0f0f5;*/
/*    font-family: Arial, sans-serif;*/
/*}*/

.grid-container {
    background-color: #f0f0f5;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*height: 115vh;*/
    display: grid;
    grid-template-columns: repeat(3, 15rem); /* 每行三个方格 */
    gap: 1rem; /* 方格之间的间隙 */
    padding: 1rem;
}

/* 单个方格样式 */
.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
    background: linear-gradient(145deg, #ffffff, #e6e6e6); /* 渐变背景色 */
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.7); /* 立体感阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    flex-direction: column;
    margin-bottom: 3rem;
}

/* 方格悬停效果 */
.grid-item:hover {
    transform: translateY(-10px) scale(1.05); /* 轻微上移并放大 */
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.25), -6px -6px 12px rgba(255, 255, 255, 0.9); /* 阴影变强 */
    border: 2px solid #6c63ff; /* 高亮边框 */
}
.user-label {
    position: relative; /* 相对于方格内部定位 */
    top: 18rem; /* 放置在方格的正下方 */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明背景色 */
    color: #fff; /* 白色文字 */
    padding: 0.3rem 0.3rem;
    border-radius: 5px; /* 圆角 */
    font-size: 0.9rem;
    text-align: center;
    width: fit-content;
    max-width: 100%; /* 最大宽度限制 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
    transform: translateY(10px); /* 微调位置 */
}