/* 主题：经典家庭风（参考旧站 123 韩家圈子风格：大圆角玻璃拟态 + 多彩活力 + logo 光圈动画） */
:root {
  --bg: #f8fafc;
  --bg-soft: #eef2f7;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --primary: #4361ee;
  --primary-2: #3a56d4;
  --accent: #8b5cf6;
  --danger: #ef4444;
  --border: #e2e8f0;
  --shadow: 0 8px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .13);
  --header-bg: rgba(255, 255, 255, .82);
  --header-text: #1e293b;
  --footer-bg: #0f172a;
  --footer-text: #94a3b8;
  --radius: 20px;
  --radius-sm: 12px;
}
body { background-image: radial-gradient(ellipse at 50% -20%, rgba(67, 97, 238, .06), transparent 60%), radial-gradient(ellipse at 100% 0%, rgba(139, 92, 246, .05), transparent 50%); background-attachment: fixed; }

/* 导航：毛玻璃 + 底部微光 */
.site-header { background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226, 232, 240, .6); }

/* Logo：圆形 + 呼吸 + 双色光圈动画（参考旧站） */
.logo { position: relative; }
.logo-img, .logo-mark {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-size: 20px; font-weight: 800;
  object-fit: cover; box-shadow: 0 4px 12px rgba(67, 97, 238, .25);
  animation: fdLogoBreath 8s infinite ease-in-out;
  overflow: visible; position: relative; z-index: 1;
}
.logo::before, .logo::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 130%; height: 130%; border-radius: 50%;
  border: 2px solid transparent; z-index: 0; pointer-events: none;
}
.logo::before { border-top: 2px solid #00e5ff; border-right: 2px solid #7b2cbf; animation: fdLogoRotate 2s linear infinite; }
.logo::after { width: 112%; height: 112%; border-bottom: 2px solid #ff2e63; border-left: 2px solid #ffe66d; animation: fdLogoRotateRev 2.5s linear infinite; }
@keyframes fdLogoRotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fdLogoRotateRev { 0% { transform: translate(-50%, -50%) rotate(360deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes fdLogoBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(67, 97, 238, .2); }
  70% { transform: scale(1.03); box-shadow: 0 6px 16px rgba(67, 97, 238, .35); }
  85% { transform: rotate(360deg) scale(1.03); }
}
.logo:hover .logo-img, .logo:hover .logo-mark { animation-play-state: paused; transform: scale(1.08); }
.logo-text { font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; letter-spacing: 1px; }

/* 按钮 / 标签 / 筛选：大圆角 */
.btn, .mode-btn, .cat-chip, .cloud-tag, .tag-chip, .nav-item, .page-btn, .btn-primary { border-radius: 14px; }
.btn-primary { background: linear-gradient(135deg, #4361ee, #8b5cf6); box-shadow: 0 6px 18px rgba(67, 97, 238, .28); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(67, 97, 238, .38); }
.mode-btn.active { box-shadow: 0 8px 20px rgba(67, 97, 238, .18); }

/* 卡片：白卡 + 柔和阴影 + 入场动画 */
.masonry-item, .side-card, .post-card, .comments-card, .member-card, .family-tree, .auth-card, .upload-zone, .gallery-item, .post-videos, .transcoding-box {
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.masonry-item { animation: fdCardIn .55s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes fdCardIn {
  0% { opacity: 0; transform: translateY(24px) scale(.97); }
  60% { transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 导航汉堡（手机）：玻璃圆角 */
.nav-toggle {
  background: rgba(255, 255, 255, .75); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}
.nav-toggle:hover { transform: scale(1.05); }

/* 回到顶部：圆形玻璃 + 主色进度感 */
#backTop {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
  box-shadow: var(--shadow); border: 1px solid var(--border); color: var(--primary);
}
#backTop:hover { background: var(--primary); color: #fff; }

/* 搜索弹层 / 年份下拉等浮层：大圆角玻璃 */
.search-pop, .dy-year-list, .dropdown-menu, .auth-card { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* 族谱卡片 */
.tree-avatar, .member-avatar { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }

/* 视频时光页保持深色沉浸（不覆盖其专用深色背景） */
.video-page { background: #0f172a; }
.video-page .site-header { background: rgba(15, 23, 42, .6); border-bottom-color: rgba(255, 255, 255, .08); }
.video-page .logo-img, .video-page .logo-mark { background: linear-gradient(135deg, #4361ee, #8b5cf6); }

/* ===== 首页卡片：参考旧站流光相册风格（图卡 + 常显渐变 + hover 上浮） ===== */
.masonry-item { overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.masonry-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.masonry-item:hover .masonry-img { transform: scale(1.08); }
.masonry-overlay {
  opacity: 1;
  padding: 44px 14px 14px;
  background: linear-gradient(to top, rgba(2,6,23,.78), rgba(2,6,23,0) 72%);
}
.masonry-title { font-size: 16px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.masonry-meta { font-size: 12px; opacity: .92; gap: 10px; }
.masonry-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* 置顶徽章：呼吸动画（旧站 pinPulse） */
.pin-badge { animation: fdPinPulse 2s ease-in-out infinite; }
@keyframes fdPinPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
  50% { transform: scale(1.1); box-shadow: 0 4px 16px rgba(245,158,11,.5); }
}

/* 卡片载入：错落入场（新追加节点同样触发） */
.masonry-item { animation: fdCardIn .55s cubic-bezier(.25,.8,.25,1) both; }
.masonry-item:nth-child(2n) { animation-delay: 50ms; }
.masonry-item:nth-child(3n) { animation-delay: 100ms; }
.masonry-item:nth-child(4n) { animation-delay: 150ms; }

/* 家族头像呼吸 */
.tree-avatar img, .member-avatar img, .family-avatar img, .tree-card-small .tree-avatar img {
  animation: fdAvatarBreath 4s ease-in-out infinite;
}
@keyframes fdAvatarBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 后台会员头像上传按钮 */
.avatar-upload-form { margin-top: 4px; }
.avatar-upload-btn {
  display: inline-block; font-size: 11px; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  padding: 2px 8px; border-radius: 999px; cursor: pointer; transition: all .2s;
}
.avatar-upload-btn:hover { background: var(--primary); color: #fff; }

/* 个人中心：头像点击上传（遮罩提示） */
.avatar-edit-wrap { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; }
.avatar-edit-wrap .profile-avatar { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); transition: transform .25s; }
.avatar-edit-wrap:hover .profile-avatar { transform: scale(1.04); }
.avatar-edit-mask {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .55); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1.4; opacity: 0; transition: opacity .25s;
  pointer-events: none; backdrop-filter: blur(2px);
}
.avatar-edit-wrap:hover .avatar-edit-mask { opacity: 1; }