/* ============================================================
 * 卤小能社区 · 全站登录/注册弹窗样式
 * 与社区内弹窗 100% 一致：将品牌变量作用域收到 .qa-auth-modal，
 * 无论站点主题如何切换，弹窗外观都与社区保持一致。
 * 登录与注册均只使用用户名/邮箱 + 密码，无手机验证码相关样式。
 * ============================================================ */

.qa-auth-modal {
  --r: #ff5252; --r-hover: #f44336; --r-soft: #ffecec;
  --r-border: #ffd0d0; --r-border-soft: #ffeded;
  --t: #333; --tm: #888; --tml: #bbb; --bg: #fff; --line: #eee; --radius: 5px;

  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
}

.qa-auth-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }

.qa-auth-dialog {
  position: relative; z-index: 1; width: 420px; max-width: 92vw;
  background: #fff; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2); overflow: hidden;
  transform: scale(.95); opacity: 0; transition: .25s;
}
.qa-auth-modal.show .qa-auth-dialog { transform: scale(1); opacity: 1; }

.qa-auth-tabs {
  display: flex; align-items: center; border-bottom: 1px solid var(--line);
  background: #fafafa; padding: 0 6px;
}
.qa-auth-tabs .qa-tab {
  flex: 1; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--tm);
  border: none; background: none; cursor: pointer; position: relative; transition: .15s;
}
.qa-auth-tabs .qa-tab.active { color: var(--r); }
.qa-auth-tabs .qa-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px; background: var(--r); border-radius: 1px;
}
.qa-auth-close {
  position: absolute; top: 10px; right: 12px; font-size: 24px; color: var(--tml);
  background: none; border: none; cursor: pointer; line-height: 1;
  padding: 4px 8px; border-radius: 4px; transition: .1s;
}
.qa-auth-close:hover { background: var(--line); color: var(--t); }

.qa-auth-panel { display: none; padding: 24px 22px 20px; }
.qa-auth-panel.active { display: block; }
.qa-auth-panel label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 5px; color: var(--t); }
.qa-auth-panel .qa-lbl { display: block; margin-bottom: 4px; }
.qa-auth-panel input[type=text],
.qa-auth-panel input[type=email],
.qa-auth-panel input[type=password],
.qa-auth-panel input[type=tel] {
  width: 100%; border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; font-size: 14px; color: var(--t); background: var(--bg);
  box-sizing: border-box; transition: .1s; margin-bottom: 12px;
}
.qa-auth-panel input:focus { outline: none; border-color: var(--r); box-shadow: 0 0 0 2px rgba(255, 82, 82, .1); }
.qa-auth-panel .btn { width: 100%; justify-content: center; padding: 11px 0; font-size: 15px; margin-top: 4px; }
.qa-reg-tip { font-size: 12.5px; color: var(--tm); margin: 4px 0 14px; }

/* 基础按钮（与社区 .btn 一致） */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: none;
  border-radius: 4px; font-size: 14px; font-weight: 600; padding: 9px 20px;
  transition: .12s; color: #fff; background: var(--r); cursor: pointer;
}
.btn:hover { background: var(--r-hover); }

/* 社交登录 */
.qa-social-login { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.qa-social-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 0; font-size: 13.5px;
  font-weight: 600; cursor: pointer; transition: .15s; background: #fff; color: var(--tm); text-decoration: none;
  position: relative; overflow: hidden;
}
.qa-social-btn:hover:not(:disabled):not(.busy) { background: var(--r-soft); color: var(--r); border-color: var(--r-border); }
.qa-social-btn:disabled, .qa-social-btn.busy { opacity: .7; cursor: not-allowed; }
.qa-social-btn.busy::after {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 6px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: lxn-spin 1s linear infinite; vertical-align: middle;
}
@keyframes lxn-spin { to { transform: rotate(360deg); } }
.qa-social-btn.qq { color: #12b7f5; }
.qa-social-btn.qq:hover:not(:disabled):not(.busy) { background: #e8f6fe; border-color: #bce3f8; }
.qa-social-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* v1.6.20：站外/主题评论区管理员操作链接默认隐藏，仅带 lxn-can-delete/edit 权限类的评论显示 */
.comment-delete-link,
.comment-edit-link,
.comments-area .comment-delete-link,
.comments-area .comment-edit-link,
.comment-body .comment-delete-link,
.comment-body .comment-edit-link,
.comment .comment-reply-delete,
.comment .comment-reply-edit {
  display: none !important;
}
.lxn-can-delete .comment-delete-link,
.lxn-can-edit .comment-edit-link,
.lxn-can-delete .comment-body .comment-delete-link,
.lxn-can-edit .comment-body .comment-edit-link,
.lxn-can-delete .comment .comment-reply-delete,
.lxn-can-edit .comment .comment-reply-edit {
  display: inline-flex !important;
}

/* v1.6.22：站外/主题评论区的"已登录为... 个人信息 · 退出"统一风格 */
.logged-in-as {
  font-size: 13.5px;
  color: var(--tm, #888);
  margin-bottom: 12px;
}
.logged-in-as a {
  color: var(--t, #333);
  text-decoration: none;
  font-weight: 600;
}
.logged-in-as a:hover {
  color: var(--r, #ff5252);
}

/* ============================================================
 * v1.6.21：邮箱验证成功页 & WPCOM Member 登录弹窗风格统一
 * 配色：品牌红 #ff5252 / #f44336，白底卡片，圆角阴影
 * ============================================================ */

/* ---------- 本插件邮箱验证成功页 ---------- */
.lxn-verify-success-wrap {
  max-width: 480px;
  margin: 60px auto;
  padding: 0 16px;
}
.lxn-verify-success {
  background: #fff;
  border: 1px solid var(--line, #eee);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
  padding: 48px 32px;
  text-align: center;
}
.lxn-verify-success .lxn-verify-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: var(--r, #ff5252);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lxn-verify-success .lxn-verify-icon svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}
.lxn-verify-success h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--t, #333);
  margin: 0 0 12px;
}
.lxn-verify-success p {
  font-size: 15px;
  color: var(--tm, #666);
  line-height: 1.6;
  margin: 0 0 24px;
}
.lxn-verify-success .btn {
  display: inline-flex;
  min-width: 160px;
  justify-content: center;
  padding: 11px 24px;
}

/* ---------- WPCOM Member 注册成功提示页覆盖 ---------- */
.member-form-wrap.member-reg-notice {
  max-width: 480px !important;
  margin: 60px auto !important;
  padding: 48px 32px !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid var(--line, #eee) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08) !important;
}
.member-reg-notice .status-icon,
.member-reg-notice .status-icon-success {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 20px !important;
  background: var(--r, #ff5252) !important;
  border-radius: 50% !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  border: none !important;
  box-shadow: none !important;
}
.member-reg-notice .status-icon svg,
.member-reg-notice .status-icon i,
.member-reg-notice .status-icon .wpmx-icon {
  color: #fff !important;
  fill: #fff !important;
}
.member-reg-notice p {
  font-size: 15px !important;
  color: var(--tm, #666) !important;
  line-height: 1.6 !important;
  margin: 0 0 16px !important;
}
.member-reg-notice p a,
.member-reg-notice a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 160px !important;
  padding: 11px 24px !important;
  background: var(--r, #ff5252) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: .12s !important;
}
.member-reg-notice p a:hover,
.member-reg-notice a:hover {
  background: var(--r-hover, #f44336) !important;
}

/* ---------- WPCOM Member 登录/注册弹窗兜底覆盖 ---------- */
.modal-content,
.member-form-login .member-form-inner,
.member-form-register .member-form-inner {
  background: #fff !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2) !important;
}
.member-form-login .member-form-title,
.member-form-register .member-form-title,
.member-form-login .modal-header,
.member-form-register .modal-header {
  padding: 20px 24px 12px !important;
  border-bottom: 1px solid var(--line, #eee) !important;
}
.member-form-login .member-form-title h3,
.member-form-register .member-form-title h3,
.member-form-login .modal-title,
.member-form-register .modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--t, #333) !important;
}
.member-form-login .member-switch a,
.member-form-register .member-switch a,
.member-form-login .member-form-forgot,
.member-form-register .member-form-forgot,
.modal-body a {
  color: var(--r, #ff5252) !important;
}
.member-form-login .member-form-items .form-group,
.member-form-register .member-form-items .form-group,
.member-form-login .form-group,
.member-form-register .form-group {
  margin-bottom: 14px !important;
}
.member-form-login .form-input,
.member-form-register .form-input,
.member-form-login input[type="text"],
.member-form-login input[type="email"],
.member-form-login input[type="password"],
.member-form-register input[type="text"],
.member-form-register input[type="email"],
.member-form-register input[type="password"] {
  width: 100% !important;
  border: 1px solid var(--line, #eee) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--t, #333) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: .1s !important;
}
.member-form-login .form-input:focus,
.member-form-register .form-input:focus,
.member-form-login input:focus,
.member-form-register input:focus {
  outline: none !important;
  border-color: var(--r, #ff5252) !important;
  box-shadow: 0 0 0 2px rgba(255, 82, 82, .1) !important;
}
.member-form-login .btn-primary,
.member-form-register .btn-primary,
.member-form-login button[type="submit"],
.member-form-register button[type="submit"] {
  width: 100% !important;
  background: var(--r, #ff5252) !important;
  border-color: var(--r, #ff5252) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 11px 0 !important;
  transition: .12s !important;
}
.member-form-login .btn-primary:hover,
.member-form-register .btn-primary:hover,
.member-form-login button[type="submit"]:hover,
.member-form-register button[type="submit"]:hover {
  background: var(--r-hover, #f44336) !important;
  border-color: var(--r-hover, #f44336) !important;
}
/* 隐藏 WPCOM Member 登录弹窗内的人机验证区域，由 JS 替换为社区统一弹窗 */
.member-form-login .form-group.TCaptcha,
.member-form-login .form-group.no-captcha,
.member-form-login .form-group.hCaptcha,
.member-form-login .form-group.reCAPTCHA,
.member-form-login .form-group._Captcha,
.member-form-register .form-group.TCaptcha,
.member-form-register .form-group.no-captcha,
.member-form-register .form-group.hCaptcha,
.member-form-register .form-group.reCAPTCHA,
.member-form-register .form-group._Captcha {
  display: none !important;
}
/* 当 WPCOM Member 弹窗被意外打开时，降低背景遮罩冲突 */
body.modal-open .qa-auth-modal { z-index: 99999; }
.modal-backdrop { z-index: 99997 !important; }
.modal { z-index: 99998 !important; }

/* ============================================================
 * v1.6.23：邮箱未验证引导弹窗
 * 与社区/登录弹窗风格一致：白底卡片、品牌红按钮、圆角阴影
 * ============================================================ */
.qa-verify-modal {
  position: fixed; inset: 0; z-index: 99996;
  display: flex; align-items: center; justify-content: center;
}
.qa-verify-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.qa-verify-modal-dialog {
  position: relative; z-index: 1; width: 440px; max-width: 92vw;
  background: #fff; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2); overflow: hidden;
  transform: scale(.95); opacity: 0; transition: .25s;
}
.qa-verify-modal.show .qa-verify-modal-dialog { transform: scale(1); opacity: 1; }
.qa-verify-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line, #eee);
  background: #fafafa;
}
.qa-verify-modal-header h4 {
  font-size: 16px; font-weight: 700; color: var(--t, #333); margin: 0;
  border-left: 3px solid var(--r, #ff5252); padding-left: 10px;
}
.qa-verify-modal-close {
  font-size: 24px; color: var(--tml, #bbb); background: none; border: none;
  cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px; transition: .1s;
}
.qa-verify-modal-close:hover { background: var(--line, #eee); color: var(--t, #333); }
.qa-verify-modal-body { padding: 22px 20px 18px; }
.qa-verify-modal-body p {
  font-size: 14.5px; color: var(--tm, #666); line-height: 1.65; margin: 0 0 12px;
}
.qa-verify-modal-body p:last-child { margin-bottom: 0; }
.qa-verify-modal-email { font-size: 13.5px; color: var(--tm, #888); }
.qa-verify-modal-email strong { color: var(--t, #333); font-weight: 600; }
.qa-verify-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px; border-top: 1px solid var(--line, #eee); background: #fafafa;
  flex-wrap: wrap;
}
.qa-verify-modal-footer .btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 600;
  padding: 9px 18px; transition: .12s; cursor: pointer; min-width: 90px;
}
.qa-verify-modal-footer .btn:not(.btn-secondary) {
  background: var(--r, #ff5252); color: #fff;
}
.qa-verify-modal-footer .btn:not(.btn-secondary):hover { background: var(--r-hover, #f44336); }
.qa-verify-modal-footer .btn.btn-secondary {
  background: var(--bg, #f5f5f5); color: var(--tm, #666); border: 1px solid var(--line, #eee);
}
.qa-verify-modal-footer .btn.btn-secondary:hover { background: var(--line, #eee); color: var(--t, #333); }
@media (max-width: 480px) {
  .qa-verify-modal-footer { justify-content: stretch; flex-direction: column; }
  .qa-verify-modal-footer .btn { width: 100%; }
}