/* Basic resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', sans-serif; /* Google's Roboto font for modern look */
    background: #fff; /* Light background */
    color: #333; /* Subtle text color for readability */
    text-align: center;
}

/* Container styling */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

/* Search container */
.search-container {
    width: 100%;
    max-width: 480px; /* Optimal width for mobile devices */
}

.input-group {
    display: flex;
    flex-direction: column; /* 设置Flexbox布局的方向为垂直 */
    align-items: center; /* 水平居中对齐所有子元素 */
    justify-content: center; /* 垂直居中对齐所有子元素 */
    width: 100%;
    margin: 20px 0;
}

.input-group form {
    width: 100%; /* 表单宽度调整为100% */
    display: flex;
    flex-direction: column; /* 表单内部元素垂直排列 */
    align-items: center; /* 表单内部元素水平居中 */
}

.search-box {
    width: 80%; /* 调整输入框宽度为80% */
    padding: 10px;
    margin-bottom: 10px; /* 在输入框和按钮之间添加间距 */
    border: 2px solid #ccc;
    border-radius: 5px;
}

.search-button {
    width: 50%; /* 调整按钮宽度为50% */
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #d00; /* 按钮颜色 */
    color: white;
    cursor: pointer;
}

.search-button:hover {
    background-color: #a00;
}

/* Result item styles */
.result-item {
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中所有子元素 */
    justify-content: space-between; /* 使元素分布在容器的两端 */
    padding: 10px;
    margin-top: 10px;
    background: #f5f5f5; /* 背景色 */
    border: 1px solid #ddd; /* 边框样式 */
    border-radius: 5px; /* 圆角边框 */
}

.result-item p {
    flex: 1; /* 允许文本占用除按钮外的所有可用空间 */
    margin-right: 20px; /* 与按钮之间留出一些间隔 */
    font-size: 20px; /* 字体大小 */
    text-align: left; /* 文本左对齐 */
}

.goto-button {
    padding: 8px 16px; /* 按钮内边距 */
    font-size: 20px; /* 按钮字体大小 */
    background-color: #d00; /* 背景色 */
    color: white; /* 文字颜色 */
    border-radius: 5px; /* 圆角 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标样式 */
}

.goto-button:hover {
    background-color: #a00; /* 鼠标悬停时的背景颜色为深红色 */
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .input-group form {
        flex-direction: column;
    }

    .search-button {
        margin-top: 10px;
        width: 100%;
    }

    .search-box {
        width: 100%;
    }
}

/* Link styles */
a {
    color: #d00; /* Red link for emphasis */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}


.referral-button {
    background-color: #d00; /* Red button for action */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Slightly larger text for importance */
    margin-top: 20px;
}

.referral-button:hover {
    background-color: #a00;
}
/* 图片展示样式 */
/* 图片展示区的样式 */
.image-display {
    width: 50%; /* 宽度占据整个容器的宽度 */
    max-width: 480px; /* 最大宽度限制，以保证在大屏幕上也不会显得过大 */
    margin: 20px auto; /* 上下边距20px, 水平居中 */
    padding: 10px; /* 内边距10px */
    border: 1px solid #ccc; /* 边框设置为浅灰色 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微的阴影效果增加立体感 */
}

.image-display img {
    width: 100%; /* 图片宽度完全填充其容器 */
    height: auto; /* 高度自动调整以保持图片的比例 */
    border-radius: 5px; /* 图片也使用圆角边框 */
}