/* ============================================
   全局毛玻璃变量
   ============================================ */
:root {
  --trans-light: rgba(255, 255, 255, 0.75);
  --trans-dark: rgba(25, 25, 25, 0.6);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* ============================================
   全局卡片毛玻璃
   ============================================ */

/* 侧边栏卡片 */
.card-widget,
#aside-content .card-widget {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important;
  border: var(--border-style);
  border-radius: 12px;
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item,
.recent-post-item {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important;
  border: var(--border-style);
  border-radius: 12px;
}

/* 文章内容页 */
#post,
#article-container,
.layout_post,
#body-wrap #post {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important;
  border: var(--border-style);
  border-radius: 12px;
}

/* 黑夜模式 */
[data-theme="dark"] .card-widget,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #post,
[data-theme="dark"] #article-container {
  background: var(--trans-dark) !important;
  border: 1px solid rgba(80, 80, 80, 0.5);
}
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}


/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
}


/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}



/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
  display: flex !important;
}

/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(5) .menus_item_child {
  left: -38px;
}


/* 夜间模式菜单栏发光字 */
[data-theme="dark"] #nav .site-page,
[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
  text-shadow: 0 0 2px rgb(179 ,71 ,241) !important;
}

/* 手机端适配 */
[data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
  text-shadow: 0 0 2px rgb(179 ,71 ,241) !important;
}

/* 背景 */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
  z-index: -1;
}


/* ============================================
   侧边栏个人信息卡片 - 马卡龙冷调渐变
   ============================================ */

/* 白天模式 - 静态马卡龙渐变 */
#aside-content .card-widget.card-info {
  background: linear-gradient(
    180deg,
    #e8eaf6 0%,
    #e3e8f8 20%,
    #dce9f7 50%,
    #ddf0f8 70%,
    #e3f4fa 100%
  ) !important;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(180, 200, 220, 0.2);
}

/* 黑夜模式 - 纯黑 */
[data-theme="dark"] #aside-content .card-widget.card-info {
  background: #000000 !important;
  box-shadow: none;
}

/* Follow me 按钮 */
#aside-content .card-widget.card-info #card-info-btn {
  background: #8db5d6 !important;
  border-radius: 8px;
  color: #fff;
}

#aside-content .card-widget.card-info #card-info-btn:hover {
  background: #7ba5c8 !important;
}

[data-theme="dark"] #aside-content .card-widget.card-info #card-info-btn {
  background: #333333 !important;
}

[data-theme="dark"] #aside-content .card-widget.card-info #card-info-btn:hover {
  background: #444444 !important;
}