/* =========================================
   一、 左下角悬浮社交面板改造
========================================= */

/* 1. 悬浮药丸容器（日间） */
.my-floating-social {
  position: fixed;
  bottom: 40px;
  left: 40px; 
  background: rgba(255, 255, 255, 0.85) !important; 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; 
  display: flex;
  gap: 20px;
  z-index: 999;
  align-items: center;
}

/* 2. 完美适配夜间模式容器（夺回颜色控制权） */
[data-user-color-scheme="dark"] .my-floating-social {
  background: rgba(35, 37, 41, 0.95) !important; /* 纯正的暗灰背景 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}

/* 3. 图标基础样式（强制日间深色） */
.my-floating-social a, .my-floating-social .social-item {
  color: #3c4043 !important; /* 日间深灰色图标 */
  font-size: 22px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

/* 4. 夜间模式的图标颜色（强制浅色，保证清晰可见） */
[data-user-color-scheme="dark"] .my-floating-social a, 
[data-user-color-scheme="dark"] .my-floating-social .social-item {
  color: #e8eaed !important; 
}

/* 5. 统一鼠标悬浮时的点缀色（青绿色） */
.my-floating-social a:hover, .my-floating-social .social-item:hover {
  color: #1abc9c !important; 
}

/* 6. 隐藏的弹出二维码名片 */
.my-floating-social .social-card {
  display: none;
  position: absolute;
  bottom: 45px; /* 向上浮出 */
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  background: var(--board-bg-color, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 15px;
  text-align: center;
  animation: fadeInBottom 0.3s ease; /* 弹出的柔和动画 */
}

/* 7. 鼠标放上去时显示名片 */
.my-floating-social .social-item:hover .social-card {
  display: block;
}

.social-card img {
  width: 100%;
  border-radius: 8px;
}

.social-card .desc {
  font-size: 13px;
  margin-top: 10px;
  color: var(--text-color, #333);
}

@keyframes fadeInBottom {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 8. 竖线分隔符样式 */
.my-floating-social .social-divider {
  width: 1px;
  height: 18px; /* 竖杠的高度 */
  background-color: #ccc; /* 竖杠的颜色（浅灰） */
  margin: 0 5px; 
}

/* 9. 夜间模式适配，让竖杠变暗一点 */
[data-user-color-scheme="dark"] .my-floating-social .social-divider {
  background-color: #666;
}


/* =========================================
   二、 首页文章列表“独立卡片化”究极进化版
========================================= */

/* 1. 日间模式：强化边界，让框框极其明显且高级 */
.index-card {
  background-color: #ffffff !important;
  border-radius: 16px !important; /* 调整为更现代的大圆角 */
  padding: 1.5rem 2rem !important;
  margin-bottom: 2rem !important;
  
  /* 重点1：加深边框颜色，明确卡片的物理边界 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important; 
  /* 重点2：采用双层阴影，一层控制边缘锐利度，一层控制弥散立体感 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0,0,0,0.04) !important; 
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}

/* 日间悬浮：拉大阴影，产生强烈的“按压回弹”浮动感 */
.index-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0, 0, 0, 0.12) !important; /* 悬浮时边框微微加深 */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0,0,0,0.06) !important; 
}

/* 2. 夜间模式：重塑暗黑美学（高光描边 + 透明提亮） */
[data-user-color-scheme="dark"] .index-card {
  /* 重点1：放弃使用固定的灰色，改用 4% 透明度的纯白叠加。这样卡片永远会比底层画板亮一个完美的层级，告别“死黑” */
  background-color: rgba(255, 255, 255, 0.04) !important; 
  /* 重点2：夜间高级感的灵魂所在——添加极细的半透明白边，模拟高级设备的玻璃切割边缘 */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; 
  /* 重点3：夜间模式的阴影必须重且黑，压住底部的发光感 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; 
}

/* 夜间悬浮：点亮高光 */
[data-user-color-scheme="dark"] .index-card:hover {
  background-color: rgba(255, 255, 255, 0.08) !important; /* 悬浮时自身亮度提高 */
  border: 1px solid rgba(255, 255, 255, 0.18) !important; /* 边缘高光变亮，产生互动感 */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important; 
  transform: translateY(-5px) !important;
}

/* 3. 隐藏 Fluid 默认自带的分割横线 */
.index-card + hr, 
.index-card hr {
  display: none !important;
}


/* =========================================
   三、 标签页文字颜色优化
========================================= */

/* 1. 日间模式：统一加深标签颜色为深蓝灰色 */
.tagcloud a {
  color: #34495e !important; 
  font-weight: 500;
  transition: color 0.2s;
}

/* 2. 鼠标悬浮时变成青绿色 */
.tagcloud a:hover {
  color: #1abc9c !important; 
}

/* 3. 夜间模式适配：为了防止日间深色字在夜间看不清，改回浅色 */
[data-user-color-scheme="dark"] .tagcloud a {
  color: #c4c6c9 !important;
}

[data-user-color-scheme="dark"] .tagcloud a:hover {
  color: #1abc9c !important;
}