/* ========== 玻璃拟态层（严格按 starlitn 参数 + 压过主题实色） ==========
   starlitn 实测：rgba(255,255,255,0.08)+blur(12px) / 深色 rgba(20,20,30,0.4)
   本站背景图 bg7.jpeg 一直都在，之前卡片被主题实色 --card-bg 挡死。
   本层全部用 !important / 高特异性强制透明，让背景图透出来。
   ====================================== */

:root {
  --glass-blur: 12px;
  --glass-bg-card: rgba(255, 255, 255, 0.10);
  --glass-bg-card-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-btn-bg: rgba(0, 0, 0, 0.35);
}
[data-theme='dark'] {
  --glass-bg-card: rgba(18, 18, 26, 0.42);
  --glass-bg-card-strong: rgba(18, 18, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-btn-bg: rgba(0, 0, 0, 0.45);
}
[data-theme='lilac'] {
  --glass-bg-card: rgba(250, 246, 255, 0.14);
  --glass-bg-card-strong: rgba(250, 246, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-btn-bg: rgba(30, 22, 48, 0.40);
}

/* ---------- 1. 背景图轻微暗化：给玻璃卡片垫底、保证文字可读 ---------- */
#web_bg {
  filter: brightness(.86) saturate(.92);
}
[data-theme='dark'] #web_bg {
  filter: brightness(.55) saturate(.85);
}

/* ---------- 2. 全部卡片强制透明（压过主题 --card-bg 实色） ---------- */
#aside-content .card-widget,
.card-widget,
.recent-post-item,
#recent-posts > .recent-post-item,
.layout > .recent-post-item {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12) !important;
}
#aside-content .card-widget:hover,
.card-widget:hover,
.recent-post-item:hover {
  background: var(--glass-bg-card-strong) !important;
  transform: none !important;
}

/* 卡片内再套实色背景的元素也透明化 */
#aside-content .card-widget .item-headline,
.recent-post-item .post_cover,
.recent-post-item .recent-post-info {
  background: transparent !important;
}

/* 文章列表卡片文字：浅玻璃上深色字 + 白描边保证可读 */
.recent-post-item .article-title,
.recent-post-item .article-meta,
.recent-post-item .article-content {
  color: #2a2a33;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .5);
}
[data-theme='dark'] .recent-post-item .article-title,
[data-theme='dark'] .recent-post-item .article-meta,
[data-theme='dark'] .recent-post-item .article-content {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
[data-theme='lilac'] .recent-post-item .article-title,
[data-theme='lilac'] .recent-post-item .article-meta,
[data-theme='lilac'] .recent-post-item .article-content {
  color: #3a3250;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .45);
}

/* ---------- 3. 导航栏玻璃（= starlitn .liquid-glass-nav） ---------- */
#nav.show,
.nav-fixed #nav,
#page-header.nav-fixed > #nav,
#page-header.not-top-img > #nav {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: var(--glass-bg-card) !important;
  border-bottom: 1px solid var(--glass-border);
}

/* ---------- 4. 右侧悬浮按钮（= starlitn .back-to-top） ---------- */
#rightside > div > button,
#rightside > div > a,
#rightside > a {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-border);
  color: #fff;
  transition: background-color .2s ease;
}
#rightside > div > button:hover,
#rightside > div > a:hover,
#rightside > a:hover {
  background: var(--brand, #5b5bd6) !important;
  transform: none;
}

/* ---------- 5. 语言切换按钮 ---------- */
#lang-switch-btn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-border);
  color: #fff;
}

/* ---------- 6. 弹窗大浮层（= starlitn .settings-panel） ---------- */
#local-search .search-dialog,
.search-dialog {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: var(--glass-bg-card-strong) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---------- 7. 提示框 note ---------- */
.note {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border) !important;
}

/* ---------- 8. 时钟日历卡片 ---------- */
#card-clock-calendar {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border) !important;
}

/* ---------- 9. 工具页卡片 ---------- */
.tool-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tool-card:hover {
  transform: none;
  border-color: var(--brand, #5b5bd6) !important;
}

/* ---------- 10. 相册页玻璃卡片 ---------- */
.photo-item {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---------- 11. 分页按钮 ---------- */
.pagination a,
.pagination .page-number {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---------- 12. 页脚 ---------- */
#footer {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, .25) !important;
}
[data-theme='dark'] #footer {
  background: rgba(0, 0, 0, .4) !important;
}

/* ---------- 13. 移动端 ---------- */
@media (max-width: 768px) {
  #aside-content .card-widget,
  .card-widget,
  .recent-post-item {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
}