/* ===== Fluid 主题脚注徽章化 ===== */

/* 1. 正文中的脚注引用 → 蓝紫色圆角徽章 */
#board .post-content sup.footnote-ref,
#board .post-content sup.footnote-ref a.footnote-ref {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin: 0 2px;
  text-align: center;
  font-size: 11px !important;
  font-weight: bold;
  color: #667eea !important;
  background: rgba(102, 126, 234, 0.12);
  border: 1px solid rgba(102, 126, 234, 0.35);
  border-radius: 9px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: super;
}
#board .post-content sup.footnote-ref a.footnote-ref:hover {
  background: #667eea;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

/* 2. 文末脚注区域整体卡片化 */
#board .post-content section.footnotes {
  margin-top: 2em;
  padding: 14px 18px;
  background: rgba(102, 126, 234, 0.04);
  border: 1px solid rgba(102, 126, 234, 0.15);
  border-radius: 10px;
}
#board .post-content hr.footnotes-sep {
  display: none; /* 隐藏默认分隔线，用卡片边框代替 */
}

/* 3. 脚注列表编号 → 徽章 */
#board .post-content ol.footnotes-list {
  padding-left: 4px;
  list-style: none; /* 去掉默认数字，改用伪元素徽章 */
  counter-reset: fn-badge;
}
#board .post-content li.footnote-item {
  counter-increment: fn-badge;
  margin: 6px 0;
  font-size: 0.9em;
  color: #6b7280;
}
#board .post-content li.footnote-item::before {
  content: counter(fn-badge);
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin-right: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #667eea;
  background: rgba(102, 126, 234, 0.12);
  border: 1px solid rgba(102, 126, 234, 0.35);
  border-radius: 9px;
}

/* 4. 返回引用处的箭头 → 绿色徽章 */
#board .post-content a.footnote-backref {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  text-align: center;
  font-size: 11px;
  color: #42b883 !important;
  background: rgba(66, 184, 131, 0.12);
  border: 1px solid rgba(66, 184, 131, 0.35);
  border-radius: 9px;
  text-decoration: none !important;
}
#board .post-content a.footnote-backref:hover {
  background: #42b883;
  color: #ffffff !important;
}

/* 页脚播放器与主题融合 */
#footer-music .aplayer {
  background: rgba(255, 255, 255, 0.75) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  font-size: 12px !important;
}
#footer-music .aplayer .aplayer-pic {
  height: 60px !important;
  width: 60px !important;
}
#footer-music .aplayer .aplayer-info {
  height: 60px !important;
  padding: 8px 10px !important;
}
#footer-music .aplayer .aplayer-list ol li {
  height: 32px !important;
  line-height: 32px !important;
}

/* 隐藏页脚播放器的歌词区 */
#footer-music .aplayer .aplayer-lrc {
  display: none !important;
  height: 0 !important;
}



/* 文章卡片悬浮特效 */
.index-card {
  transition: all 0.3s ease-in-out !important;
}
.index-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 文章内图片悬浮放大 */
.markdown-body img {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
}
.markdown-body img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}



  /* ===== 导航栏站名霓虹灯光晕 ===== */
  .navbar-brand {
    outline: none;
    --c: #20b2aa;   /* 光晕颜色，改这里换色 */
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 10px var(--c), 0 0 20px var(--c),
                 0 0 40px var(--c), 0 0 80px var(--c),
                 0 0 160px var(--c);
    animation: neon-breathe 5s linear infinite;
  }

  /* 霓虹呼吸：光晕由强变弱再变强，模拟灯管闪烁 */
  @keyframes neon-breathe {
    0%, 100% {
      text-shadow: 0 0 10px var(--c), 0 0 20px var(--c),
                   0 0 40px var(--c), 0 0 80px var(--c),
                   0 0 160px var(--c);
    }
    50% {
      text-shadow: 0 0 5px var(--c), 0 0 10px var(--c),
                   0 0 20px var(--c);
    }
  }

.navbar-brand {
  background: linear-gradient(90deg, #ff4d6d, #ffd166, #06d6a0, #4d96ff, #c77dff, #ff4d6d);
  background-size: 400% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-flow 6s linear infinite;
  font-weight: 800;
}
@keyframes rainbow-flow { to { background-position: 400% center; } }

/* 悬浮：下划线展开 + 流光启动 + 标题微放大 */
.navbar .navbar-brand:hover {
  transform: translateY(-1px);
}
.navbar .navbar-brand:hover::after {
  width: 100%;
  opacity: 1;
  animation: underline-flow 2.5s linear infinite;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.6);
}

@keyframes underline-flow {
  to { background-position: 200% center; }
}

/* Fluid 暗色模式：下划线更亮 + 发光增强 */
html.dark .navbar .navbar-brand::after {
  box-shadow: 0 1px 10px rgba(255, 255, 255, 0.25);
}
html.dark .navbar .navbar-brand:hover::after {
  box-shadow: 0 2px 14px rgba(255, 255, 255, 0.4);
}

customCss: |-
  .navbar {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
    transition: background 0.3s;
  }
  /* Fluid 暗色模式（html.dark 类切换） */
  html.dark .navbar {
    background: rgba(30, 32, 44, 0.65) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  }





/* 暗色模式光晕 */
html.dark #scroll-top-button:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}


#navbar .nav-item-travellings .iconfont {
  font-size: 0;
}
#navbar .nav-item-travellings .iconfont::before {
  content: "🚇";
  font-size: 16px;
}

a.nav-link[href="/travellings/"] .iconfont {
  font-size: 0;
}

a.nav-link[href="/travellings/"] .iconfont::before {
  content: "\1F687";
  font-size: 16px;
}

/* 评论区容器：卡片化圆角 */
#twikoo {
  border-radius: 16px;
  padding: 24px;
  background: var(--board-bg-color, rgba(255,255,255,0.9));
  box-shadow: 0 4px 20px rgba(127,145,199,0.12);
  transition: all 0.3s ease;
}

/* 输入框圆角 + 聚焦高亮 */
#twikoo .el-input__inner,
#twikoo .el-textarea__inner {
  border-radius: 10px !important;
  background: rgba(247, 249, 254, 0.8) !important;
  border: 1px solid #e3e8f0 !important;
  transition: all 0.3s ease;
}

#twikoo .el-textarea__inner:focus,
#twikoo .el-input__inner:focus {
  border-color: #679bdf !important;   /* Fluid 默认主色，可换成您自定义的主色 */
  box-shadow: 0 0 0 3px rgba(103, 155, 223, 0.15);
}

/* 提交按钮：Fluid 渐变风 */
#twikoo .tk-submit-action-btns .el-button--primary {
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(120deg, #679bdf, #8ea6e0) !important;
  color: #fff !important;
  padding: 10px 28px !important;
  transition: all 0.3s ease;
}

#twikoo .tk-submit-action-btns .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 155, 223, 0.4);
}

/* 头像圆形 + 悬浮旋转 */
#twikoo .tk-avatar {
  border-radius: 50% !important;
  transition: all 0.6s ease;
}

#twikoo .tk-avatar:hover {
  transform: rotate(360deg);
}

/* 评论条目卡片化 + 悬浮底色 */
#twikoo .tk-comment {
  border-radius: 12px;
  padding: 12px;
  transition: background 0.3s ease;
}

#twikoo .tk-comment:hover {
  background: rgba(103, 155, 223, 0.06);
}

/* 昵称颜色跟随 Fluid 主色 */
#twikoo .tk-nick {
  font-weight: bold;
  color: #679bdf;
}

#twikoo .tk-submit-action-btns .el-button--primary {
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, #49b1f5, #6f42c1) !important;
  color: #fff !important;
  padding: 10px 28px !important;
  transition: all 0.3s ease;
}

#twikoo .tk-submit-action-btns .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 177, 245, 0.4);
}