/* 自定义文章正文背景样式 */
#post {
  /* 使用浅紫色渐变作为文章正文背景 */
  background: linear-gradient(135deg, rgba(221, 214, 243, 0.9), rgba(243, 230, 255, 0.9));
  /* 卡片圆角 */
  border-radius: 20px;
  /* 正文内边距 */
  padding: 30px;
  /* 背景模糊玻璃效果 */
  backdrop-filter: blur(6px);
  /* 紫色柔和阴影 */
  box-shadow: 0 0 20px rgba(160, 130, 255, 0.2);
  /* 所有样式变化添加过渡动画 */
  transition: all 0.3s ease;
}

/* 可选：段落间距微调 */
#post p {
  /* 增大段落行高，提升可读性 */
  line-height: 1.8;
  /* 段落底部间距 */
  margin-bottom: 1em;
}

/* 回到顶部按钮整体布局 */
#go-up {
  /* 使用 flex 居中内部元素 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 为内部绝对定位元素提供参考 */
  position: relative;
}

/* 回到顶部按钮里的百分比和图标 */
#go-up .scroll-percent,
#go-up i {
  /* 使用绝对定位叠在按钮中心 */
  position: absolute;
  /* 水平中心 */
  left: 50%;
  /* 垂直中心 */
  top: 50%;
  /* 通过 transform 精准居中 */
  transform: translate(-50%, -50%);
  /* 统一行高，避免偏移 */
  line-height: 1;
}

/* hexo-blog-encrypt 解锁区整体内容居中 */
#hexo-blog-encrypt .hbe-content {
  /* 让内部文字和按钮默认居中 */
  text-align: center;
}

/* 解锁按钮和报错提示的外层容器 */
#hexo-blog-encrypt .hbe-action-wrap {
  /* 相对定位，便于叠层控制 */
  position: relative;
  /* 提高层级，避免被输入框 svg 覆盖 */
  z-index: 20;
  /* 使用纵向 flex 排列按钮和提示 */
  display: flex;
  /* 子元素垂直排列 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直方向居中对齐 */
  justify-content: center;
  /* 宽度占满可用区域 */
  width: 100%;
  /* 与输入框区域拉开距离 */
  margin-top: 28px;
  /* 清除前面浮动带来的影响 */
  clear: both;
}

/* “解锁文章”按钮 */
#hexo-blog-encrypt .hbe-unlock-btn {
  /* 作为块级元素，方便居中 */
  display: block;
  /* 最小宽度，保证按钮不太窄 */
  min-width: 168px;
  /* 按钮高度 */
  height: 46px;
  /* 让文字垂直居中 */
  line-height: 46px;
  /* 水平居中 */
  margin: 0 auto;
  /* 左右内边距 */
  padding: 0 24px;
  /* 去掉默认边框 */
  border: none;
  /* 轻微圆角，保留一点棱角感 */
  border-radius: 10px;
  /* 紫色渐变背景 */
  background: linear-gradient(to bottom, #b86eff 0%, #9a54ea 100%);
  /* 底部加深，做出立体按键感 */
  border-bottom: 4px solid #7b35c9;
  /* 白色文字 */
  color: #fff;
  /* 字号 */
  font-size: 16px;
  /* 加粗 */
  font-weight: 700;
  /* 轻微字间距 */
  letter-spacing: 0.3px;
  /* 文本水平居中 */
  text-align: center;
  /* 禁止换行 */
  white-space: nowrap;
  /* 文字阴影，增强可读性 */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18);
  /* 按钮阴影，突出层次 */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  /* 鼠标悬浮显示手型 */
  cursor: pointer;
  /* 背景、位移、阴影变化的过渡效果 */
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* “解锁文章”按钮悬浮状态 */
#hexo-blog-encrypt .hbe-unlock-btn:hover:not(:disabled) {
  /* 悬浮时稍微提亮紫色 */
  background: linear-gradient(to bottom, #b86eff 0%, #a862f0 100%);
}

/* “解锁文章”按钮按下状态 */
#hexo-blog-encrypt .hbe-unlock-btn:active:not(:disabled) {
  /* 轻微下压 */
  transform: translateY(1px);
  /* 阴影变浅，模拟按钮按下 */
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* “解锁文章”按钮禁用状态 */
#hexo-blog-encrypt .hbe-unlock-btn:disabled {
  /* 禁止点击手势 */
  cursor: not-allowed;
}

/* 密码错误提示文字 */
#hexo-blog-encrypt .hbe-unlock-message {
  /* 块级显示，放在按钮下方 */
  display: block;
  /* 与按钮保持上间距 */
  margin-top: 10px;
  /* 不额外留内边距 */
  padding: 0;
  /* 使用偏红紫色做错误提示 */
  color: #d14d72;
  /* 字号 */
  font-size: 14px;
  /* 加粗 */
  font-weight: 600;
  /* 行高 */
  line-height: 1.6;
  /* 水平居中 */
  text-align: center;
  /* 禁止换行 */
  white-space: nowrap;
  /* 强制横排显示 */
  writing-mode: horizontal-tb !important;
}

/* 解锁成功后出现的 “Encrypt again” 按钮 */
#hexo-blog-encrypt .hbe-button {
  /* 作为块级元素，方便居中 */
  display: block;
  /* 最小宽度与解锁按钮一致 */
  min-width: 168px;
  /* 高度一致 */
  height: 46px;
  /* 文字垂直居中 */
  line-height: 46px;
  /* 上下边距，且水平居中 */
  margin: 24px auto 8px;
  /* 左右内边距 */
  padding: 0 24px;
  /* 去掉默认边框 */
  border: none;
  /* 轻微圆角 */
  border-radius: 10px;
  /* 紫色渐变背景 */
  background: linear-gradient(to bottom, #b86eff 0%, #9a54ea 100%);
  /* 底部深色增强立体感 */
  border-bottom: 4px solid #7b35c9;
  /* 白色文字 */
  color: #fff;
  /* 字号 */
  font-size: 16px;
  /* 加粗 */
  font-weight: 700;
  /* 文本居中 */
  text-align: center;
  /* 强制取消插件原本的缩进 */
  text-indent: 0 !important;
  /* 文字阴影 */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18);
  /* 按钮阴影 */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  /* 手型光标 */
  cursor: pointer;
  /* 过渡动画 */
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* “Encrypt again” 按钮悬浮状态 */
#hexo-blog-encrypt .hbe-button:hover {
  /* 悬浮时稍微提亮 */
  background: linear-gradient(to bottom, #b86eff 0%, #a862f0 100%);
}

/* “Encrypt again” 按钮按下状态 */
#hexo-blog-encrypt .hbe-button:active {
  /* 轻微下压 */
  transform: translateY(1px);
  /* 阴影变浅 */
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  /* 覆盖插件原始 top 位移逻辑 */
  top: 0;
}