/* ================== 杂项修复 ================== */

/* 侧边栏信息颜色调淡 */
#aside-content .author-info-name {
  color: #888888 !important;
  font-weight: 600 !important;
}
#aside-content .author-info-description {
  color: #aaaaaa !important;
}
#aside-content .announcement_content {
  color: #999999 !important;
}

/* ================== 公告页 layout 修复 ================== */
body.type-notice .notice-layout {
  display: block !important;
  width: 100% !important;
  flex: none !important;
}

/* ================== 页面通用玻璃卡片（shared.css 统一管理） ================== */
/* 此文件已废弃，通用样式迁移至 shared.css */
/* 保留此文件仅为兼容升级过渡期 */

/* ================== 标题区冷冰蓝微光流线效果 ================== */
.nav-site-title, #site-title {
  background: linear-gradient(90deg, var(--c-primary-dark), var(--c-primary), var(--c-primary-dark), var(--c-primary-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineText 6s linear infinite;
  font-weight: 700;
}
@keyframes shineText {
  to { background-position: 200% center; }
}

/* ================== 侧边栏头像冷蓝色扫描线 ================== */
.card-info .avatar-img {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  border: 3px solid rgba(var(--c-primary-rgb), 0.25);
  transition: border-color 0.5s ease, transform 0.5s var(--c-ease);
}
.card-info .avatar-img:hover {
  transform: scale(1.05);
  border-color: var(--c-primary);
}
.card-info .avatar-img::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 45%,
    rgba(59, 130, 246, 0.8) 50%,
    rgba(59, 130, 246, 0.2) 53%,
    transparent 60%
  );
  pointer-events: none;
}
.card-info .avatar-img:hover::after {
  animation: scanning 1.5s infinite linear;
}
@keyframes scanning {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* ================== 社交媒体图标精致微动 ================== */
.card-info-social-icons a.social-icon {
  transition: transform 0.3s var(--c-ease) !important;
  display: inline-block;
}
.card-info-social-icons a.social-icon:hover {
  transform: translateY(-3px) scale(1.15) !important;
}

/* ================== Canvas 静谧背景定位 ================== */
#vision-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}

/* ================== 文章内容区暗黑模式修复 ================== */
/* butterfly darkmode.styl 的 --font-color 没有被子元素继承，这里强制覆盖 */

html[data-theme='dark'] #article-container {
  color: var(--c-text);
}

html[data-theme='dark'] #article-container h1,
html[data-theme='dark'] #article-container h2,
html[data-theme='dark'] #article-container h3,
html[data-theme='dark'] #article-container h4,
html[data-theme='dark'] #article-container h5,
html[data-theme='dark'] #article-container h6 {
  color: var(--c-text);
}

html[data-theme='dark'] #article-container h1 { font-size: 1.8em; }
html[data-theme='dark'] #article-container h2 { font-size: 1.5em; }
html[data-theme='dark'] #article-container h3 { font-size: 1.25em; }

/* 表格边框修复：深色背景用深色边框，不用黑色 */
html[data-theme='dark'] #article-container table {
  border-color: var(--c-border) !important;
}
html[data-theme='dark'] #article-container table th,
html[data-theme='dark'] #article-container table td {
  border-color: var(--c-border) !important;
}
html[data-theme='dark'] #article-container table th {
  background: var(--c-surface);
  color: var(--c-text);
}
html[data-theme='dark'] #article-container table tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
#page-site-info {
  position: relative;
  display: inline-block;
}
#page-site-info #site-title {
  font-family: 'Courier New', Courier, monospace !important;
  letter-spacing: 2px;
  font-size: 2.2rem;
  text-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.4);
}
#page-site-info::after {
  content: '[ BOARD: SYS_NOTICE ]  [ REFRESH: OK ]  [ SYS_VER: 5.5.4 ]';
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: var(--c-text-secondary);
  margin-top: 10px;
  letter-spacing: 1px;
}

/* ================== CLS 修复 ================== */
/* 文章列表容器预占位，防止字体/图片加载导致布局偏移 */
#recent-posts > .recent-post-items {
  min-height: 200px;
}

/* 文章卡片预占位最小高度，防止卡片动态渲染导致偏移 */
#recent-posts .recent-post-item {
  min-height: 180px;
}

/* ================== 友链页小卡片修复 ================== */
/* 覆盖主题默认样式，强制小卡片多列布局 */
.flink .flink-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px;
}
.flink .flink-list-item {
  width: calc(20% - 8px) !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--card-bg) !important;
  padding: 14px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: none !important;
}
.flink .flink-list-item:hover {
  border-color: var(--btn-bg) !important;
  box-shadow: 0 4px 12px rgba(109,40,217,0.15) !important;
  transform: translateY(-3px) !important;
}
.flink .flink-item-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto 8px !important;
  display: block !important;
}
.flink .flink-item-name {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-color);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.flink .flink-item-desc { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 0.72rem !important; color: var(--secondary-text, #6b7280) !important; line-height: 1.4 !important; margin-bottom: 4px !important; width: 100% !important; word-break: break-word !important; max-width: 100% !important; }
html.darkmode .flink .flink-list-item {
  border-color: var(--border-dark) !important;
  background: var(--card-bg-dark) !important;
}
html.darkmode .flink .flink-item-name { color: var(--text-color-dark) !important; }
/* 移动端 */
@media (max-width: 900px) { .flink .flink-list-item { width: calc(25% - 8px) !important; } }
@media (max-width: 640px) { .flink .flink-list-item { width: calc(33.333% - 7px) !important; } }
@media (max-width: 480px) { .flink .flink-list-item { width: calc(33.333% - 6px) !important; } }
@media (max-width: 380px) { .flink .flink-list-item { width: calc(50% - 5px) !important; } }

/* ================== 友链卡片高度修复 ================== */
.flink-list-item {
  height: auto !important;
  min-height: 90px !important;
  overflow: visible !important;
}
.flink-item-name {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}
.flink-item-desc {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

/* ================== 友链页侧边栏布局修复 ================== */
/* 友链页的 #aside-content 在 flex 容器内被 position:sticky 影响， */
/* 导致浏览器将其计算为 position:absolute 从而脱离 flex 流， */
/* 堆叠在 #page 内容区下方。强制 position:relative 使其回归正常 flex 布局。 */
body.type-link #aside-content {
  position: relative !important;
  top: auto !important;
}

/* ================== 友链页布局修复 ================== */
/* 友链页 main.layout 的 flex 子元素宽度计算异常， */
/* #page 和 #aside-content 堆叠成竖向。强制横向两栏布局。 */
body.type-link main.layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  max-width: 1200px !important;
  width: 100% !important;
}
body.type-link main.layout > div:first-child,
body.type-link #page {
  width: 74% !important;
  flex: 0 0 74% !important;
}
body.type-link #aside-content {
  width: 26% !important;
  flex: 0 0 26% !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* ================== 友链页布局修复 V2 ================== */
body.type-link main.layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  max-width: 1200px !important;
}
body.type-link #page#page#page {
  width: 74% !important;
  flex: 0 0 74% !important;
  max-width: 74% !important;
}
body.type-link #aside-content#aside-content#aside-content {
  width: 26% !important;
  flex: 0 0 26% !important;
  max-width: 26% !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
}

/* ================== 友链页布局修复 V3 ================== */
/* 根因：#page 有 flex:1 auto，内容溢出时自动扩展占满整行，挤掉侧边栏 */
/* 解决：强制 max-width 约束 + flex-shrink:0 禁止收缩 */
body.type-link main.layout > div#page {
  flex: 0 0 74% !important;
  width: 74% !important;
  max-width: 74% !important;
  flex-shrink: 0 !important;
}
body.type-link #aside-content {
  flex: 0 0 26% !important;
  width: 26% !important;
  max-width: 26% !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
}

/* ================== 友链页布局修复 V4 ================== */
/* 根因：JS runtime 将 #aside-content 动态移入 #page，导致 flex 布局失效 */
/* 解决：让 #aside-content 相对于 main.layout 绝对定位到右侧 */
body.type-link main.layout {
  display: block !important;
  position: relative !important;
  max-width: 1200px !important;
  width: 100% !important;
}
body.type-link #page {
  width: 74% !important;
  max-width: 74% !important;
  float: left !important;
}
body.type-link #aside-content {
  width: 26% !important;
  max-width: 26% !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/* ================== 友链页双栏布局重构 ================== */
/* 彻底重写 flink.pug：侧边栏内容直接内嵌模板，不用 #aside-content */
#link-page-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
}
#link-main-content {
  flex: 1 1 auto !important;
  width: 74% !important;
  min-width: 0 !important;
}
#link-right-sidebar {
  width: 26% !important;
  flex: 0 0 26% !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
}
/* 移动端：堆叠布局 */
@media screen and (max-width: 900px) {
  #link-page-wrapper {
    flex-direction: column !important;
  }
  #link-main-content,
  #link-right-sidebar {
    width: 100% !important;
  }
  #link-right-sidebar {
    position: static !important;
  }
}