/* =========================================================
   StudyBlog 视觉润色层 · 老废物乐园方案 A 配色版
   配色：薄荷 #40E0D0 → 天青 #87CEEB，暖阳黄 #FFD84D，
        墨青 #0E4F5C（主文字/按钮），青绿 #3E8C99（hover/辅色）
   ========================================================= */

/* ---------- 页面底层：柔和薄荷-天青渐变 ---------- */
html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(135deg, #f3fbfc 0%, #eef8fb 35%, #f6fdfc 100%) fixed;
  color: #0E4F5C;
}

.dark body {
  background: linear-gradient(135deg, #0b2a30 0%, #0e3a42 50%, #0d2b33 100%) fixed;
  color: #e2f6f9;
}

/* ---------- 顶部导航：玻璃拟态（带薄荷底色） ---------- */
#header-menu {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(62, 140, 153, 0.14);
  box-shadow: 0 1px 3px rgba(14, 79, 92, 0.05);
}

.dark #header-menu {
  background: rgba(11, 42, 48, 0.82) !important;
  border-bottom-color: rgba(62, 140, 153, 0.25);
}

/* 站点标题：墨青 → 青绿渐变，加轻微投影提升浅色导航栏可读性 */
#site-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #0E4F5C, #3E8C99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(14, 79, 92, 0.06);
}

.dark #site-title {
  background: linear-gradient(90deg, #87CEEB, #5dd3d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ---------- Hero 横幅（老废物乐园浅色背景） ---------- */
.hero-wrapper {
  position: relative;
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 仅叠加极淡的墨青色罩，让文字在浅色背景上更清晰 */
  background:
    linear-gradient(135deg, rgba(14, 79, 92, 0.04) 0%, rgba(62, 140, 153, 0.03) 50%, rgba(255, 216, 77, 0.04) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(14, 79, 92, 0.015) 1px, rgba(14, 79, 92, 0.015) 2px);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-site-title {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0E4F5C;
  text-shadow: 0 2px 12px rgba(14, 79, 92, 0.12), 0 1px 2px rgba(255, 255, 255, 0.6);
}

.hero-site-subtitle {
  font-size: 1rem;
  color: #3E8C99;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
  .hero-site-title {
    font-size: 2.25rem;
  }
}

/* 文章页内容头部（带封面图） */
.content-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 79, 92, 0.30) 0%, rgba(14, 79, 92, 0.55) 100%);
  z-index: 1;
}

.content-hero-title {
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- 分类筛选：胶囊按钮 ---------- */
.polished-filter {
  gap: 0.5rem;
}

.polished-filter a {
  border-radius: 9999px;
  border: 1px solid rgba(62, 140, 153, 0.22);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  color: #0E4F5C;
  box-shadow: 0 1px 2px rgba(14, 79, 92, 0.04);
  transition: all 0.2s ease;
}

.polished-filter a:hover {
  background: #ffffff;
  color: #3E8C99;
  box-shadow: 0 4px 10px rgba(14, 79, 92, 0.08);
  transform: translateY(-1px);
}

/* 当前激活状态 */
.polished-filter a[class*="!bg-gray-100"],
.polished-filter a[class*="dark:!bg-slate-700"] {
  background: #0E4F5C !important;
  color: #ffffff !important;
  border-color: #0E4F5C !important;
}

.dark .polished-filter a {
  background: rgba(14, 58, 66, 0.72);
  border-color: rgba(62, 140, 153, 0.35);
  color: #b8e8ee;
}

.dark .polished-filter a:hover {
  background: rgba(20, 75, 85, 0.85);
  color: #e2f6f9;
}

.dark .polished-filter a[class*="!bg-gray-100"],
.dark .polished-filter a[class*="dark:!bg-slate-700"] {
  background: #5dd3d3 !important;
  color: #0E4F5C !important;
  border-color: #5dd3d3 !important;
}

/* 下拉子分类面板 */
.polished-filter .absolute {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(62, 140, 153, 0.18);
}

.dark .polished-filter .absolute {
  background: rgba(14, 58, 66, 0.92);
  border-color: rgba(62, 140, 153, 0.35);
}

/* ---------- 文章卡片：毛玻璃 + 悬浮 ---------- */
.polished-card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 140, 153, 0.14);
  box-shadow: 0 4px 6px -1px rgba(14, 79, 92, 0.05), 0 2px 4px -2px rgba(14, 79, 92, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.polished-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(14, 79, 92, 0.10), 0 8px 10px -6px rgba(14, 79, 92, 0.05);
  border-color: rgba(62, 140, 153, 0.30);
}

.dark .polished-card {
  background: rgba(14, 58, 66, 0.72) !important;
  border-color: rgba(62, 140, 153, 0.22);
}

.dark .polished-card:hover {
  border-color: rgba(93, 211, 211, 0.35);
}

/* 卡片标题 */
.polished-card h1 a {
  font-weight: 600;
  color: #0E4F5C;
}

.dark .polished-card h1 a {
  color: #e2f6f9;
}

/* ---------- 侧边栏小部件 ---------- */
.polished-sidebar .rounded-xl,
.polished-sidebar [class*="rounded-xl"] {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 140, 153, 0.13);
  box-shadow: 0 4px 6px -1px rgba(14, 79, 92, 0.04);
}

.dark .polished-sidebar .rounded-xl,
.dark .polished-sidebar [class*="rounded-xl"] {
  background: rgba(14, 58, 66, 0.70);
  border-color: rgba(62, 140, 153, 0.22);
}

/* ---------- 文章详情页 ---------- */
.polished-article {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 140, 153, 0.13);
  box-shadow: 0 10px 15px -3px rgba(14, 79, 92, 0.05), 0 4px 6px -4px rgba(14, 79, 92, 0.03);
}

.dark .polished-article {
  background: rgba(14, 58, 66, 0.78);
  border-color: rgba(62, 140, 153, 0.22);
}

.polished-post-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0E4F5C;
  line-height: 1.3;
}

.dark .polished-post-title {
  color: #e2f6f9;
}

@media (min-width: 640px) {
  .polished-post-title {
    font-size: 2.25rem;
  }
}

/* 元信息行 */
.polished-article .text-xs.font-light.text-gray-600,
.polished-article .text-sm.tabular-nums.text-gray-600 {
  color: #3E8C99;
}

.dark .polished-article .text-xs.font-light.text-gray-600,
.dark .polished-article .text-sm.tabular-nums.text-gray-600 {
  color: #87CEEB;
}

/* 正文排版增强 */
.polished-article article h2,
.polished-article article.markdown-body h2,
.polished-article article.tailwind-typography h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0E4F5C;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(62, 140, 153, 0.18);
}

.dark .polished-article article h2,
.dark .polished-article article.markdown-body h2,
.dark .polished-article article.tailwind-typography h2 {
  color: #e2f6f9;
  border-bottom-color: rgba(62, 140, 153, 0.35);
}

.polished-article article h3,
.polished-article article.markdown-body h3,
.polished-article article.tailwind-typography h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #3E8C99;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.dark .polished-article article h3,
.dark .polished-article article.markdown-body h3,
.dark .polished-article article.tailwind-typography h3 {
  color: #87CEEB;
}

.polished-article article p,
.polished-article article.markdown-body p,
.polished-article article.tailwind-typography p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* 链接：墨青 → 青绿，下划线淡出 */
.polished-article article a,
.polished-article article.markdown-body a,
.polished-article article.tailwind-typography a {
  color: #0E4F5C;
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 79, 92, 0.25);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.polished-article article a:hover,
.polished-article article.markdown-body a:hover,
.polished-article article.tailwind-typography a:hover {
  color: #3E8C99;
  border-bottom-color: rgba(62, 140, 153, 0.60);
}

.dark .polished-article article a,
.dark .polished-article article.markdown-body a,
.dark .polished-article article.tailwind-typography a {
  color: #87CEEB;
  border-bottom-color: rgba(135, 206, 235, 0.25);
}

.dark .polished-article article a:hover,
.dark .polished-article article.markdown-body a:hover,
.dark .polished-article article.tailwind-typography a:hover {
  color: #5dd3d3;
  border-bottom-color: rgba(93, 211, 211, 0.60);
}

/* 代码块 */
.polished-article article pre,
.polished-article article.markdown-body pre,
.polished-article article.tailwind-typography pre {
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(62, 140, 153, 0.18);
}

.dark .polished-article article pre,
.dark .polished-article article.markdown-body pre,
.dark .polished-article article.tailwind-typography pre {
  box-shadow: inset 0 0 0 1px rgba(62, 140, 153, 0.35);
}

/* ---------- 目录 ---------- */
.polished-toc {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 140, 153, 0.13);
}

.dark .polished-toc {
  background: rgba(14, 58, 66, 0.70);
  border-color: rgba(62, 140, 153, 0.22);
}

.polished-toc .toc a {
  color: #3E8C99;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.polished-toc .toc a:hover {
  background: rgba(62, 140, 153, 0.10);
  color: #0E4F5C;
}

.dark .polished-toc .toc a {
  color: #87CEEB;
}

.dark .polished-toc .toc a:hover {
  background: rgba(93, 211, 211, 0.12);
  color: #5dd3d3;
}

/* ---------- 分页按钮 ---------- */
#post-list + div a,
.polished-article + div a {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(62, 140, 153, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dark #post-list + div a,
.dark .polished-article + div a {
  background: rgba(14, 58, 66, 0.70);
  border-color: rgba(62, 140, 153, 0.30);
}

/* ---------- 页脚 ---------- */
footer {
  border-top: 1px solid rgba(62, 140, 153, 0.14);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dark footer {
  border-top-color: rgba(62, 140, 153, 0.25);
  background: rgba(11, 42, 48, 0.55);
}

/* 页脚站点标题：与顶部保持一致的渐变 */
footer a[href="/"] span.self-center {
  font-weight: 800;
  background: linear-gradient(90deg, #0E4F5C, #3E8C99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark footer a[href="/"] span.self-center {
  background: linear-gradient(90deg, #87CEEB, #5dd3d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

footer a:not([href="/"]) {
  transition: color 0.2s ease;
}

footer a:hover {
  color: #0E4F5C;
}

.dark footer a:hover {
  color: #87CEEB;
}

/* ---------- 标签页容器 ---------- */
.polished-tags {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 140, 153, 0.14);
  box-shadow: 0 4px 6px -1px rgba(14, 79, 92, 0.05);
}

.dark .polished-tags {
  background: rgba(14, 58, 66, 0.72);
  border-color: rgba(62, 140, 153, 0.22);
}

/* 标签云里的标签 */
.polished-tags a {
  transition: all 0.2s ease;
}

.polished-tags a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(14, 79, 92, 0.08);
}

/* ---------- 作者页 / 分类页标题 ---------- */
.content-hero-wrapper .content-hero-title {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* ---------- 分页按钮再优化 ---------- */
#post-list + div a,
.polished-article + div a,
.polished-pagination a {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(62, 140, 153, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(14, 79, 92, 0.04);
  transition: all 0.2s ease;
}

#post-list + div a:hover,
.polished-article + div a:hover,
.polished-pagination a:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(62, 140, 153, 0.35);
  box-shadow: 0 4px 12px rgba(14, 79, 92, 0.08);
  transform: translateY(-1px);
}

.dark #post-list + div a,
.dark .polished-article + div a,
.dark .polished-pagination a {
  background: rgba(14, 58, 66, 0.75);
  border-color: rgba(62, 140, 153, 0.28);
}

.dark #post-list + div a:hover,
.dark .polished-article + div a:hover,
.dark .polished-pagination a:hover {
  background: rgba(20, 75, 85, 0.90);
  border-color: rgba(93, 211, 211, 0.40);
}

/* ---------- 空状态 / 提示文字 ---------- */
#post-list + div + div span,
#post-list ~ div span.text-sm.font-light,
.text-sm.font-light.text-gray-600 {
  color: #3E8C99;
}

.dark #post-list + div + div span,
.dark #post-list ~ div span.text-sm.font-light,
.dark .text-sm.font-light.text-gray-600 {
  color: #87CEEB;
}

/* ---------- 按钮 / 操作区 ---------- */
.polished-article button,
.polished-article a[role="button"],
.polished-article .rounded-full.p-2 {
  transition: all 0.2s ease;
}

.polished-article button:hover,
.polished-article a[role="button"]:hover,
.polished-article .rounded-full.p-2:hover {
  transform: translateY(-1px);
}

/* ---------- 回到顶部按钮：暖阳黄点缀 ---------- */
#btn-scroll-to-top {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(62, 140, 153, 0.18);
}

#btn-scroll-to-top:hover {
  background: rgba(255, 216, 77, 0.18);
  border-color: rgba(255, 216, 77, 0.45);
}

#btn-scroll-to-top .i-tabler-chevron-up {
  color: #0E4F5C;
}

.dark #btn-scroll-to-top {
  background: rgba(14, 58, 66, 0.85);
  border-color: rgba(62, 140, 153, 0.30);
}

.dark #btn-scroll-to-top:hover {
  background: rgba(255, 216, 77, 0.15);
  border-color: rgba(255, 216, 77, 0.40);
}

.dark #btn-scroll-to-top .i-tabler-chevron-up {
  color: #87CEEB;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 768px) {
  .polished-card {
    margin-bottom: 0.5rem;
  }

  .polished-filter a {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
  }

  .polished-post-title {
    font-size: 1.5rem;
  }
}