/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

/* 确保.radius2是一个相对定位的容器 */
.radius2 {
    position: relative; /* 修改这里，使其成为相对定位的父容器 */
    z-index: 1; /* 确保头像z-index高于默认值，但低于信息栏 */
	left: 1570px;
    width: 88px;
    height: 88px;
    margin: 30px;
}

/* 用户头像样式 */
.avatar {
    width: 88px;
    height: 88px;
    border: 1px solid wheat;
    background: url(photoshop/head.jpg) no-repeat center;
    background-size: 100px;
    border-radius: 50px;
}

/* 用户信息详情样式 */
.user-info-details {
    display: none; /* 默认隐藏 */
    position: absolute;
    top: 90px; /* 调整此值以控制下移的距离 */
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,.1);
    z-index: 10; /* 确保信息栏位于其他内容之上 */
}

/* I WANT 标识 */
.search-prompt {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: transparent; /* 设置为透明以隐藏文字 */
    background-image: url('photoshop/white.png'); /* 确认图片路径是否正确 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-indent: -9999px; /* 隐藏文字 */
    width: calc(300px * (7 / 9)); /* 宽度设置为其父元素（或相关元素）宽度的7/9 */
    height: 50px; /* 根据需要调整高度 */
    margin-bottom: 10px; /* 提供与下面元素的空间 */
    position: absolute; /* 使用绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 居中 */
    margin-top: -60px; /* 根据实际情况调整，保证与搜索框之间有适当的间距 */
}

.dark-mode .search-prompt {
    background-image: url('photoshop/black.png'); /* 深色模式下的背景图片 */
}

/* 搜索栏相关样式 */
.search-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.search-container {
    display: inline-block;
}

.search-input {
    width: 300px; /* 假设这是固定宽度，也可以是百分比等其他单位 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f4f4f4; /* 正常模式下的背景颜色 */
    color: #000; /* 正常模式下的文本颜色 */
}

.dark-mode .search-input {
    background-color: #333; /* 深色模式下的背景颜色 */
    color: #fff; /* 深色模式下的文本颜色，确保文本为白色 */
}

.search-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

/* 背景切换按钮样式 */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 深色模式样式 */
.dark-mode {
    background-color: #121212;
    color: white;
}

/* 新增: 定义登录提示框的基础样式 */
#login-prompt {
    position: absolute;
    display: none; /* 默认隐藏 */
    background-color: #E0F7FF; /* 浅蓝色背景 */
    border-radius: 10px; /* 圆角边框 */
    padding: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,.1);
    z-index: 10;
    text-align: center; /* 文本居中 */
}

/* 新增: 设置登录/注册链接的样式 */
#login-prompt a {
    text-decoration: none; /* 去除下划线 */
    color: blue; /* 蓝色文本颜色 */
    font-weight: bold; /* 加粗文本 */
    display: inline-block; /* 让链接可以设置宽高等块级元素属性 */
    padding: 5px 10px; /* 给链接添加内边距 */
    border-radius: 5px; /* 圆角 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

/* 新增: 当鼠标悬停在链接上时改变背景颜色 */
#login-prompt a:hover {
    background-color: #B0E0E6; /* 更深一点的蓝色背景 */
}

/* 新增: 确保当页面大小改变时重新计算位置 */
@media (max-width: 600px) {
    #login-prompt {
        left: 0; /* 页面宽度较小时，让提示框左对齐 */
        right: 0; /* 同时设置右对齐以使提示框居中 */
        margin: auto; /* 居中 */
        width: 90%; /* 提示框宽度为屏幕宽度的90% */
    }
}