/* ==========================================================================
   Custom Dark Pink-Purple Theme — Permanently Locked to Dark Violet Tone
   Palette: Background #1a1035 | Card rgba(36,24,74,0.85) | Text #e0d0f0 | Highlight #ffa5c8 | Footer #0f0a20
   ========================================================================== */

/* ── 1. CSS Variables ── */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --global-bg: #1a1035 !important;
  --card-bg: rgba(36, 24, 74, 0.85) !important;
  --font-color: #e0d0f0 !important;
  --card-meta: #b8a8d8 !important;
  --hr-border: rgba(255, 158, 197, 0.3) !important;
  --hr-before-color: #ffa5c8 !important;
  --text-bg-hover: rgba(255, 158, 197, 0.15) !important;
  --blockquote-bg: rgba(26, 16, 53, 0.88) !important;
  --blockquote-color: #e0d0f0 !important;
  --headline-presudo: #b8a8d8 !important;
  --card-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  --card-hover-box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
}

/* ── 2. Global Layout & Dark Tone Lock ── */
html,
body {
  background-color: #1a1035 !important;
  color: #e0d0f0 !important;
}

#body-wrap {
  background-color: transparent !important;
  min-height: 100vh !important;
}

#content-inner,
main.layout,
.layout {
  background-color: transparent !important;
  background: transparent !important;
  color: #e0d0f0 !important;
}

/* ── 3. Page Header (Pure Panoramic Wallpaper Banner - 零文字遮挡，透出全局背景) ── */
#page-header {
  position: relative;
  width: 100% !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

#page-header::after {
  display: none !important;
}

/* 首页全屏大图 */
#page-header.full_page {
  height: 100vh !important;
}

/* 文章页 & 其他非首页头图：全景展示，头部透明让全局大图自然透出 */
#page-header.not-home-page,
#page-header.post-bg {
  width: 100% !important;
  height: 380px !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* 平滑柔和渐变过渡：仅顶部微暗保护顶栏，下方完全通透与背景浑然一体 */
#page-header.not-home-page::before,
#page-header.post-bg::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(13, 8, 32, 0.45) 0%,
    transparent 55%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── 4. Navigation Bar ── */
#nav {
  background: rgba(13, 8, 32, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 158, 197, 0.2) !important;
  transition: all 0.3s ease !important;
}

#page-header.nav-fixed #nav {
  background: rgba(13, 8, 32, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── 5. Post Content Card & Sunk Title/Meta (毛玻璃半透明浮于插画之上，知乎/Medium专栏排版) ── */
#post {
  background: rgba(36, 24, 74, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 158, 197, 0.22) !important;
  border-radius: 12px !important;
  padding: 40px 45px 35px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

#article-container,
.post-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 下沉到正文卡片最顶部的标题与元数据 */
#post > #post-info {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  padding: 0 0 22px 0 !important;
  margin: 0 0 28px 0 !important;
  border-bottom: 1px solid rgba(255, 158, 197, 0.22) !important;
  text-align: left !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}

#post #post-info .post-title {
  font-size: 2.15rem !important;
  line-height: 1.38 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: none !important;
  word-break: break-word !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

#post #post-info #post-meta {
  font-size: 13.5px !important;
  color: #b8a8d8 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

#post #post-info #post-meta .meta-firstline,
#post #post-info #post-meta .meta-secondline {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

#post #post-info #post-meta a {
  color: #ffa5c8 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#post #post-info #post-meta a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

#post #post-info #post-meta .post-meta-icon {
  color: #ffa5c8 !important;
  margin-right: 4px !important;
}

#post #post-info #post-meta .post-meta-separator {
  color: rgba(255, 158, 197, 0.3) !important;
  margin: 0 2px !important;
}

#post #post-info #post-meta .post-meta-label {
  color: #b8a8d8 !important;
  margin-right: 2px !important;
}

#post #post-info #post-meta time,
#post #post-info #post-meta .word-count {
  color: #e0d0f0 !important;
}

/* ── 6. Mobile Responsiveness ── */
@media screen and (max-width: 768px) {
  #page-header.not-home-page,
  #page-header.post-bg {
    height: 240px !important;
  }
  #post {
    padding: 24px 18px 20px !important;
    border-radius: 8px !important;
    background: rgba(36, 24, 74, 0.90) !important;
  }
  #post > #post-info {
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
  }
  #post #post-info .post-title {
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }
  #post #post-info #post-meta {
    font-size: 12.5px !important;
    gap: 6px 10px !important;
  }
}

/* ── 7. Footer 彻底锁死深色 #0f0a20，杜绝亮蓝色 ── */
#footer,
footer#footer,
#footer-wrap,
#footer::before,
footer#footer::before,
#footer .footer-other,
#footer .footer-flex {
  background: rgba(15, 10, 32, 0.96) !important;
  background-color: rgba(15, 10, 32, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255, 158, 197, 0.22) !important;
  color: #b8a8d8 !important;
  box-shadow: none !important;
}

#footer::before,
footer#footer::before {
  display: none !important;
}

#footer a {
  color: #ffa5c8 !important;
  transition: color 0.2s ease !important;
}

#footer a:hover {
  color: #ffffff !important;
}

#footer .footer-separator {
  color: rgba(255, 158, 197, 0.3) !important;
}

#footer .copyright,
#footer .framework-info,
#footer .footer_custom_text {
  color: #b8a8d8 !important;
}

/* ── 8. Cards & Content (Global Frosted Glass) ── */
#recent-posts .recent-post-item,
#aside-content .card-widget,
.archive .recent-post-item,
.post-block,
#page,
#archive,
.container {
  background: rgba(36, 24, 74, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: #e0d0f0 !important;
  border: 1px solid rgba(255, 158, 197, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ── 9. Typography ── */
a {
  color: #ffa5c8 !important;
}

#site-title {
  color: #ffffff !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
}

/* ── 10. Aside / Widget Author Card & Site Data (常态高亮清晰显色，去除多余社交图标) ── */
#aside-content .card-info .author-info__description {
  color: #d8c8f0 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 6px 0 14px 0 !important;
}

#aside-content .card-info .site-data {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  margin: 12px 0 16px 0 !important;
}

#aside-content .card-info .site-data > a {
  display: table-cell !important;
  text-align: center !important;
  text-decoration: none !important;
}

#aside-content .card-info .site-data > a .headline {
  color: #c8b8e8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

#aside-content .card-info .site-data > a .length-num {
  color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, 'Consolas', monospace) !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  text-shadow: 0 0 12px rgba(255, 165, 200, 0.45) !important;
  transition: all 0.2s ease !important;
}

#aside-content .card-info .site-data > a:hover .headline {
  color: #ffa5c8 !important;
}

#aside-content .card-info .site-data > a:hover .length-num {
  color: #ffa5c8 !important;
  text-shadow: 0 0 16px rgba(255, 165, 200, 0.8) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

#card-info-btn {
  background: rgba(255, 158, 197, 0.2) !important;
  border: 1px solid rgba(255, 158, 197, 0.35) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  margin-top: 14px !important;
  transition: all 0.3s !important;
}

#card-info-btn:hover {
  background: rgba(255, 158, 197, 0.4) !important;
  border-color: #ffa5c8 !important;
}

#card-info-btn i {
  color: #ffffff !important;
}

#aside-content .card-info .card-info-social-icons {
  display: none !important;
}

/* ── 11. Tag Cloud ── */
.tag-cloud a,
.tag-cloud-list a,
.card-tag-cloud a,
#tags a {
  background: rgba(255, 158, 197, 0.15) !important;
  color: #ffa5c8 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
}

.tag-cloud a:hover,
.tag-cloud-list a:hover,
.card-tag-cloud a:hover,
#tags a:hover {
  background: rgba(255, 158, 197, 0.35) !important;
  color: #ffffff !important;
}

/* ── 12. Code Blocks ── */
#article-container figure.highlight {
  background: rgba(21, 13, 44, 0.94) !important;
  border: 1px solid rgba(255, 158, 197, 0.22) !important;
  border-radius: 8px !important;
}

#article-container code {
  background: rgba(255, 158, 197, 0.18) !important;
  color: #ffa5c8 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* ── 13. Blockquotes ── */
#article-container blockquote {
  background: rgba(26, 16, 53, 0.88) !important;
  border-left: 4px solid #ffa5c8 !important;
  color: #e0d0f0 !important;
}

/* ── 14. TOC Active ── */
#aside-content #card-toc .toc-link.active {
  background: rgba(255, 158, 197, 0.25) !important;
  color: #ffa5c8 !important;
}

/* ── 15. Tables ── */
#article-container table {
  background: rgba(26, 16, 53, 0.9) !important;
  border-collapse: collapse !important;
}

#article-container table th {
  background: rgba(46, 30, 94, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 158, 197, 0.22) !important;
}

#article-container table td {
  border: 1px solid rgba(255, 158, 197, 0.15) !important;
  color: #e0d0f0 !important;
}

/* ── 16. 樱花飘落特效全局浮动层 ── */
.sakura {
  pointer-events: none !important;
  position: fixed !important;
  z-index: 99999 !important;
}

/* ── 17. Comment Section (Giscus 评论区极简无缝融合，拒绝多层边框) ── */
#post-comment {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px dashed rgba(255, 158, 197, 0.25) !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#post-comment .comment-head {
  margin-bottom: 16px !important;
}

#post-comment .comment-head .comment-headline {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#post-comment .comment-head .comment-headline i {
  color: #ffa5c8 !important;
}

#post-comment .comment-wrap,
#giscus-wrap {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#giscus-wrap iframe.giscus-frame {
  width: 100% !important;
  min-height: 260px !important;
  border: none !important;
  background: transparent !important;
}

/* ── 18. Full-Width Centered Layout for Tags, Categories, Archives, About, Projects ── */
#content-inner.layout.hide-aside,
.layout.hide-aside {
  max-width: 1050px !important;
  width: 90% !important;
  margin: 0 auto !important;
  justify-content: center !important;
  padding: 30px 15px !important;
  display: block !important;
}

#content-inner.layout.hide-aside > div:first-child,
#content-inner.layout.hide-aside #page,
#content-inner.layout.hide-aside #archive,
#content-inner.layout.hide-aside #tag,
#content-inner.layout.hide-aside #category,
.layout.hide-aside > div:first-child,
.layout.hide-aside #page,
.layout.hide-aside #archive,
.layout.hide-aside #tag,
.layout.hide-aside #category {
  width: 100% !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
}

/* 标签页全宽沉浸式彩虹标签云 */
.layout.hide-aside .tag-cloud-list,
.layout.hide-aside #tags .tag-cloud-list {
  text-align: center !important;
  padding: 30px 20px !important;
}

.layout.hide-aside .tag-cloud-list a {
  display: inline-block !important;
  margin: 8px 10px !important;
  padding: 6px 16px !important;
  font-size: 15px !important;
  border-radius: 20px !important;
  background: rgba(255, 158, 197, 0.15) !important;
  border: 1px solid rgba(255, 158, 197, 0.3) !important;
  color: #ffa5c8 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.layout.hide-aside .tag-cloud-list a:hover {
  background: rgba(255, 158, 197, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(255, 158, 197, 0.35) !important;
}

/* 分类页优雅居中网格 */
.layout.hide-aside .category-lists {
  padding: 20px 30px !important;
}

.layout.hide-aside .category-lists ul {
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.layout.hide-aside .category-lists ul li {
  background: rgba(45, 30, 86, 0.6) !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  transition: all 0.3s ease !important;
}

.layout.hide-aside .category-lists ul li:hover {
  background: rgba(65, 40, 115, 0.85) !important;
  border-color: #ffa5c8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 归档页时间轴居中优化 */
.layout.hide-aside #archive .article-sort {
  margin-left: 20px !important;
  padding-left: 25px !important;
  border-left: 2px solid rgba(255, 158, 197, 0.35) !important;
}

/* ── 19. Author Card Description (右侧边栏简介两行工整排版) ── */
.card-widget.card-info .author-info-description {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #e8daf5 !important;
  padding: 0 4px !important;
  margin-top: 8px !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* ── 20. Featured Series Cards (首页置顶架构专题推荐卡片) ── */
.featured-series-container {
  margin-bottom: 30px !important;
}

.featured-series-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.featured-series-header .f-tag {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.35), rgba(168, 85, 247, 0.35)) !important;
  border: 1px solid rgba(255, 158, 197, 0.4) !important;
  color: #ffa5c8 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.featured-series-header .f-title {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.featured-series-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.f-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: rgba(36, 24, 74, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

.f-card:hover {
  background: rgba(50, 32, 100, 0.92) !important;
  border-color: #ffa5c8 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(255, 158, 197, 0.25) !important;
}

.f-card-icon {
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 158, 197, 0.2) !important;
  border: 1px solid rgba(255, 158, 197, 0.4) !important;
  border-radius: 10px !important;
  color: #ffa5c8 !important;
  font-size: 1.25rem !important;
}

.f-card-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.f-card-category {
  color: #ffa5c8 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.f-card-title {
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

.f-card-desc {
  color: #c8b8e8 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ── 21. Projects Showcase Page (开源项目全景展厅) ── */
.projects-hero {
  padding: 10px 0 25px 0 !important;
  border-bottom: 1px solid rgba(255, 158, 197, 0.25) !important;
  margin-bottom: 30px !important;
}

.projects-hero-title {
  color: #ffffff !important;
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.projects-hero-subtitle {
  color: #c8b8e8 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.projects-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.project-card {
  background: rgba(36, 24, 74, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
  border-radius: 14px !important;
  padding: 30px 32px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease !important;
}

.project-card:hover {
  border-color: #ffa5c8 !important;
  box-shadow: 0 10px 32px rgba(255, 158, 197, 0.22) !important;
}

.project-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.project-icon-box {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 158, 197, 0.2) !important;
  border: 1px solid rgba(255, 158, 197, 0.45) !important;
  border-radius: 12px !important;
  color: #ffa5c8 !important;
  font-size: 1.55rem !important;
}

.project-title-box .project-name {
  color: #ffffff !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}

.project-tech-line {
  color: #b8a8d8 !important;
  font-size: 13.5px !important;
  font-family: var(--font-mono, monospace) !important;
}

.project-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.p-badge {
  background: rgba(255, 158, 197, 0.15) !important;
  border: 1px solid rgba(255, 158, 197, 0.3) !important;
  color: #ffa5c8 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.project-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  background: rgba(20, 12, 42, 0.75) !important;
  border: 1px solid rgba(255, 158, 197, 0.2) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

.p-metric {
  text-align: center !important;
}

.p-metric .p-num {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  font-family: var(--font-mono, monospace) !important;
  text-shadow: 0 0 10px rgba(255, 165, 200, 0.5) !important;
  margin-bottom: 4px !important;
}

.p-metric .p-label {
  color: #c8b8e8 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.project-body {
  color: #e0d0f0 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 22px !important;
}

.project-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.p-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.p-btn-gh {
  background: rgba(255, 158, 197, 0.25) !important;
  border: 1px solid rgba(255, 158, 197, 0.5) !important;
  color: #ffffff !important;
}

.p-btn-gh:hover {
  background: rgba(255, 158, 197, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 158, 197, 0.4) !important;
  transform: translateY(-2px) !important;
}

.p-btn-doc {
  background: rgba(45, 30, 86, 0.75) !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
  color: #ffa5c8 !important;
}

.p-btn-doc:hover {
  background: rgba(70, 45, 130, 0.9) !important;
  color: #ffffff !important;
  border-color: #ffa5c8 !important;
  transform: translateY(-2px) !important;
}

/* ── 22. Post Copyright (技术长文原创版权卡片) ── */
.post-copyright {
  background: rgba(26, 16, 53, 0.85) !important;
  border-left: 4px solid #ffa5c8 !important;
  border-top: 1px solid rgba(255, 158, 197, 0.2) !important;
  border-right: 1px solid rgba(255, 158, 197, 0.2) !important;
  border-bottom: 1px solid rgba(255, 158, 197, 0.2) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin: 30px 0 20px 0 !important;
  color: #c8b8e8 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.post-copyright .post-copyright-meta {
  color: #ffa5c8 !important;
  font-weight: 600 !important;
}

.post-copyright a {
  color: #ffa5c8 !important;
  text-decoration: underline !important;
}

.post-copyright a:hover {
  color: #ffffff !important;
}

/* ── 23. Related Posts (相关推荐卡片宽屏优雅横排) ── */
.relatedPosts {
  margin-top: 35px !important;
  padding-top: 20px !important;
  border-top: 1px dashed rgba(255, 158, 197, 0.3) !important;
}

.relatedPosts > .headline {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.relatedPosts > .headline i {
  color: #ffa5c8 !important;
}

.relatedPosts > .relatedPosts-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

.relatedPosts-list .pagination-related {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 130px !important;
  margin: 0 !important;
  background: rgba(36, 24, 74, 0.85) !important;
  border: 1px solid rgba(255, 158, 197, 0.25) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.relatedPosts-list .pagination-related:hover {
  background: rgba(55, 35, 110, 0.95) !important;
  border-color: #ffa5c8 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(255, 158, 197, 0.25) !important;
}

.relatedPosts-list .pagination-related .cover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(36, 24, 74, 0.92), rgba(26, 16, 53, 0.96)) !important;
  z-index: 1 !important;
}

.relatedPosts-list .pagination-related .info {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 16px 20px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.relatedPosts-list .pagination-related .info .info-1 {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.relatedPosts-list .pagination-related .info .info-1 .info-item-1 {
  color: #ffa5c8 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
}

.relatedPosts-list .pagination-related .info .info-1 .info-item-2 {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

.relatedPosts-list .pagination-related .info .info-2 {
  display: none !important;
}

/* ── 24. 2-Column Home Layout (首页宽屏通畅优雅两栏流) ── */
@media (min-width: 1200px) {
  #content-inner.layout {
    max-width: 1400px !important;
    width: 95% !important;
    padding: 30px 15px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 26px !important;
  }

  #content-inner.layout > #recent-posts {
    flex: 1 1 auto !important;
    width: calc(100% - 320px) !important;
    min-width: 0 !important;
  }

  #content-inner.layout > #aside-content {
    width: 300px !important;
    flex: 0 0 300px !important;
    position: sticky !important;
    top: 75px !important;
    align-self: flex-start !important;
  }
}

/* ── 25. Sidebar Sticky Widgets (侧边栏最新文章与标签云质感优化) ── */
#aside-content .card-widget.card-recent-post .aside-list-item {
  padding: 8px 0 !important;
  border-bottom: 1px dashed rgba(255, 158, 197, 0.15) !important;
}

#aside-content .card-widget.card-recent-post .aside-list-item:last-child {
  border-bottom: none !important;
}

#aside-content .card-widget.card-recent-post .aside-list-item .title {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  transition: color 0.2s ease !important;
}

#aside-content .card-widget.card-recent-post .aside-list-item .title:hover {
  color: #ffa5c8 !important;
}

#aside-content .card-widget.card-recent-post .aside-list-item time {
  color: #ffa5c8 !important;
  font-size: 11.5px !important;
}

#aside-content .card-widget.card-tags .card-tag-cloud a {
  display: inline-block !important;
  margin: 4px 5px !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 158, 197, 0.15) !important;
  border: 1px solid rgba(255, 158, 197, 0.3) !important;
  color: #ffa5c8 !important;
  font-size: 12px !important;
  transition: all 0.25s ease !important;
}

#aside-content .card-widget.card-tags .card-tag-cloud a:hover {
  background: rgba(255, 158, 197, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 158, 197, 0.35) !important;
}

/* ── 26. Top Reading Progress Bar (顶部微光渐变阅读进度条) ── */
#reading-progress-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ffa5c8, #c084fc, #ec4899) !important;
  box-shadow: 0 0 10px rgba(255, 165, 200, 0.8) !important;
  z-index: 99999 !important;
  transition: width 0.08s ease-out !important;
  pointer-events: none !important;
}

/* ── 27. Subtitle Typing Effect & Header Enhancements ── */
#site-subtitle {
  font-size: 1.15rem !important;
  color: #fce7f3 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
  font-weight: 500 !important;
  margin-top: 10px !important;
  letter-spacing: 0.5px !important;
}

#site-subtitle .typed-cursor {
  color: #ffa5c8 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  animation: blink 0.7s infinite !important;
}

/* ── 28. TOC & Sticky Sidebar Layout (文章页目录 + 最新文章协同跟随滑动，绝对不重叠) ── */
@media (min-width: 900px) {
  #aside-content {
    position: sticky !important;
    top: 75px !important;
    align-self: flex-start !important;
  }

  #aside-content .sticky_layout {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
}

#card-toc {
  position: relative !important;
  top: auto !important;
  margin-bottom: 0 !important;
  max-height: 48vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#card-toc .toc-content {
  max-height: min(340px, 38vh) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  padding-right: 4px !important;
}

#card-toc .toc-content::-webkit-scrollbar {
  width: 4px !important;
}

#card-toc .toc-content::-webkit-scrollbar-thumb {
  background: rgba(255, 158, 197, 0.35) !important;
  border-radius: 4px !important;
}

#card-toc .toc-content .toc-link {
  color: #c8b8e8 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  border-left: 2px solid transparent !important;
  padding: 4px 8px 4px 10px !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

#card-toc .toc-content .toc-link.active {
  color: #ffa5c8 !important;
  font-weight: 700 !important;
  border-left-color: #ffa5c8 !important;
  background: rgba(255, 165, 200, 0.15) !important;
  border-radius: 0 6px 6px 0 !important;
  text-shadow: 0 0 8px rgba(255, 165, 200, 0.4) !important;
}

#card-toc .toc-content .toc-link:hover {
  color: #ffffff !important;
  border-left-color: rgba(255, 158, 197, 0.5) !important;
}

#aside-content .card-widget.card-recent-post {
  position: relative !important;
  top: auto !important;
  margin-bottom: 0 !important;
}

/* ── 29. 独立页面（项目/归档/标签/分类/关于）顶部大标题调大、高对比度与微光艺术 ── */
#page-header.not-home-page #page-site-info {
  top: 170px !important;
}

#page-header.not-home-page #page-site-info #site-title {
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 6px !important;
  color: #ffffff !important;
  text-shadow: 
    0 2px 6px rgba(10, 5, 25, 0.95),
    0 4px 16px rgba(255, 107, 157, 0.8),
    0 0 35px rgba(168, 85, 247, 0.7) !important;
  transition: all 0.3s ease !important;
}

@media (max-width: 768px) {
  #page-header.not-home-page #page-site-info {
    top: 130px !important;
  }
  #page-header.not-home-page #page-site-info #site-title {
    font-size: 2.2rem !important;
    letter-spacing: 3px !important;
  }
}

/* ── 30. 文章内页整体上提（移除顶部 400px 冗余空白） ── */
#page-header.post-bg {
  height: 65px !important;
  min-height: 65px !important;
}

#page-header.post-bg + #content-inner.layout,
.layout:has(#post) {
  padding-top: 20px !important;
}