:root {
  --lf-post-surface: rgba(248, 244, 252, 0.9);
  --lf-post-border: rgba(184, 110, 255, 0.3);
  --lf-post-shadow: 0 12px 30px rgba(89, 55, 118, 0.16);
}

html[data-theme='dark'] {
  --lf-post-surface: rgba(29, 21, 40, 0.9);
  --lf-post-border: rgba(199, 125, 255, 0.34);
  --lf-post-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

/* 文章正文使用独立表面色，不叠加背景图片或渐变。 */
#post {
  padding: 30px;
  border: 1px solid var(--lf-post-border);
  border-radius: 8px;
  background: var(--lf-post-surface);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: var(--lf-post-shadow);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 768px) {
  #post {
    padding: 20px;
  }
}

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

/* 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;
}

/* ===== Fischl 暗夜雷闪 ===== */

/* banner 区域闪电 canvas */
#fischl-lightning-canvas {
  /* 绝对定位覆盖 banner */
  position: absolute;
  /* 铺满整个 banner */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 不阻挡鼠标事件 */
  pointer-events: none;
  /* 确保在其他内容之上 */
  z-index: 5;
}

/* 闪电触发时页面边缘紫色光晕（class 添加时瞬间出现，移除时平滑淡出） */
.fischl-lightning-glow {
  box-shadow: inset 0 0 80px rgba(184, 110, 255, 0.3),
              inset 0 0 200px rgba(123, 53, 201, 0.15),
              inset 0 0 400px rgba(100, 40, 180, 0.05);
  /* 淡入 50ms 快速响应，淡出 300ms 柔和消散 */
  transition: box-shadow 0.05s ease-in, box-shadow 0.3s ease-out;
}

/* ===== Fischl 暗夜粒子场 & 鸦羽飘落 ===== */

/* 粒子 canvas（只覆盖当前视口，避免长文章生成超大画布） */
#fischl-particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 4;
}

/* 鸦羽 canvas（只覆盖当前视口，避免长文章生成超大画布） */
#fischl-feathers-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
}

.lf-music-unavailable {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #fischl-lightning-canvas,
  #fischl-particles-canvas,
  #fischl-feathers-canvas {
    display: none !important;
  }

  .fischl-lightning-glow {
    box-shadow: none !important;
  }
}

@media (max-width: 418px) {
  .aplayer.aplayer-fixed .aplayer-body {
    max-width: calc(100vw - 18px) !important;
  }
}