/* ================================================================
   全站视觉美化 — Butterfly Theme Custom Styles
   配色方案：松林晨雾 — 青灰→苔绿渐变
   设计原则：自然沉稳 + 毛玻璃 + 微交互 + 统一间距系统
   间距系统：4px 基数 → 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
   色彩：灰白偏绿底色 + 苔绿强调 + 暗色模式深森绿
   动效：cubic-bezier(0.16, 1, 0.3, 1) 快入慢出
   ================================================================ */

/* ===== 0. CSS 自定义属性（Design Tokens） ===== */
:root {
  --c-bg-glass: rgba(244, 248, 244, 0.68);
  --c-bg-glass-hover: rgba(244, 248, 244, 0.82);
  --c-bg-glass-border: rgba(180, 200, 180, 0.35);
  --c-bg-glass-shadow: rgba(60, 90, 60, 0.08);
  --c-bg-sidebar-glass: rgba(244, 248, 244, 0.72);
  --c-accent: #059669;
  --c-accent-hover: #047857;
  --c-text-primary: #1e293b;
  --c-text-secondary: #475569;
  --c-text-tertiary: #94a3b8;
  --c-link: #059669;
  --c-link-hover: #047857;
  --c-divider: rgba(0, 0, 0, 0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 3px rgba(60, 90, 60, 0.06);
  --shadow-md: 0 4px 16px rgba(60, 90, 60, 0.08);
  --shadow-lg: 0 8px 32px rgba(60, 90, 60, 0.12);
  --blur: blur(16px);
}

[data-theme="dark"] {
  --c-bg-glass: rgba(16, 24, 18, 0.72);
  --c-bg-glass-hover: rgba(16, 24, 18, 0.84);
  --c-bg-glass-border: rgba(255, 255, 255, 0.06);
  --c-bg-glass-shadow: rgba(0, 0, 0, 0.2);
  --c-bg-sidebar-glass: rgba(16, 24, 18, 0.76);
  --c-accent: #34d399;
  --c-accent-hover: #6ee7b7;
  --c-text-primary: rgba(255, 255, 255, 0.88);
  --c-text-secondary: rgba(255, 255, 255, 0.56);
  --c-text-tertiary: rgba(255, 255, 255, 0.28);
  --c-link: #34d399;
  --c-link-hover: #6ee7b7;
  --c-divider: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* ===== 1. 全站背景图 ===== */
#web_bg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ===== 2. 全站字体系统 ===== */
body {
  font-family: 'DM Sans', 'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--c-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 标题字体 */
.article-title,
#post .post-title,
#site-title,
.site-name,
#aside-content .headline,
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4 {
  font-family: 'LXGW WenKai', 'DM Sans', serif !important;
  font-weight: 700 !important;
  color: var(--c-text-primary) !important;
  letter-spacing: 0.01em;
}

/* 导航菜单 */
#nav .menus_item a {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  transition: color 0.2s var(--ease-out);
}

/* 文章正文 */
#article-container {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: var(--c-text-primary) !important;
}

/* 链接 */
a {
  color: var(--c-link) !important;
  transition: color 0.2s var(--ease-out);
}
a:hover {
  color: var(--c-link-hover) !important;
}

/* 元信息 */
.article-meta-wrap {
  color: var(--c-text-secondary) !important;
}

/* 代码 */
code,
pre {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, Menlo, monospace !important;
}

/* ===== 3. 毛玻璃效果 — 侧边栏卡片 ===== */
#aside-content .card-widget {
  background: var(--c-bg-sidebar-glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--c-bg-glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out) !important;
  font-size: 14px !important;
}

#aside-content .card-widget:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ===== 4. 毛玻璃效果 — 分页器 ===== */
#pagination .pagination {
  background: var(--c-bg-glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--c-bg-glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ===== 5. 文章卡片网格 ===== */
#recent-posts .recent-post-items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* 卡片主体 */
#recent-posts .recent-post-item {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-xl) !important;
  background: var(--c-bg-glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--c-bg-glass-border) !important;
  box-shadow: var(--shadow-sm) !important;
  height: 240px !important;
  overflow: hidden !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              background 0.35s var(--ease-out) !important;
}

#recent-posts .recent-post-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--c-bg-glass-hover) !important;
}

/* 封面图 */
#recent-posts .post_cover {
  width: 40% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
}

#recent-posts .post_cover::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--c-bg-glass));
  pointer-events: none;
  z-index: 1;
}

#recent-posts .post_cover .post-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.5s var(--ease-out) !important;
}

#recent-posts .recent-post-item:hover .post_cover .post-bg {
  transform: scale(1.06);
}

#recent-posts .post_cover a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* 文字区 */
#recent-posts .recent-post-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px !important;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow: hidden !important;
}

/* 卡片标题 */
#recent-posts .recent-post-info .article-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--c-text-primary) !important;
}

/* 元信息 */
#recent-posts .recent-post-info .article-meta-wrap {
  font-size: 12px !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  flex-shrink: 0;
  color: var(--c-text-secondary) !important;
}

/* 摘要 */
#recent-posts .recent-post-info .content {
  font-size: 13px !important;
  color: var(--c-text-secondary) !important;
  line-height: 1.7 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

/* ===== 6. 导航栏美化 ===== */
#nav {
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out) !important;
}

#nav.nav-fixed {
  background: var(--c-bg-glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  box-shadow: 0 1px 0 var(--c-divider) !important;
}

@media (min-width: 769px) {
  #nav {
    justify-content: space-between !important;
  }

  #blog-info {
    flex: 0 0 auto !important;
    min-width: 160px;
  }

  #menus {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  #menus .menus_items {
    display: flex !important;
    justify-content: center !important;
    gap: 4px;
  }

  /* 菜单项微交互 */
  #menus .menus_item a {
    position: relative;
    padding: 6px 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out) !important;
  }

  #menus .menus_item a:hover {
    background: rgba(5, 150, 105, 0.08) !important;
  }

  #nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 80px;
    justify-content: flex-end;
  }

  /* 搜索按钮 */
  #nav-right #search-button {
    padding: 0 !important;
  }

  #nav-right #search-button .site-page {
    padding: 6px 12px !important;
    border-radius: var(--radius-sm) !important;
    transition: background 0.2s var(--ease-out) !important;
    font-size: 0.85em !important;
  }

  #nav-right #search-button .site-page:hover {
    background: rgba(5, 150, 105, 0.08);
  }

  /* 日夜切换按钮 */
  #nav-darkmode {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 15px !important;
    background: var(--c-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
    transition: transform 0.25s var(--ease-out),
                box-shadow 0.25s var(--ease-out) !important;
    padding: 0 !important;
    line-height: 36px !important;
  }

  #nav-darkmode:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35) !important;
  }

  #nav-darkmode:active {
    transform: scale(0.96) !important;
  }

  [data-theme="dark"] #nav-darkmode {
    background: #34d399 !important;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.25) !important;
  }

  [data-theme="dark"] #nav-darkmode:hover {
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.4) !important;
  }

  /* 隐藏右侧工具栏暗色模式按钮 */
  #rightside #darkmode {
    display: none !important;
  }

  /* 导航栏固定时文字色 */
  #page-header.nav-fixed #nav-right a,
  #page-header.nav-fixed #nav-right span.site-page,
  #page-header.nav-fixed #nav-darkmode {
    color: #fff !important;
    text-shadow: none !important;
  }

  #page-header.not-top-img #nav-right a,
  #page-header.not-top-img #nav-right span.site-page {
    color: var(--c-text-primary) !important;
    text-shadow: none !important;
  }
}

/* 移动端导航 */
@media (max-width: 768px) {
  #nav-darkmode {
    display: none !important;
  }

  #nav-right {
    display: flex;
    align-items: center;
  }

  #nav-right #search-button span span {
    display: none;
  }
}

/* ===== 7. 右侧工具栏微交互 ===== */
#rightside #darkmode {
  position: relative !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 17px !important;
  line-height: 40px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.3) !important;
  transition: transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out) !important;
}

#rightside #darkmode:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4) !important;
}

#rightside #darkmode:active {
  transform: scale(0.95) !important;
}

[data-theme="dark"] #rightside #darkmode {
  background: #34d399 !important;
  box-shadow: 0 2px 12px rgba(52, 211, 153, 0.3) !important;
}

/* ===== 8. 移动端底部导航 ===== */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--c-bg-glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border-top: 1px solid var(--c-divider) !important;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  transition: background 0.3s var(--ease-out);
}

#mobile-bottom-nav .nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}

#mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  color: var(--c-text-secondary);
  text-decoration: none;
  font-size: 10px;
  line-height: 1.3;
  transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  min-width: 48px;
  -webkit-tap-highlight-color: transparent;
}

#mobile-bottom-nav .nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
  transition: transform 0.2s var(--ease-out);
}

#mobile-bottom-nav .nav-item.active,
#mobile-bottom-nav .nav-item:active {
  color: var(--c-accent) !important;
}

#mobile-bottom-nav .nav-item.active i {
  transform: scale(1.12);
}

@media (max-width: 768px) {
  #mobile-bottom-nav {
    display: block;
  }

  body {
    padding-bottom: 64px !important;
  }

  #rightside #darkmode {
    display: block !important;
  }

  #rightside {
    bottom: 80px !important;
  }
}

/* ===== 9. 全局微交互增强 ===== */

/* 卡片入场动画 — 渐显上移 */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#recent-posts .recent-post-item {
  animation: cardReveal 0.5s var(--ease-out) both !important;
}

/* 卡片逐个延迟入场 */
#recent-posts .recent-post-item:nth-child(1) { animation-delay: 0.04s !important; }
#recent-posts .recent-post-item:nth-child(2) { animation-delay: 0.08s !important; }
#recent-posts .recent-post-item:nth-child(3) { animation-delay: 0.12s !important; }
#recent-posts .recent-post-item:nth-child(4) { animation-delay: 0.16s !important; }
#recent-posts .recent-post-item:nth-child(5) { animation-delay: 0.20s !important; }
#recent-posts .recent-post-item:nth-child(6) { animation-delay: 0.24s !important; }
#recent-posts .recent-post-item:nth-child(7) { animation-delay: 0.28s !important; }
#recent-posts .recent-post-item:nth-child(8) { animation-delay: 0.32s !important; }
#recent-posts .recent-post-item:nth-child(9) { animation-delay: 0.36s !important; }

/* 侧边栏卡片入场 */
@keyframes sidebarReveal {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#aside-content .card-widget {
  animation: sidebarReveal 0.4s var(--ease-out) both !important;
}

#aside-content .card-widget:nth-child(1) { animation-delay: 0.1s !important; }
#aside-content .card-widget:nth-child(2) { animation-delay: 0.2s !important; }
#aside-content .card-widget:nth-child(3) { animation-delay: 0.3s !important; }

/* 按钮按下缩放反馈 */
#nav-darkmode:active,
#rightside #darkmode:active,
#mobile-bottom-nav .nav-item:active {
  transform: scale(0.95) !important;
}

/* 侧边栏卡片 hover 上移 */
#aside-content .card-widget:hover {
  transform: translateY(-2px) !important;
}

/* ===== 10. 细节优化 ===== */

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(5, 150, 105, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(5, 150, 105, 0.35);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 211, 153, 0.35);
}

/* 选中文本色 */
::selection {
  background: rgba(5, 150, 105, 0.2);
  color: var(--c-text-primary);
}

[data-theme="dark"] ::selection {
  background: rgba(52, 211, 153, 0.25);
}

/* Focus 可见性 */
*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 响应式卡片高度 */
@media (max-width: 768px) {
  #recent-posts .recent-post-items {
    grid-template-columns: 1fr !important;
  }

  #recent-posts .recent-post-item {
    height: 200px !important;
  }

  #recent-posts .post_cover {
    width: 35% !important;
  }

  #recent-posts .post_cover::after {
    width: 20px;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  #recent-posts .recent-post-item,
  #aside-content .card-widget {
    animation: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}