/* Kreeli · Dark Signal — Custom 皮肤 */

:root {
  --bg: #0A0E14;
  --surface: #121820;
  --surface-2: #1A2230;
  --border: #243044;
  --text: #E8EEF7;
  --muted: #8B9BB0;
  --accent: #00E5FF;
  --accent-2: #7C5CFF;
  --radius: 10px;
  --font-ui: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', Consolas, 'Courier New', monospace;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --content-max: 860px;
  --side-w: 220px;
  --gap: 28px;
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background-image:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(0, 229, 255, .06), transparent 55%),
    radial-gradient(ellipse 900px 500px at 10% 0%, rgba(124, 92, 255, .05), transparent 50%) !important;
  background-attachment: fixed !important;
}

::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: #2A3548; border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: #3A4A62 }

::selection { background: rgba(0, 229, 255, .28) !important; color: #fff !important }

a, a:active, a:link, a:visited, button {
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px
}

/* ========== 加载 / 名片 ========== */
#kreeli-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #0A0E14 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .5s ease !important
}
#kreeli-loader.is-done { opacity: 0 !important; pointer-events: none !important }
#kreeli-loader .kl-ring {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border-radius: 50%; border: 2px solid #243044; border-top-color: var(--accent);
  animation: kreeli-spin 1s linear infinite
}
#kreeli-loader .kl-text { font-size: 14px; letter-spacing: .2em; color: #8B9BB0; text-align: center }
@keyframes kreeli-spin { to { transform: rotate(360deg) } }

#kreeli-card-btn {
  position: fixed !important; top: 16px !important; left: 16px !important; z-index: 10000 !important;
  width: 36px !important; height: 36px !important; padding: 0 !important;
  border: 1px solid #2A3548 !important; border-radius: 8px !important;
  background: #0A0E14 !important; color: var(--accent) !important;
  font-size: 16px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important
}
#kreeli-card-btn:hover { border-color: var(--accent) !important; box-shadow: 0 0 16px rgba(0,229,255,.25) !important }

#kreeli-card {
  position: fixed !important; top: 60px !important; left: 16px !important; z-index: 9999 !important;
  width: 240px !important; padding: 18px 16px !important;
  background: rgba(18,24,32,.96) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important; color: var(--text) !important;
  box-sizing: border-box !important
}
#kreeli-card[hidden] { display: none !important }
#kreeli-card img {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  border: 1px solid var(--border) !important; display: block !important; margin: 0 auto 10px !important
}
#kreeli-card .kc-name { text-align: center; font-weight: 700; font-size: 16px; margin-bottom: 4px }
#kreeli-card .kc-msg { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 14px }
#kreeli-card .kc-links { display: flex; flex-direction: column; gap: 8px }
#kreeli-card .kc-links a {
  display: block !important; padding: 8px 10px !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  background: var(--surface-2) !important; color: var(--text) !important;
  font-size: 13px !important; text-align: center !important
}
#kreeli-card .kc-links a:hover { border-color: var(--accent) !important; color: var(--accent) !important }

/* ========== 自建 Banner — 真实 img 下滑 ========== */
#kreeli-banner {
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--border) !important;
  background: #0A0E14 !important
}
#kreeli-banner .kreeli-banner-layer {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  transition: opacity 1.2s ease !important;
  z-index: 0 !important;
  pointer-events: none !important
}
#kreeli-banner .kb-img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  /* height 由 JS 设成 banner 高 + 可滑距离 */
  max-width: none !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  will-change: transform !important;
  object-fit: cover !important;
  object-position: center top !important
}
#kreeli-banner .kb-img.is-panning {
  /* 时长由 JS 按滚动距离设置 */
}
#kreeli-banner::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,20,.2), rgba(10,14,20,.72));
  pointer-events: none
}
#kreeli-banner .kb-brand {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 28px !important;
  z-index: 2 !important; text-align: center !important;
  color: var(--accent) !important; font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 0 24px rgba(0,229,255,.35), 0 2px 10px rgba(0,0,0,.55) !important
}
#kreeli-banner .kb-brand small {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 400;
  letter-spacing: .16em; color: #C5D4E8
}

/* ========== 隐藏原生 chrome ========== */
#top_nav, .navbar, .navbar-custom, #navigator, .blogStats,
#header, #blogTitle, #lnkBlogLogo, #Header1_HeaderTitle,
#footer, #footer *, #blog-calendar, #sidebar_news,
.post-bottom, #div_digg, .diggit, .buryit, #green_channel {
  display: none !important
}

/* ========== 布局 ========== */
#home {
  max-width: 1200px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 20px 40px !important;
  background: transparent !important
}

#main {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--gap) !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important
}

#mainContent {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 28px 0 48px !important
}

.forFlow {
  width: 100% !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important
}

/* 正文列：图片只在这列里居中 */
#cnblogs_post_body,
#topics,
.post,
.postBody {
  max-width: 100% !important;
  box-sizing: border-box !important
}

#sideBar {
  position: sticky !important;
  top: 20px !important;
  flex: 0 0 var(--side-w) !important;
  width: var(--side-w) !important;
  max-width: var(--side-w) !important;
  margin: 28px 0 0 !important;
  padding: 14px 12px !important;
  background: rgba(18,24,32,.92) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box !important;
  z-index: 20
}

#sideBar, #sideBar *, #sideBar a, #sideBar li, #sideBar h3, #sideBar div {
  background: transparent !important;
  color: var(--text) !important
}
#sideBar a:hover { color: var(--accent) !important }
#sideBar li { line-height: 2.1; list-style: none !important; width: 100% !important; box-sizing: border-box !important }
.catListTitle {
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em;
  border-bottom: 1px solid var(--border) !important; padding-bottom: 8px !important; margin-bottom: 10px !important
}

@media (max-width: 960px) {
  #main { flex-direction: column !important }
  #sideBar {
    position: relative !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; flex: none !important;
    margin: 0 0 20px !important; order: 2 !important; max-height: none !important
  }
  #mainContent { order: 1 !important; padding-top: 20px !important }
  #kreeli-banner { height: 200px !important }
}

/* ========== 首页列表 ========== */
.day {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  margin: 0 0 20px !important;
  padding: 18px 20px 14px !important;
  box-shadow: none !important
}
.dayTitle {
  font-family: var(--font-mono) !important; font-size: 12px !important;
  margin-bottom: 8px !important; background: transparent !important
}
.dayTitle a { color: var(--muted) !important }
.dayTitle a:hover { color: var(--accent) !important }
.postTitle { background: transparent !important; margin: 4px 0 10px !important }
.postTitle2, .postTitle2 span {
  color: var(--text) !important; font-size: 18px !important; font-weight: 650 !important;
  background: transparent !important; line-height: 1.4 !important
}
.postTitle2:hover, .postTitle2:hover span { color: var(--accent) !important }
.postCon, .c_b_p_desc {
  color: var(--muted) !important; background: transparent !important;
  font-size: 14px !important; line-height: 1.7 !important
}
.c_b_p_desc_readmore {
  color: var(--accent) !important; border-bottom: 1px solid rgba(0,229,255,.45) !important; font-weight: 600 !important
}

.postDesc {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important; font-size: 12px !important;
  margin-top: 12px !important; padding-top: 12px !important;
  border-top: 1px dashed var(--border) !important;
  text-align: left !important; white-space: normal !important;
  word-break: break-word !important; overflow: visible !important;
  max-width: 100% !important; line-height: 1.9 !important;
  background: transparent !important
}
.postDesc a, .postDesc span { margin-right: 1.25em !important }
.postDesc a { color: var(--muted) !important }
.postDesc a:hover { color: var(--accent) !important }

/* ========== 文章页 ========== */
#topics {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 28px 32px !important;
  box-shadow: none !important
}
h1.postTitle, #cb_post_title_url, .postTitle2 {
  color: var(--text) !important; background: transparent !important
}
#cnblogs_post_body {
  color: var(--text) !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  background: transparent !important;
  font-family: var(--font-ui) !important;
  overflow-wrap: anywhere !important;
  width: 100% !important;
  max-width: 100% !important
}
#cnblogs_post_body p { margin: 0 0 1.1em !important; max-width: 100% !important }
#cnblogs_post_body h1, #cnblogs_post_body h2, #cnblogs_post_body h3, #cnblogs_post_body h4 {
  color: var(--text) !important; font-weight: 700 !important;
  margin: 1.5em 0 .7em !important; padding-left: 12px !important;
  border-left: 3px solid var(--accent) !important; background: transparent !important
}
#cnblogs_post_body a { color: var(--accent) !important; border-bottom: 1px solid rgba(0,229,255,.3) !important }

/* 图片：只在正文列内居中，禁止撑破 */
#cnblogs_post_body img,
#topics img,
.postBody img,
.post img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: block !important;
  margin: 16px auto !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  float: none !important;
  box-sizing: border-box !important
}

#cnblogs_post_body blockquote {
  background: var(--surface-2) !important;
  border-left: 3px solid var(--accent-2) !important;
  color: var(--muted) !important;
  padding: 12px 16px !important; margin: 1em 0 !important;
  border-radius: 0 8px 8px 0 !important
}

#cnblogs_post_body table,
#cnblogs_post_body table td,
#cnblogs_post_body table th {
  background: #1A2230 !important; background-color: #1A2230 !important;
  color: var(--text) !important; border: 1px solid var(--border) !important
}
#cnblogs_post_body table {
  width: 100% !important; max-width: 100% !important;
  border-collapse: collapse !important; margin: 1em 0 !important;
  border-radius: 8px !important; overflow: hidden !important
}
#cnblogs_post_body th, #cnblogs_post_body table th {
  background: #243044 !important; background-color: #243044 !important;
  color: var(--accent) !important; font-family: var(--font-mono) !important; font-size: 12.5px !important
}
#cnblogs_post_body td, #cnblogs_post_body table td {
  padding: 10px 12px !important; color: var(--text) !important
}
#cnblogs_post_body tr:nth-child(even) td { background: #16202B !important; background-color: #16202B !important }

/* ========== 代码块 / 博客园复制工具栏 ========== */
/* 外层：不裁剪工具栏 */
#cnblogs_post_body pre,
#cnblogs_post_body .cnblogs_code,
.cnblogs_code,
#cnblogs_post_body .cnblogs_code_open,
#cnblogs_post_body .cnblogs_code_hide {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 1em 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important
}

/* 真正滚动的代码体 */
#cnblogs_post_body pre,
#cnblogs_post_body .cnblogs_code pre,
#cnblogs_post_body .cnblogs_code code,
#cnblogs_post_body .cnblogs_code_open pre,
#cnblogs_post_body .cnblogs_code_open,
.cnblogs_code pre,
pre,
.code-toolbar pre {
  background: #0D131C !important;
  background-color: #0D131C !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: #D6E4F5 !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
  overflow: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important
}

/* 强制覆盖 hljs 官方主题的浅灰底 */
#cnblogs_post_body .hljs,
#cnblogs_post_body code.hljs,
#cnblogs_post_body pre code.hljs,
.hljs,
code.hljs {
  background: #0D131C !important;
  background-color: #0D131C !important;
  color: #D6E4F5 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important
}

/* ========== hljs 语法高亮：全部提亮，便于暗底阅读 ========== */
/* 函数名 / 类型 / 类名 → 亮紫 */
.hljs-title,
.hljs-title.class_,
.hljs-title.class,
.hljs-title.function_,
.hljs-function,
.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title,
[class*="language-"] .token.function,
[class*="language-"] .token.class-name {
  color: #C792EA !important
}

/* 关键字 → 亮品红紫 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-tag,
[class*="language-"] .token.keyword,
[class*="language-"] .token.important {
  color: #FF79C6 !important
}

/* 字符串 → 亮绿 */
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
[class*="language-"] .token.string {
  color: #A6E22E !important
}

/* 数字 / 常量 / 链接 */
.hljs-number,
.hljs-bullet,
.hljs-link,
.hljs-selector-id,
.hljs-selector-class,
.hljs-template-variable,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-pseudo,
[class*="language-"] .token.number,
[class*="language-"] .token.boolean,
[class*="language-"] .token.constant {
  color: #FFB86C !important
}

/* 运算符 / 标点 → 浅蓝灰 */
.hljs-operator,
.hljs-punctuation,
[class*="language-"] .token.operator,
[class*="language-"] .token.punctuation {
  color: #8BE9FD !important
}

/* 属性 / 参数 */
.hljs-attr,
.hljs-property,
.hljs-params,
[class*="language-"] .token.property,
[class*="language-"] .token.parameter {
  color: #66D9EF !important
}

/* 宏 / 预处理 */
.hljs-meta,
.hljs-meta .hljs-keyword,
[class*="language-"] .token.macro,
[class*="language-"] .token.directive {
  color: #F92672 !important
}

/* 注释 */
.hljs-comment,
.hljs-quote,
[class*="language-"] .token.comment,
[class*="language-"] .token.prolog,
[class*="language-"] .token.doctype,
[class*="language-"] .token.cdata {
  color: #8B9BB0 !important
}

/* 兜底：pre 内未知 token 用正文色 */
#cnblogs_post_body pre code,
#cnblogs_post_body pre code span,
#cnblogs_post_body pre span {
  color: #E8EEF7
}

/* ========== 自定义复制 / 全屏 / 折叠 ========== */
pre,
#cnblogs_post_body pre {
  position: relative !important
}

.cnb-code-toolbar,
.cnblogs_code_toolbar,
.cnblogs_code_copy {
  display: none !important
}

.kreeli-code-tools {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 6px !important;
  pointer-events: auto !important
}

.kreeli-copy-btn {
  padding: 4px 10px !important;
  margin: 0 !important;
  background: #1A2230 !important;
  background-color: #1A2230 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid #3A4A62 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  white-space: nowrap !important
}

.kreeli-copy-btn:hover {
  background: #243044 !important;
  border-color: #00E5FF !important;
  color: #00E5FF !important;
  -webkit-text-fill-color: #00E5FF !important
}

.kreeli-copy-btn.is-ok {
  border-color: #3DDC97 !important;
  color: #3DDC97 !important;
  -webkit-text-fill-color: #3DDC97 !important
}

/* 折叠态 */
#cnblogs_post_body pre.kreeli-collapsed {
  max-height: 180px !important;
  overflow: hidden !important
}

/* 全屏 */
#cnblogs_post_body pre.kreeli-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  max-height: none !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 48px 20px 20px !important;
  overflow: auto !important;
  box-shadow: none !important
}

.kreeli-fs-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  background: rgba(0, 0, 0, .72) !important
}

/* 代码框暗底 + 长代码限高滚动 */
#cnblogs_post_body pre,
#cnblogs_post_body .hljs,
.hljs,
code.hljs {
  background: #0D131C !important;
  background-color: #0D131C !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important
}

#cnblogs_post_body pre {
  max-height: 420px !important;
  overflow: auto !important;
  padding-top: 40px !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important
}

/* 折叠更矮 */
#cnblogs_post_body pre.kreeli-collapsed {
  max-height: 160px !important;
  overflow: hidden !important
}

/* 全屏不限高 */
#cnblogs_post_body pre.kreeli-fs {
  max-height: none !important;
  overflow: auto !important
}

/* 窄屏限高略降 */
@media (max-width: 767px) {
  #cnblogs_post_body pre {
    max-height: 300px !important;
    padding-top: 36px !important
  }
}

/* ========== 手机端布局修正 ========== */
@media (max-width: 767px) {
  #home {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 10px 32px !important;
    box-sizing: border-box !important
  }

  #main {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important
  }

  #mainContent,
  .forFlow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 0 28px !important;
    box-sizing: border-box !important
  }

  #sideBar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 0 20px !important;
    order: 2 !important;
    max-height: none !important
  }

  #kreeli-banner {
    width: 100% !important;
    max-width: 100vw !important;
    height: 180px !important;
    margin: 0 !important;
    padding: 0 !important
  }

  /* 图必须撑满 banner 宽，不能只占左边 */
  #kreeli-banner .kreeli-banner-layer {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important
  }

  #kreeli-banner .kb-img {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    left: 0 !important;
    top: 0 !important
  }

  #kreeli-banner .kb-brand {
    font-size: 16px !important;
    bottom: 14px !important
  }

  #topics {
    padding: 18px 14px !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important
  }

  #cnblogs_post_body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important
  }

  #cnblogs_post_body img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important
  }

  #cnblogs_post_body pre,
  #cnblogs_post_body code {
    max-width: 100% !important;
    font-size: 12px !important
  }

  .kreeli-code-tools {
    top: 4px !important;
    right: 6px !important;
    gap: 4px !important
  }

  .kreeli-copy-btn {
    padding: 3px 8px !important;
    font-size: 11px !important
  }

  .day {
    padding: 14px 12px 10px !important;
    margin-bottom: 14px !important
  }
}

/* 展开/收起图标 */
.code_img_opened,
.code_img_closed,
#cnblogs_post_body .code_img_opened,
#cnblogs_post_body .code_img_closed {
  filter: invert(0.85) !important;
  opacity: 0.8 !important;
  vertical-align: middle !important
}

/* prism 兼容 */
.code-toolbar > .toolbar,
.toolbar {
  position: relative !important;
  z-index: 8 !important;
  background: transparent !important;
  border: none !important
}
.code-toolbar button,
.toolbar button,
.copy-code,
.copy-btn {
  color: #8B9BB0 !important;
  background: #1A2230 !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  opacity: 1 !important;
  visibility: visible !important
}
.code-toolbar button:hover,
.copy-code:hover,
.copy-btn:hover { color: var(--accent) !important }

#cnblogs_post_body :not(pre) > code {
  background: rgba(0,229,255,.1) !important; color: #9EF0FF !important;
  border: 1px solid rgba(0,229,255,.18) !important; border-radius: 4px !important; padding: 1px 6px !important
}

#BlogPostCategory a, #EntryTag a {
  display: inline-block !important; color: #0A0E14 !important;
  background: var(--accent) !important; padding: 4px 10px !important;
  border-radius: 999px !important; margin: 3px 6px 0 0 !important;
  font-size: 12px !important; font-weight: 600 !important; border: none !important
}
#EntryTag a { background: var(--accent-2) !important; color: #fff !important }

/* ========== 压掉博文内嵌亮色主题 ========== */
.markdown-preview,
.markdown-preview *:not(pre):not(code):not(table):not(th):not(td) {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important
}
.markdown-preview {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important
}
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4,
.markdown-preview strong, .markdown-preview p, .markdown-preview li,
.markdown-preview span, .markdown-preview div, .markdown-preview a {
  color: var(--text) !important;
  background: transparent !important;
  background-color: transparent !important
}
.markdown-preview a { color: var(--accent) !important }
.markdown-preview .ai-note {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important
}
.markdown-preview table, .markdown-preview th, .markdown-preview td {
  background: #1A2230 !important; background-color: #1A2230 !important; color: var(--text) !important
}
.markdown-preview th { background: #243044 !important; background-color: #243044 !important; color: var(--accent) !important }
.markdown-preview img {
  max-width: 100% !important; width: auto !important; height: auto !important;
  margin: 16px auto !important; border-radius: 8px !important; border: 1px solid var(--border) !important
}
.markdown-preview pre, .markdown-preview code {
  background: #0D131C !important; color: #D6E4F5 !important
}

/* 文内 style 再刷 body 底色时，用更高优先级盖住 */
body, body.skin-custom {
  background-color: var(--bg) !important;
  color: var(--text) !important
}

/* ========== 文末 / 推荐 / 评论 ========== */
#blog_post_info_block, .post-meta-container, #post_next_prev {
  opacity: 1 !important; color: var(--muted) !important;
  margin-top: 28px !important; padding: 14px 16px !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
  background: var(--surface) !important; font-size: 13px !important;
  max-width: 100% !important; overflow: hidden !important
}
#blog_post_info_block a { color: var(--accent) !important }
#blog_post_info_block img,
.post-meta-container img {
  max-width: 64px !important; max-height: 64px !important;
  width: auto !important; height: auto !important;
  border-radius: 50% !important; float: left !important; margin: 0 12px 0 0 !important
}

.under-post-card, .below-post-card, #blog_c1, #under_post_card1, #under_post_card2,
#related_posts_card, #HistoryToday, #opt_under_post, #cnblogs_ch,
[id*="under_post"], [id*="related_post"], [class*="under-post"], [class*="recommend"] {
  background: var(--surface) !important; background-color: var(--surface) !important;
  color: var(--text) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; margin: 20px 0 !important;
  padding: 14px 16px !important; max-width: 100% !important
}

/* 空卡片直接隐藏（JS 注入失败或无内容时不留空框） */
#under_post_card1:empty,
#under_post_card2:empty,
#related_posts_card:empty,
#HistoryToday:empty,
#opt_under_post:empty,
#cnblogs_ch:empty,
#blog_c1:empty,
.under-post-card.is-empty,
[id*="under_post"].is-empty,
[id*="related_post"].is-empty {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important
}
/* JS 注入的推荐列表内容 —— 全链路压暗 */
#related_posts_card *,
#under_post_card1 *,
#under_post_card2 *,
#HistoryToday *,
#opt_under_post *,
#cnblogs_ch *,
.under-post-card *,
.below-post-card *,
[id*="under_post"] *,
[id*="related_post"] *,
[class*="recommend"] *,
.post-item *,
.post-item-title,
.post-item-summary,
.post-item-meta {
  color: var(--text) !important;
  background: transparent !important
}
#related_posts_card a,
#under_post_card1 a,
#under_post_card2 a,
#HistoryToday a,
#opt_under_post a,
.under-post-card a,
[id*="under_post"] a,
[id*="related_post"] a,
[class*="recommend"] a,
.post-item a {
  color: var(--accent) !important;
  background: transparent !important
}
#related_posts_card a:hover,
.under-post-card a:hover,
[id*="related_post"] a:hover { color: #7CF0FF !important }
#related_posts_card h2, #related_posts_card h3,
#related_posts_card h4, #related_posts_card .title,
#related_posts_card span, #related_posts_card div,
#related_posts_card p, #related_posts_card li {
  color: var(--text) !important
}
.under-post-card a:hover, #related_posts_card a:hover { color: var(--accent) !important }

/* ========== 评论区 ========== */
#blog-comments-placeholder,
#comment_form,
.commentform,
#divCommentShow,
#comment_form_container {
  background: transparent !important;
  color: var(--text) !important;
  max-width: 100% !important
}

#comment_nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 18px 0 12px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important
}
#comment_nav .comment-nav-right,
#comment_nav .comment-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important
}
#comment_nav a,
#comment_nav span,
#span_refresh_tips,
#comment_nav .comment-nav-right a {
  color: var(--accent) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  visibility: visible !important;
  opacity: 1 !important
}
#comment_nav a:hover { color: #7CF0FF !important }

.feedbackItem {
  padding: 16px 16px 16px 58px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  position: relative !important
}
.feedbackAvatar { position: absolute !important; left: 14px !important; top: 16px !important }
.feedbackAvatar img {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important
}
.feedbackCon {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  line-height: 1.7 !important;
  font-size: 14px !important
}
.feedbackCon a { color: var(--accent) !important }
.feedbackListSubtitle,
.blog_comment_body,
.comment_date,
.comment_footer {
  color: var(--muted) !important;
  background: transparent !important
}
.blog_comment_body { color: var(--text) !important; font-size: 14px !important }
.comment_date, .comment_footer { font-family: var(--font-mono) !important; font-size: 12px !important }

.commenttb, .comment_textarea, #tbCommentBody,
#AjaxHolder_Txb_Panel textarea {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important
}
.commenttb:focus, .comment_textarea:focus, #tbCommentBody:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.15) !important
}
#AjaxHolder_PostComment_btnSubmit,
input[type="submit"][value*="提交"],
input[type="submit"][value*="评论"] {
  background: var(--accent) !important; color: #0A0E14 !important;
  border: none !important; border-radius: 8px !important;
  font-weight: 700 !important; padding: 8px 20px !important; cursor: pointer !important
}
#AjaxHolder_PostComment_btnSubmit:hover { background: #7CF0FF !important }

#opt_under_post a,
#blog_post_info_block a {
  color: var(--accent) !important
}

@media (prefers-reduced-motion: reduce) {
  #kreeli-loader .kl-ring { animation: none }
  * { transition: none !important }
}

/* ========== 鼠标点击音符特效 ========== */
.kreeli-note {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #00E5FF !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, .55) !important;
  user-select: none !important;
  will-change: transform, opacity !important;
  animation: kreeli-note-rise 1.1s ease-out forwards !important
}
.kreeli-note.note-16 {
  font-size: 14px !important;
  color: #7C5CFF !important;
  text-shadow: 0 0 10px rgba(124, 92, 255, .5) !important
}
.kreeli-note.note-alt {
  color: #5EEBFF !important;
  text-shadow: 0 0 10px rgba(94, 235, 255, .5) !important
}
@keyframes kreeli-note-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.6)
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.1)
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--nx, 0px)), calc(-90px - var(--ny, 20px))) scale(.85)
  }
}
@media (prefers-reduced-motion: reduce) {
  .kreeli-note { display: none !important }
}