/* =========================================================
   会员中心样式（配合首页头部/尾部使用）
   说明：原会员模板依赖一套已缺失的 bootstrap 资源，
        这里用最小实现重写它们用到的类，保证页面正常显示。
   ========================================================= */

/* ---------- 1. 页面容器 ---------- */
/* 会员页整体浅灰底，与白色导航/内容卡片区分开（class 由 member.js 按是否存在 .pages 自动添加） */
body.member-page { background: #f5f7fb; }
body.member-page .site-header { box-shadow: 0 2px 12px rgba(15, 23, 42, .06); }

.pages { padding: 34px 0 76px; min-height: 58vh; }

/* 内容列做成白色卡片 */
.pages .col-md-10,
.pages .col-lg-6,
.pages .member-card {
 
  padding: 26px 24px;
}

/* ---------- 2. 栅格（只实现会员模板用到的列） ---------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; box-sizing: border-box; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }

@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ---------- 3. 工具类 ---------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-secondary { color: var(--gray); }
.text-info { color: var(--orange-deep); }
.text-sm { font-size: 13px; }
.red, .text-danger { color: #ff4d4f; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }
.my-4 { margin: 24px 0; }
.my-5 { margin: 32px 0; }
.p-0 { padding: 0 !important; }
.d-block { display: block; }
.d-none { display: none; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.rounded { border-radius: 50%; }
.lh-2 { line-height: 2; }
.lh-3 { line-height: 2.4; }
.w-100 { width: 100%; }
.cursor-pointer, .del { cursor: pointer; }

/* ---------- 4. 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-group > label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 600;
  color: #2b3445;
}
.form-control {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  color: #26303c;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-control:focus {
  border-color: var(--orange-light);
  box-shadow: 0 0 0 4px rgba(255, 154, 60, .14);
}
select.form-control { height: 44px; padding: 0 12px; cursor: pointer; }
textarea.form-control { min-height: 110px; line-height: 1.7; resize: vertical; }
.form-control.is-invalid { border-color: #ff4d4f; }
.form-control.is-valid { border-color: #22c55e; }

/* 校验提示 */
.valid-feedback, .invalid-feedback { display: block; margin-top: 6px; font-size: 13px; }
.valid-feedback { color: #22c55e; }
.invalid-feedback { color: #ff4d4f; }

/* 输入组合（原 bootstrap input-group） */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: auto; }
.input-group-prepend { display: flex; }
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  color: #5b6675;
  background: #f3f5f9;
  border: 1px solid #e3e7ee;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  white-space: nowrap;
}
.input-group-prepend + .form-control { border-radius: 0 10px 10px 0; }

/* 头像 / 缩略图预览框 */
.pages img.headpic,
.pages img.ico { border-radius: 8px; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ff9a3c, var(--orange-deep));
  box-shadow: 0 8px 20px rgba(245, 83, 10, .22);
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245, 83, 10, .3); }
.btn + .btn { margin-left: 10px; }

.btn-info, .btn-primary { background: linear-gradient(135deg, #ff9a3c, var(--orange-deep)); color: #fff; }
.btn-success { background: linear-gradient(135deg, #9ad452, #6aa829); box-shadow: 0 8px 20px rgba(122, 180, 42, .24); }
.btn-warning { background: linear-gradient(135deg, #ffc247, #f0930b); box-shadow: 0 8px 20px rgba(240, 147, 11, .22); }
.btn-danger { background: linear-gradient(135deg, #ff7b7b, #e8383d); box-shadow: 0 8px 20px rgba(232, 56, 61, .22); }
.btn-secondary { background: #7b8794; box-shadow: none; }
.btn-light, .btn-default {
  color: #2b3445;
  background: #fff;
  border-color: #dfe4ec;
  box-shadow: none;
}
.btn-light:hover, .btn-default:hover { background: #fff5eb; border-color: var(--orange-light); color: var(--orange-deep); }

.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }

/* ---------- 6. 表格 ---------- */
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
table.table > thead th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: #4a5568;
  background: #f7f9fc;
  border-bottom: 1px solid #eaeef5;
  white-space: nowrap;
}
table.table > thead th:first-child { border-radius: 10px 0 0 0; }
table.table > thead th:last-child { border-radius: 0 10px 0 0; }
table.table > tbody td {
  padding: 14px;
  border-bottom: 1px solid #f0f3f8;
  color: #333c4c;
  vertical-align: middle;
}
table.table > tbody tr:hover td { background: #fffaf4; }

/* ---------- 7. 侧栏菜单（卡片式） ---------- */
/* 与右侧内容列（.mt-3 = 16px）顶部对齐 */
.member-side { margin-top: 16px; margin-bottom: 20px; }
.member-side__title {
  display: none;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #24313f;
}

/* 个人信息卡 */
.member-profile {
  padding: 20px 16px 16px;
  margin-bottom: 14px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(165deg, #fff7ee 0%, #fff 62%);
  border: 1px solid #ffe9d2;
  box-shadow: 0 10px 26px rgba(245, 106, 10, .08);
}

/* 菜单卡 */
.member-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #eef2f8;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.member-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #3d4757;
  background: transparent;
  border: 0;
  transition: background .22s var(--ease), color .22s var(--ease);
}

.member-menu a > i:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #fff5eb;
  color: var(--orange);
  font-size: 14px;
  transition: background .22s var(--ease), color .22s var(--ease);
}

.member-menu a span { flex: 1 1 auto; }

.member-menu a .member-menu__arrow {
  flex: 0 0 auto;
  color: #cfd8e3;
  font-size: 12px;
}

.member-menu a:hover { background: #fff8f1; color: var(--orange-deep); }

.member-menu a.is-active {
  background: linear-gradient(135deg, #fff3e4, #ffe7cd);
  color: var(--orange-deep);
}

.member-menu a.is-active > i:first-child {
  background: linear-gradient(135deg, #ff9a3c, #f5530a);
  color: #fff;
}

.member-menu a.is-active .member-menu__arrow { color: var(--orange); }

/* ---------- 8. 列表组（保留兼容） ---------- */
.list-group { display: flex; flex-direction: column; }
.list-group-item {
  display: block;
  padding: 11px 16px;
  font-size: 15px;
  color: #3d4757;
  background: #fff;
  border: 1px solid #e9edf4;
  border-bottom: 0;
  text-decoration: none;
}
.list-group-item:first-child { border-radius: 10px 10px 0 0; }
.list-group-item:last-child { border-radius: 0 0 10px 10px; border-bottom: 1px solid #e9edf4; }
.list-group-item:hover { background: #fff5eb; color: var(--orange-deep); }

.dropdown-menu {
  display: block;
  padding: 6px;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .1);
}
.dropdown-item { display: block; padding: 9px 14px; border-radius: 8px; text-decoration: none; color: #3d4757; }
.dropdown-item:hover { background: #fff5eb; color: var(--orange-deep); }
.dropdown-divider { height: 1px; margin: 6px 0; background: #eef1f6; }

/* ---------- 9. 提示 / 面包屑 / 分页 ---------- */
.alert {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.8;
  border: 1px solid transparent;
}
.alert-warning { color: #8a5a00; background: #fff8e8; border-color: #ffe3ab; }

.position { font-size: 14px; color: var(--gray); }
.position a { color: var(--gray); }
.position a:hover { color: var(--orange-deep); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  color: #3d4757;
  background: #fff;
  border: 1px solid #e9edf4;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.pagination .page-link:hover {
  color: var(--orange-deep);
  border-color: var(--orange-light);
  transform: translateY(-2px);
}
.pagination .page-num-current {
  color: #fff;
  background: linear-gradient(135deg, #ff9a3c, var(--orange-deep));
  border-color: transparent;
}

/* ---------- 10. 弹窗（投稿回复等） ---------- */
.pb-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 14, 28, .6);
  animation: pbModalIn .25s ease;
}
@keyframes pbModalIn { from { opacity: 0; } to { opacity: 1; } }
.pb-modal__box {
  width: min(460px, 100%);
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(3, 8, 20, .35);
}
.pb-modal__head {
  padding: 16px 20px;
  font-weight: 700;
  color: #24313f;
  border-bottom: 1px solid #eef1f6;
}
.pb-modal__body { padding: 20px; white-space: pre-wrap; line-height: 1.8; color: #3d4757; }
.pb-modal__foot { padding: 14px 20px; text-align: right; border-top: 1px solid #eef1f6; }

/* ---------- 11. 个人中心：头像 ---------- */
.member-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #eef4fb, #dbe8f6);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12), inset 0 0 0 3px #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.member-avatar:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15, 23, 42, .18), inset 0 0 0 3px #fff; }

.member-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #b9cbdd;
}

.member-avatar__edit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  background: rgba(255, 122, 24, .92);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.member-avatar:hover .member-avatar__edit { opacity: 1; }

.member-avatar.is-loading { pointer-events: none; }
.member-avatar.is-loading::after {
  content: '\f110';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .75);
  color: var(--orange-deep, #f5530a);
  font-size: 24px;
  animation: memberSpin 1s linear infinite;
}

@keyframes memberSpin { to { transform: rotate(360deg); } }

.member-avatar__name {
  margin-bottom: 2px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #24313f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-avatar__tip { margin-bottom: 16px; text-align: center; font-size: 12px; color: #9aa1ad; }

/* ---------- 12. 个人中心：侧栏增强 ---------- */
.member-side__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px dashed #eef2f8;
  font-size: 17px;
  font-weight: 800;
  color: #24313f;
}

.member-side__title i { color: var(--orange, #ff7a18); }

.member-side__vip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffc247, #ff8a1f 55%, #f5530a);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(245, 83, 10, .26);
  transition: transform .22s var(--ease), box-shadow .22s;
}

.member-side__vip:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(245, 83, 10, .34); }

.member-side__tip {
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #fffaef;
  color: #a3752a;
  font-size: 12px;
  line-height: 1.75;
}

.member-side__tip p + p { margin-top: 6px; }
.member-side__tip i { margin-right: 4px; color: #f5a623; }

/* ---------- 12. 个人中心：内容面板 ---------- */
.member-panel {
  padding: 22px 24px;
  margin-top: 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #eef2f8;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .05);
}

.member-panel__title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5fa;
  font-size: 17px;
  font-weight: 800;
  color: #24313f;
}

.member-panel__title i { color: var(--orange, #ff7a18); }

.member-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 22px;
}

.member-info li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed #f1f5fa;
  font-size: 15px;
}

.member-info li span { flex: 0 0 auto; color: #8b95a4; }
.member-info li b { color: #26303c; font-weight: 600; word-break: break-all; text-align: right; }

/* 未填写占位 */
.member-info__empty {
  font-style: normal;
  font-weight: 500;
  color: #b9c2ce;
}

.member-panel__foot { padding-top: 18px; text-align: right; }

/* 右侧内容列改为「无外层卡」，让内部各卡片与左侧栏顶边严格对齐 */
.pages .member-main {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* 第一个面板不留顶部外边距，保证与左栏顶边齐平 */
.member-form .member-panel:first-of-type { margin-top: 0; }
.member-main > .member-panel:first-child { margin-top: 0; }

/* ---------- 12.1 资料修改表单 ---------- */
.member-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 2px 24px;
}

.member-form .form-group { margin-bottom: 16px; }
.member-form .form-group > label { font-size: 14px; }

.member-form .form-control:disabled {
  background: #f6f8fb;
  color: #8b95a4;
  cursor: not-allowed;
}

.member-panel__title small {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #9aa1ad;
}

.member-form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0 10px;
}

/* ---------- 13. 登录 / 注册卡片 ---------- */
.member-auth {
  display: flex;
  justify-content: center;
  padding: 10px 0 30px;
}

.member-auth__card {
  width: 100%;
  max-width: 460px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.member-auth__hd {
  position: relative;
  padding: 28px 26px 22px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #ffb93e 0%, #ff7a18 48%, #f5530a 100%);
  overflow: hidden;
}

.member-auth__hd::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.member-auth__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 22px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38);
}

.member-auth__hd h2 { position: relative; margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.member-auth__hd p { position: relative; margin: 0; font-size: 13px; opacity: .95; }

.member-auth__body { padding: 24px 26px 26px; }
.member-auth__body .btn-block { width: 100%; margin-top: 6px; }

.member-auth__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: #8b95a4;
}

.member-auth__links a { color: var(--orange-deep, #f5530a); font-weight: 700; }
.member-auth__links a:hover { text-decoration: underline; }

/* 验证码一行 */
.code-row { display: flex; align-items: stretch; gap: 12px; }
.code-row .form-control { flex: 1 1 auto; }
.code-row img {
  flex: 0 0 auto;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e3e7ee;
  cursor: pointer;
}
.code-row .code-send { flex: 0 0 auto; height: 44px; white-space: nowrap; }

/* ---------- 14. 响应式 ---------- */
@media (max-width: 767px) {
  .pages { padding: 22px 16px 60px; }
  .pages .col-md-10,
  .pages .col-lg-6 { padding: 20px 16px; }
  .btn + .btn { margin-left: 0; }
  .btn { padding: 0 18px; font-size: 14px; }
  table.table { font-size: 14px; }
  table.table > thead th,
  table.table > tbody td { padding: 10px 8px; }
  .member-auth__body { padding: 20px 18px 22px; }
  .member-info { grid-template-columns: 1fr; }
  .member-panel { padding: 18px 16px; }
}