html {
  overflow-y: scroll; /* ✅ 永远保留纵向滚动条空间 */
}
/* 使用flexbox垂直排列内容 */
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column; /* 垂直排列元素 */
            align-items: stretch; /* 水平居中 */
            background-color: #FFFFFF;
            
        }

        /* 顶部导航栏 */
        .dhdiv {
            width: 100%;
            height: 60px;
            
            min-width: 560px; /* 限制最小宽度（防止太窄） */
            background-color: #FFFFFF;
            display: flex;
            
            justify-content: center;     /* ✅ 中间对齐内部容器 */
            align-items: center;
            
            box-shadow: 0 2px 5px rgba(131, 128, 128, 0.1);
            font-size: 20px;
            font-weight: bold;
            position: fixed;          /* ✅ 固定定位 */
             top: 0;  
             z-index: 9999;                 /* ✅ 贴在页面顶部 */
        }
        /* 内部内容容器（控制90%宽度） */
.dhdiv .inner {
    width: 90%;                  /* ✅ 整体内容只占页面的90% */
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: center;
    box-sizing: border-box;
}
/* 左侧（Logo + 导航） */
.left {
    display: flex;
    align-items: center;
    gap: 20px; /* Logo 与导航条的间距 */
}
/* 右侧（登录） */
.right .login {
    cursor: pointer;
}
/* ✅ 固定 logo 宽度 */
.logo {
    width: 180px;         /* ✅ 固定宽度180px */
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;  /* 防止换行 */
    display: flex; /* 启用Flex布局 */
    justify-content: center; /* 水平居中内容 */
}
/* ✅ 控制 LOGO 样式 */
.logo img {
  max-width: 180px;   /* 限制最大宽度，可根据你实际布局调整 */
  height: auto;       /* 高度自动适配，保持原比例 */
  display: block;     /* 避免下方空隙 */
  object-fit: contain;/* 保证不拉伸、完整显示 */
}
/* 右侧登录按钮 */
.login {
    background-color: #59adfb;   /* ✅ 紫色背景（BlueViolet） */
    color: white;                /* 文字颜色白色 */
    padding: 8px 20px;           /* 内边距（上下8px，左右20px） */
    border-radius: 20px;         /* ✅ 圆角按钮 */
    font-size: 15px;
    cursor: pointer;             /* 鼠标悬停时显示手形 */
    transition: all 0.3s ease;   /* 平滑动画 */
}
/* 悬停时变化效果 */
.login:hover {
   
    transform: scale(1.05);      /* 轻微放大 */
   
}
/* 导航条 */
.nav {
    display: flex;
    gap: 15px;
    
}
/* 导航链接样式 */
.nav a {
    text-decoration: none;   /* 去掉下划线 */
    color: rgb(47, 47, 47);            /* 默认文字颜色黑色 */
    font-size: 20px;         /* 默认字体大小15px */
    font-weight: normal;     /* 文字正常 */
    padding: 10px 1px;      /* ✅ 增加点击区域：上下10px，左右20px */
    
}
/* 悬停时的效果 */
.nav a:hover {
  
    color: #59adfb;   
}
/* ✅ 当前导航选中项高亮样式 */
.nav a.active {
    color: #59adfb;               /* 选中后字体变紫色 */
    border-bottom: 3px solid #59adfb; /* 底部添加紫色下划线 */
    
    padding-bottom: 10px;           /* 给下划线留出空间 */
    
}

        /* 第二个div */
        .tzdiv {
             width: 90%; /* 宽度为页面的80% */
             height: 40px; /* 高度为60px */
             
             min-width: 560px; /* 限制最小宽度（防止太窄） */
             background-color: #faf3e0ff; /* 浅绿色背景 */
             display: flex; /* 启用Flex布局 */
             justify-content: center; /* 水平居中内容 */
             align-items: center; /* 垂直居中内容 */
             border-radius: 10px; /* 圆角效果 */
             font-size: 15px; /* 字体大小 */
             font-weight: bold;
             color: rgb(239, 132, 111); /* 设置文字颜色为红色 */
             margin: 15px auto 0; /*  与上方div间距10px，并水平居中 */
        }
        .fldiv{
            width: 90%; /* 宽度为页面的80% */
            min-width: 560px; /* 限制最小宽度（防止太窄） */
            background-color: #F9F9F9; /* 背景 */
            display: flex; /* 启用Flex布局 */
             justify-content: flex-start; /* 水平居左 */
             padding: 18px 20px; /* ✅ 内边距，让文字不要贴边 */
             box-sizing: border-box; /* ✅ 让padding不影响整体宽度 */
             align-items: center; /* 垂直居中内容 */
             border-radius: 10px; /* 圆角效果 */
             margin: 15px auto 0; /*  与上方div间距10px，并水平居中 */

        }
        .picdiv{
             width: 90%; /* 宽度为页面的80% */
             min-width: 560px; /* 限制最小宽度（防止太窄） */
             margin: 15px auto 0; /*  与上方div间距10px，并水平居中 */
             min-height: calc(100vh - 400px); /* 视口高度减去头部+页脚的总高 */ 
             
        }
        .picdiv img {
    width: 100%;   /* ✅ 图片自动适应div的宽度 */
    height: auto;  /* ✅ 高度按比例自动缩放 */
    
}
/* 只在 rwcontainer 内只有一个 .rwitem 且文本是“加载中...”时生效 */
.rwcontainer:has(.rwitem .rwname:only-child) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px; /* 给个可视高度，随意调 */
  color: #9b9a9a;
}
/* 让“加载中...” 居中且无边框阴影 */
.rwitem.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;  /* ✅ 去掉白底 */
  box-shadow: none !important;         /* ✅ 去掉阴影 */
  border: none !important;             /* ✅ 防止有边线 */
  min-height: 300px;                   /* ✅ 给个高度，保持版面 */
  font-size: 18px;
  color: #9b9a9a;
}
.yddiv{
             width: 90%; /* 宽度为页面的80% */
             min-width: 560px; /* 限制最小宽度（防止太窄） */
             margin: 30px auto 0; /*  与上方div间距10px，并水平居中 */
             display: flex; /* 启用Flex布局 */
             justify-content: center; /* 水平居中内容 */
            font-size: 15px; /* 字体大小 */
            color: #4f4e4eff; /* 设置文字颜色为红色 */ 
        }
        /* 内容整体容器 */
.content {
    margin-top: 60px; /* ✅ 给导航留出空间（与导航高度一致） */
    
    
}

     /* 人物外层容器 */
.rwcontainer {
    display: grid; /* ✅ 使用 Grid 布局 */
    grid-template-columns: repeat(5, 1fr); /* ✅ 每行5个 */
    gap: 16px; /* 块与块之间的间距 */
}
/* 每个人物块样式 */
.rwitem {
    background-color: #ffffff;       /* ✅ 设置背景为白色，让每个项目看起来干净独立 */
    border-radius: 10px;             /* ✅ 圆角边框，让卡片更柔和 */
   
    border: 1.8px solid #e8e7e7;
    text-align: center;              /* ✅ 文字居中对齐 */
    padding: 1px;                   /* ✅ 内边距，避免内容紧贴边缘 */
    font-size: 16px;                 /* ✅ 设置字体大小 */
    
    color: rgb(60, 59, 59);                     /* ✅ 字体颜色为深灰色，阅读舒适 */
     /* ✅ 新增 */
    min-height: 200px;               /* 设定卡片最小高度，让空卡片也有占位 */
    display: flex;                   /* 让内容垂直居中 */
    flex-direction: column;          
    justify-content: center;         
    align-items: center;
}

/* ✅ 控制文字与图片的间距 */
.rwname {
 align-items: center;            /* ✅ 垂直居中 */
  margin-top: 10px;   /* 👉 关键：调整这个数值即可 */
  margin-bottom: 10px;   /* 文字与下边缘的距离 ✅ */
  font-size: 16px;
  color: #333;
  line-height: 1.4em;
}
.rwimg {
  display: grid;               /* ✅ 用 grid 堆叠图片和标签 */
  place-items: start;          /* ✅ 内容对齐到左上角 */
  width: 100%;
  aspect-ratio: 16 / 9; /* ✅ 固定方形比例，可改 4/3、3/4 等 */
  border-radius: 10px;
  overflow: hidden;            /* ✅ 保证圆角一致 */
  transition: box-shadow 0.2s ease-in-out; /* ✅ 平滑阴影过渡 */
}

.rwimg img {
  width: 100%;
  height: auto;
  display: block;
  grid-area: 1 / 1;            /* ✅ 图片放底层 */
    cursor: zoom-in;  /* ✅ 鼠标经过时变成“+”号放大镜形状 */
 transition: filter 0.1s ease-in-out;  /* ✅ 丝滑动画 */
 will-change: transform;  
 
}
.rwimg img:hover {
  filter: brightness(0.85); /* ✅ 轻微变暗 */
  
}

.badge {
  grid-area: 1 / 1;            /* ✅ 与图片处于同一个网格区域，实现叠放效果 */
  
  background-color: #FF4500; /* ✅ 半透明紫色背景，显眼但不突兀 */
  color: white;                /* ✅ 白色文字，与背景形成对比 */
  font-size: 13px;             /* ✅ 标签文字稍大一点，更清晰 */
  padding: 2px 8px;           /* ✅ 内边距，增加视觉空间感 */
  border-radius: 20px;         /* ✅ 四角圆润，形成柔和的矩形外观 */
  margin: 5px;                 /* ✅ 与图片边缘保持5px距离，不贴边 */
  z-index: 1;                  /* ✅ 保证标签在图片之上显示 */
}
/* 响应式：屏幕变小时自动调整列数 */
@media (max-width: 1200px) {
  .rwcontainer {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 992px) {
  .rwcontainer {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ✅ 手机端强制 2 列 */
@media screen and (max-width: 768px) {
  .rwcontainer {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* ✅ 分页区域样式 */
.pagination {
    text-align: center;
    margin: 40px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    background-color: #f5f5f5;
    color: #606266;
   font-weight: bold;   
    text-decoration: none;
    font-size: 15px;
  
  
}

/* 悬停效果 */
.pagination a:hover {
 
    color: #59adfb;
 
}

/* 当前页高亮 */
.pagination a.active {
    background-color: #59adfb;
    color: white;
    font-weight: bold;
    
}



/* ========================== */
/* ✅ 分页样式（带省略号+跳转） */
/* ========================== */
.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    user-select: none;
}

.page-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.page-buttons a {
    padding: 6px 12px;
    background: #f7f7f7;
    color: #555;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ddd;
    transition: all 0.25s ease;
}

.page-buttons a:hover {
    background: #59adfb;
    color: #fff;
}

.page-buttons a.active {
    background: #59adfb;
    color: #fff;
    border-color: #59adfb;
    font-weight: bold;
}

.page-buttons a.disabled {
    background: #eee;
    color: #aaa;
    border-color: #eee;
    cursor: not-allowed;
    pointer-events: none;
}

.page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

.page-jump input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}

.page-jump button {
    padding: 5px 10px;
    background-color: #59adfb;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.page-jump button:hover {
    background-color: #49b0fa;
}





/* ✅ 搜索结果关键字高亮 */
.highlight {
  color: #49b0fa;         /* 主题紫色 */
  
  background-color: #f3e9ff;
  border-radius: 3px;
  padding: 0 2px;
}

/* ✅ 外层容器 */
#filterWrapper {
  width: 90%;
  min-width: 560px;
  background-color: #F9F9F9;
  border-radius: 10px;
  margin: 15px auto 0;
  padding: 15px 20px;
  box-sizing: border-box;
}

/* ✅ 两列布局容器 */
.filter-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
 
  flex-wrap: wrap;     /* ✅ 小屏幕自动换行 */
  gap: 20px;
}


/* ✅ 左侧分类 */
.filter-left {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 分类行之间间距 */
  flex: 1;   /* 左边占满剩余空间 */
}

/* ✅ 分类行 */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ✅ 分类按钮 */
.filter-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
  padding: 6px 15px;
  cursor: pointer;
  transition: all 0.1s ease;
  font-size: 15px;
   color: #686868;    
}

.filter-item:hover {
  background-color: #d4e8fb;
  color: #359bfb; 
  border: 1px solid #c4def6;
}

.filter-item.active {
  background-color: #59adfb;
  color: #ffffff;
  border-color: #59adfb;
}

/* ✅ 搜索框右侧固定 */
.filter-right {
  
  display: flex;
  justify-content: flex-end;
  
  
 margin-right: 30px;              /* ✅ 整个输入框与右边容器留出10px间距 */
}
/* ✅ 搜索框样式美化区域 */
/* ======================== */

.search-bar input {
  width: 85%;                      /* ✅ 搜索框占容器宽度的 85%，留出右侧空白（防止贴边） */
  padding: 8px 36px 8px 14px;      /* ✅ 内边距：上8px 右36px 下8px 左14px（右边多留给放大镜图标） */
  font-size: 15px;                 /* ✅ 输入文字大小 */
  border: 2px solid #ddd;          /* ✅ 灰色边框，区分背景 */
  border-radius: 20px;             /* ✅ 圆角外观，让输入框更柔和 */
  outline: none;                   /* ✅ 取消默认点击时的蓝色外框（focus 状态可自定义） */

}
/* ✅ 修改默认提示文字颜色 */
.search-bar input::placeholder {
  color: #999;   /* ✅ 你可以换成 #aaa 或 #ccc，越浅越淡 */
  opacity: 1;    /* ✅ 保持原色，不让浏览器自动调淡 */
}


/* ====================================
   ✅ 手机端隐藏微信图标和搜索框
==================================== */
@media (max-width: 768px) {
  /* 隐藏微信悬浮图标 */
  .weixin {
    display: none !important;
  }

  /* 隐藏搜索框 */
  .filter-right {
    display: none !important;
  }

  /* 分类区域改为上下排列，避免空白 */
  .filter-container {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 分类项目适配屏幕宽度 */
  .filter-row {
    flex-wrap: wrap;
  }

  /* 保证按钮好点 */
  .filter-item {
    font-size: 14px;
    padding: 6px 12px;
  }
    .nav {
    justify-content: flex-start; /* 左对齐更自然 */
    padding: 8px;
    gap: 6px;
  }

  .nav a {
    font-size: 14px;
    padding: 6px 10px;
  }
}
/* 手机端隐藏右上角登录区 */
@media (max-width: 768px) {
  .right {
    display: none !important;
  }
}

/* ============================ */
/* ✅ 图片预览弹窗整体样式（背景层） */
/* ============================ */
.img-modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6); /* 半透明背景 */
 
  justify-content: center;
  align-items: center;
}
/* ✅ 图片弹窗标题样式 */
.img-title {
  text-align: center;       /* 📍文字水平居中显示 */
  font-size: 18px;          /* 📏标题字体大小为18px */
  font-weight: bold;        /* 💪加粗文字，让标题更醒目 */
  padding: 15px;            /* 🧱上下左右留出10px内边距，避免文字贴边 */
  color: #333;              /* 🎨字体颜色为深灰色，阅读舒适 */
  border-bottom: 1px solid #eee; /* 📏下边框一条浅灰线，用来分隔标题和图片区域 */
  background-color: #fafafa;   /* 🎨背景为纯白色，与弹窗底色保持一致 */
}
/* ============================ */
/* ✅ 固定尺寸白色内容容器 */
/* ============================ */
.img-box {
  background: white;
  border-radius: 20px;
  width: 70vw;         /* ✅ 固定宽度为视口 80% */
  height: 80vh;        /* ✅ 固定高度为视口 70% */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  
 
}

/* ============================ */
/* ✅ 上半部分：固定高度图片区 */
/* ============================ */
.img-top {
  flex: 1;
  background: #ffffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* ✅ 防止图片溢出 */
   padding: 3% 10%;         /* 🧱 上下留 3%，左右各留 10% */
}

/* ✅ 图片在容器中自适应缩放，不撑破边界 */
.img-top img {
  width: auto;
  height: auto;
  max-width: 100%;
  
  object-fit: contain; /* ✅ 按比例缩放 */
  
  display: block;
}

/* ============================ */
/* ✅ 下半部分：按钮区域 */
/* ============================ */
.img-bottom {
  background: #fff;
  padding: 15px;
  text-align: center;
  border-top: 1px solid #eee;
}

.img-bottom button {
  background-color: #59adfb;
  color: white;
  font-size: 16px;
  padding: 8px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.img-bottom button:hover {
  
  transform: scale(1.03);
}

/* ============================ */
/* ✅ 关闭按钮（右上角 ×） */
/* ============================ */
.close-btn {
  position: absolute;
  top: 10px;
  right: 18px;
  color: #555;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}

.close-btn:hover {
  color: #59adfb;
}
/* ============================ */
/* ✅ 图片弹窗左右切换按钮样式 */
/* ============================ */
.nav-btn {
  position: absolute;           /* 绝对定位，让按钮固定在弹窗内部左右两侧 */
  top: 50%;                     /* 让按钮垂直方向上居中对齐 */
  transform: translateY(-50%);  /* 修正垂直居中的位置（使其真正处于中线） */
  width: 60px;                  /* 按钮的宽度 */
  height: 60px;                 /* 按钮的高度 */
  border-radius: 50%;           /* 设置为圆形按钮 */
  background: rgba(0,0,0,0.3);  /* 半透明黑色背景，提高对比度 */
  cursor: pointer;              /* 鼠标悬停时变为可点击手势 */
  z-index: 3;                   /* 确保按钮在图片之上显示，不被遮挡 */
  transition: all 0.2s ease;    /* 添加过渡动画，让 hover 效果更平滑 */
}

/* ============================ */
/* ✅ 按钮内部箭头的基础样式（使用伪元素绘制） */
/* ============================ */
.nav-btn::before {
  content: "";                  /* 使用伪元素创建箭头，不需要文字内容 */
  position: absolute;           /* 相对按钮自身定位 */
  top: 50%;                     /* 垂直居中 */
  left: 50%;                    /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确让箭头居中在按钮中点 */
  border: solid white;          /* 使用白色边框线绘制箭头形状 */
  border-width: 0 3px 3px 0;    /* 控制箭头的线条粗细（右、下边显示） */
  padding: 9px;                /* 控制箭头的整体大小（越大箭头越长） */
}

/* ============================ */
/* ✅ 左侧按钮箭头方向（←） */
/* ============================ */
.nav-btn.prev::before {
  transform: translate(-30%, -50%) rotate(135deg); /* 旋转角度形成“左箭头”形状 */
}

/* ============================ */
/* ✅ 右侧按钮箭头方向（→） */
/* ============================ */
.nav-btn.next::before {
  transform: translate(-70%, -50%) rotate(-45deg); /* 旋转角度形成“右箭头”形状 */
}

/* ============================ */
/* ✅ 鼠标悬停时的视觉反馈效果 */
/* ============================ */
.nav-btn:hover {
  background: rgba(0,0,0,0.6);  /* 背景颜色加深，让按钮在 hover 时更突出 */
}

/* 左侧按钮位置 */
.nav-btn.prev {
  left: 40px;                      /* 按钮距离左边 20px */
}

/* 右侧按钮位置 */
.nav-btn.next {
  right: 40px;                     /* 按钮距离右边 20px */
}
.weixin {
  position: fixed;       /* 固定定位，不随页面滚动 */
  right: 0px;           /* 距离右边 20px，可自行调整 */
  top: 50%;              /* 垂直居中定位 */
  transform: translateY(-50%); /* 修正中心点偏移 */
  z-index: 9999;         /* 保证显示在最上层 */
}
/* 圆形微信图标 */
.weixin > img {
  width: 50px;              /* ✅ 固定尺寸 100x100 */
  height: 50px;
  border-radius: 50%;
  object-fit: cover;         /* ✅ 铺满，不留白 */
  cursor: pointer;
}
/* 📦 二维码弹出层样式 */
.wx-popup {
  position: absolute;
  right: 51px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);

  /* 🎞 平滑渐隐渐显 */
  opacity: 0;                     /* 初始透明 */
  visibility: hidden;             /* 不可见状态 */
  transition: opacity 0.3s ease;  /* 过渡动画：0.4 秒平滑变化 */
}

/* 📷 弹出层中的二维码图片 */
.wx-popup img {
  width: 200px;
  height: 250px;
  object-fit: cover;
}

/* 🧭 悬停时显示（渐显） */
.weixin:hover .wx-popup {
  opacity: 1;         /* 渐渐显示 */
  visibility: visible; /* 变为可见 */
}

  

  /* 遮罩层 */
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    
    background-color: rgba(0,0,0,0.5); /* 半透明背景 */
  }
 

  /* ================================
   弹窗框整体样式
   ================================ */
.modal-content {
    background: white;                /* 弹窗背景为白色 */
    margin: 12% auto;                 /* 顶部距离为视口高度的12%，水平居中（auto） */
    padding: 20px 50px;               /* 内边距：上下20px，左右30px */
    border-radius: 20px;              /* 圆角边框 */
    width: 400px;                     /* 弹窗宽度 */
    height: 300px;                    /* 弹窗高度 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 阴影效果，增加立体感 */
    position: relative;               /* 相对定位，用于内部定位子元素（如关闭按钮） */
    text-align: left;                 /* 内容左对齐 */
    animation: fadeIn 0.3s ease;      /* 应用淡入动画，持续0.3秒 */
}

/* ================================
   弹窗出现的淡入动画效果
   ================================ */
@keyframes fadeIn {
    from {
        opacity: 0;                   /* 初始透明度为0（不可见） */
        transform: translateY(-10px); /* 向上偏移10px */
    }
    to {
        opacity: 1;                   /* 最终透明度为1（完全可见） */
        transform: translateY(0);     /* 回到原位 */
    }
}

/* ================================
   右上角关闭按钮样式
   ================================ */
.close {
    position: absolute;               /* 绝对定位，相对于父元素 modal-content */
    right: 15px;                      /* 距离右边15px */
    top: 10px;                        /* 距离顶部10px */
    color: #999;                      /* 字体颜色为浅灰色 */
     font-size: 26px;                  /* ✅ 字号更大，原20px → 26px */
    cursor: pointer;                  /* 鼠标悬停时显示为手型 */
}
.close:hover {
    color: #333;                      /* 鼠标悬停时变为深灰色，提示可点击 */
}

/* ✅ 公共弹窗输入框样式 */
.modal-input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    outline: none;
}

/* 获得焦点效果 */
.modal-input:focus {
    border-color: #59adfb;
    box-shadow: 0 0 1px #3798f3
}

/* 只读输入框样式 */
.modal-input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* ================================
   登录按钮样式
   ================================ */
.btn-submit {
    width: 100%;                      /* 按钮宽度占满父容器 */
    background: #59adfb;/* 天蓝色背景 */
    border: none;                     /* 去除默认边框 */
    padding: 10px;                    /* 内边距10px */
    color: white;                     /* 字体颜色白色 */
    border-radius: 6px;               /* 圆角按钮 */
    cursor: pointer;                  /* 鼠标变手型 */
    font-size: 15px;                  /* 字体大小 */
    margin: 20px 0 16px; 
}


/* 自定义复选框：蓝底 + 白勾（兼容多数浏览器） */
.remember input[type="checkbox"] {
  /* 隐藏浏览器默认外观（保留可访问性） */
  -webkit-appearance: none;
  appearance: none;

  width: 15px;
  height: 15px;
  margin-right: 6px;
  border: 1px solid #ccc;   /* 默认边框（蓝色） */
  
  background: #fff;            /* 未选中白底 */
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
/* 选中态：背景变蓝，边框同色 */
.remember input[type="checkbox"]:checked {
  background: #59adfb;
  border-color: #ffffffff;
  
}
/* 自定义勾号：用 ::after 绘制白色对勾 */
.remember input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 4px;      /* 调整勾的位置（可微调） */
  top: 1px;       /* 调整勾的位置（可微调） */
  width: 4px;     /* 勾的宽度 */
  height: 8px;   /* 勾的高度 */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); /* 初始隐藏（scale 0） */
  transform-origin: center;
  transition: transform 0.12s cubic-bezier(.2,.9,.3,1);
  pointer-events: none; /* 不拦截点击 */
}
/* 选中时显示白色勾（缩放动画）*/
.remember input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1); /* 显示并放大到正常大小 */
}
/* 弹窗标题样式 */
.modal-content h3 {
  text-align: center;     /* ✅ 居中对齐 */
  color: #666;            /* ✅ 灰色文字 */
  margin-bottom: 20px;    /* 与输入框之间留出间距 */
  font-size: 20px;        /* 稍微大一点，更显标题感 */
}

/* 用户折叠框：外层容器 */
.user-dropdown {
    position: relative; /* 相对定位，为内部绝对定位的下拉菜单做参考 */
    display: inline-block; /* 内联块元素，使其可与其他元素水平排列 */
    color: rgb(143, 143, 143); /* 用户名文字颜色 */
    cursor: pointer; /* 鼠标悬停显示为手型，提示可点击/悬停 */
    font-size: 15px; /* 用户名字体大小 */
     font-weight: 400;     /* 改为细字体（正常字体） */
}

/* 下拉菜单：折叠菜单内容 */
.user-dropdown .dropdown-menu {
    display: none; /* 默认隐藏，下拉菜单初始不显示 */
    position: absolute; /* 绝对定位，相对于 .user-dropdown 定位 */
   
    top: calc(100% + 20px); 
    right: 0; /* 菜单右边对齐父容器右边 */
    background-color: #fff; /* 背景颜色为白色 */
    
    min-width: 120px; /* 最小宽度，保证菜单项有足够空间 */
    box-shadow: 0 1px 5px rgba(0,0,0,0.1); /* 添加阴影，使菜单浮起效果更明显 */
    z-index: 999; /* 提高层级，防止被其他元素覆盖 */
   
}

/* 鼠标悬停显示菜单 */
.user-dropdown:hover .dropdown-menu {
    display: block; /* 当鼠标悬停在 .user-dropdown 上时显示菜单 */
}

/* 菜单项样式 */
.user-dropdown .dropdown-menu a {
    display: block; /* 每个链接独占一行 */
    padding: 8px 20px; /* 内边距，上下8px，左右12px */
    
    text-decoration: none; /* 去掉下划线 */
    color: rgb(143, 143, 143); /* 用户名文字颜色 */
}

/* 菜单项悬停效果 */
.user-dropdown .dropdown-menu a:hover {
    background-color: #f0f0f0; /* 鼠标悬停时背景变浅灰色，突出高亮 */
    color: rgb(94, 92, 92); /* 用户名文字颜色 */
}

/* 用户名样式 */
.user-dropdown .username {
    padding: 20px 10px; /* 用户名左右上下内边距，增加点击/悬停区域 */
}

/* ✅ 修改昵称弹窗基础样式 */

.modal.show {
  display: flex;
}

/* 修改昵称弹窗高度增加 */
#nameModal .modal-content {
    height: 330px;  /* 或你希望的高度 */
}
.modal-input#oldName {
  color: #888888;
 
}

/* ✅ 单独加高修改密码弹窗 */
#passwordModal .modal-content {
  height: 350px !important;  /* 可以根据需要再调整，比如 360px / 400px */
}
/* 🔲 输入框容器，用来让图标和输入框在同一区域布局 */
.input-wrapper {
  position: relative;   /* 让子元素（眼睛图标）可以绝对定位到输入框内 */
  
}

/* 👁 默认眼睛图标样式（闭眼状态） */
.eye-icon {
  position: absolute;   /* 绝对定位，相对 input-wrapper 定位 */
  right: 12px;          /* 图标距离右边 12px */
  top: 50%;             /* 垂直居中 */
  transform: translateY(-50%); /* 精准垂直居中 */
  width: 16px;          /* 图标宽度 */
  height: 16px;         /* 图标高度 */
  background: url('https://cdn-icons-png.flaticon.com/512/709/709612.png') no-repeat center;
                        /* 设置默认闭眼图标 */
  background-size: contain;  /* 图标自适应容器大小 */
  cursor: pointer;      /* 鼠标移上去显示点击手型 */
  opacity: 0.5;         /* 初始透明度（半透明，显得柔和） */
  transition: opacity 0.2s ease; /* 鼠标悬停时淡入淡出动画 */
}

/* 🖱 鼠标悬停时让图标更亮一些 */
.eye-icon:hover {
  opacity: 0.9;
}

/* 👀 当处于“显示密码”状态时的图标样式（睁眼状态） */
.eye-icon.visible {
  background: url('https://cdn-icons-png.flaticon.com/512/158/158746.png') no-repeat center;
                        /* 切换为睁眼图标 */
  background-size: contain;
  opacity: 0.9;         /* 显得更亮，提示当前处于可见状态 */
}
.user-area {
  display: flex;
  align-items: center;
  gap: 15px;
   font-size: 15px; /* 用户名字体大小 */
     font-weight: 400;     /* 改为细字体（正常字体） */
}

.auth-link a {
  
   color: rgb(143, 143, 143); /* 用户名文字颜色 */
  text-decoration: none;
  transition: color 0.2s;
}

.auth-link a:hover {
  color: rgb(105, 104, 104); /* 用户名文字颜色 */
  font-weight: 500;     /* 改为细字体（正常字体） */
}

/* 🎯 专用于 “授权登记” 弹窗的样式设置 */
.auth-modal .modal-content {
  width: 500px;         /* 固定弹窗内容区域的宽度为 800 像素 */
  max-width: 90vw;      /* 当屏幕较窄时，弹窗宽度不超过视口宽度的 90%（保持自适应） */
  height: 530px;        /* 固定弹窗内容区域的高度为 500 像素 */
  max-height: 90vh;     /* 当屏幕较矮时，弹窗高度不超过视口高度的 90%（防止超出屏幕） */
  overflow-y: auto;     /* 当内容超出设定高度时，启用垂直滚动条 */
  padding: 20px 35px;   /* 内容与弹窗边缘的内边距，上下 20px、左右 25px */
  border-radius: 12px;  /* 弹窗圆角，提升视觉柔和度 */
}
/* 只读文本域样式优化 */
.readonly-textarea {
  background-color: #f8f8f8; /* 灰白背景，区分可编辑区 */
  color: #656464;
  cursor: text;              /* 鼠标变为文本选择光标 */
  user-select: text;         /* ✅ 允许选中 */
  -webkit-user-select: text; /* ✅ Safari 兼容 */
  -moz-user-select: text;    /* ✅ Firefox 兼容 */
  pointer-events: auto;      /* ✅ 确保可选中（有些框架默认 none） */
}

.auth-modal textarea::placeholder {
  line-height: 1.3;
}
.readonly-textarea {
  line-height: 1.3; /* ✅ 只改第一个输入框的行间距 */
}
.auth-modal textarea {
  resize: none; /* 禁止拖放调整大小 */
}

.note-label {
  color: #ff1e1e;        /* 红色警示，可换你喜欢的颜色 */
  margin-top: 10px;      /* 和上方输入框保持间距 */
  display: block;        /* 让它独占一行 */
  text-align: center;    /* ✅ 水平居中对齐 */
}
#authNote::placeholder {
  color: #b3b3b3;        /* 灰色，可换成你喜欢的颜色 */
  opacity: 1;         /* 保证某些浏览器不自动变浅 */
}

/* ===============================
   📱 强制手机端两列，不受其他样式干扰
   =============================== */

@media screen and (max-width: 768px) {
  .rwcontainer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .rwitem {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}
/* 📱 手机端隐藏 logo */
@media screen and (max-width: 768px) {
  .logo {
    display: none !important;
  }
}