/* ============================================================
   门户同款深色科技风定制
   取色来源:门户 index.html 的 :root 变量
   底色 #060a13 / 文字 #e8eef8 / 蓝 #3b82f6 靛 #6366f1 紫 #8b5cf6 青 #22d3ee
   仅深色模式生效(浅色模式保留主题默认观感),背景光球由 /js/custom.js 注入
   ============================================================ */

/* ---------- 基础变量覆盖 ---------- */
html[data-theme='dark'] {
  --global-bg: #060a13;
  --font-color: rgba(232, 238, 248, 0.78);
  --card-bg: rgba(15, 23, 42, 0.55);
  --sidebar-bg: rgba(15, 23, 42, 0.5);
  --sidebar-menu-bg: rgba(20, 30, 51, 0.6);
  --text-highlight-color: #e8eef8;
  --card-meta: rgba(148, 163, 184, 0.9);
  --card-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --card-hover-box-shadow: 0 10px 40px rgba(59, 130, 246, 0.18);
  --hr-border: rgba(99, 130, 255, 0.15);
  --hr-before-color: rgba(99, 130, 255, 0.6);
  --zoom-bg: rgba(10, 16, 30, 0.9);
  --blockquote-bg: rgba(59, 130, 246, 0.08);
  --scrollbar-color: rgba(59, 130, 246, 0.45);
}

/* ---------- 背景层:网格 + 渐变光球(元素由 custom.js 注入) ---------- */
#tech-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#tech-bg .bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(99, 130, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 130, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}

#tech-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: techOrbFloat 20s ease-in-out infinite alternate;
}

#tech-bg .orb-1 {
  width: 480px;
  height: 480px;
  top: -160px;
  left: -120px;
  background: radial-gradient(circle at 30% 30%, #3b82f6, transparent 70%);
}

#tech-bg .orb-2 {
  width: 420px;
  height: 420px;
  top: 32%;
  right: -160px;
  background: radial-gradient(circle at 60% 40%, #8b5cf6, transparent 70%);
  animation-delay: -7s;
  animation-duration: 24s;
}

#tech-bg .orb-3 {
  width: 380px;
  height: 380px;
  bottom: -140px;
  left: 32%;
  background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 70%);
  opacity: 0.28;
  animation-delay: -13s;
  animation-duration: 28s;
}

@keyframes techOrbFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(60px, 42px, 0) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tech-bg .orb {
    animation: none;
  }
}

/* 浅色模式不显示背景特效 */
html[data-theme='light'] #tech-bg {
  display: none;
}

/* 内容浮于背景层之上 */
html[data-theme='dark'] #content-inner,
html[data-theme='dark'] #footer,
html[data-theme='dark'] #aside-content {
  position: relative;
  z-index: 1;
}

/* ---------- 毛玻璃卡片 ---------- */
html[data-theme='dark'] .recent-post-item,
html[data-theme='dark'] .card-widget,
html[data-theme='dark'] #post,
html[data-theme='dark'] #page,
html[data-theme='dark'] #archive,
html[data-theme='dark'] #tag,
html[data-theme='dark'] #category {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(99, 130, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* 首页文章卡片悬停:高亮描边 + 辉光 */
html[data-theme='dark'] .recent-post-item {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

html[data-theme='dark'] .recent-post-item:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 12px 48px rgba(59, 130, 246, 0.22);
}

/* ---------- 顶部导航:毛玻璃 ---------- */
html[data-theme='dark'] #nav {
  background: rgba(6, 10, 19, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(99, 130, 255, 0.12);
}

/* 导航站点名:渐变文字 + 流动动画(同门户 logo) */
html[data-theme='dark'] #site-name,
html[data-theme='dark'] #site-name i {
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: techShimmer 6s linear infinite;
}

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

/* ---------- 首页 hero:透明底 + 渐变大标题 ---------- */
html[data-theme='dark'] #page-header.full_page {
  background: transparent !important;
}

html[data-theme='dark'] #page-header.full_page #site-title {
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: techShimmer 8s linear infinite;
  text-shadow: none;
}

html[data-theme='dark'] #page-header.full_page #site-subtitle {
  color: rgba(148, 163, 184, 0.9);
  text-shadow: none;
}

/* 文章页头图横幅压暗,与整体色调统一 */
html[data-theme='dark'] #page-header.post-bg,
html[data-theme='dark'] #page-header.not-home-page {
  background-color: #0a1020 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 链接与强调 ---------- */
html[data-theme='dark'] .article-title:hover,
html[data-theme='dark'] #article-container a:not(.fancybox):hover {
  color: #22d3ee;
}

html[data-theme='dark'] #article-container code {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}

html[data-theme='dark'] #article-container blockquote {
  border-left: 3px solid rgba(59, 130, 246, 0.55);
}

/* ---------- 页脚 ---------- */
html[data-theme='dark'] #footer {
  background: rgba(6, 10, 19, 0.55);
  border-top: 1px solid rgba(99, 130, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme='dark'] #footer-wrap,
html[data-theme='dark'] #footer-wrap a {
  color: rgba(148, 163, 184, 0.75);
}

/* ---------- 侧栏头像光圈 ---------- */
html[data-theme='dark'] .avatar-img {
  border: 2px solid transparent;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #22d3ee) border-box;
  border-radius: 50%;
}

/* ---------- 搜索与分页细节 ---------- */
html[data-theme='dark'] #pagination .page-number,
html[data-theme='dark'] #pagination .extend {
  border: 1px solid rgba(99, 130, 255, 0.18);
}

html[data-theme='dark'] .search-dialog {
  border: 1px solid rgba(99, 130, 255, 0.2);
}