/* Basic styles */
body {
    font-family: Arial, sans-serif;
    margin: 15px;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    text-align: center; /* 居中对齐 */
}

#app {
    display: grid;
    grid-template-columns: repeat(18, 1fr); /* 18列 */
    gap: 1px; /* 元素之间的间距 */
}

footer {
    text-align: center; /* 居中对齐 */
    padding: 10px; /* 内边距 */
    background-color: #f1f1f1; /* 背景颜色 */
    position: fixed; /* 固定在页面底部 */
    bottom: 0; /* 距离底部为0 */
    left: 0; /* 距离左侧为0 */
    right: 0; /* 距离右侧为0 */
    font-size: 14px; /* 字体大小 */
    border-top: 1px solid #ccc; /* 顶部边框 */
}

/* Element Button styles */
.element-button {
    background-color: lightgray; /* 默认背景色 */
    border: 2px solid black; /* 边框样式 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列内容 */
    align-items: center; /* 水平居中对齐 */
    padding: 2px; /* 内边距减少 */
    cursor: pointer; /* 指针样式 */
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; /* 过渡效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    max-width: 68px; /* 限制最大宽度 */
    max-height: 62px; /* 限制最大高度 */
    font-size: 14px; /* 调整字体大小 */
}

.element-button:focus {
    outline: none; /* 移除默认轮廓 */
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* 添加蓝色光晕效果 */
}

.element-button:hover {
    background-color: #ccc; /* 悬停效果 */
    transform: scale(1.05); /* 悬停时放大效果 */
    border-color: #007bff; /* 悬停时改变边框颜色 */
}

/* Modal styles */
#element-info-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid black;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* 添加圆角 */
}

#element-info-modal.visible {
    display: block;
}

.modal-content {
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: red;
    cursor: pointer;
    font-size: 24px;
}

/* Defect Info Window styles */
.defect-info-window {
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 调整位置 */
    background-color: white; /* 背景色 */
    padding: 20px; /* 内边距 */
    border: 1px solid black; /* 边框样式 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    z-index: 1000; /* 确保在最上层 */
    font-size: 14px; /* 设置字体大小 */
}

/* Button styles */
button {
    padding: 5px 10px; /* 上下和左右的内边距 */
    font-size: 16px; /* 字体大小 */
    /* 其他样式 */
}

/* Close button styles */
.defect-info-window .close {
    position: absolute; /* 绝对定位 */
    top: 10px; /* 距顶部10像素 */
    right: 15px; /* 距右侧15像素 */
    color: black; /* 字体颜色 */
    cursor: pointer; /* 指针样式 */
    font-size: 18px; /* 字体大小 */
}

/* Responsive design */
@media (max-width: 600px) {
    #periodic-table {
        grid-template-columns: repeat(6, 1fr); /* 在小屏幕上使用6列 */
    }
}

/* 上传页面样式 */
.upload-form {
    width: 400px; /* 增加宽度 */
    margin: 50px auto; /* 居中显示 */
    padding: 30px; /* 增加内边距 */
    background-color: #f9f9f9; /* 使用浅色背景 */
    border: 1px solid #ddd; /* 边框颜色 */
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 更明显的阴影效果 */
    font-family: Arial, sans-serif; /* 使用清晰的字体 */
    text-align: center; /* 内容居中 */
}

.upload-form h2 {
    margin-bottom: 25px; /* 增加下边距 */
    font-size: 24px; /* 增加字体大小 */
    color: #333; /* 使用深色文本 */
}

.upload-form label {
    font-size: 16px; /* 增加字体大小 */
    margin-bottom: 8px; /* 增加下边距 */
    display: block;
    color: #555; /* 使用较浅的文本颜色 */
}

/* 密码输入框和文件输入框样式 */
.upload-form .password-container {
    position: relative; /* 相对定位 */
    width: 100%; /* 使容器宽度100% */
}

.upload-form input[type="password"],
.upload-form input[type="text"],
.upload-form input[type="file"] {
    width: 100%; /* 设置输入框宽度为100% */
    padding: 10px; /* 增加内边距 */
    margin-bottom: 20px; /* 增加下边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 增加圆角 */
    font-size: 14px; /* 字体大小 */
    box-sizing: border-box; /* 包括内边距和边框 */
}

.upload-form button {
    width: 100%; /* 按钮宽度为100% */
    padding: 12px; /* 增加内边距 */
    background-color: #007BFF; /* 使用蓝色背景 */
    color: white;
    border: none;
    border-radius: 5px; /* 增加圆角 */
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.upload-form button:hover {
    background-color: #0056b3; /* 悬停时的背景色 */
}

/* 密码显示/隐藏按钮 */
.upload-form .password-toggle-btn {
    position: absolute; /* 绝对定位 */
    right: 10px; /* 右侧间距 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确居中 */
    background: none; /* 按钮背景 */
    border: none; /* 无边框 */
    color: #007BFF; /* 按钮文本颜色 */
    cursor: pointer; /* 光标变成手形 */
}

/* 错误和成功消息样式 */
.upload-form .message {
    margin-top: 20px;
    padding: 15px; /* 增加内边距 */
    border-radius: 5px;
    text-align: center;
    font-size: 14px; /* 调整字体大小 */
}

.upload-form .message.error {
    background-color: #f44336; /* 错误消息背景色 */
    color: white;
}

.upload-form .message.success {
    background-color: #28a745; /* 成功消息背景色 */
    color: white;
}