body{font-family:Arial,Helvetica,sans-serif;background:#f6f8fb;color:#222}
*{text-decoration: none;padding:0;margin:0}
.container{max-width:90%;margin:30px auto 100px auto;background:#fff;padding:20px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.05)}
h2{margin-top:0}
label{display:block;margin:10px 0}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}
button{padding:8px 16px;border:0;background:#007bff;color:#fff;border-radius:4px;cursor:pointer}
button:hover{opacity:0.95}






.bianjip p{float:left;width:48%;margin-right:4%}
.bianjip p:nth-child(2){margin-right:0}
.bq{position:absolute;width:100%;font-size:14px;text-align:center;bottom:50px}
.bqd{width:100%;font-size:14px;text-align:center;margin:0 auto 30px auto}
.loginup{background:url(bglo.jpg) no-repeat center top;height:100vh}
.loginjm{width:400px;padding:30px 50px;position:relative;top:30vh;margin-top:0;z-index:100;text-align:center}
.loginjm h2{margin:0 0 20px 0}
.loginjm label{}
.loginjm label span{float:left;text-align:left;width:25%}
.loginjm label input{float:left;width:75%;height:35px}
.loginjm label .yzm{float:left;width:75%}
.loginjm label .yzm input{    width: 60%;float:left;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;}
.loginjm label .yzm img{width:35%;height:35px;float:right}
.loginjm button{margin:30px 0 0 0;width:100%;border-radius:30px;background:#ec677d}
.bglo{position:absolute;z-index:10;height:20vh;top:10vh;left:50%;margin-left:-180px}
.simple{width:100%;border-collapse:collapse}
.simple th,.simple td{border:1px solid #eee;padding:8px;text-align:left}
.muted{color:#666;font-size:0.9em}
.error{color:#b00}
.hysx{display:flex;gap:10px}
.hysx label{flex:1}
.hypl{width:30%;display:flex;gap:10px}
.hypl input{width:40%}
.hnlb{width:100%;border-color:#f5f5f5;}
.hnlb tbody tr th,td{padding:10px;border:1px solid #eee}
table{    margin: 0;
    padding: 0;
    border-collapse: collapse; /* 移除单元格之间的间距 */
    font-size: 1em;}
.hnlb tr th{text-align:left}
.sc{background:#f66f4f;padding:6px 15px;border-radius:5px ;color:#fff;display:block;float:left}
.bj{float:left;margin:0 15px 0 15px}
.fy{margin:30px 0 0 0}
.fy a{font-size:13px;padding:5px 15px;background:#f66f4f;color:#fff;border-radius:5px}
.fy strong{font-size:13px;padding:5px 15px;background:#666;color:#fff;border-radius:5px}
.hnewm span{float:right;}
.hnewm span a{font-size:30px;color:#000}
.hnewm{width:320px!important}
.hnewm button{width:100%}
.bc{padding:8px 25px;background:#087ae4;border:none;color:#fff;border-radius:5px}
/* 1. 隐藏原生输入框 */
.avatar-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 2. 自定义上传按钮样式 */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px 0;
}

.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
}

/* 按钮交互效果 */
.avatar-btn:hover {
  background-color: #1d4ed8;
}

.avatar-btn:active {
  background-color: #1e40af;
  transform: scale(0.98);
}

/* 3. 文件名显示样式 */
.file-name {
  font-size: 14px;
  color: #6b7280;
  min-width: 120px;
}
.tit{border-bottom:1px solid #e3e3e3;padding:0 0 10px 0}
.st{background:#f1f1f1;margin:10px 0;padding:8px ;border-radius:5px}
.hnsx{display:flex;gap:10px;margin:0 0 10px 0}
.hnsxx{flex:1}
.hnsxx p{margin:5px 0}
.hnsxx input{/width:100%}

.top{background:#2c73ff}
.topn{width:90%;margin:0 auto;padding:20px 0;color:#fff}
.topn a{color:#fff}
.top2{background:#1862ee}
.top .logo{width:200px}
.top .topny{float:right;font-size:13px;display:flex;gap:10px}
.top .topny h2{font-size:13px;margin:7px 0 0 0}
.top .topny a{width:100%;text-align:center;display:block;background:#1862ee;border-radius:20px;transition:all 0.3s}
.top .topny a:hover{background:#ff6058}
.top .topny .hytx{width:50px}
.yhdc{border-bottom:1px solid #e5e5e5;margin:0 0 10px 0;padding:0 0 10px 0}
.dc{float:right}
.yhdc .dc {display:flex;gap:10px}
.yhdc .dc .xzhy{background:#5ad185}
.dc a{display:block;background:#000;color:#fff;font-size:14px;border-radius:5px;padding:5px 25px;transition:all 0.3s}
.dc a:hover{background:#a197ff}
.poster {
  text-align: center;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-width: 320px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.poster h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.poster-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-box img {
  width: 220px;
  height: 220px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 10px;
}

.poster-box p {
  font-size: 14px;
  color: #666;
}
#posterPopup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;height:100vh;
}
#posterQR{position:absolute;top:113px;left:50%;width:150px;margin:0 0 0 -75px}
#posterPopup .wemhn{color:#66041e;position:absolute;top:425px;width:380px;text-align:center;font-size:20px}
.top2 .topn{display:flex;    justify-content: space-between;}
.topn21{padding-top:15px}
.plcz{display:flex;width:300px;gap:10px;float:right}
.plcz select{flex:2}
.plcz button{flex:1}
.shaix{width:200px;/display:flex;/gap:10px}
.shaix button{width:100%;   padding: 6px 16px;}
.shaix .qingkong{/flex:1;text-align:center;margin-top:5px;display:block; }
.qingkong{    padding: 6px 16px;
    border: 0;
    background: #718898;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;font-size:14px}
.pagination{text-align:center}
.pagination a{background:#76cae1;color:#fff;padding:5px 10px;border-radius:5px;font-size:13px}
.hysc{    background: #f66f4f;
    padding: 8px 15px;
    border-radius: 5px;
    color: #fff;
    display: block;float:right;font-size:14px;text-align:center}
/* ====== 卡片样式（移动端） ====== */
.cards-list { /padding: 0 10px 30px; box-sizing: border-box; }

.member-card {
  max-width: 480px;
  margin: 18px auto;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(32,41,54,0.06);
  padding: 12px 14px;
  box-sizing: border-box;
}

.member-header {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #f3f5f9;
  padding-bottom:10px;
}

.member-header .chkbox { flex: 0 0 auto; }
.member-header .chkbox input[type="checkbox"] { width:20px;height:20px; }

.member-title { display:flex; align-items:center; justify-content:space-between; flex:1; gap:10px; }
.member-name { font-size:18px; font-weight:700; color:#111; }
.member-status em { font-weight:700; }

/* 状态颜色 */
.member-status .s-unmatched em { color:#1a73e8; } /* 蓝 */
.member-status .s-matched em { color:#f57c00; }   /* 橙 */
.member-status .s-matching em { color:#9aa0a6; }  /* 灰 */

/* 主体：头像 + 简要信息 */
.member-body { display:flex; gap:12px; align-items:flex-start; padding-top:12px; }
.member-photo img { width:84px; height:84px; border-radius:6px; object-fit:cover; display:block; border:1px solid #eee; }
.member-info { flex:1; font-size:15px; color:#2d3a63; line-height:1.9; }
.member-info .label { color:#5b6b9a; margin-right:6px; font-weight:600; }
.member-info .gap { display:inline-block; width:12px; }

/* 描述 */
.member-desc { padding-top:12px; border-top:1px solid #f3f5f9; margin-top:12px; font-size:15px; color:#31406a; }
.member-desc p{margin-bottom:10px}
.member-desc strong { color:#2b3a7a; margin-right:6px; }

/* 操作按钮 */
.member-actions { display:flex; gap:14px; justify-content:flex-start; padding-top:14px; }
.btn-edit, .btn-delete {
  border:0; padding:10px 36px; border-radius:28px; font-size:15px; cursor:pointer; color:#fff; text-decoration:none; display:inline-block; text-align:center;
}
.btn-edit { background:#2d7af6; }
.btn-delete { background:#ea7a60; }

/* 调整链接样式（删除为 a 标签） */
.btn-delete { display:inline-block; line-height:1.2; }

/* 批量顶部区域 */
.batch-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px 0 10px; }
.select-all { color:#7d8794; font-size:15px; display:flex; align-items:center; gap:8px; }
.pcstyle{display:block}
.wapstyle{display:none}
.cz{/display:flex;gap:10px;}
.cz a{text-align:center}
/* 分页保持原有样式（如需更改可进一步调整） */

/* ====== 响应式优化 ====== */
@media (max-width:520px) {
  .member-card { padding:20px; }
  .member-body { flex-direction:row; gap:10px; }
  .member-photo img { width:72px; height:72px; }
  .member-info { font-size:14px; line-height:25px}
  .member-actions { flex-direction:row; gap:12px; }
  .btn-edit, .btn-delete { padding:10px 22px; font-size:14px;flex:1;line-height:normal; }
}
/* 默认：PC显示表格，隐藏卡片 */
.pc-table { display: table; }
.wap-list { display: none; }

/* 当屏幕宽度小于等于768px时（WAP端） */
@media (max-width: 768px) {
  .pc-table { display: none; }   /* 隐藏表格 */
  .wap-list { display: block; }  /* 显示卡片 */
}









/* 4. 适配移动端 */
@media (max-width: 768px) {
  .avatar-upload {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .file-name {
    margin-top: 8px;
  }
}

@media screen and (max-width: 900px) {
      .container { 
        max-width: 90% !important;
        padding: 20px;
      }
      .huiyuancj #avatarInput{padding:0px;height:35px}
      .huiyuancj .tj{padding:13px;font-size:15px; background-image: linear-gradient(160deg, #fb84a2 20%,#fc5b85 80%);border-radius:30px;margin-bottom:20px}
    }
/* ========== 响应式增强部分 ========== */

/* 小于900px：移动端优化布局 */
@media screen and (max-width: 900px) {
  body {
    background: #f8f9fb;
    font-size: 14px;
  }

  /* 顶部区域堆叠显示 */
  .topn {
    width: 100% !important;
    padding:10px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .topn .logo {
    width: 150px;
    margin-bottom: 10px;
  }

  .topny {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .topny h2 {
    font-size: 14px;
    text-align: center;
  }
.top .topny h2{font-size:16px}
  .topny a {
    width: auto;
    padding: 4px 10px;
  }

  .top2 .topn {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .topn21 {
    padding-top: 5px;
  }

  .topn21 p {
    justify-content: center;
    flex-direction: column;
  }

  /* 容器自适应 */
  .container {
    max-width: 95% !important;
    padding: 10px;
    margin: 20px auto;
  }

  /* 筛选区改为纵向排列 */
  .hnsx {
    flex-direction: column;
    gap: 10px;
  }

  .hnsxx {
    flex: 1 1 100%;
  }

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

  .shaix button,
  .qingkong {
  }

  /* 表格支持横向滚动 */
  table.simple {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  table.simple th,
  table.simple td {
    font-size: 13px;
    padding: 6px;
  }

  /* 按钮大小微调 */
  button,
  .hysc,
  .dc a {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* 分页按钮 */
  .pagination a {
    font-size: 12px;
    padding: 8px 8px;
  }

  /* 弹窗宽度调整 */
  #posterContent {
    max-width: 90%;
    padding: 8px;
  }

  #posterQR {
        width: 140px !important;
        top: 119px;
        margin-left: -70px;
  }

  #posterPopup .wemhn {
    font-size: 20px;
    top:420px;
  }
.plcz{width:100%}
  /* 新增编辑弹窗 */
  #editPopup form p {
    margin-bottom: 10px;
  }
.pagination{margin:20px 0 40px 0!important}
  #editPopup form input,
  #editPopup form textarea,
  #editPopup form select {
    font-size: 14px;
  }
  .hnsx{display:block}
  .hnsx .hnsxx{float:left;width:100%;margin-bottom:5px}
  .hnsx .hnsxx:nth-child(1){width:48%;margin-right:4%}
  .hnsx .hnsxx:nth-child(2){width:48%;}
  .hnsxx input,select {height:35px;background:#fff;border:1px solid #e5e5e5;color:#666}
  .nianl{width:48.3%!important}
  
  .top .topny {flex-direction: column-reverse;background:#1862ee;width:100%;margin:0px 0 0 0;padding:20px 0 0 0;gap:5px}
  .top .topny div{width:100%}
.top .topny a{width:20%;margin:5px auto;background:#2c73ff}
.hyewm{margin:20px}
.pcstyle{display:none!important}
.wapstyle{display:block!important}
.scewm{padding:8px 20px;border-radius:20px;margin:10px 0 20px 0;background:#2c73ff}

.liangban{display:flex}
.liangban .yiban:nth-child(1){flex:4}
.liangban .yiban:nth-child(2){flex:3}
.loginjm{margin-top:0!important}
.bglo{margin-left: -37.5%;width:75%;}
.loginjm{padding:5%;width:80%}
.loginjm input{font-size:14px}
.loginjm button{font-size:15px;padding:10px }
.bq{position:absolute;width:100%;font-size:14px;text-align:center;bottom:20px}
.glytop{    flex-direction: column;padding:0 0 30px 0}
.glytop strong{display:none}
#redmm,.hylbform{overflow-x:scroll;/overflow:hidden}
.hnlb{width:700px}
.hypl{width:100%}
.hylbform .simple{width:1200px}
.hysx {flex-direction: column;margin-bottom:10px}
.hysx label{margin:0}
.hysx label input,select{height:35px;font-size:14px}
.huiycon button{width:48%;margin-right:2%;font-size:14px;padding:10px 0}
.huiycon button:last-child{margin-right:0}
.tab button{padding:10px 0!important;width:25%}
.nianling input{width:48%!important}
.bj{margin:0}
.cz a {
        width: 48%;
        margin-right: 2%;
        font-size: 14px;
        padding: 10px 0;
    }
#memberModal{width:95%!important;padding:0!important}
#memberContent label{margin:0!important}
#memberContent label input{font-size:14px}
.hybjbc{font-size:14px;line-height:40px!important;width:100%}
.hybj{display:block!important;}
#memberContent .hybj label{width:32%!important;float:left;margin-right:2%!important}
#memberContent .hybj label:nth-child(3n){margin-right:0!important}

#add_member  .hybj label{width:32%!important;float:left;margin-right:2%!important} 
#add_member  .hybj label:nth-child(3n){margin-right:0!important}
#add_member .bc{width:100%;line-height:40px;font-size:14px}
#add_mm .bc{width:100%;line-height:40px;font-size:14px}
#redmm .bj{font-size: 14px;
    padding: 7px 15px;
    border-radius: 5px;
    color: #fff;
    display: block;
    float: left;margin-right:10px}
.sc{font-size:14px!important}
#editContent .bc{width:100%;line-height:40px;font-size:14px}

}