.content-auto {
  content-visibility: auto;
}
.card-hover {
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* 标签栏：手机上必须换行。
   原先靠 Tailwind 的 overflow-x-auto 横向滚动，5 个标签在 375px 屏上要滑 136px ——
   手机上横向滑屏很难受，改成换行后两行就能装下。 */
@media (max-width: 768px) {
  .tab-bar {
    flex-wrap: wrap;
    overflow: visible;
  }
  .tab-bar .tab-btn { flex: 1 1 auto; text-align: center; }
}

/* 个人信息面板的标签栏（user.html 用 .tab-btn + .tab-active）。
   原先 .tab-btn 完全没有样式，只靠 Tailwind 的 px-4 py-2：375px 屏上 5 个标签
   被 flex 默认 flex-shrink:1 压到各 56px，「个人信息」这类中文标题逐字换行，
   整条标签栏被撜到 114px 高（实测）。父级已有 overflow-x-auto，
   故让标签保持自然宽度并禁止换行，改为横向滚动即可。 */
.tab-btn {
  flex: none;
  white-space: nowrap;
  padding: 10px 16px;
  font-size: 0.9rem;
  color: #6b7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab-btn:hover {
  color: #165DFF;
}
/* 选中态：原文字色 #7dd3fc 在白底上对比度约 1.9:1（远低于 4.5:1），几乎看不清，
   改用全站主色 #165DFF（对比度约 5.9:1）。边框色保持不变。 */
.tab-active {
  color: #165DFF;
  border-bottom: 2px solid #4f8dff;
  font-weight: 600;
}