body {
    background-color: #f8f9fa; /* 页面背景颜色 */
    background-image: url('background.jpg'); /* 背景图片，如果需要可以添加 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: Arial, sans-serif;
}

.custom-panel {
    border: 1px solid #d6e9c6; /* 面板边框 */
    border-radius: 10px; /* 面板圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 面板阴影 */
    padding: 20px; /* 面板内边距 */
    background-color: #fff; /* 面板背景颜色 */
}

.custom-input {
    border: 2px solid #ccc; /* 输入框边框 */
    border-radius: 5px; /* 输入框圆角 */
    padding: 10px; /* 输入框内边距 */
    transition: border-color 0.3s ease-in-out; /* 过渡效果 */
}

.custom-input:focus {
    border-color: #28a745; /* 输入框获取焦点时的边框颜色 */
    outline: none; /* 去除默认的聚焦轮廓 */
}

.custom-button {
    background-color: #28a745; /* 按钮背景颜色 */
    border: none; /* 按钮边框 */
    border-radius: 5px; /* 按钮圆角 */
    color: #fff; /* 按钮文字颜色 */
    padding: 15px 30px; /* 按钮内边距 */
    transition: background-color 0.3s ease-in-out; /* 过渡效果 */
}

.custom-button:hover {
    background-color: #218838; /* 鼠标悬停时的按钮背景颜色 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}